아!!! 드디어 이해했다. Typings이 뭔지. 너무나도 속이 시원하다.

Angular 2 를 처음 보았을 때 무시무시하던 많은 패키지들. Karma, core-js, zone.js, Jasmine, RxJS, … 등등, 도대체 뭐가 뭔지 감도 안 잡히던 시절. 다른 것들은 하나 하나 찾아가며, ‘아 이게 이런거구나~’ 하고, 개념은 약간의 시간이 흐른 후에 이해할 수 있었는데, 도저히 이 Typings 라는 녀석은 개념도 이해가 안 되었었다.

npm 에서 소개하고 있는 Typings는 심플하다.

The TypeScript Definition Manager

Typings 은 TypeScript의 정의들을 관리하는 쉬운 방법이다. ~~~~….

그 다음에 드는 생각은, ‘좋아, 정의를 관리해서 어디다가 써 먹지?’ 였다. 그것에 대한 대답을 찾아보려고 해도, 정확히 무엇을 모르는지를 몰라서 아마도 검색 방법이 잘못되어, 찾을 수가 없었다.


우연찮게 속이 막힌 채로 두어 달을 살아오다가, 우연히 발견하게 되었다. 그리고 더욱 TypeScript에 대해 애정이 가게 되었다. 와우.

여태까지 나는 vi의 헤비 유저였다. 왠만하면 코딩은 죄다 vi로 작업을 했고, 그래서 코드 자동 완성(Code Completion, or Intellisense) 기능에 대해 굉장히 무감각했었다.

Angular 2 에 관심이 많아지며 이것 저것 코드를 작성하다 보니, 너무나도 많은 API들이 하나하나 기억하기가 너무 어려웠다. 그래서 끙끙 매고 있던 도중 우연히 VS Code 에디터를 사용하다, 자동 완성 기능을 보고 문득 떠오른 생각.

‘아! 원래 JavaScript가 동적으로 타입을 결정하는 언어라 코딩 할 때에 자동 완성 기능이라는게 존재할 수가 없는데, TypeScript는 타입을 결정해주니 그것을 코딩할 때 사용할 수 있구나!’

그래서 Typings을 이용하면 자동 완성기능을 사용할 수 있다…!!!

TypeScript의 정의를 관리하면 좋나요?

네, 짱 좋습니다. 무조건 typings을 쓰세요.


2017년 2월 21일 업데이트

최근에는 typings 대신 DefinitelyTyped 가 사용되고 있다. 작년 9월까지만 해도 typings가 대세였는데, 생각해보면 그 때는 파워있는 중앙 관리자가 없어서 그랬던 것 같고, 지금은 DefinitelyTyped 가 대세가 되었다. 덕분에 아주 좋은 점은, 설치가 쉬워졌다.

예를 들어서, jquery의 자동 완성 기능을 사용하고 싶다고 해보자.

그럼 당신은 다음과 같이 하면 된다.

  1. npm install @types/jquery --save-dev
  2. 자동 완성 기능을 사용한다!

대개 유명한 라이브러리는 자동 완성 기능이 거의 다 있다. 따라서 유명한 라이브러리를 사용한다면, 주저말고 @types/라이브러리 를 설치하면 된다.

만약 이게 좀 덜 유명해서 있는지 없는지 잘 모르겠는 라이브러리라면, DefinitelyTyped 의 Github 레포지토리로 가서 찾아보자. 링크는 여기에 있다.

또 다른 꿀팁! TypeScript 뿐 아니라, 순수하게 JavaScript를 사용할 때에도 자동 완성 기능을 사용할 수 있다!!! 다만, 에디터에 따라 지원 여부가 다르므로, 그것은 알아서 하시라…

내가 확실히 아는 것은, vscode는 잘 된다.