這篇文章主要介紹了怎樣編寫一個(gè)d.ts文件，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站建設(shè)、九原網(wǎng)絡(luò)推廣、小程序設(shè)計(jì)、九原網(wǎng)絡(luò)營銷、九原企業(yè)策劃、九原品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供九原建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：aaarwkj.com

前言

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

最近開始從js轉(zhuǎn)ts了。但是要用到一些描述文件（d.ts），常用的比如jquery等都可以通過 npm下載到別人已經(jīng)寫好的npm install @types/jquery。但是還是有一些小眾的或者公司內(nèi)部的公共庫或者以前寫過的公用js代碼需要自己手動(dòng)寫描述文件。

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

如果你只寫js，d.ts對你來說也是有用的，大部分編輯器能識(shí)別d.ts文件，當(dāng)你寫js代碼的時(shí)候給你智能提示。效果像這樣：

通常，我們寫js的是時(shí)候有兩種引入js的方式：

1，在html文件中通過<script>標(biāo)簽全局引入全局變量。

2，通過模塊加載器require其他js文件：比如這樣var j=require('jquery')。

全局類型

首先以第一種方式舉例。

變量

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

declare var aaa:number

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

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

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

declare const max:200

函數(shù)

由上面的全局變量的寫法我們很自然的推斷出一個(gè)全局函數(shù)的寫法如下：

/** id是用戶的id，可以是number或者string */
decalre function getName(id:number|string):string

最后的那個(gè)string表示的是函數(shù)的返回值的類型。如果函數(shù)沒有返回值可以用void表示。

在js里面調(diào)用的時(shí)候就會(huì)提示：

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

有時(shí)候同一個(gè)函數(shù)有若干種寫法：

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ù)可有可無，可以加個(gè)?表示非必須。

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

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

render()
render(function () {
 alert('finish.')
})

class

當(dāng)然除了變量和函數(shù)外，我們還有類（class）。

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)然了這個(gè)對象上面可能有變量，可能有函數(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 //實(shí)例方法
 }
}

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

 

 

 

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

declare namespace OOO{
 var aaa: number | string
 // ...
 namespace O2{
 let b:number
 }
}

效果：

 

混合類型

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

new $()
$.ajax()
$()

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

declare function $2(s:string): void
declare namespace $2{
 let aaa:number
}

效果：

作為函數(shù)用：

作為對象用：

也就是ts會(huì)自動(dòng)把同名的namespace和function合并到一起。

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

// 實(shí)例方法 
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ù)：

類的實(shí)例方法：

模塊化

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

比如這樣的效果：

 

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

declare module "abcde" {
 export let a: number
 export function b(): number
 export namespace c{
  let cd: string
 }
 }

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

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

 

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

declare module "app" {
 function aaa(some:number):number
  export=aaa
 }

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

declare module "ccc" {
 const c:400
  export=c
 }

效果：

 

UMD

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

 

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

declare namespace UUU{
 let a:number
}
 
declare module "UUU" {
 export =UUU
}

效果這樣：

作為全局變量使用：

作為模塊加載使用：

其他

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

 

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

interface Date {
 format(f: string): string
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎樣編寫一個(gè)d.ts文件”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

新聞名稱：怎樣編寫一個(gè)d.ts文件
文章出自：http://aaarwkj.com/article20/ispoco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)