[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)

NO IMAGE

TypeScript大勢所趨,前端主流的庫及互聯網公司都紛紛轉向TypeScript的懷抱,但是在公司內部有些公共的JS 庫,並不支持類型系統,並且已經在線上運行了很長時間,在用ts從0開始在寫一遍顯然是不大現實的,TypeScript 身為 JavaScript 的超集,自然需要考慮到如何讓 JS 庫也能定義靜態類型。TypeScript先後提出了幾種解決方案,最終確定了DefinitelyTyped。

前置知識

1、類型聲明文件
xxx.d.ts

2、作用
我們在ts中使用非ts編寫的類庫,必須為這個類庫編寫類型聲明文件,對外暴露他的API,否則無法使用

3、類庫種類

  • 全局庫 通過 <script> 標籤引入的第三方庫
  • 模塊庫 ES6 模塊規範
  • umd庫 既可以通過 <script> 標籤引入,又可以通過import 導入
開啟你的第一個類型聲明文件

在Typescript中 ,我們編寫一個類型聲明文件相對來說還是很容易的
下面咱們實現一個全局庫的類型聲明文件

js code

// src/fristModule.js
const name = 'colin'
function sayHello() {
console.log('hello world!!!');
}
function Cat() {
console.log(`my name is ${name}`)
}
Cat.sayHello = sayHello
// src/index.ts
// 調用Cat函數 如果不寫類型描述的話 vs code中會為我們提示出來,如下圖所示,並且在編譯的時候ts編譯器會報錯
Cat.sayHello();

[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)

類型聲明文件 fristModule.d.ts

// src/fristModule.d.js
declare function Cat(): void;
declare namespace Cat {
function sayHello(): void
}

html文件index.html

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TypeScript in Action</title>
</head>
<body>
<div class="app"></div>
<script src="src/fristModule.js"></script>
</body>
</html>

我們在瀏覽器打開打開這個html , 就會在console中看到我們打印的hello world!!!

[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)

解釋一下上邊編寫fristModule.d.ts

declare 為一個外部變量提供類型聲明,
上邊使用了 declare function 來聲明一個函數 和 declare namespace 聲明一個命名空間

同樣的 還有

declare class 
declare const
declare let 
declare var
declare enum

到此 咱們的第一個全局庫類型定義文件就編寫完了

接下來!!!!還沒完

模塊庫的類型定義文件

咱們來把上邊的全局庫改造一下,改成模塊庫

// src/fristModule.js
const name = 'colin'
function sayHello() {
console.log('hello module!!!');
}
function Cat() {
console.log(`my name is ${name}`);
}
Cat.sayHello = sayHello;
export default Cat;
// src/index.ts
import Cat from './fristModule'
Cat.sayHello();
// src/fristModule.d.js
declare function Cat(): void;
declare namespace Cat {
function sayHello(): void
}
export = Cat;

我們在fristModule.js文件中把定義的Cat函數用export default導出
並且在.d.ts中加入 export = Cat

打開瀏覽器瞄一眼

[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)

這樣模塊包的類型聲明文件就完成了。

在模塊包的聲明文件中,使用 declare 不再會聲明一個外部變量,而只會在當前文件中聲明一個局部變量。

UMD包的類型定義文件

我們首先來編寫一個umd包

// src/umd-lib.js
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(factory)
} else if (typeof module === "object" && module.exports) {
module.exports = factory();
} else {
root.umdLib = factory()
}
})(this, function () {
return {
name: 'colin',
sayHello() {
console.log('hello umdlib!!!')
}
}
})

umd 包的類型聲明文件 umd-lib.d.ts

// src/umd-lib.d.ts
declare namespace umdLib {
function sayHello(): void;
}
export as namespace umdLib;
export = umdLib;

既然umd庫同時支持<srcrpt>引入當作全局庫使用 又 可以通過import導入
那麼咱們就先來測試一下在hmtl中通過<srcrpt>引入編寫的umdLib

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TypeScript in Action</title>
</head>
<body>
<div class="app"></div>
<script src="src/umd-lib.js"></script>
</body>
</html>
// src/index.ts
umdLib.sayHello();

[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)

可以看到 hello umilib!!! 已經正常打印出來了

接下來測試一下通過import導入進來

[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)
[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)

同樣的 也可以正常調用。

相關文章

記一次Vue移動端活動倒計時優化

iOS底層探索消息查找

iOS底層探索方法

iOS底層探索類