Learning TypeScript : Union 타입과 Literal 타입

Moon Hee·2023년 3월 1일
0

Learning TypeScript

목록 보기
3/3

Union

값에 허용된 타입을 2개 이상의 가능한 타입으로 확장하는 것

Narrowing

값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것

Union과 Narrowing은 다른 주요 프로그래밍 언어에서는 불가능하지만 TS에서는 가능한 '코드 정보에 입각한 추론'을 해내는 강력한 개념이다.

Union 타입

let mathematician = Math.random() > 0.5 ? undefined : '피타고라스';

이 예제에서 mathematician의 타입은 undefined 이거나 string이다.
이러한 타입을 유니언이라고 한다. (한 타입으로 특정지을 수 없지만 여러 타입 중 하나라는 것을 알고 있을 때)

let mathematician: string | undefined;

Union 타입 속성

  • 값이 유니언 타입일 때 TS는 유니언으로 선언한 모든 가능한 타입에 존재하는 멤버 속성에만 접근할 수 있다. 유니언 외의 타입에 접근하려고 하면 타입 검사 오류가 발생한다.

  • 유니언 타입으로 정의된 여러 타입 중 하나의 타입으로 된 값의 속성(e.g toFixed)을 사용하려면 유니언 타입 중 하나라는 것을 알려야 한다. 이것을 Narrowing이라고 한다.


Narrowing

  • 더 구체적인 타입으로 좁히는 것(을 TS에게 알림)
  • 타입을 좁히는 데 사용할 수 있는 논리적 검사를 타입 가드(type guard)라고 한다.

타입가드 1: 값 할당을 통한 내로잉

let 저녁메뉴: number | string;

저녁메뉴 = 'curry';

저녁메뉴.toUpperCase(); // OK: string

저녁메뉴.toFixed();
//      ^^^^^^^^
// Error: Property 'toFixed' does not exist on type 'string'
  • 저녁메뉴 변수가 초기에 number | string으로 선언했지만 'curry' 가 할당된 이후 TS는 저녁메뉴 변수가 string 타입이라는 것을 알게 된다.

타입가드 2: 조건 검사를 통한 내로잉

// 수학자: number | string 타입
let 수학자 = Math.random() > 0.5 ? 'Gauss' : 100;

if (수학자 === 'Gauss') {
    // 수학자: string 타입 
	수학자.toUpperCase();
}

// 수학자: number | string 타입
수학자.toUpperCase();
//    ^^^^^^^^^^^^^
// Error: Property 'toUpperCase' does not exist on type 'string | number'.
// Property 'toUpperCase' does not exist on type 'number'.
  • 일반적으로 변수가 알려진 값과 같은지 확인하는 if문을 통해 변수의 값을 좁히는 방법을 사용한다.

타입가드 3: typeof 검사를 통한 내로잉

let 수학자 = Math.random() > 0.5 ? 'Gauss' : 100;

if (typeof 수학자 === 'string') {
	수학자.toUpperCase();
}
  • typeof 연산자를 사용하면 직접 값을 확인하지 않고 내로잉할 수 있다.

리터럴 타입: 구체적인 버전의 원시타입

const 수학자 = '피타고라스'; // const 선언과 직접 리터럴 값 할당
  • 수학자의 타입은 단지 string이 아닌 '피타고라스'라는 특별한 값이다.
  • 리터럴 타입 = 원시 타입 값 중 어떤 것이 아닌 특정 원싯값으로 알려진 타입

리터럴 할당 가능성

  • 리터럴 타입(e.g '멍멍이')은 그 값이 해당하는 원시 타입(e.g string)에 할당할 수 있다.
let 강아지이름: '멍멍이';

강아지이름 = '멍멍이';
강아지이름 = '왈왈이';
// Error: Type '"왈왈이"' is not assignable to type '"멍멍이"'.
let 강아지이름: '멍멍이';
let 문자타입 = '';
문자타입 = 강아지이름;
profile
프론트엔드 개발하는 사람

0개의 댓글