js項(xiàng)目中添加ts支持實(shí)現(xiàn)示例詳解
安裝 TypeScript 依賴
首先安裝 TypeScript 依賴，我們要通過(guò) tsc 指令創(chuàng)建聲明文件：
pnpm install -D typescript
創(chuàng)建配置文件
接下來(lái)創(chuàng)建 TypeScript 配置文件:
npx tsc --init
這一步會(huì)在項(xiàng)目的根目錄下創(chuàng)建一個(gè) tsconfig.json 文件。我們?cè)谠瓉?lái)配置的基礎(chǔ)上開放一些配置：
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitAny": false,
"skipLibCheck": true,
+ "allowJs": true,
+ "checkJs": true,
+ "declaration": true,
+ "emitDeclarationOnly": true,
+ "rootDir": "./",
+ "outDir": "./types",
}
+ "include": [
+ "security/**/*"
+ ]
}字段說(shuō)明
對(duì)上述字段，我們挑幾個(gè)重要的說(shuō)明一下。
allowJs、checkJs增加 JS 文件支持declaration、emitDeclarationOnly我們只需要 tsc 幫我們生成類型聲明文件即可rootDir、outDir指定了類型聲明文件生成到types/目錄include我們只為security/目錄下的代碼生成類型聲明文件
想詳細(xì)了解每個(gè)配置字段的含義，可以參考 TypeScript 官方說(shuō)明：https://aka.ms/tsconfig。
生成類型文件
項(xiàng)目根目錄下創(chuàng)建 index.d.ts 文件
export let security: typeof import("./types/security");接下里修改 package.json, 增加當(dāng)前 npm 包的類型聲明支持和構(gòu)建腳本 typecheck：
{
"scripts": {
// ...
"typecheck": "tsc",
},
types: "index.d.ts"
}接下來(lái)執(zhí)行腳本：
npm run typecheck
最后就能看到在 types/ 目錄下為 security/ 生成的類型聲明文件了。
以上就是js項(xiàng)目中添加ts支持實(shí)現(xiàn)示例詳解的詳細(xì)內(nèi)容，更多關(guān)于js項(xiàng)目添加ts支持的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
純JS實(shí)現(xiàn)圖片驗(yàn)證碼功能并兼容IE6-8(推薦)
這篇文章主要介紹了純JS實(shí)現(xiàn)圖片驗(yàn)證碼功能并兼容IE6-8瀏覽器,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JavaScript中定義函數(shù)的三種方法,本文直接給出代碼實(shí)現(xiàn),同時(shí)給出了構(gòu)造函數(shù)的相關(guān)知識(shí),需要的朋友可以參考下2015-03-03
Javascript中關(guān)于Array.filter()的妙用詳解
大家應(yīng)該都知道filter是Javascript中Array常用的操作，它用于把Array的某些元素過(guò)濾掉，然后返回剩下的元素。下面這篇文章就給大家介紹了關(guān)于Javascript中Array.filter()的妙用，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12
json經(jīng)常使用，但如果字段中出現(xiàn)換行符如何處理，測(cè)試一下json類的處理，也沒(méi)有發(fā)現(xiàn)。想不到最終的處理確實(shí)如此簡(jiǎn)單2014-06-06
這篇文章主要介紹了詳解微信小程序軌跡回放實(shí)現(xiàn)及遇到的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
使用layui監(jiān)聽器監(jiān)聽select下拉框,事件綁定不成功的解決方法
今天小編就為大家分享一篇使用layui監(jiān)聽器監(jiān)聽select下拉框,事件綁定不成功的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS 創(chuàng)建對(duì)象的模式實(shí)例小結(jié)
這篇文章主要介紹了JS 創(chuàng)建對(duì)象的模式,結(jié)合實(shí)例形式總結(jié)分析了JS 創(chuàng)建對(duì)象的各種常用模式,包括工廠模式、構(gòu)造函數(shù)模式、原型模式、組合構(gòu)造和原型模式、動(dòng)態(tài)原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造模式等,需要的朋友可以參考下2020-04-04
這篇文章主要為大家針對(duì)Bootstrap插件的相關(guān)資料進(jìn)行了詳細(xì)介紹，Bootstrap 自帶 12 種 jQuery 插件，擴(kuò)展了功能，可以給站點(diǎn)添加更多的互動(dòng)，感興趣的小伙伴們可以參考一下2016-04-04
Javascript限制網(wǎng)頁(yè)只能在微信內(nèi)置瀏覽器中訪問(wèn)
最近正在開發(fā)一個(gè)微信公眾賬號(hào)，其中有一項(xiàng)功能是用戶發(fā)送文字消息給公眾號(hào)，然后公眾號(hào)返回圖文消息給用戶，用戶再點(diǎn)擊圖文消息即可跳轉(zhuǎn)到一個(gè)網(wǎng)頁(yè)鏈接，在微信的內(nèi)置瀏覽器中打開。2014-11-11
淺談js控制li標(biāo)簽排序問(wèn)題 js調(diào)用php函數(shù)的方法
下面小編就為大家?guī)?lái)一篇淺談js控制li標(biāo)簽排序問(wèn)題 js調(diào)用php函數(shù)的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10