您好,登錄后才能下訂單哦!
小編給大家分享一下js如何捆綁TypeScript聲明文件,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
前話
TypeScript是JavaScript類型的超集,這是TypeScript的文檔介紹的一句話,那么他們存在聯(lián)系呢?
我的理解是,TypeScript在JavaScript基礎(chǔ)上引入強(qiáng)類型語言的特性。開發(fā)者使用TypeScript語法進(jìn)行編程開發(fā),最終通過轉(zhuǎn)換工具將TypeScript轉(zhuǎn)換成JavaScript。
使用TypeScript能夠避免在原生JavaScript上開發(fā)所帶來的弱類型語言的坑。
嗯!很好,強(qiáng)類型的JavaScript,挺好的。但是,我舍不得那NPM里眾多庫無微不至的人文關(guān)懷啊o(TヘTo)
別怕,現(xiàn)在很多庫已經(jīng)悄悄地支持TypeScript,就算它無心支持,也有無私奉獻(xiàn)的大佬們悄悄地幫這些庫支持TypeScript了
這就是引出了本文的主題,TypeScript的聲明文件,我認(rèn)為它是JavaScript庫類似C語言的頭文件,它的存在便是幫助TypeScript引入JavaScript庫
什么是聲明文件?
和 C/C++ 的 *.h 頭文件(Header files)非常相似:當(dāng)你在 C/C++ 程序中引用了一個(gè)第三方庫(.lib/.dll/.so/.a/.la)時(shí),C/C++ 編譯器無法自動(dòng)地識(shí)別庫內(nèi)導(dǎo)出名稱和函數(shù)類型簽名等,這就需要使用頭文件進(jìn)行接口聲明了。
同理地,TypeScript 的聲明文件是一個(gè)以 .d.ts 為后綴的 TypeScript 代碼文件,但它的作用是描述一個(gè) JavaScript 模塊(廣義上的)內(nèi)所有導(dǎo)出接口的類型信息。
關(guān)于TypeScript聲明文件的寫法和規(guī)范請參考參考如下官方文檔和優(yōu)秀博文:
https://www.tslang.cn/docs/handbook/declaration-files/introduction.html
https://www.jb51.net/article/138217.htm
根據(jù)官方文檔介紹,有以下兩個(gè)捆綁方式:
與你的npm包捆綁在一起
發(fā)布到npm上的@types organization
與npm包捆綁一起就是前面說的,開發(fā)者在ts項(xiàng)目中npm install一個(gè)庫并在代碼文件中import后直接即可使用。
當(dāng)部分庫官方不維護(hù)的時(shí)候,就可以通過第二個(gè)方式,在npm install一個(gè)庫后,再執(zhí)行 npm install @types/庫名 安裝庫的聲明文件即可使用。其原理是TypeScript在2.0版本之后,當(dāng)你import 一個(gè)庫的時(shí)候,當(dāng)他在配置的include路徑中未找到指定的庫,就會(huì)在node_modules的@types中尋找該庫。
一般來說,官方推薦第一種方式書寫發(fā)布聲明文件,下面我直接用例子來展示第一種捆綁方式吧。
例子
首先初始化TypeScript項(xiàng)目,目錄結(jié)構(gòu)如下:
tsconfig.json配置如下:
{ "compilerOptions": { "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "allowJs": true, "outDir": "./dist", /* Redirect output structure to the directory. */ /* Allow javascript files to be compiled. */ "strict": true /* Enable all strict type-checking options. */ }, "include": [ "src/**/*" ] }
可以看到,我寫了個(gè)模塊 a ,并且給它捆綁了聲明文件,模塊 a ,即 src/a/index.js 內(nèi)容如下:
const NAME = 'A'; let call = (who) => { console.log('Hello ' + who + '! I am ' + NAME); } export default { call }
其聲明文件即 src/a/index.d.ts 內(nèi)容如下:
declare namespace a { function call(who: string): void; } export default a;
這時(shí),我們便可以在入口文件 src/index.ts 引入 a 模塊:
import a from './a'; a.call('Pwcong');
命令行執(zhí)行 tsc 后即可在目錄 dist 中生成js代碼:
執(zhí)行命令 node ./dist/index.js 可以得到相應(yīng)正確的輸出。
我們再模擬導(dǎo)入發(fā)布后的NPM庫,在 node_modules 目錄下創(chuàng)建目錄 b ,并初始化Node項(xiàng)目,這時(shí)目錄結(jié)構(gòu)如下:
其中 node_modules/b/types/package.json 內(nèi)容如下:
{ "name": "b", "version": "1.0.0", "main": "./src/index.js", "types": "./types/index.d.ts" }
node_modules/b/src/index.js 內(nèi)容如下:
const NAME = 'B'; let call = (who) => { console.log('Hello ' + who + '! I am ' + NAME); } module.exports = { call }
聲明文件 node_modules/b/types/index.d.ts 內(nèi)容如下:
declare namespace b { function call(who: string): void; } export = b;
這時(shí),我們修改 src/index.ts :
import a from './a'; a.call('Pwcong'); import b = require('b'); b.call('Pwcong');
命令行執(zhí)行 tsc 后即可在目錄 dist 中生成js代碼后執(zhí)行命令 node ./dist/index.js 也可以得到相應(yīng)正確的輸出。
以上是“js如何捆綁TypeScript聲明文件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。