📎아이템 6 편집기를 사용하여 타입 시스템 탐색하기

📍 타입스크립트를 설치하면, 다음 두 가지를 실행할 수 있다.

1. 타입스크립트 컴파일러 (tsc) : 타입스크립트 컴파일러를 실행하는 것이 주목적

2. 단독으로 실행할 수 있는 타입스크립트 서버 (tsserver) : '언어 서비스'를 제공한다는 점에서 중요

언어 서비스

코드 자동 완성, 명세 검사, 검색, 리팩터링 포함

편집기는 코드를 빌드하고 타입 시스템을 익힐 수 있는 최고의 수단이다. 언제 타입 추론을 수행할 수 있는지에 대한 개념을 잡게 해준다.

1. 변수의 타입 추론

num 변수의 타입을 number라고 지정하지 않았지만, 10이라는 값을 보고 타입을 알아낸다.

1. 함수의 타입 추론

   

   함수의 반환 타입을 number로 추론하였다.

추론된 함수의 반환 타입이 기대한 것과 다르다면 타입 선언을 직접 명시하고, 실제 문제가 발생하는 부분을 찾아 봐야 한다.

조건문 외부에서 message 타입은 string | null이지만 내부에서는 string이다.

특정 시점에 타입스크립트가 값의 타입을 어떻게 이해하고 있는지 살펴보는 것이 중요하다. 조건문의 분기에서 값의 타입이 어떻게 변하는지 살펴보는 것은 시스템을 연마하는 매우 좋은 방법이다.

1. 객체에서의 개별 속성 추론

   

   객체에서는 개별 속성을 살펴봄으로써 타입스크립트가 어떻게 각각의 속성을 추론하는지 살펴볼 수 있다.

타입스크립트가 객체 내의 타입을 어떻게 추론하는지 알 수 있다. x가 튜플 타입([number, number, number])이어야 한다면, 타입 구문을 명시해야 한다.

1. 제너릭 타입 추론

타입스크립트가 객체 내의 타입을 어떻게 추론하는지 알 수 있다.

연산자 체인 중간의 추론된 제너릭 타입을 알고 싶다면, 메서드 이름을 조사하면 된다. Array<string>은 split 결과의 타입이 string이라고 추론된 것을 의미한다.

1. 타입 오류 살펴보기

function getElement(elOrId: string | HTMLElement | null): HTMLElement {
  if (typeof elOrId === 'object') {
    return elOrId;
    // ~~~ Type 'HTMLElement | null' is not assignable to type 'HTMLElement'
  } else if (elOrId === null) {
    return document.body;
  }
  elOrId
  // ^? (parameter) elOrId: string
  return document.getElementById(elOrId);
  // ~~~ Type 'HTMLElement | null' is not assignable to type 'HTMLElement'
}

• if 분기문의 의도는 HTMLElement 객체를 골라내는 것 → 자바스크립트에서 typeof null은 "object"이므로, elOrId는 분기문 내에서 null일 가능성이 있기 때문에 → null 체크를 추가해서 바로잡는다.

• document.getElementById가 null을 반환할 가능성이 있어서 발생 → null 체크를 추가하여 예외를 던진다.

function getElement(elOrId: string|HTMLElement|null): HTMLElement {
  if (elOrId === null) {
    return document.body;
  } else if (typeof elOrId === 'object') {
    return elOrId;
    //     ^? (parameter) elOrId: HTMLElement
  }
  const el = document.getElementById(elOrId);
  //                                 ^? (parameter) elOrId: string
  if (!el) {
    throw new Error(`No such element ${elOrId}`);
  }
  return el;
  //     ^? const el: HTMLElement
}

1. 라이브러와 라이브러리의 타입 선언

편집기는 'Go to Definition' 옵션을 제공한다.

이 옵션을 선택하면 타입스크립트에 포함되어 있는 DOM 타입 선언인 lib.dom.d.ts로 이동한다.

declare function fetch(
  input: RequestInfo | URL, init?: RequestInit
): Promise<Response>;

fetch가 Promise를 반환하고 두 개의 매개변수를 받는다. RequestInfo를 클릭하면 다음으로 이동한다.

type RequestInfo = Request | string;

Request를 클릭하면 다음으로 이동한다.

declare var Request: {
  prototype: Request;
  new(input: RequestInfo | URL, init?: RequestInit | undefined): Request;
};

Request 타입과 값은 분리되어 모델링되어 있다. RequestInit를 클릭하면 Request를 생성할 때 사용할 수 있는 모든 옵션이 나타난다.

interface RequestInit {
  body?: BodyInit | null;
  cache?: RequestCache;
  credentials?: RequestCredentials;
  headers?: HeadersInit;
  // ...
}

타입 선언을 통해 타입스크립트가 무엇을 하는지, 어떻게 라이브러리가 모델링되었는지, 어떻게 오류를 찾아낼지 살펴볼 수 잇는 수단이다.

📍요약

• 편집기에서 타입스크립트 언어 서비스를 적극 활용해야 한다.

• 편집기를 사용하면 어떻게 타입 시스템이 동작하는지, 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다.

• 타입스크립트가 동작을 어떻게 모델링하는지 알기 위해 타입 선언 파일을 찾아보는 방법을 터득해야한다.