VS Code 中的自動完成

2019 年 12 月 4 日
筆記

vscode 1.6.x 發佈了，有一系列的新特性，我個人比較開心見到 ts/js 語法着色有提升，我還專門搞了個 issue 吐槽過這個。

當然今天不是扯 vscode 的更新節奏很快的梗，而是扒一扒它的自動完成，上一篇文章已經介紹過，自動完成和 typings 緊密相關。

typings 官網描述：

The TypeScript Definition Manager.

顯然是要扯到 typescript 了，有些哥們發誓說這輩子都不用 typescript ，忍一忍，一會就要說到 js 了。

Typescript Definition

Typescript Definition 是啥？官網上也沒瞧出個所以然來，不了解 ts 顯然不能理解這鬼。這個時候就該我出場了。

隨意搞點 ts 的代碼：

報錯了，設置嚴格一點，甚至編譯不會通過。想像下如果 abcde 是第三方庫如 jQuery 等就尷尬了。

如上圖，簡單地 declare 下就能解決這個問題，這個過程可以稱作 define ,將上述 declare 代碼抽到一個 .d.ts 結尾的文件中單獨維護，這個文件叫聲明文件(declaration file)，也可以稱之為 definition 。報錯的問題解決了，現在有新的問題，一大堆第三方庫的 definition 怎樣維護更新？怎樣查找安裝？

管理 definition

最早的一款工具叫 tsd ，因為它只能安裝全局類型聲明，於是就被拋棄了。

這個時候我們的 typings 隆重登場，它可以解決幾乎所有 definition 的問題，唯一蛋疼的地方是要安裝一下，以及各種奇怪的命令行參數。

ts 2.0 之後，可以用 npm 來管理 definition ，你只需這樣：

npm install @types/jquery -S

詳情可以參閱這篇文章。

VS Code 中的 `definition`

definition 的作用當然遠不止給 ts 本身來用，編輯器可以利用它來做非常強大的代碼提示。下圖就是安裝 definition 之前和之後的效果。

definition 當然在其他編輯器中也有類似的實現，但體驗沒有哪個能比得上 vscode 。