🐻 [TypeScript] 기본 타입

🌊 기본 타입

타입스크립트 첫 시작이다 뿌셔뿌셔

 

• Boolean
• Number
• String
• Object
• Array → 자바스크립트에선 Object인데 타입스크립트에선 Array가 따로 있다.
• Tuple
• Enum
• Any
• Void
• Null
• Undefined
• Never

 

:을 통해 자바스크립트 코드에 타입을 표기(Type Annotation)할 수 있다. 

 

 

String

let name: string = 'Ogu';

 

Number

16진수, 10진수 외에도 ES6에서 도입된 2진수와 8진수를 지원한다.

let age: number = 59;

 

Boolean

let isLoading: boolean = false;

 

Undefined

 let name: undefined; // 이렇게 쓰는 경우는 거의 없으며
 let name : string | undefined; // 이렇게 사용한다. 
 name = undefined;
 name = 'ogu';
 
 function age(): number | undefined{
 	// 숫자가 있으면 number, 없으면 undefined 반환할 수 있음
 }

 

Array

let arr: number[] = [1, 2, 3];
let newArr : Array<number> = [5, 9, 59] // 제네릭 배열 타입

 

제네릭 (Generic)
제네릭은 Type Script에서 코드를 일반화하는 데 사용되는 기능. 제네릭을 사용하면 특정한 타입에 의존하지 않고, 다양한 타입에서 작동하는 컴포넌트를 생성할 수 있다. <> 안에 타입을 명시한다. 

 

Tuple

배열의 길이가 고정되고 각 요소의 타입이 지정되어있는 배열의 형식.

정의하지 않은 타입, 인덱스로 접근할 경우 오류가 발생한다. 

let arr: [string, number] = ['ogu', 59];

 

Enum

C, Java와 같은 다른 언어에서 흔하게 사용된다. 특정 값(상수)들의 집합을 의미한다.

* 코드 리뷰 때 Enum으로 상수값을 관리하자는 말을 본 것 같다 'ㅇ'

 

enum cake { tiramisu, cream cake, chock cake }
let desser: cake = cake.tiramisu;

인덱스로 접근하기

enum cake { tiramisu, cream cake, chock cake }
let desser: cake = cake[1];

인덱스를 사용자 편의로 변경할 수 있다.

enum cake { tiramisu = 3, cream cake, choco cake }
let dessert: cake = cake[3]; // tiramisu
let dessert: cake = cake[5]; // choco cake

 

enum은 배열이랑 비슷한 것 같은데 어떤 점이 다를까?
배열은 순서가 있는 목록을 의미하고 각 값은 해당 위치의 인덱스를 통해 접근할 수 있다. 반면 enum은 각 값에 명시적인 이름이 부여되며 이를 통해 의미와 맥락을 더욱 명확하게 전달할 수 있다. 또 enum 끼리는 서로 같은 타입을 가지고 있기 때문에 코드의 안정성을 높여준다. 다만 타입스크립트에서 enum을 사용하는 것을 선호하지 않는 경우도 있다 → enum으로 타입이 지정된 변수에 다시 재할당을 할 수 있다는 문제가 있다. 

 

Any

모든 타입을 허용하는 타입

let ogu: any = 'ogu';
ogu: any = 59;
ogu: any = ['ogu', 59];

 

Void

변수에 undefined와 null만 할당되기 때문에 변수에선 거의 사용하지 않는다.

반환값이 없는 함수에 사용하는 타입

let emptyValue: void = null;
function showAlert(): void{
 alert('접근할 수 없습니다.')
}

 

Never

함수의 끝에 절대 도달하지 않는다는 의미를 가지고 있다.

항상 오류를 던지거나 절대 다른 값을 반환하지 않을 때 사용한다. 

변수에선 거의 사용하지 않는다.  

function neverEnd(): never {
  while (true) {

  }
}

function error(message: string): never{
 throww new Error(message);
}

 

 

캡틴판교님의 타입스크립트 핸드북을 참고하였습니다.

 

기본 타입 | 타입스크립트 핸드북