타입스크립트 D9

Type Narrowing

function kgToLbs(weight: number | string): number {
  if (typeof weight === 'number') return weight * 20;
  else parseInt(weight) * 20;
}

위 예시 코드는 type narrowing을 통해 엄격히 함수의 작동법을 통제하고 있는데 type narrowing을 이해하기 위해 위 코드를 다시 짜야한다.

function kgToLbs(weight: number | string): number {
 	weight. // 메서드나 프로퍼티를 쓰기 위해 .을 찍어보면 number 타입과 
    		//string 타입에 함께 쓸 수 있는 것들만 제공된다. 
}

이 경우에는 원하는 메서드나 프로퍼티에 접근할 수 없게 되므로 number던지 string이던지 둘 중 하나로 타입이 지정되게 하여 사용하고자 하는 메서드나 프로퍼티를 사용할 수 있어야할 것이다. 여기서 등장하는 것이 type narrowing이다.

function kgToLbs(weight: number | string): number {
  if (typeof weight === 'number') return weight * 20;
  else return parseInt(weight) * 20;
}

if문을 통해 weight의 타입이 number일때의 상황을 만들어줬다. 이 경우 if문이 통과된 코드 블럭에서는 weight이 number타입임이 명확함으로 타입스크립트는 weight을 number로 보고 number 타입이 지원하는 메서드나 프로퍼티를 사용할 수 있게 해준다. 아래 else 문도 마찬가지다.
리턴 타입이 number로 설정되었으므로 parseInt 함수를 써서 weight을 숫자로 바꿔준다 것이다.

Intersection Types

type Draggable = {
  drag: () => void
}
type Resizable = {
  resize: () => void
}

type UIWidget = Draggable & Resizable;
const textBox: UIWidget = {
  drag: () => {},
  resize: () => {}
}

type 여러개를 동시에 쓰는 방법으로 각각 다른 타입들을 만들어준 후 & 연산자를 통해 둘 이상의 타입이 지정되도록 한다. 이 경우에는 각 타입들이 가지고 있는 속성들을 지정해줘야한다.

만약, 각 타입들에 대응하는 값들을 입력해주지 않으면 어떻게 될까?

const textBox: UIwidget = {
  drag: () => {}
}

{drag: () => void;} is not assignable to type UIWidget 이라는 에러가 뜨며 resize is missing in type {drag: () => void;}라는 에러도 같이 뜬다. Intersection Types를 쓰면 모든 타입의 조건에 맞게 프로퍼티를 대응시켜줘야한다.