编写d.ts文件步骤详解-tutorial js-php.cn

这次给大家带来编写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 Salin selepas log masuk 其中关键字declare表示声明的意思。全局变量是aaa,类型是数字类型（number）。当然了也可以是string类型或者其他或者：

declare var aaa:number|string //注意这里用的是一个竖线表示"或"的意思 Salin selepas log masuk 如果是常量的话用关键字const表示：

declare const max:200 Salin selepas log masuk 函数

由上面的全局变量的写法我们很自然的推断出一个 全局函数 的写法如下：

/** id是用户的id，可以是number或者string */ decalre function getName(id:number|string):string Salin selepas log masuk 最后的那个string表示的是 函数的返回值 的类型。如果函数没有返回值可以用void表示。

在js里面调用的时候就会提示：

我们上面写的注释，写js的时候还可以提示。

有时候同一个函数有若干种写法：

get(1234) get("zhangsan",18) Salin selepas log masuk 那么d.ts对应的写法：

declare function get(id: string | number): string declare function get(name:string,age:number): string Salin selepas log masuk 如果有些参数可有可无，可以加个?表示非必须。

declare function render(callback?:()=>void): string Salin selepas log masuk js中调用的时候，回调传不传都可以：

render() render(function () { alert('finish.') }) Salin selepas log masuk class

当然除了变量和函数外，我们还有类（class）。

declare class Person { static maxAge: number //静态变量 static getMaxAge(): number //静态方法 constructor(name: string, age: number) //构造函数 getName(id: number): string } Salin selepas log masuk constructor表示的是 构造方法 ：

其中static表示静态的意思，用来表示静态变量和静态方法：

对象

declare namespace OOO{ } Salin selepas log masuk 当然了这个对象上面可能有变量，可能有函数可能有类。

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 //实例方法 } } Salin selepas log masuk 其实就是把上面的那些写法放到这个namespace包起来的大括号里面，注意括号里面就不需要declare关键字了。 效果：

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

declare namespace OOO{ var aaa: number | string // ... namespace O2{ let b:number } } Salin selepas log masuk 效果：

混合类型

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

new $() $.ajax() $() Salin selepas log masuk 既是函数又是对象

declare function $2(s:string): void declare namespace $2{ let aaa:number } Salin selepas log masuk 效果：

作为函数用：

作为对象用：

也就是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 Salin selepas log masuk 效果：

作为函数使用：

类的静态方法：

类的构造函数：

类的实例方法：

模块化

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

比如这样的效果：

对应的写法是这样的：

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

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

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

declare module "app" { function aaa(some:number):number export=aaa } Salin selepas log masuk 以此类推，导出一个变量或常量的话这么写：

declare module "ccc" { const c:400 export=c } Salin selepas log masuk 效果：

UMD

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

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

declare namespace UUU{ let a:number } declare module "UUU" { export =UUU } Salin selepas log masuk 效果这样：

作为全局变量使用：

作为模块加载使用：

其他

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

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

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

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

编写d.ts文件步骤详解