[이펙티브 타입스크립트+6] 편집기를 사용하여 타입 시스템 탐색

Typescript의 단짝 친구, Visual Studio Code (https://code.visualstudio.com/)

2장 타입스크립트의 타입 시스템
아이템 6 | 편집기를 사용하여 타입 시스템 탐색하기

3줄 요약
1. 타입스크립트 서버를 통해서 타입스크립트의 언어 서비스를 제공받을 수 있다.
2. 언어 서비스를 에디터로부터 확인할 수 있다.
3. 타입스크립트와 비주얼 코드는 마이크로소프트 사의 제품이다. 궁합이 좋다.

참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다.

---

타입스크립트를 설치하면 두 가지를 실행할 수 있습니다.
1. 타입스크립트 컴파일러(tsc)
2. 타입스크립트 서버(tsserver)

이 중 타입스크립트 컴파일러는 한 번쯤은 사용해보셨을 겁니다.
타입스크립트 파일을 자바스크립트 파일로 트랜스파일할 때 쓰는 명령어이니깐요.

타입스크립트 서버는 조금 생소하게 느껴지실 수도 있습니다.
그러나 알게모르게 우리는 이미 이 타입스크립트 서버를 사용하고 있었습니다.

ts server가 동작중이다.

타입스크립트 서버는 이렇게 visual studio code에서 OUTPUT 탭에서 확인할 수 있습니다.
그리고 이렇게 동작하는 타입스크립트 서버로부터 언어 서비스를 제공받습니다.

언어 서버스에는 코드 자동 완성, 명세(사양) 검사, 검색, 리팩토링 등이 포함됩니다.
또, 에디터에서 타입스크립트가 어떻게 타입을 추론하고 있는지 확인할 수 있게 도와줍니다.

함수의 리턴 타입을 추론된 것을 확인할 수 있습니다.

if문 안에서 string 타입으로 추론된 변수 message

또한, 위와 같이 message 파라미터는 string 혹은 null 타입이지만 if문 안에서는 string 타입으로 타입이 좁혀진 것을 확인할 수 있습니다. 

이렇듯 에디터를 통해서 추론된 타입을 확인하거나 미리 정의된 타입 파일들로부터 변수 혹은 함수 등의 타입을 쉽게 확인할 수 있습니다.
이는 타입스크립트를 개발할 때, 개발의 편의성을 크게 향상해줄 수 있습니다.

 

Materials From
1. <이펙티브 타입스크립트>(댄 밴더캄 지음, 장원호 옮김, 인사이트 2021)
2. 타입스크립트 공식 홈페이지 | https://www.typescriptlang.org/

Typed JavaScript at Any Scale.