typescript 聲明文件
typescript 作為 javascript 的超集,在開(kāi)發(fā)過(guò)程中不可避免要引用其他第三方的 javascript 的庫(kù)。雖然通過(guò)直接引用可以調(diào)用庫(kù)的類和方法,但是卻無(wú)法使用typescript 諸如類型檢查等特性功能。為了解決這個(gè)問(wèn)題,需要將這些庫(kù)里的函數(shù)和方法體去掉后只保留導(dǎo)出類型聲明,而產(chǎn)生了一個(gè)描述 javascript 庫(kù)和模塊信息的聲明文件。通過(guò)引用這個(gè)聲明文件,就可以借用 typescript 的各種特性來(lái)使用庫(kù)文件了。
假如我們想使用第三方庫(kù),比如 jquery,我們通常這樣獲取一個(gè) id 是 foo 的元素:
$('#foo'); // 或 jquery('#foo');
但是在 typescript 中,我們并不知道 $ 或 jquery 是什么東西:
jquery('#foo'); // index.ts(1,1): error ts2304: cannot find name 'jquery'.
這時(shí),我們需要使用 declare 關(guān)鍵字來(lái)定義它的類型,幫助 typescript 判斷我們傳入的參數(shù)類型對(duì)不對(duì):
declare var jquery: (selector: string) => any; jquery('#foo');
declare 定義的類型只會(huì)用于編譯時(shí)的檢查,編譯結(jié)果中會(huì)被刪除。
上例的編譯結(jié)果是:
jquery('#foo');
聲明文件
聲明文件以 .d.ts 為后綴,例如:
yapf.d.ts
聲明文件或模塊的語(yǔ)法格式如下:
declare module module_name { }
typescript 引入聲明文件語(yǔ)法格式:
/// <reference path = "yapf.d.ts" />
當(dāng)然,很多流行的第三方庫(kù)的聲明文件不需要我們定義了,比如 jquery 已經(jīng)有人幫我們定義好了:jquery in definitelytyped。
范例
以下定義一個(gè)第三方庫(kù)來(lái)演示:
calcthirdpartyjslib.js 文件代碼:
var codebaoku; (function(codebaoku) { var calc = (function () { function calc() { } }) calc.prototype.dosum = function (limit) { var sum = 0; for (var i = 0; i <= limit; i++) { sum = sum + i; } return sum; } codebaoku.calc = calc; return calc; })(codebaoku || (codebaoku = {})); var test = new codebaoku.calc();
如果我們想在 typescript 中引用上面的代碼,則需要設(shè)置聲明文件 calc.d.ts,代碼如下:
declare module codebaoku { export class calc { dosum(limit:number) : number; } }
聲明文件不包含實(shí)現(xiàn),它只是類型聲明,把聲明文件加入到 typescript 中:
calctest.ts 文件代碼:
/// <reference path = "calc.d.ts" /> var obj = new codebaoku.calc(); // obj.dosum("hello"); // 編譯錯(cuò)誤 console.log(obj.dosum(10));
下面這行導(dǎo)致編譯錯(cuò)誤,因?yàn)槲覀冃枰獋魅霐?shù)字參數(shù):
obj.dosum("hello");
使用 tsc 命令來(lái)編譯以上代碼文件:
tsc calctest.ts
生成的 javascript 代碼如下:
calctest.js 文件代碼:
/// <reference path = "calc.d.ts" /> var obj = new codebaoku.calc(); //obj.dosum("hello"); // 編譯錯(cuò)誤 console.log(obj.dosum(10));
最后我們編寫一個(gè) yapf.html 文件,引入 calctest.js 文件及第三方庫(kù) calcthirdpartyjslib.js:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>碩編程(yapf.com)</title> <script src = "calcthirdpartyjslib.js"></script> <script src = "calctest.js"></script> </head> <body> <h1>聲明文件測(cè)試</h1> <p>碩編程測(cè)試一下。</p> </body> </html>
我們可以用瀏覽器打開(kāi)該文件,輸出測(cè)試結(jié)果
- JavaScript如何去掉末尾的分隔符
- JavaScript如何對(duì)負(fù)數(shù)開(kāi)方
- javascript數(shù)組去重內(nèi)置方法怎么使用
- javascript如何刪除網(wǎng)頁(yè)數(shù)據(jù)
- javascript怎么實(shí)現(xiàn)登錄界面成功跳轉(zhuǎn)
- javascript如何輸出當(dāng)前時(shí)間
- notepad怎么編譯運(yùn)行javascript
- 如何用JavaScript在Vue3中實(shí)現(xiàn)動(dòng)畫
- javascript標(biāo)簽的下拉框如何定位
- javascript怎么設(shè)置三色燈
- JavaScript如何用文件保存
- TypeScript 教程
- TypeScript 安裝
- TypeScript 基礎(chǔ)語(yǔ)法
- TypeScript 運(yùn)算符
- TypeScript Array 數(shù)組
- TypeScript 元組
- TypeScript 接口
- TypeScript 類
- TypeScript 命名空間