타입스크립트 개발을 위한 'Twoslash Query Comments' vscode 익스텐션 소개 및 분석

Twoslash Query Comments

GitHub - orta/vscode-twoslash-queries: VS Code extension which adds support for twoslash queries into typescript projects

타입스크립트 관련 학습 자료를 찾아보던 와중에 유튜브 알고리즘에 다음과 같은 영상이 떠서 재밌게 시청했다.

My favourite VSCode extension has 3k downloads - YouTube

해당 프로젝트는 (유튜브에 소개될 당시) 75줄밖에 되지 않지만 매우 강력한 기능을 자랑하는 vscode 익스텐션이다.

slash (/) 두 개를 붙이고, 타입을 알고 싶은 변수 밑에다가 caret 과 물음표 (^?) 를 정확히 꽂아넣으면, vscode에서 알아서 변수의 타입을 유추해서 명확히 알려준다!

물론 마우스 커서를 변수에 가져다 대어도 자동으로 알려주기 때문에 실무에서 실용성이 없다고 생각할 수도 있지만, 코드 리뷰를 하거나 줌을 통해 자신의 코드를 공유할 때 모두에게 타입을 명시적으로 강조해서 보여줄 수 있어 나름 유용하다고 생각한다.

여기까지가 해당 익스텐션의 소개 글입니다. 아래는 해당 익스텐션을 분석한 내용입니다.

---

분석

하지만 이 익스텐션을 보고 더 좋은 생각이 떠올랐다.

'아, 75줄밖에 안 하는데도 이렇게 유용한 것을 보니, vscode extension 입문 예제로 써먹기 제격이겠구나!'

바로 코드를 다운 받고 분석하기에 들어갔다.

우선 코드 자체는 그리 많지 않았다. Vscode extension에 대해 아는 바가 없어서 유추하자면, extension.ts가 entry point 역할을 하는 것 같고, 나머지 코드가 로직인 듯 하다. 우선 extension.ts를 분석해보았다.

해당 코드의 21번째줄이 아마 vscode에 분석한 정보를 전달하는 역할을 하는 듯 보였다. VScode는 커스텀 provider가 제공하는 InlayHints들을 단순히 화면에 뿌려주는 역할을 하는 듯 하다.

그렇다면 여기서 가장 중요한 부분은 vscode.InlayHintsProvider의 구조다. TS인 덕분에 코드의 구조가 명확해서 분석이 편리했다.

VS Code API | Visual Studio Code Extension API

VS Code API 공식문서에 registerInlayHintsProvider와 InlayHint에 관한 내용이 아주 잘 나와 있었다.

InlayHint를 살펴보니

kind? 
label (보여질 정보)
paddingLeft?
position

등등의 property를 가지고 있는 object이다. 해당 정보를 적절히 만들어서 전달해주면 vscode가 알아서 label에 적힌 string을 position에 뿌려주는 것 같았다.

여기서 Discriminated union에서 자주 본 kind?의 형태가 궁금해서 declaration file을 찾아보았다.

vscode.d.ts

enum의 형태로 저장되어, 공식문서에도 나와있는 union enum의 역할을 하는 것 같다.

TypeScript: Handbook - Enums

다시 익스텐션으로 돌아가서, 이제는 익스텐션 제작자가 어떻게 InlayHint 정보를 만들었는지 살펴보기로 했다. getHintsFromQueries를 타고 들어가니,

이 함수가 나왔고, checkTwoslashQuery에서 우리가 원하는 기능이 있다.

다시 이 함수에는 createInlayHint라는 함수에서 inlayHint 오브젝트를 만드는 것으로 보인다.

해당 함수는 이런 내용이고, 마지막의 return 문이 눈에 띈다.

해당 익스텐션에서 vscode에게 제공하는 InlayHint는

{
	kind,
	position,
	label: text,
	paddingLeft: true
}

의 형태를 띄는 JS 오브젝트인 것이다.

즉, 저 오브젝트를 내 마음대로 수정하면 나도 vscode inlayhint를 마음대로 만들 수 있다는 결론에 도달했다. 복잡한 클래스 구조와 상속, 생성자 없이, 오브젝트로 간단하게 무엇이든 만들 수 있는 js의 매력이 느껴지는 탐구였다.

JS와 TS를 배우니 확실히 시야가 넓어지고 건드릴 수 있는 분야가 더 많아진 것 같아 기쁘다. 이를 계기로 vscode 익스텐션 제작에 더 많은 관심을 가져봐야겠다.

읽어주셔서 감사합니다!