타입 추론

기본

<aside> 💡 타입추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미한다.

</aside>

아래처럼 x 에 대한 타입을 따로 지정하지 않더라도 변수 x에 숫자 3을 할당했으므로 number 타입으로 간주한다. 이처럼 변수를 선언하거나 초기화할 때 타입이 추론된다. 변수, 속성, 함수 인자의 기본 값, 함수 반환 값 등을 설정할 때도 타입 추론이 일어난다.

let x = 3 // 변수를 선언하고 할당함으로서 x는 number 타입이라는 추론이 일어났다.

아래 코드에서 DetailedDropdown 인터페이스는 extends 키워드를 이용했으므로 Dropdown 인터페이스의 속성도 가진다. DetailedDropdown<number>의 <number> 타입은 DetailedDropdown에 있는 <T> 로 넘어간 후, 다시 Dropdown<T> 인터페이스의 <T>로 넘겨져 최종적으로 Dropdown에 있는 value: T는 number 타입을 갖는다. 이런 과정을 통해 타입 추론이 이뤄지기 때문에 value에 number 타입이 아닌 다른 타입을 할당하면 에러가 발생한다.

interface Dropdown<T> {
  value: T; // 어떤 타입이든 올 수 있음
  title: string; // 문자열 타입으로 고정
}

interface DetailedDropdown<T> extends Dropdown<T> {
  description: string;
  tag: T;
  // extends 키워드를 사용했으므로 Dropdown 인터페이스의 value, title도 가진다고 볼 수 있다.
}

const detailedItem: DetailedDropdown<number> = {
  title: 'a',
  description: 'a',
  value: 'a', // Error
  tag: 'a', // Error
};

타입 추론을 통해 value의 타입이 number가 된걸 볼 수 있다.

Best Common Type (가장 적절한 타입)

타입은 보통 몇 개의(若干) 표현식 코드를 바탕으로 타입을 추론한다. 이 표현식을 이용하여 가장 근접한 타입을 추론하는데, 이 근접한 타입을 Best Common Type이라고 부른다.

아래 arr 배열 요소의 타입을 추론하기 위해선 배열에 있는 각 요소를 살펴봐야 한다. 아래 코드의 배열에서 각 요소의 타입은 number와 null로 구분된다. 이때 Best Common Type 알고리즘으로 다른 타입들과 가장 잘 호환하는 타입을 선정하는 것.

let arr = [0, 1, null];

문맥상의 타이핑

타입스크립트에서 타입을 추론하는 또 다른 방식은 문맥으로 타입을 결정하는 것이다. 이 문맥상의 타이핑(타입 결정)은 코드의 위치(문맥)를 기준으로 일어난다.

예제 1

아래 코드에서 window.onmousedown에 할당되는 함수의 타입을 추론하기 위해 window.onmousedown타입을 검사한다. 타입 검사가 끝나면 함수 타입이 마우스 이벤트와 관련있다고 추론하기 때문에 mouseEvent 인자에 button 속성은 있지만 kangaroo 속성은 없다고 결론 짓는다.

window.onmousedown = function(mouseEvent) {
	console.log(mouseEvent.button); // OK
	console.log(mouseEvent.kangaroo); // Error
};