11. 타입 추론

CHOYEAH·2023년 11월 5일
0

TypeScript

목록 보기
11/23
post-thumbnail
post-custom-banner

타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미.

변수 초기화, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어남

타입 추론 기본 1


var a = 10;

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

10 + '10' // 1010

타입스크립트 랭귀지 서버는 getB()에서 넘버와 스트링의 + 연산으로 스트링이 리턴될것임을 추론할 수 있다.

타입 추론 기본2



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

타입 랭귀지 서버는 제네릭 타입으로 넘긴 string을 통해 Dropdown.value가 string임을 추론할 수 있다.

타입 추론 기본3


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

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

var detailedItem: DetailedDropdown<string> = {
    title: 'abc',
    desc: 'abc',
    value
}

DetailedDropdown에 제네릭을 string으로 명시하면 DetailedDropdown의 제네릭의 타입 설정과 더불어 상속받고있는 Dropdown의 제네릭도 함께 적용된다.

타입스크립트의 추론이란 이런식으로 코드를 작성하고 저장할때마다 타입스크립트 랭귀지 서버에 의해 실시간으로 타입이 추론되고 그 추론된 값들의 타입이 옳고 그른지를 코드상에서 나타내는것을 말한다.

Best Common Type 추론 방식


Best Common Type이란 타입스크립트가 코드를 통해 어떤 타입인지를 디택팅하는 알고리즘(해석 방식)

사용된 모든 타입을 유니온으로 묶는다.

문맥상의 타이핑(Contextual Typing)


타입스크립트에서 타입을 추론하는 또 하나의 방식은 바로 문맥상으로 타입을 결정하는 것.

이 문맥상의 타이핑(타입 결정)은 코드의 위치(문맥)를 기준으로 일어난다.

예시 코드 1

window.onmousedown = function(mouseEvent) {
  console.log(mouseEvent.button);   //<- OK
  console.log(mouseEvent.kangaroo); //<- Error!
};

위 코드를 타입스크립트 검사기 관점에서 보면 window.onmousedown에 할당되는 함수의 타입을 추론하기 위해 window.onmousedown 타입을 검사한다. 타입 검사가 끝나고 나면 콜백 함수의 타입이 마우스 이벤트와 연관이 있다고 추론하기 때문에 mouseEvent 인자에 button 속성은 있지만 kangaroo 속성은 없다고 결론을 내린다.

예시 코드 2

window.onscroll = function(uiEvent) {
  console.log(uiEvent.button); //<- Error!
}

앞의 예제와 마찬가지로 오른쪽의 콜백 함수는 window.onscroll에 할당되었기 때문에 함수의 인자 uiEvent는 UIEvent으로 간주된다. 그래서 앞에서 봤던 MouseEvent와는 다르게 button 속성이 없다고 추론한다. 따라서  uiEvent.button에서 에러가 발생함.

const handler = function(uiEvent) {
  console.log(uiEvent.button); //<- OK
}

오른쪽 함수 표현식이 앞의 예제와 동일하지만 함수가 할당되는 변수만으로는 타입을 추정하기 어렵기 때문에 아무 에러가 나지 않는다.

위 코드에서 --noImplicitAny 옵션을 사용하면 에러가 발생됨

타입스크립트의 타입 체킹


타입 체킹에 있어서 타입스크립트의 지향점은 타입 체크는 값의 형태에 기반하여 이루어져야 한다는 점이다. 이걸

  • Duck Typing: 객체의 변수 및 메서드의 집합이 객체의 타입을 결정하는 것을 의미. 동적 타이핑의 한 종류

또는

  • Structural Subtyping: 객체의 실제 구조나 정의에 따라 타입을 결정하는 것을 의미

라고 한다.

타입스크립트 랭귀지 서버 소개


TypeScript Programming with Visual Studio Code

Language Server Extension Guide

Langserver.org

언어 서버 프로토콜 개요 - Visual Studio (Windows)

타입스크립트 랭귀지 서버 코드 참고: /node_modules/typescript/lib/tsserver.js

profile
Move fast & break things
post-custom-banner

0개의 댓글