[타입스크립트 입문 - 기초부터 실전까지] 타입 추론

EJ·2020년 11월 25일

Typescript

목록 보기

13/25

타입 추론(Type Inference)

VSCode 상에서 코드를 작성했을 때 그 코드의 타입이 무엇인지 정의해나가는 방식이 타입 추론이다.

타입스크립트가 어떻게 타입을 추론하는지에 대해 알아보자.
특정 변수를 선언해서 값을 할당한다거나, 함수의 파라미터의 기본값을 지정한다거나, 함수의 반환값을 설정해줄 때 타입 추론이 기본적으로 일어난다.

var a;

입력한 var a;에 마우스오버하면 var a: any와 'a' 변수는 암시적으로 'any' 형식이지만, 사용량에서 더 나은 형식을 유추할 수 있습니다.ts(7043)라는 안내를 볼 수 있다.
==> VSCode에 내장되어있는 타입스크립트의 랭귀지 서버 기능.

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

getB()함수의 인자로 b를 주는데 b를 10이라고 제한했다.
따라서, getB()함수 실행 시 b의 값을 넣어주지 않으면 자동적으로 10이 인자로 들어가게 된다.
getB()함수 내에서 c를 string으로 정의 후 getB()함수에 마우스오버해 보면, getB()함수의 인자 b의 타입은 number이고, 반환값은 string임을 알 수 있다.

인터페이스와 제네릭을 이용한 타입 추론 방식

인터페이스를 제네릭으로 정의했을 때, 제네릭의 값을 타입스크립트 내부적으로 추론해서 변수에 필요한 속성들의 타입들까지 함께 보장해준다.

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

shoppingItem의 타입을 Dropdown<string>으로 줬기 때문에 Dropdown의 <T>는 string이라고 추론된다.
Dropdown의 속성인 value까지 자동적으로 string이라고 추론된다.

복잡한 구조에서의 타입 추론 방식

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

var detailedItem: DetailedDropdown<string> = {
    title: 'abc',
    description: 'abc',
    value: 'a',
    tag: 'a'
}

DetailedDropdown인터페이스를 통해 Dropdown인터페이스 타입까지 추론이 된다.
제네릭을 사용할 때 관례적으로 <T>라고 사용한다. 위의 코드에서는 구별을 위해 <K>를 사용한 것이다.

타입 추론을 통해 코드를 작성하고 저장할 때마다 바로바로 타입스크립트 랭귀지서버에 의해서 타입이 추론이 되고, 그 값들의 타입이 옳은지 코드상에서 나타내 준다.

Best Common Type 추론 방식

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

// Best Common Type
// 유니온 타입으로 타입들을 추론한다.
var arr = [1, 2, true, true, 'a'];

arr에 마우스오버하면 var arr: (string | number | boolean)[]으로 타입이 추론됨을 알려준다.

Typescript Language Server 소개

프로젝트 생성 시 타입스크립트를 설치하면 node_modules - typescript폴더가 있는 것을 볼 수 있다.

💡 참고

주니어 프론트엔드 개발자 👼🏻

이전 포스트

[타입스크립트 입문 - 기초부터 실전까지] 두 번째 프로젝트 - 전화번호부 애플리케이션

다음 포스트