[TS-Study] 3. 기본 타입 소개 및 변수에 타입 선언하기

Types from TS

타입스크립트에 내장된 기본 타입은 12가지가 있다.

변수에 타입을 선언하고 나면, 해당 타입의 값만 할당할 수 있다. 선언된 타입 외에 다른 타입의 값을 할당하면 에러가 발생한다.

변수에 타입을 선언할 때는 변수명: 타입명 과 같은 형태로 작성한다. 이 글에서는 변수 말고도 함수에서의 타입 활용도 일부 다루지만, 함수 파트는 다음 글에서 따로 정리하려고 한다.

1. string

const name: string = "hyunjun";

2. number

const age: number = 17;

3. boolean

const isCool: boolean = true;

4. array

배열이라는 타입을 선언하는 방법은 두가지가 있다.

1) 제네릭(Generic) 활용

const fruits: Array<string> = ["apple", "banana", "strawberry"];

제네릭은 이후 다뤄질 내용이지만, 간단하게 설명하자면 타입을 추론할 수 있게 해주는 요소이다. fruits라는 변수의 타입은 Array이고, 이 안의 원소가 모두 string 타입이라는 의미이다.

Array가 대문자로 시작함에 주의하자.

2) 배열 리터럴 활용

const singleDigits: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

원소의 타입을 먼저 적고, 배열 리터럴을 붙여준다.

5. tuple

튜플은 배열과 외관상으로는 같으나, 길이가 고정되어 있고 선언할 때 인덱스마다 타입을 모두 명시한다는 차이점이 있다.

const luckycharms: [string, number] = ["Good Luck", 777];

6. object

const hyunjun: object = { age: 17, gender: "male" };

이렇게만 선언해도 hyunjun이라는 변수는 object라는 타입을 갖는다고 문제 없이 선언할 수 있지만, 보다 정확하게 처리하기 위해 객체 내의 프로퍼티까지 타입을 선언해줄 수도 있다.

const hyunjun: { age: number, gender: string } = { age: 17, gender: "male" };

이렇게 객체 리터럴 안에 프로퍼티 이름과 타입을 선언해주면 된다.

7. enum

Enum은 C나 Java 등에서 볼 수 있는 자료형으로, "열거형 변수" 라고 보면 된다. 타입스크립트에서는 숫자형 이넘과 문자형 이넘 2가지 종류를 지원한다. 일반적으로 변수를 선언할 때 앞에 붙여주는 const나 let 대신 enum이라는 표현을 사용한다.

1) 숫자형 이넘

열거된 변수의 값으로 숫자가 할당된 이넘이다.

enum Language {
  Korean = 1,
  English,
  Japanese,
  Chinese
}

예시를 보면, Korean에만 1이라는 값을 할당했다. 이처럼 숫자형 이넘을 선언할 때 첫번째 변수에 초기값을 할당해주면 그 뒤의 변수들은 초기값부터 차례대로 1씩 더해진 값을 가진다.

// 즉, Korean은 1, English는 2, Japanese는 3, Chinese는 4의 값을 가진다.

초기값을 정해주지 않으면, 0부터 차례대로 1씩 더해진 값을 가진다.

enum Language {
  Korean, // 0
  English, // 1
  Japanese, // 2
  Chinese // 3
}

2) 문자형 이넘

열거된 변수의 값으로 문자열이 할당된 이넘이다. 문자형 이넘을 선언할 때에는 변수들에 전부 특정 문자열 값(혹은 다른 이넘 값)을 할당해주어야 한다. 숫자형 이넘과 달리 값에 auto-increment가 적용되지 않는다.

enum Language {
  Korean = "KR",
  English = "EN",
  Japanese = "JP",
  Chinese = "CH"
}

3) 복합 이넘 (권장되지 않음)

아래 이넘처럼 열거된 변수에 숫자와 문자열 타입을 혼합하여 사용할 수는 있으나 권장되지는 않는다.

enum Language {
  Korean = "KR",
  English = 1
}

extra)

enum 사용의 문제점과 개선 방안 : TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

8. any

any는 말그대로 모든 타입을 허용한다는 의미를 갖고 있다.

기존 자바스크립트로 이루어진 코드에 타입스크립트를 점진적으로 적용해나갈 때 활용하기는 좋으나, 남발해서는 안된다. (any를 남발하면 TS를 사용하는 의미가 없다)

const js: any = "javascript";

9. void

변수에 void 타입을 지정하는 경우, 값에 undefined나 null만 할당할 수 있다.

const future: void = undefined;

함수에서 사용할 경우, 반환값이 없다는 의미로 사용할 수 있다.

function noReturn(payload: string): void {
  console.log(payload);
  //return 값이 없다
}

10. never

함수의 끝에 절대로 도달하지 않는다는 의미로 사용한다.

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

11. undefined

자바스크립트에서의 undefined와 동일하다. 아직 값이 할당되지 않았다는 의미이다.

const lotteryResult: undefined = undefined;

12. null

자바스크립트에서의 null과 동일하다. 빈 값(空)을 할당한다는 의미이다.

const vacancy: null = null;

다음 글에서는 함수에서 타입을 활용하는 방식에 대해 다뤄볼 예정이다.

👨‍💻 공부하면서 작성하는 글이다보니 오류가 있을 수 있습니다. 다방면의 피드백 환영합니다!