Typescript 공부하기 6일차 (2022.09.29)

1. Union Type & Intersection Type

1) 특징

   - 기존 타입, 인터페이스의 변경은 이미 그 타입을 사용하고 있는 코드에 똑같은 변경을 가해줘야 함

   - 만약 해당 타입을 쓰는 모든 코드에 변경을 가하지 않고 특정 코드만 자유롭게 타입을 확장하고 싶을 때 사용

 

2) Union Type

   - Union -> or : A | B

   - '|' 사용

   - Type A, Type B가 있을 때 A와 B를 유니온하면 A타입 또는 B타입 둘 중 하나

   - 여러 타입 중 하나가 올 것이라고 가정할 때 사용

   - 단, 인터페이스에 유니온 타입을 사용하는 경우 유니온 타입을 확장하지 못함

   - 이럴 때는 type과 &를 사용해야함

let one: string | number;
one = '1';
one = 1;

// Error: interface는 object만 확장할 수 있음.
type A = string | number;   // 원시 타입, object 타입 아님
interface StrOrNum extends A {
	a: string;
}

// OK
type StrOrNum = {
	a: string;
} & (string | number);

type Human = {
 	think: () => void;
};
type Dog = {
	bark: () => void;
};
declare function getEliceType(): Human | Dog;

const elice = getEliceType();
elice.think();
elice.bark();
// elice는 'Human 또는 Dog'라는 유니온 타입을 만들어주어도 think와 bark 중 어느 것도 사용할 수 없다.
// 둘 중 하나라고 확신할 수 없기에 컴파일 단계에서 에러가 발생한다.
// 해결 방법은 타입 가드!

 

3) Intersection Type

   - Intersection -> and : A & B

   - 교차 타입으로 Type A, Type B가 있을 때 A와 B를 인터섹션하면 A 타입이면서 B타입이라는 의미이다.

   - 기존 타입을 대체하지 않으면서 기존 타입에 새로운 필드를 추가하여 확장 하고자 할 때 사용

   - 주의 사항

      ㄴ 타입이 같을 때: OK

      ㄴ 타입이 다를 때: Error

      ㄴ 타입이 포함 관계일 때: Ok | Error 

 

 

 

2. Type Guard

1) 특징

   - 데이터의 타입을 알 수 없거나, 될 수 있는 타입이 여러 개라고 가정할 때, 조건문을 통해 데이터의 타입을 좁혀나가는 것

   - 데이터의 타입에 따라 대응하여 에러를 최소화 할 수 있음

   - 타입을 통해 Guard하는 코드, 방어적인 코드를 짤 수 있음  

 

2) 사용법

   - 타입을 추론할 수 있도록 단서를 주는 개념

   - 구별된 유니온

      ㄴ 타입을 구별할 수 있는 단서가 있는 유니온 타입

      ㄴ 구별된 유니온, 태그된 유니온, 서로소 유니온

   - 구별된 유니온으로 타입 가드 방법

      a. 각 타입에 타입을 구별할 단서(태그)를 만든다.

      b. 조건문을 통해 각 타입의 단서로 어떤 타입인지 추론한다. 

      c. 해당 타입의 프로퍼티를 사용한다. 

   

 

3) 실무에서 자주 쓰는 구별된 유니온과 타입 가드

   - 서버에서 오는 응답 또는 함수의 결과가 여러 갈래로 나윌 때 구별된 유니온 사용 가능

   - 타입의 단서를 토대로 타입 가드를 하고, 응답의 결과에 따라 다른 작업을 실행시켜준다.

 

4) 다양한 연산자를 통한 타입 가드

   - instanceof

      ㄴ TS에서는 클래스도 타입. 객체가 어떤 클래스의 객체인지 구별할 때 사용하는 연산자

      ㄴ '인스턴스 instanceof  클래스'와 같이 사용

 

5) typeof

   - 데이터의 타입을 반환하는 연산자

   - typeof 데이터 === 'string'과 같이 사용

   - typeof 데이터 === 'undefined'처럼 undefined 체크도 가능

   - '데이터 == null'과 같이 쓰면 null, undefined 둘 다 체크함

   - 올해 고쳐야 할 타입스크립트 10가지 나쁜 습관에 의하면 null과 undefined는 따로 체크해 주는 것이 더 명확함 

 

6) in

   - 문자열 A in 오브젝트: 오브젝트의 key 중에 문자열 A가 존재하는가?

 

7) literal type guard

   - 리터럴 타입: 특정 타입의 하위 타입. 구체적인 타입

   - 리터럴 타입은 동등(==), 일치(===) 연산자 또는 switch로 타입 가드 가능

   - 하나의 value 값에 따라 조건문을 작성하는 경우, 대부분의 switch의 연산 결과가 if-else보다 더 빠르다. (조건문이 많을 수록)

 

8) Type Guard에 유용한 오픈 소스

   - 사용자 정의 함수를 사용해 타입 가드 가능

   - 오픈 소스 중 sindresorhus/is를 사용하여 가독성있게 타입 체크 가능

   - yarn add @sindresorhus/is 또는 npm install @sindresorhus/is