TypeScript 作為 JavaScript 的超集,在開發過程中不可避免要引用其他第三方的 JavaScript 的庫。雖然通過直接引用可以調用庫的類和方法,但是卻無法使用TypeScript 諸如類型檢查等特性功能。為了解決這個問題,需要將這些庫里的函數和方法體去掉后只保留導出類型聲明,而產生了一個描述 JavaScript 庫和模塊信息的聲明文件。通過引用這個聲明文件,就可以借用 TypeScript 的各種特性來使用庫文件了。
參考文檔:[qr23.cn/AKFP8k
]
假如我們想使用第三方庫,比如 jQuery,我們通常這樣獲取一個 id 是 foo 的元素:
$('#foo');
// 或
jQuery('#foo');
但是在 TypeScript 中,我們并不知道 $ 或 jQuery 是什么東西:
jQuery('#foo');
// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.
這時,我們需要使用 declare 關鍵字來定義它的類型,幫助 TypeScript 判斷我們傳入的參數類型對不對:
declare var jQuery: (selector: string) = > any;
jQuery('#foo');
declare 定義的類型只會用于編譯時的檢查,編譯結果中會被刪除。
上例的編譯結果是:
jQuery('#foo');
聲明文件
聲明文件以 .d.ts 為后綴,例如:
```
runoob.d.ts
```
聲明文件或模塊的語法格式如下:
```
declare module Module_Name {
}
```
TypeScript 引入聲明文件語法格式:
```
/// < reference path = " runoob.d.ts" / >
```
### 實例
以下定義一個第三方庫來演示:
## CalcThirdPartyJsLib.js 文件代碼:
```
var Runoob;
(function(Runoob) {
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;
}
Runoob.Calc = Calc;
return Calc;
})(Runoob || (Runoob = {}));
var test = new Runoob.Calc();
```
如果我們想在 TypeScript 中引用上面的代碼,則需要設置聲明文件 Calc.d.ts,代碼如下:
## Calc.d.ts 文件代碼:
```
declare module Runoob {
export class Calc {
doSum(limit:number) : number;
}
}
```
聲明文件不包含實現,它只是類型聲明,把聲明文件加入到 TypeScript 中:
## CalcTest.ts 文件代碼:
```
/// < reference path = "Calc.d.ts" / >
var obj = new Runoob.Calc();
// obj.doSum("Hello"); // 編譯錯誤
console.log(obj.doSum(10));
```
下面這行導致編譯錯誤,因為我們需要傳入數字參數:
```
obj.doSum("Hello");
```
使用 tsc 命令來編譯以上代碼文件:
```
tsc CalcTest.ts
```
生成的 JavaScript 代碼如下:
## CalcTest.js 文件代碼:
```
/// < reference path = "Calc.d.ts" / >
var obj = new Runoob.Calc();
//obj.doSum("Hello"); // 編譯錯誤
console.log(obj.doSum(10));
```
最后我們編寫一個 runoob.html 文件,引入 CalcTest.js 文件及第三方庫 CalcThirdPartyJsLib.js:
## 實例
```
< !DOCTYPE html >
< html >
< head >
< meta charset="utf-8" >
< title >菜鳥教程(runoob.com)< /title >
< script src = "CalcThirdPartyJsLib.js" >< /script >
< script src = "CalcTest.js" >< /script >
< /head >
< body >
< h1 >聲明文件測試< /h1 >
< p >菜鳥測試一下。< /p >
< /body >
< /html >
```
瀏覽器打開該文件輸出結果如下:
![image.png](//file1.elecfans.com/web2/M00/CF/B6/wKgZomYiFVmAMZ51AADjq9Vg5XI975.jpg)
審核編輯 黃宇
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。
舉報投訴
-
javascript
+關注
關注
0文章
511瀏覽量
53444 -
鴻蒙
+關注
關注
55文章
1777瀏覽量
42157
發布評論請先 登錄
相關推薦
鴻蒙TypeScript入門學習第6天:【條件語句】
條件語句用于基于不同的條件來執行不同的動作。
TypeScript 條件語句是通過一條或多條語句的執行結果(True 或 False)來決定執行的代碼塊。
鴻蒙TypeScript學習第7天:【TypeScript 循環】
有的時候,我們可能需要多次執行同一塊代碼。一般情況下,語句是按順序執行的:函數中的第一個語句先執行,接著是第二個語句,依此類推。
編程語言提供了更為復雜執行路徑的多種控制結構。
鴻蒙TypeScript 開發學習第9天:【TypeScript Number】
TypeScript 與 JavaScript 類似,支持 Number 對象。
Number 對象是原始數值的包裝對象。
鴻蒙TypeScript學習第20天:【模塊】
TypeScript 模塊的設計理念是可以更換的組織代碼。
模塊是在其自身的作用域里執行,并不是在全局作用域,這意味著定義在模塊里面的變量、函數和類等在模塊外部是不可見的,除非明確地使用 export 導出它們。類似地,我們必須通過 import 導入其他模塊導出的變量、函數、類等。
免費學習鴻蒙(HarmonyOS)開發,一些地址分享
國內一流高校。通過鴻蒙班的設立,高??梢詾閷W生提供專業的鴻蒙OS學習環境和豐富的實踐機會,培養出更多的鴻蒙開發人才,為鴻蒙OS系統的生態建設
發表于 01-12 20:48
請問哪里可以獲取鴻蒙開發的SDK說明文檔
我現在剛開始學習鴻蒙應用開發,開始打開源文件看到很多類以及這些類的方法,我想知道這些類和類中的屬性、方法,就想過去java有JAVA_API_1.7中文.chm這樣的文件,請問
發表于 08-31 20:52
【觸覺智能 Purple Pi OH 開發板體驗】二、鴻蒙系統APP應用例程學習HDC使用學習
兩年開發鴻蒙APP也是使用的這兩種語言進行開發。當下看TypeScript程序還能說勉強看懂,但是當下開發程序就沒那個實力了,需要之后在抽時間學習。技術更新的也確實是快?。。?!
二、天氣預報程序開發
發表于 08-31 11:13
鴻蒙 OS 應用開發初體驗
Package 的縮寫)。是鴻蒙操作系統設計的應用程序包格式。
.hap 文件包含了應用程序的代碼、資源和元數據等信息,用于在 HarmonyOS 設備上安裝和運行應用程序。
整體開發流程跟
發表于 11-02 19:38
快速了解TypeScript和JavaScript之間的差異
如果我們同時考慮兩者 ——TypeScript 與 JavaScript,那么每個 JavaScript 代碼在 TypeScript 中都是有效的。這意味著 TypeScript 是 JavaScript 的超集。
鴻蒙開發之ArkTS基礎知識
一、ArkTS簡介 ArkTS是HarmonyOS優選的主力應用開發語言。它在TypeScript(簡稱TS)的基礎上,匹配了鴻蒙的ArkUI框架,擴展了聲明式UI、狀態管理等相應的能力,讓開
評論