11. 타입 추론(Type Inference)

타입스크립트가 어떻게 타입을 추론하는지에 대해 알아보는 과정입니다.
타입스크립트 Language Server에 의해 추론이 되어집니다.

1. 타입 추론의 기본

let x = 3;

위와 같이 x에 대한 타입을 따로 지정하지 않더라도 x는 number로 간주됩니다.
이렇게 변수를 선언해주거나 초기화 할때에 타입이 추론되어지는 것입니다.
이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설저할 때에 타입 추론이 일어나게 됩니다.
예시

var a; //any로 타입을 정의하고 있습니다. (기본)
var a = 10; // a는 number로 타입이 정의되어 집니다.
// 이런행위를 타입추론이라는 방식입니다.

// b는 any이며 any를 리턴하는 타입으로 결정합니다.
function getB(b) {
  return b;
}

디폴트 파라미터 사용

function getB(b = 10) {
  var c = 'hi'; // c의 타입은 string 입니다.
  return b+c; //문자열과 숫자를 더했기 때문에 기본적으로 string을 리턴해주는 타입을 설정하게 됩니다.
}

2. 타입 추론의 인터페이스와 제네릭

interface Dropdown<T> {
  value: T;
  title: string;
}

var shoppingItem: Dropdown<string> = {
  //value만 입력해도 추론하여 string이라는 타입이라고 알려준다 : 타입 추론
  value: 'abc',
  title: 'hello',
}

3. 복잡한 타입 추론 방식

interface Dropdown<T> {
  value: T;
  title: string;
}

interface DetailedDropdown<K> extends Dropdown<K>{
  description: string;
  tag: K;
}

// type 추론 발생합니다. (4개의 속성아 빠져있다고...)
var detailedItem: DetailedDropdown<string> = {
  title: 'abc',
  description: 'ab',
  //value만 입력해도 타입이 추론되어집니다. (string)
  value: 'a',
  tag: 'a'
}

var detailedItem: DetailedDropdown<number> = {
  title: 'abc',
  description: 'ab',
  value: 'a', //오류발생
  tag: 'a' //오류발생
}

4. Best Common Type 추론 방식

타입스크립트가 해당 코드를 어떤 타입인지 매겨나가는 알고리즘 ( 최적화 )
유니온을 이용해 근접한 타입을 추론하게 됩니다.

var arr = [1,2,3]; // number[] 로 추론

var arr = [1,2,true] // (number | boolean)[] 으로 추론

var arr = [1,2,true, 'a'] // (number | boolean | string)[] 으로 추론

5. 문맥상의 타이핑

타입스크립트가 타입을 추론하는 또 다른 방식은 바로 문맥상으로 타입을 결정하는 것입니다.
예제 1

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

window.onmousedown에 할당되는 함수의 타입을 추론하기 위해서는 window.onmousedown의 타입부터 검사하게 됩니다.
타입 검사가 끝나게 되면 함수의 타입이 마우스 이벤트와 연관되어 있다고 추론하게 되고 mouseEvent인자에 button 속성은 있지만 kangaroo는 없다고 판단하게 됩니다.
예제 2

// window.onscroll로 인하여 uiEvent 이벤트로 간주되고 그에 해당되는 속성만 사용이 가능합니다.
window.onscroll = function(uiEvent) {
  console.log(uiEvent.button); //<- Error!
}

// 타입을 추정하기 어렵기 때문에 애러가 발생하지 않는다.
// --noImplicitAny 옵션을 사용하면 에러납니다
const handler = function(uiEvent) {
  console.log(uiEvent.button); //<- OK
}

결론
- 타입 체킹에 있어서 타입스크립트의 지향점은 타입 체크는 값의 형태에 기반하여 이루어져야 한다는 점입니다. 이걸 Duck Typing 또는 Structural Subtyping 이라고 합니다.
- Duck Typing : 객체의 변수 및 메서드의 집합이 객체의 타입을 결정하는 것을 의미. 동적 타이핑의 한 종류
- Structural Subtyping : 객체의 실제 구조나 정의에 따라 타입을 결정하는 것을 의미