vscode에서 타입스크립트(typescript)를 좀 더 쉽게 사용 해보기

vscode에서 타입스크립트를 사용하면서 의외로 많이 모르고 있는 편리한 기능들과 익스텐션이 있는데 간단하게 알아보고, vscode에서 타입스크립트를 좀 더 편하게 사용 해보자.

자바스크립트(JSDoc) ➡️ 타입스크립트

jsdoc으로 된 자바스크립트 함수 타입 어노테이션을 추가해준다.(레퍼런스)
방법: 함수를 드래깅하면 light bulb(💡)가 표시되는데, 클릭하면 menu가 뜨고 그 중에서 "Annotate with type from JSDoc"을 선택하면 자바스크립트 함수에 타입 어노테이션이 추가된다.

인터페이스 자동 구현(implements)

타입스크립트로 작성한 인터페이스(interface)를 구현(implements)할 때 템플릿 형태로 자동으로 구현을 해준다. (레퍼런스)
방법: 인터페이스 구현체를 선택하면 왼편에 light bulb(💡)가 표시되는데, 클릭하면 메뉴 중 "Implement interface 'xxx'"를 클릭한다.

코드렌즈(codeLens)에서 인터페이스(interface) 확인

이 옵션(typescript.implementationsCodeLens.enabled)을 활성화 (true)하면 타입스크립트의 interface 내용을 볼 수 있다. (레퍼런스)
방법: User Settings(단축키: cmd + , )를 열어 "typescript.implementationsCodeLens.enabled": true 로 변경해준다.

자바스크립트 파일에서 타입스크립트 활성화 하기

일반 자바스크립트 파일에서도 타입스크립트의 컴파일러를 사용하여 타입 체크를 할 수 있다. 자바스크립트 파일(.js) 맨 윗줄에 //@ts-check 를 추가해보자. 모든 js 파일에 사용하고 싶다면 User Settings를 열어
"javascript.implicitProjectConfig.checkJs": true
이 옵션을 활성화 해주자.

인라인 타입스크립트 타입 익스텐션(vscode-inline-types)

이 플러그인을 설치하면 타입을 에디터에 바로 표시해준다. 화면을 보면 어떤 기능인지 바로 알 수 있을 것이다. (레퍼런스)

JSON 데이터를 타입스크립트 인터페이스로 변환 해주는 익스텐 (JSON to TS)

이 플러그인을 설치하면 JSON 데이터에서 자동으로 타입스크립트 인터페이스를 생성해준다.

presentation