建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥。我們?cè)?VSCode 編輯器中編寫 js 代碼，是會(huì)提供類型提示的。
VSCode 會(huì)推斷一個(gè)變量是什么類型，并在你輸入內(nèi)容的時(shí)候，提供對(duì)應(yīng)的 API 屬性或方法補(bǔ)全。
如下圖，在 js 文件中，arr 變量被判斷為一個(gè) number[] 類型，所以我們鍵入 arr. 時(shí)，會(huì)提供一個(gè)數(shù)組可以訪問(wèn)到的屬性。
JavaScript Language Service
上面的能力來(lái)自 JavaScript Language Service，由 TypeScript 團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)維護(hù)。
類型的推導(dǎo)并衍生出的智能提示，是基于 TypeScript 的。
TypeScript 可以不顯式寫類型標(biāo)注，會(huì)做自動(dòng)類型推導(dǎo)的。JavaScript 正是利用這一點(diǎn)能夠一定限度地得到類型。
雖然智能，但不完全智能。基于 TS 的智能推斷不能識(shí)別運(yùn)行時(shí)變量發(fā)生的類型變化。
看下面的例子，相比 TypeScript，JavaScript 是不可預(yù)測(cè)的，即可以改變類型，改了類型后 arr 還是推導(dǎo)為原來(lái)的 number[]。
除此之外，我們還可以基于 JSDoc 來(lái)做智能提示。在一個(gè)變量的上面加上 JSDoc 格式的注釋即可。
格式大致這個(gè)樣子：
/** @標(biāo)簽 {類型標(biāo)注} */
下圖中我們給一個(gè) rect 變量聲明了對(duì)象結(jié)構(gòu)?？梢钥吹?，出現(xiàn)了類型聲明中屬性的智能提示。
然后是函數(shù)參數(shù)的注釋聲明：
?需要注意的是，JavaScript Language Service 只是提供智能提示，并不會(huì)做真正的類型檢查。所以假設(shè)你給一個(gè)變量聲明標(biāo)注為數(shù)值類型，結(jié)果賦值為對(duì)象是不會(huì)提示報(bào)錯(cuò)的。
如果你想要做類型檢查（編輯器層面），可以用 @ts-check。
@ts-check
然后是 @ts-check，讓一個(gè) js 文件被當(dāng)作一個(gè) ts 文件來(lái)處理。
在文件的開(kāi)頭添加 //@ts-check 即可開(kāi)啟。
看，現(xiàn)在我們不能給一個(gè)初始化時(shí)為 number[] 賦予其他不兼容的類型值了。
/Users/watermelon/Library/Application Support/typora-user-images/image-20230127235510088.png
不過(guò)這只是編輯器層面的提示，它依舊是正確的 js 寫法，是可以正常運(yùn)行的。
然后 rect 變量也因?yàn)槁暶鲿r(shí)只有 x，缺少其他屬性而報(bào)錯(cuò)了：
實(shí)際應(yīng)用
我個(gè)人來(lái)說(shuō)，基本都是寫 TS 了，但偶爾要寫一些項(xiàng)目外的簡(jiǎn)單腳本或許寫點(diǎn)小 demo。如果用 TS，太重了，TS 配置也繁瑣，這時(shí)候直接用 js 會(huì)更簡(jiǎn)單些。
雖然 VSCode 能支持一些簡(jiǎn)單的類型推導(dǎo)，但并不是總是智能，比如聲明一個(gè)函數(shù)，傳入的參數(shù)類型是無(wú)法推導(dǎo)的，這時(shí)候通過(guò) JSDoc 來(lái)聲明類型，就能提供不錯(cuò)的類型提示，通過(guò)智能提示減少寫錯(cuò)屬性名的低級(jí)錯(cuò)誤。
另外就是打包工具的配置文件通常是 js，要換成 ts 會(huì)非常麻煩，用 VSCode 的智能推導(dǎo)是不錯(cuò)的選擇。
下面是 rollup 工具的配置文件寫法。
@ts-check 和 @type 的組合拳，效果挺不錯(cuò)的。
結(jié)尾
非常好用，建議都試試，十分酸爽。
當(dāng)前題目：在VSCode中像寫TypeScript一樣寫JavaScript
轉(zhuǎn)載注明：http://m.fisionsoft.com.cn/article/cdjsidp.html
