[TypeScript] 기본 타입

💡 들어가기에 앞서, 콜론을 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다.

---

1. Boolean

변수의 타입이 참, 거짓 형태의 불리언 값인 경우에는 아래와 같이 선언한다.

let isLoggedIn: boolean = true;

2. Number

변수의 타입이 숫자인 경우에는 아래와 같이 선언한다.

let num: number = 7;

3. String

변수의 타입이 문자열인 경우 아래와 같이 선언한다.

let str: string = 'hello';

4. Array

변수의 타입이 배열인 경우 아래와 같이 선언한다.

let arr: number[] = [1,2,3];

또는 아래와 같이 제네릭을 사용할 수 있다. (제네릭은 다음 포스팅에서 알아보자!)

let arr: Array<number> = [1,2,3];

5. Tuple

튜플(Tuple)은 배열과 마찬가지로 데이터를 순차적으로 저장할 수 있는 자료형 중 하나이며, 타입스크립트에서는 배열에 두 개 이상의 타입을 사용하고 싶을 때 주로 사용한다.

let starArr: [number, string] = [5, '5점'];

이때 starArr 배열에 두 가지 타입의 값이 모두 있어야 한다. 만약 정의하지 않은 타입, 인덱스로 접근하면 오류가 발생한다.

starArr[0].concat('!'); // Error, 'number' does not have 'concat'
starArr[5] = '10점'; // Error, Property '5' does not exist on type '[number, string]'.

💡 튜플로 이루어진 배열을 만들고 싶으면 아래와 같이 사용할 수 있다.

// tuple 응용
let batchInfo: [number, string][];
batchInfo = [[1, '1기'], [2, '2기'], [3, '3기']];

6. Enum

이넘(Enum)은 C, Java와 같은 다른 언어에서 자주 쓰이는 타입이며, 특정 값(상수)들의 집합을 의미한다.

다시 말해, 이름이 있는 정해진 값의 세트라고 생각하면 된다. 비슷한 상수 값이 있을 때, 비슷한 상수로 된 세트 값이 필요할 때 사용한다.

// Category라는 이름의 enum 타입을 정의한다
// Category의 enum 값에 Past, Pizza, Dessert 가 있다.
enum Category {
	Pasta,
	Pizza,
	Dessert
}

// menuCategory 변수는 Category 타입으로, 해당 enum 값 중 하나를 가질 수 있다.
let menuCategory: Category = Category.Pasta;

이넘은 인덱스 번호로도 접근할 수 있다.

enum Category {
	Pasta,
	Pizza,
	Dessert
}

let menuCategory: Category = Category[0];

이넘의 인덱스를 변경하여 사용할 수도 있다. 기본적으로 할당할 때 인덱스 넘버는 0으로 저장이 되는데, 특정 값을 설정해주지 않는 경우 0부터 값이 주어지기 때문이다.

enum Category {
	Pasta = 1,
	Pizza,
	Dessert
}

let menuCategory: Category = Category[1]; // Pasta
let menuCategory: Category = Category[3]; // Dessert

7. Any

애니(Any)는 말 그대로 모든 타입을 허용한다는 의미의 타입으로, 어떤 타입도 지정할 수 있다. 자바크립트로 컴파일된 코드를 보면 아무 타입도 지정하지 않은 원래의 자바스크립트 코드와 똑같다.

즉, any 타입을 사용한다는 건 타입스크립트를 쓸 필요가 없다는 것이다. 그렇기 때문에 웬만하면 사용을 지양하여야 한다.

let str: any = 'hello';
let num: any = 7;
let arr: any = ['bohyunkang', 50, true];

8. Void

보이드(Void)는 애니와 반대로 어떤 타입도 없다는 의미의 타입이다. 보통 함수에서 반환값이 없는 경우에 사용한다.

즉, 변수에는 undefined와 null만을 할당하고, 함수에는 반환 값을 설정할 수 없다.

let unuseful: void = undefined;

function clickButton(): void {
  alert('clicked!!!');
}

9. Never

네버(Never)는 함수의 끝에 도달하지 않는다는 의미의 타입이다.

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}

10. Union

유니온은 여러 타입이 올 수 있을 때 사용한다. 아래 코드를 살펴 보자.

function formatDate(date: string | number | Date): string {
	// 로직 생략

	return `${year}년 ${month}월 ${day}일`
}

formatDate(20201028);
formatDate(new Date());
formatDate('20201028');

formatDate 함수의 매개변수로 문자열, 숫자, Date 객체 타입을 모두 받고자 한다면, 파이프(|)를 사용해서 정의한다.

💡 Tuple과 Union의 차이

배열에서 여러 타입의 값을 사용하고 싶을 때, 튜플을 쓸 때와 유니온을 쓸 때의 차이점은 아래와 같다.

// union
let starNumberArr: (number | string)[] = [1, 2];
starNumberArr.push("3점");

// tuple
let starArr: [number, string] = [1, "1점"];

유니온은 사용하고자 하는 타입 중에 하나만 있어도 가능한 반면, 튜플을 사용하면 배열의 요소에 정의한 타입이 모두 존재해야 한다.

11. Type Alias (타입 별칭)

type이라는 키워드를 사용하여 타입에 이름을 붙여 사용할 수도 있다. 타입을 재사용하거나, 객체를 위한 타입을 정의할 때 많이 사용된다.

type ID = number | string;

function checkInfo(info: { id: ID; pw: string }) {

}

let id: ID = "1010";
checkInfo({ id, pw: "password" });

매개변수에 직접적으로 객체를 넣어줘도 있고, 아래 코드와 같이 Info라는 type을 만들어 재사용할 수 있게 구현할 수도 있다. 가독성 측면에서도 아래 코드가 좀 더 나은 코드이다.

type ID = number | string;
type Info = {
	id: ID;
	pw: string;
};

function checkInfo(info: Info) {

}

let id: ID = "1010";
checkInfo({ id, pw: "password" });

---

참고

🔗 [타입스크립트 핸드북] 기본 타입