建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥。我們在 VSCode 編輯器中編寫 js 代碼，是會提供類型提示的。
VSCode 會推斷一個變量是什么類型，并在你輸入內(nèi)容的時候，提供對應(yīng)的 API 屬性或方法補全。
如下圖，在 js 文件中，arr 變量被判斷為一個 number[] 類型，所以我們鍵入 arr. 時，會提供一個數(shù)組可以訪問到的屬性。
JavaScript Language Service
上面的能力來自 JavaScript Language Service，由 TypeScript 團(tuán)隊進(jìn)行開發(fā)維護(hù)。
類型的推導(dǎo)并衍生出的智能提示，是基于 TypeScript 的。
TypeScript 可以不顯式寫類型標(biāo)注，會做自動類型推導(dǎo)的。JavaScript 正是利用這一點能夠一定限度地得到類型。
雖然智能，但不完全智能?；?TS 的智能推斷不能識別運行時變量發(fā)生的類型變化。
看下面的例子，相比 TypeScript，JavaScript 是不可預(yù)測的，即可以改變類型，改了類型后 arr 還是推導(dǎo)為原來的 number[]。
除此之外，我們還可以基于 JSDoc 來做智能提示。在一個變量的上面加上 JSDoc 格式的注釋即可。
格式大致這個樣子：
/** @標(biāo)簽 {類型標(biāo)注} */
下圖中我們給一個 rect 變量聲明了對象結(jié)構(gòu)?？梢钥吹?，出現(xiàn)了類型聲明中屬性的智能提示。
然后是函數(shù)參數(shù)的注釋聲明：
?需要注意的是，JavaScript Language Service 只是提供智能提示，并不會做真正的類型檢查。所以假設(shè)你給一個變量聲明標(biāo)注為數(shù)值類型，結(jié)果賦值為對象是不會提示報錯的。
如果你想要做類型檢查（編輯器層面），可以用 @ts-check。
@ts-check
然后是 @ts-check，讓一個 js 文件被當(dāng)作一個 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é)尾
非常好用，建議都試試，十分酸爽。
網(wǎng)頁題目：在VSCode中像寫TypeScript一樣寫JavaScript
鏈接地址：http://m.5511xx.com/article/cdjsidp.html
