大家好，我是前端西瓜哥。我們在 VSCode 編輯器中編寫 js 代碼，是會提供類型提示的。

VSCode 會推斷一個變量是什么類型，并在你輸入內容的時候，提供對應的 API 屬性或方法補全。

如下圖，在 js 文件中，arr 變量被判斷為一個 number[] 類型，所以我們鍵入 arr. 時，會提供一個數組可以訪問到的屬性。

JavaScript Language Service

上面的能力來自 JavaScript Language Service，由 TypeScript 團隊進行開發維護。

類型的推導并衍生出的智能提示，是基于 TypeScript 的。

TypeScript 可以不顯式寫類型標注，會做自動類型推導的。JavaScript 正是利用這一點能夠一定限度地得到類型。

雖然智能，但不完全智能。基于 TS 的智能推斷不能識別運行時變量發生的類型變化。

看下面的例子，相比 TypeScript，JavaScript 是不可預測的，即可以改變類型，改了類型后 arr 還是推導為原來的 number[]。

除此之外，我們還可以基于 JSDoc 來做智能提示。在一個變量的上面加上 JSDoc 格式的注釋即可。

格式大致這個樣子：

/** @標簽 {類型標注} */

下圖中我們給一個 rect 變量聲明了對象結構。可以看到，出現了類型聲明中屬性的智能提示。

然后是函數參數的注釋聲明：

?需要注意的是，JavaScript Language Service 只是提供智能提示，并不會做真正的類型檢查。所以假設你給一個變量聲明標注為數值類型，結果賦值為對象是不會提示報錯的。

如果你想要做類型檢查（編輯器層面），可以用 @ts-check。

@ts-check

然后是 @ts-check，讓一個 js 文件被當作一個 ts 文件來處理。

在文件的開頭添加 //@ts-check 即可開啟。

看，現在我們不能給一個初始化時為 number[] 賦予其他不兼容的類型值了。

/Users/watermelon/Library/Application Support/typora-user-images/image-20230127235510088.png

不過這只是編輯器層面的提示，它依舊是正確的 js 寫法，是可以正常運行的。

然后 rect 變量也因為聲明時只有 x，缺少其他屬性而報錯了：

實際應用

我個人來說，基本都是寫 TS 了，但偶爾要寫一些項目外的簡單腳本或許寫點小 demo。如果用 TS，太重了，TS 配置也繁瑣，這時候直接用 js 會更簡單些。

雖然 VSCode 能支持一些簡單的類型推導，但并不是總是智能，比如聲明一個函數，傳入的參數類型是無法推導的，這時候通過 JSDoc 來聲明類型，就能提供不錯的類型提示，通過智能提示減少寫錯屬性名的低級錯誤。

另外就是打包工具的配置文件通常是 js，要換成 ts 會非常麻煩，用 VSCode 的智能推導是不錯的選擇。

下面是 rollup 工具的配置文件寫法。

@ts-check 和 @type 的組合拳，效果挺不錯的。

結尾

非常好用，建議都試試，十分酸爽。