怎麼做出d.ts文件-js教程-PHP中文網

這次帶給大家怎麼做出d.ts文件，做出d.ts文件的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

本文主要講怎麼寫一個typescript的描述檔（以d.ts結尾的檔名，例如xxx.d. ts)。

最近開始從js轉了ts。但要用到一些描述檔（d.ts），常用的像是jquery等都可以透過 npm下載到別人已經寫好的npm install @types/jquery。但還是有一些小眾的或是公司內部的公共函式庫或是以前寫過的公用js程式碼需要自己手動寫描述檔。

之前也從網上面也找了一些資料，但還是看的雲裡霧裡模糊不清，經過一段摸索，將摸索的結果記錄下來，也希望可以給別人一個參考。

如果你只寫js，d.ts對你來說也是有用的，大部分編輯器能辨識d.ts文件，當你寫js程式碼的時候給你智慧提示。效果像這樣：

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

#通常，我們寫js的是時候有兩種引入js的方式：

1，在html檔案中透過 標籤全域引入全域變數。

2，透過模組載入器require其他js檔：像這樣var j=require('jquery')。

全域類型

首先以第一種方式舉例。

變數

例如現在有一個全域變量，那對應的d.ts檔裡面這樣寫。

declare var aaa:number 登入後複製 其中關鍵字declare表示聲明的意思。全域變數是aaa,型別是數字型別（number）。當然了也可以是string型別或其他或：

declare var aaa:number|string //注意这里用的是一个竖线表示"或"的意思 登入後複製 如果是常數的話用關鍵字const表示：

declare const max:200 登入後複製 函數

##由上面的全域變數的寫法我們很自然的推斷出一個全域函數的寫法如下：

/** id是用户的id，可以是number或者string */ decalre function getName(id:number|string):string 登入後複製 最後的那個string表示的是函數的回傳值的型別。如果函數沒有回傳值可以用void表示。

在js裡面呼叫的時候就會提示：

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

有時候同一個函數有若干種寫法：

get(1234) get("zhangsan",18) 登入後複製 那麼d.ts對應的寫法：

declare function get(id: string | number): string declare function get(name:string,age:number): string 登入後複製 如果有些參數可有可無，可以加個?表示非必須。

declare function render(callback?:()=>void): string 登入後複製 js中呼叫的時候，回呼傳不傳都可以：

render() render(function () { alert('finish.') }) 登入後複製 class

當然除了變數和函數外，我們還有類別（class）。

declare class Person { static maxAge: number //静态变量 static getMaxAge(): number //静态方法 constructor(name: string, age: number) //构造函数 getName(id: number): string } 登入後複製 constructor表示的是建構方法：

其中static表示靜態的意思，用來表示靜態變量和靜態方法：

物件

declare namespace OOO{ } 登入後複製 當然了這個物件上面可能有變量，可能有函數可能有類。

declare namespace OOO{ var aaa: number | string function getName(id: number | string): string class Person { static maxAge: number //静态变量 static getMaxAge(): number //静态方法 constructor(name: string, age: number) //构造函数 getName(id: number): string //实例方法 } } 登入後複製 其實就是把上面的那些寫法放到這個namespace包起來的大括號裡面，注意括號裡面就不需要declare關鍵字了。 效果：

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

declare namespace OOO{ var aaa: number | string // ... namespace O2{ let b:number } } 登入後複製 效果：

混合类型

有时候有些值既是函数又是class又是对象的复杂对象。比如我们常用的jquery有各种用法：

new $() $.ajax() $() 登入後複製 既是函数又是对象

declare function $2(s:string): void declare namespace $2{ let aaa:number } 登入後複製 效果：

作为函数用：

作为对象用：

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

既是函数，又是类（可以new出来）

// 实例方法 interface People{ name: string age: number getName(): string getAge():number } interface People_Static{ new (name: string, age: number): People /** 静态方法 */ staticA():number (w:number):number } declare var People:People_Static 登入後複製 效果：

作为函数使用：

类的静态方法：

类的构造函数：

类的实例方法：

模块化

除了上面的全局的方式，我们有时候还是通过require的方式引入模块化的代码。

比如这样的效果：

对应的写法是这样的：

declare module "abcde" { export let a: number export function b(): number export namespace c{ let cd: string } } 登入後複製 其实就是外面套了一层 module "xxx"，里面的写法和之前其实差不多，把declare换成了export。

此外，有时候我们导出去的是一个函数本身，比如这样的：

对应的写法很简单，长这个样子：

declare module "app" { function aaa(some:number):number export=aaa } 登入後複製 以此类推，导出一个变量或常量的话这么写：

declare module "ccc" { const c:400 export=c } 登入後複製 效果：

UMD

有一种代码，既可以通过全局变量访问到，也可以通过require的方式访问到。比如我们最常见的jquery：

其实就是按照全局的方式写d.ts，写完后在最后加上declare namespace "xxx"的描述：

declare namespace UUU{ let a:number } declare module "UUU" { export =UUU } 登入後複製 效果这样：

作为全局变量使用：

作为模块加载使用：

其他

有时候我们扩展了一些内置对象。比如我们给Date增加了一个format的实例方法：

对应的d.ts描述文件这样写：

interface Date { format(f: string): string } 登入後複製 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！