前言

本文主要講怎么寫一個typescript的描述文件(以d.ts結(jié)尾的文件名，比如xxx.d.ts)。

最近開始從

之前也從網(wǎng)上面也找了一些資料，但還是看的云里霧里模糊不清，經(jīng)過一段摸索，將摸索的結(jié)果記錄下來，也希望可以給別人一個參考。

如果你只寫

詳情可以看我以前寫過的一些文章：//www.jb51.net/article/138211.htm

通常，我們寫

1，在

2，通過模塊加載器require其他

全局類型

首先以第一種方式舉例。

變量

比如現(xiàn)在有一個全局變量，那對應(yīng)的d.ts文件里面這樣寫。

declare var aaa:number

其中關(guān)鍵字declare表示聲明的意思。全局變量是aaa,類型是數(shù)字類型(number)。當(dāng)然了也可以是string類型或者其他或者：

declare var aaa:number|string //注意這里用的是一個豎線表示"或"的意思

如果是常量的話用關(guān)鍵字const表示：

declare const max:200

由上面的全局變量的寫法我們很自然的推斷出一個全局

/** id是用戶的id，可以是number或者string */

decalre function getName(id:number|string):string

最后的那個string表示的是

在

我們上面寫的注釋，寫js的時候還可以提示。

有時候同一個

get(1234)

get("zhangsan",18)

那么d.ts對應(yīng)的寫法：

declare function get(id: string | number): string

declare function get(name:string,age:number): string

如果有些參數(shù)可有可無，可以加個?表示非必須。

declare function render(callback?:()=>void): string

js中調(diào)用的時候，回調(diào)傳不傳都可以：

render()

render(function () {

alert('finish.')

})

class

當(dāng)然除了變量和

declare class Person {

static maxAge: number //靜態(tài)變量

static getMaxAge(): number //靜態(tài)方法

constructor(name: string, age: number) //構(gòu)造函數(shù)

getName(id: number): string

}

constructor表示的是構(gòu)造方法：

其中static表示靜態(tài)的意思，用來表示靜態(tài)變量和靜態(tài)方法：

對象

declare namespace OOO{

}

當(dāng)然了這個對象上面可能有變量，可能有函數(shù)可能有類。

declare namespace OOO{

var aaa: number | string

function getName(id: number | string): string

class Person {

static maxAge: number //靜態(tài)變量

static getMaxAge(): number //靜態(tài)方法

constructor(name: string, age: number) //構(gòu)造函數(shù)

getName(id: number): string //實例方法

}

}

其實就是把上面的那些寫法放到這個namespace包起來的大括號里面，注意括號里面就不需要declare關(guān)鍵字了。

效果：

對象里面套對象也是可以的：

declare namespace OOO{

var aaa: number | string

// ...

namespace O2{

let b:number

}

}

效果：

混合類型

有時候有些值既是函數(shù)又是class又是對象的復(fù)雜對象。比如我們常用的

new $()

$.ajax()

$()

既是函數(shù)又是對象

declare function $2(s:string): void

declare namespace $2{

let aaa:number

}

效果：

作為函數(shù)用：

作為對象用：

也就是ts會自動把同名的namespace和function合并到一起。

既是函數(shù)，又是類(可以new出來)

// 實例方法

interface People{

name: string

age: number

getName(): string

getAge():number

}

interface People_Static{

new (name: string, age: number): People

/** 靜態(tài)方法 */

staticA():number

(w:number):number

}

declare var People:People_Static

效果：

作為函數(shù)使用：

類的靜態(tài)方法：

類的構(gòu)造函數(shù)：

類的實例方法：

模塊化

除了上面的全局的方式，我們有時候還是通過require的方式引入模塊化的代碼。

比如這樣的效果：

對應(yīng)的寫法是這樣的：

declare module "abcde" {

export let a: number

export function b(): number

export namespace c{

let cd: string

}

}

其實就是外面套了一層 module “xxx”，里面的寫法和之前其實差不多，把declare換成了export。

此外，有時候我們導(dǎo)出去的是一個函數(shù)本身，比如這樣的：

對應(yīng)的寫法很簡單，長這個樣子：

declare module "app" {

function aaa(some:number):number

export=aaa

}

以此類推，導(dǎo)出一個變量或常量的話這么寫：

declare module "ccc" {

const c:400

export=c

}

效果：

UMD

有一種代碼，既可以通過全局變量訪問到，也可以通過require的方式訪問到。比如我們最常見的

其實就是按照全局的方式寫d.ts，寫完后在最后加上declare namespace “xxx”的描述：

declare namespace UUU{

let a:number

}

declare module "UUU" {

export =UUU

}

效果這樣：

作為全局變量使用：

作為模塊加載使用：

其他

有時候我們擴展了一些內(nèi)置對象。比如我們給Date增加了一個format的實例方法：

對應(yīng)的d.ts描述文件這樣寫：

interface Date {

format(f: string): string

}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對前端開發(fā)者的支持。

總結(jié)

以上是生活随笔為你收集整理的d.ts文件可以注释html吗,如何编写一个d.ts文件的步骤详解_旧店_前端开发者的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。