📃 타입스크립트 입문 07 : 타입 추론에 대하여 알아보기

🎈 타입추론 특징

let x = 3;

위와 같이 x 변수가 따로 타입을 지정하지 않더라도 일단 x는 3이라는 수식어가 들어있기에 number 타입으로 간주된다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론된다. 이외에도 변수, 속성, 인자의 기본값, 함수의 반환값 등을 설정할 때 타입 추론이 일어난다.

var a = 'abc';

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

변수 C의 속성은 'hi' 라는 문자열이 들어있어 타입이 알아서 string 문자열로 자동 추론된다.

그리고 반환값은 b + c 인 경우

b: number, c:string

으로 간주되어 출력되는 값은 //10hi 로 출력된다. 그리고 getB 파라미터에 타입을 정의되지 않은 채 b만 정의가 될 경우 알아서 any라는 타입으로 정의해준다.

 

🎈 타입추론 기본 예제 02

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

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

인터페이스와 제너릭을 이용한 타입 추론 방식이다. T에 따라서 value값이 변경 될 수도 있다. title이란 속성값은 string으로 고정시켜 놓았으니 그 타입 고대로 Fix 된 것. 그리고 다른 함수를 선언하면서 변수를 초기화 하면 타입도 초기화 된다. 위 코드처럼 value값에 'abc'를 넣으면 자동으로 문자열로 변동되고 숫자를 넣으면 자동으로 number 타입으로 변동된다.

 

🎈 타입추론 기본 예제 03 : 복잡한 구조에서의 타입 추론 방식

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

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

var DetailedItem: DetailedDropdown<string> = {
  title: 'hello',
  description: 'ab',
  value: 'a',
  tag: 'a'
}

처음에는 인터페이스로 제너릭을 선언해주고 value값도 T 제너릭 형태로 타입정의. 그리고 또 다른 인터페이스를 선언할 때는 Dopdown 인터페이스를 extends(확장) 키워드를 써서 데려오면 굳이 선언하지 않아도 암묵적으로 Dropdown에 있는 속성들이 들어와있다. (value, title) 그리고 새로운 DetailedItem 함수를 생성할 때 DetailedDropdown을 가져옴과 동시에 즉시 타입을 지정해주면 위에 있는 인터페이스들 value값들이 자동으로 string으로 변동된다. 그리고 DetailedItem 변수에 담긴 속성들은 문자열로 나열해주어야 에러를 방지할 수 있다.

 

🎈 가장 적절한 타입

타입은 보통 몇 개의 표현식을 바탕으로 타입을 추론한다. 그리고 그 표현식을 이용하여 가장 근접한 타입을 추론하게 되는데 이 가장 근접한 타입을 Best Common Type이라고 한다.

• 예제

let arr = [0, 1, null];

배열에 들어가는 값들이 한 타입으로 통일되지 않았다. 2개는 숫자형, 1개는 논리형으로 들어가있는데 위 코드처럼 선언 후 arr 변수 위에 마우스 커서를 올려 놓으면 number | boolean 값으로 알아서 유니온 방식으로 추론해준다.