타입 추론이란?

• 타입스크립트가 코드를 해석하여 적절한 타입을 정의하는 동작을 의미한다.

• 변수를 초기화하거나 함수의 파라미터에 기본값을 설정하거나 반환값을 설정했을때 지정된 값을 기반으로 적당한 타입을 제시하고 정의해 주는 것을 타입 추론이라고 한다.

const a = 1;    // const a: number
const b = 'hi'; // const b: string

변수의 타입 추론 과정

• 아래 코드처럼 변수가 선언되는 시점에 값이 할당되지 않아 어떤 값이 들어올지 모른다면 모든 타입을 의미하는 any타입이 지정된다.

const a; // const a: any

• 변수를 선언한 후 값을 변경하면 타입이 해당 데이터에 맞는 타입으로 변경되지 않는다.

• 변수가 선언되고 나면 이후에 어떤 값으로 변경될지 타입스크립트 입장에서는 알 수 없기 때문에 타입 추론이 되지 않는다.

let a;

a = 2; // let a: any

함수의 타입 추론: 반환 타입

• 첫 번째 함수와 다르게 반환 타입을 지정해 주지 않아도 상수 c는 number타입으로 추론이 된다.

function add(a: number, b: number): number {
  return a + b;
}

const c = add(1, 99) // const c: number


function add(a: number, b: number) { // function add(a: number, b: number): number
  return a + b;
}

const c = add(1, 99) // const c: number

함수의 타입 추론: 파라미터 타입

• 초기에 함수의 파라미터 타입을 지정해주지 않는다면 첫 번째 함수처럼 any타입이 추론된다.

• 두 번째 함수의 파라미터에 number를 지정해준다면 아무런 로직없이 return해주기 때문에 반환 타입 역시 number로 추론된다.

• 파라미터의 a = 10을 넣어준다면 함수를 호출할 때 인자를 넘겨주지 않는다면 a는 10이 되므로 ? 가 붙고 number로 타입이 추론된다.

function getA(a) { // function getA(a: any): any
  return a;        
}

function getA(a: number) { // function getA(a: number): number
  return a;        
}


function getA(a = 10) { // function getA(a?: number): number
  return a;             // a는 인자가 없다면 a에 10을 할당하라는 의미로 ? 가 붙는다.
}

인터페이스와 제네릭의 추론 방식

• Dropsdown 인터페이스의 title은 string으로 정의하였고, value는 number로 넘겨 받기 때문에 number타입으로 추론된다.

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

let shoppingItem: Dropdown<number> = {
  title  // (property) Dropdown<number>.title: string
  value  // (property) Dropdown<number>.value: number
}

복잡한 구조에서 타입 추론 방식

• 1번으로 number타입이 넘어가게 되고, 2번을 통해 Dropdown인터페이스의 3번으로 number타입이 넘오게 되면서 value는 number타입으로 추론되게 된다.

                   (3)
interface Dropdown<T> {
  title: string;
  value: T;
}
                        (1)                 (2) 
interface DetailDropdown<k> extends Dropdown<k> {
  tag: string;
  description: string;
}

let shoppingDetailItem: DetailDropdown<number> = {
  ...
}

출처: 쉽게 시작하는 타입스크립트