[TypeScript] 타입 추론

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다.

let x = 3;

이 코드를 보면, x에 대한 타입을 따로 지정하지 않더라도 x는 number type으로 간주가 된다(숫자 형태를 띠고있으니까). 이러한 과정을 타입 추론이라고 한다.

타입 추론은 다음과 같은 상황에서 발생한다:

1. 변수를 선언하거나 초기화할 때
2. 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때

첫 번째 예시

function getB(b = 10) {
  let c = 'hi';
  return b + c;
}

첫 번째 줄을 보자. b 자리에 typing 대신에 10이라는 값이 들어가 있다. 이는, b라는 값을 넘기지 않으면 기본적으로 10을 가진다는 뜻이다. 그러니까 default 값이 10이라고 생각하면 된다. 그렇기 때문에 c가 없이, return b만 한다고 가정한다면

b의 타입은 number지만, 어디까지나 optional 이라는 것이다. 그리고 그에 따라 반환값은 number가 들어가게 된다.

그렇다면, b + c(반환값)의 type은 무엇일까? b는 숫자 타입이고, c는 문자열 타입이다.

이에 대해 얘기하기 전에 우선 자바스크립트에서의 성질에 대해 알아보자. 자바스크립트에서

10 + '10' // 1010 (문자열)

이렇게 숫자와 문자열을 더하면 문자열로 인식한다. 그래서, b + c의 반환값은 string이다.

 

두 번째 예시

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

let shoppingItem: Dropdown<string> = {
  value: 'abc',
  title: 'hello',
};

제네릭을 사용한 예시이다. Dropdown interface로 타입을 설정한 shoppingItem에서 value와 title 모두 string의 값을 갖고 있다는 것은, 직접 우리가 typing을 해주지 않아도 추론을 통해 알 수 있는 부분이다. (왜냐하면 interface에서 설정을 해줬기 때문)

 

세 번째 예시

interface Dropdown<T> {
  value: T;
  title: string;
}
interface DetailedDropdown<K> extends Dropdown<K> {
  description: string;
  tag: K;
}
let detailedItem: DetailedDropdown<string> {
  title: 'abc',
  description: 'ab',
  value: 'abcd',
  tag: 'a'
}

우선 Dropdown 인터페이스를 제네릭을 사용하여 만들었고, 제네릭을 포함한 상태로 DetailedDropdown 인터페이스에 확장이 되었다. 그래서, 현재 DetailedDropdown 인터페이스에서는 Dropdown 인터페이스의 값까지 전부 사용할 수 있는 상태이다. DetailedDropdown의 제네릭에 타입을 선언해주면, 그 타입은 Dropdown 인터페이스의 타입으로도 사용이 된다.

그래서, detailedItem 변수 내부의 value와 tag는 모두 DetailedDropdown<string>에 따라 문자열 형태로 나타내야 한다는 것이다.

 

만약 여기서 <string>을 <number>로 바꾼다면 어떻게 될까?

- 이 경우 tag와 value가 에러가 생길 것이다. 제네릭에 종속되어있는 값이 이 두 속성(property)인데, 제네릭에서 number로 타입 설정을 해줬으나 내부의 속성 값은 둘 다 모두 string으로 되어있기 때문이다('abcd', 'a') . 따라서 에러가 생긴다.

Best Common Type

let arr = [1, 2, true, 'abc'];

이렇게 여러 타입이 다 들어가 있는 배열 arr이 있다고 하자. 타입스크립트에서 이러한 배열의 타입을 어떻게 추론할까?

타입스크립트에서는 이러한 배열들에 대해 최대한 많이 적용이 되는 형태로 타입 추론을 한다. 이것이 타입스크립트의 Best Common Type 성질이다.