타입 확장

타입 확장은 기존 타입을 사용해서 새로운 타입을 정의하는 것을 말한다. 기본적으로 타입스크립트에서는 interface, type 키워드를 사용해서 타입을 정의하고 extends, 교차 타입, 유니온 타입을 사용하여 타입을 확장한다.

타입 확장의 가장 큰 장점은 코드 중복을 줄일 수 있다. 타입스크립트 코드를 작성하다 보면 필연적으로 중복되는 타입 선언이 생기기 마련이다. 이때 중복되는 타입을 반복적으로 선언하는 것보다 기존에 작성한 타입을 바탕으로 타입 확장을 함으로써 불필요한 코드 중복을 줄일 수 있다.

예시

type Agency = 'SKT' | 'KT' | 'LG U+';

interface Phone {
  model: string;
  year: number;
  size: string;
}

interface DetailInformation extends Phone {
  // model: string;
  // year: number;
  // size: string;
  phoneNumber: number;
  onwer: string;
  ageny: Agency;
}

해당 예시를 들어봤는데 핸드폰 기종을 기준으로 타입을 확장하여 상세 정보 요소 타입을 정의한 것을 볼 수 있다. 결국엔 상세 정보 요소는 핸드폰 요소가 가지는 모든 타입이 필요한 것이다.

주석 처리된 부분이 코드 중복 처리됨

타입 좁히기 - 타입 가드

타입스크립트에서는 타입 좁히기는 변수 또는 표현식의 타입 범위를 더 작은 범위로 좁혀나가는 과정을 말한다. 타입 좁히기를 통해 더 정확하고 명시적인 타입 추론을 할 수 있게 되고 복잡한 타입을 작은 범위로 축소하여 타입 안정성을 높일 수 있다.

예를 들어 어떤 함수가 A | B 타입의 매개변수를 받는다고 가정해보면 인자 타입이 A 또는 B일 때를 구분해서 로직을 처리하고 싶다면 어떻게 해야 할까

보통 if문을 사용해서 처리하면 될 것 같지만 검파일 시 타입 정보는 모두 제거되어 런타임에 존재하지 않기 때문에 타입을 사용하여 조건을 만들 수는 없다. 즉, 컴파일을 해도 타입 정보가 사라지지 않는 문법을 사용해야 한다.

타입 가드는 크게 자바스크립트 연산자를 사용한 타입 가드와 사용자 정의 타입 가드로 구분짓는다.

자바스크립트 연산자를 활용한 타입 가드는 typeof, instanceof, in 과 같은 연산자를 활용해서 제어문으로 특정 타입 값을 가질 수밖에 없는 상황을 유도하여 자연스럽게 타이블 좁히는 방식이다. 이를 사용하는 이유는 런타임에 유효한 타입 가드를 만들기 위해서다. 이 말인 즉슨 런타임 시 자바스크립트 소스로 런되다 보니까 자바스크립트에서도 사용할 수 있는 문법이어야 한다는 의미이다.

원시 타입 추론

typeof 연산자를 활용하면 원시 타입에 대해 추론할 수 있다.

typeof A === B 를 조건으로 분기 처리하면 해당 분기 내에서는 A의 타입이 B로 추론된다. 다만 typeof는 자바스크립트 타입 시스템만 대응할 수 있다. 그래서 typeof 는 주로 원시 타입을 좁히는 용도로만 사용해야겠다.

원시 타입: string, number, boolean, undefined, object, function, bigint, symbol

인스턴스화된 객체 타입 판별

instanceof 연산자는 인스턴스화된 객체 타입을 판별하는 타입 가드로 사용할 수 있다.

A instanceof B 형태로 사용하며 A에는 타입을 검사할 대상 변수, B에는 특정 객체의 생성자가 들어간다.

A의 프로토타입 체인에 생성자 B가 존재하는 지를 검사해서 boolean 타입으로 반환된다.

객체의 속성 여부 구분

in 연산자는 객체에 속성이 있는지 확인한 다음에 boolean 타입으로 반환한다.

A in B 형태로 사용하는데 이름 그대로 A라는 속성이 B객체의 존재하는지를 검사한다.