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

• 타입스크립트 컴파일러(tsc)
• 단독으로 실행할 수 있는 타입스크립트 서버(tsserver)

대부분의 경우 타입스크립트 컴파일러를 사용하지만, 타입스크립트 서버 역시 코드 자동 완성, 명세 검사, 검색, 리팩터링과 같은 언어 서비스를 제공한다.

vscode같은 코드 편집기를 사용하면 타입스크립트가 언제 타입 추론을 수행할 수 있는지 개념을 잡을 수 있다. 보통의 경우 심벌 위에 마우스 커서를 대면 타입스크립트가 타입을 어떻게 판단하고 있는지 확인할 수 있다.

타입 시스템을 잘 연마하기 위해 조건문의 분기에서 값의 타입이 어떻게 변하는지 알아보자.

function logMessage(message: string | null) {
  if (message) {
    // (parameter) message: string
    message
  }
}

Go to Definition을 사용하여 타입 선언 파일 찾아보기

언어 서비스는 라이브러리와 라이브러리의 타입 선언을 탐색할 때 도움이 된다.

const response = fetch('<http://example.com>')

fetch 함수에 Go to Definition을 사용하여 타입 선언 파일로 가 보자. typescipt에 포함된 DOM 타입 선언 파일인 lib.dom.d.ts로 이동하게 된다.

// node_modules/typescript/lib/lib.dom.d.ts

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

fetch는 프로미스를 반환하고 두 개의 매개변수를 받는 함수이다. RequestInfo와 RequestInit을 찾아보자.

type RequestInfo = Request | string;

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

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

함수의 구조뿐 아니라 객체들이 어떤 데이터들로 이루어져 있는지도 파악하기가 용이하다.