[Naver D2] 고급 타입스크립트 세션 정리

Typescript 홈페이지 소개글

권세규님의 네이버 엔지니어링 데이 세션 infer, never만 보면 두려워지는 당신을 위한 고급 TypeScript를 보았다.

이 세션을 통해 아래 개념들을 더 명확히 익힐 수 있었다.

• 타입의 대소 비교
• 타입의 종류
• 제네릭 타입 검사

또한 아래 과정들을 시각적으로, 단계별로 보여준다.

• 타입스크립트의 타입 검사가 이뤄지는 과정
• 실제 라이브러리 코드에서 타입을 개발하는 과정

1시간 12분으로 짧지 않지만 내용이 밀도 있고, 발표자료가 준비가 잘 되어 있기에,
타입스크립트를 잘 사용하고 싶다면 꼭 한번 보는 것을 추천한다.

infer, never만 보면 두려워지는 당신을 위한 고급 TypeScript

이를 아래에 간단히 정리해보았다. (많은 내용 생략)

 

타입의 대소 비교

타입 A와 B의 대소는 서브타입 관계에 따라 달라진다.

서브타입의 정의

A가 B의 서브타입이다 = 모든 p에 대해, p가 B의 prop이면 p는 A의 prop이다.

타입은 네가지 대소관계가 있다.

• a는 b의 슈퍼타입
• a는 b의 서브타입
• a와 b는 서로 서브타입
• a와 b는 무관계

A가 B의 서브타입일 때, B에 A를 대입할 수 있다.
즉, 넓은 타입에 좁은 타입을 대입할 수 있다.

타입의 종류

원시 타입

boolean, number, string, symbol, null, undefined
서로 무관계

 

리터럴 타입

어떤 타입에 속한 값 하나로 구성하는 타입. 본래 타입의 서브타입으로 간주.
as const를 통해 특정 값을 리터럴 타입으로 선언할 수 있음.

const a: number = 1; // number type
const a: 6 = 1; // '6' 그 자체가 타입 (리터럴 타입)
const a = 6 as const; // a의 타입은 '6' (리터럴 타입)

 

객체 타입

L의 모든 속성 P에 대하여 L[P] > R[P] 이면 L > R

// ex)
L: { x: number; y?: string; z?: boolean; }
R: { x: number;             z: false; a: 'foo' }

위 예시에서, R의 속성들을 살펴보면

• x는 R의 L.x의 서브타입
• y(undefined)는 L.y (string | undefined)의 서브타입
• z는 R.z (boolean | undefined)의 서브타입
  으로, 모두 서브타입 관계를 만족한다.
  즉, R은 L의 서브타입이다.

 

배열/튜플 타입

객체와 동일하나, number를 키로 갖는다.
튜플은 length가 상수 리터럴 타입으로 고정된다.

 

키 타입 (keyof)

객체 타입의 속성의 Union으로 이루어진 타입
가질 수 있는 가장 넓은 타입 - number | string | symbol
명시적 타입이 주어질 경우, 필드명의 union

 

함수 타입

반환형과 인자형의 대입 조건을 모두 만족해야함.

• 반환형에 대해서 공변적 (Covariant)
• 인자형에 대해서 반변적 (Contravariant)

1. 인자형이 같은 경우, A가 B의 서브타입이라면, A를 반환하는 함수는 B를 반환하는 함수의 서브타입이다.
2. 반환형이 같은 경우, A가 B의 서브타입이라면, B를 인자로 하는 함수는 A를 인자로 하는 함수의 서브타입이다.
3. 인자가 적은 함수를 인자가 많은 함수에 대입할 수 있다.

 

특수 타입

never, unknown, any, void

unknown: 모든 T에 대해, never < T < unknown
반면 any: never 제외한 모든 T에 대해 any는 T와 서로 서브타입. never는 any의 서브타입

퀴즈!
존재할 수 있는 함수 타입 중 가장 넓은 타입은?

type Wide = (...args: never[]) => unknown

타입스크립트 공식문서에도 종종 등장하는 타입이라고 한다.

제네릭 타입 검사

1. 명시적 타입 전달

제네릭에 명시적으로 타입을 전달한 경우.
제네릭이 선언된 심볼 다음부터는 전달한 타입 그대로 간주

2. 타입 인자 추론

타입 선언 안 한 경우, 제네릭 타입 인자 생략한 경우, infer 문 사용한 경우
컨트롤 플로우 분석으로 수집한 전제로, 해당 타입 인자를 추론. (Greedy)
최대한 비관적, 보수적 분석

느낀 점

라이브러리 개발의 시선에서는 타입 시스템을 작성하는 것도 큰 이슈라고 생각했다.
서비스 코드에서는 마지막 예시같은 극한의 상황은 아직 못겪어봤다.

하지만 공용 유틸 함수 등의 개발에서는 복잡한 타입의 활용도가 높을 수 있다.
그러므로 서비스 개발자도 다양한 복잡한 타입 케이스에 대응하는 연습을 해보면 좋다.
이를 통해 전체 코드베이스의 안정성을 향상할 수 있을 것이다.