[Typescript] 타입 추론

타입스크립트에서는 타입을 명시해줘야 하지만, 스스로 타입을 추론할 수 있다.

 

1. 변수를 선언할 때의 타입 추론

변수를 선언할 때 타입 추론이 일어난다.

// 변수를 선언할 때 타입 추론이 일어난다.
var a = 'abc'; // string
 
function getB(b = 10) {
  var c = 'hi'; // string
  return b + c;
}
 
getB(); // string
console.log(getB()); // 10hi

getB함수에서 b나 c의 타입을 정해주지 않았지만 처음 선언될 때 타입 추론이 일어난다.

number + string = string 이므로 getB()는 string타입이 되고, 10hi를 출력한다.

 

 

2. 인터페이스와 제네릭을 사용한 타입 추론

interface Dropdown<T> {
  value: T;
  title: string;
}
// 제네릭의 값을 TS 내부적으로 추론해서 속성들의 타입들도 보장한다.
var shoppingItem: Dropdown<string> = {
  value: 'abc', // value의 타입이 string이라고 추론한다.
  title: 'hello',
};

제네릭으로 입력된 string을 사용해 value의 타입이 string이라고 TS가 추론할 수 있다.

 

인터페이스 연결해 타입을 추론하도록 할 수 있다.

// 인터페이스 두 개를 연결해 타입을 추론하도록 한다.
interface Dropdown<T> {
  value: T;
  title: string;
}
interface DetailedDropdown<K> extends Dropdown<K> {
  description: string;
  tag: K;
}
 
// DetailedDropdown 인터페이스를 사용해 만들 때 Dropdown의 제네릭에도 동시에 입력받는다.
var detailedItem: DetailedDropdown<string> = {
  title: 'abc',
  description: 'ab',
  value: 'a',
  tag: 'a',
};

DetailedDropDown<K> extends Dropdown<K> 이므로(같은 제네릭을 사용)

DetailedDropdown<string>으로 입력하면 Dropdown<string>으로 입력되는 것과 마찬가지다.

그래서 detailedItem.value는 string으로 정해진다.

 

3. 가장 적절한 타입(Best common type)

TS가 코드를 해석해 가장 잘 맞는 타입을 추론한다.

// Best Common Type
 
var arr1 = [1, 2, 3]; // number[]으로 추론
var arr2 = [1, 2, true]; // (number | boolean)[] 으로 추론

 

TS가 내부적으로 알고리즘에 의해 타입을 잘 추론할 수 있긴 하지만 TS의 기능(타입에 대한 에러 방지, 메소드 안내 등)을 제대로 사용하기 위해서는 타입을 명시해 주는 것이 좋다. 타입을 제대로 알 수 없는 경우 마우스를 올리면 추론한 타입을 알려주므로 도움을 받아 타입을 작성해 주면 된다.

 

강의

https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8/dashboard

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의