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

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

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

JavaScript Language Service

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

類型的推導(dǎo)并衍生出的智能提示，是基于 TypeScript 的。

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

雖然智能，但不完全智能?；?TS 的智能推斷不能識別運行時變量發(fā)生的類型變化。

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

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

格式大致這個樣子：

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

下圖中我們給一個 rect 變量聲明了對象結(jié)構(gòu)?？梢钥吹?，出現(xiàn)了類型聲明中屬性的智能提示。

然后是函數(shù)參數(shù)的注釋聲明：

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

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

@ts-check

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

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

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

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

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

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

實際應(yīng)用

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

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

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

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

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

結(jié)尾

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

當前標題：在VSCode中像寫TypeScript一樣寫JavaScript
轉(zhuǎn)載來于：http://uogjgqi.cn/article/cdjsidp.html