typescript编写描述文件

最近开始从js转ts了。但是要用到一些描述文件（d.ts），常用的比如jquery等都可以通过 npm下载到别人已经写好的npm install @types/jquery。但是还是有一些小众的或者公司内部的公共库或者以前写过的公用js代码需要自己手动写描述文件。

之前也从网上面也找了一些资料，但还是看的云里雾里模糊不清，经过一段摸索，将摸索的结果记录下来，也希望可以给别人一个参考。

如果你只写js，d.ts对你来说也是有用的，大部分编辑器能识别d.ts文件，当你写js代码的时候给你智能提示。效果像这样：

通常，我们写js的是时候有两种引入js的方式：

1，在html文件中通过<script>标签全局引入全局变量。

2，通过模块加载器require其他js文件：比如这样var j=require('jquery')。

全局类型

首先以第一种方式举例。

变量

比如现在有一个全局变量，那对应的d.ts文件里面这样写。

declare var aaa:number

其中关键字declare表示声明的意思。在d.ts文件里面，在最外层声明变量或者函数或者类要在前面加上这个关键字。在typescript的规则里面，如果一个.ts、.d.ts文件如果没有用到import或者export语法的话，那么最顶层声明的变量就是全局变量。

所以我们在这里声明了一个全局变量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 classPerson {

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

    classPerson {

        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{

        letb: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

效果：

作为函数使用：

类的静态方法：

类的构造函数：

类的实例方法：

模块化（CommonJS）

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

比如这样的效果：

对应的写法是这样的：

declare module"abcde"{

    export let a:number

    export functionb():number

    export namespace c{

        let cd:string

    }

}

其实就是外面套了一层 module "xxx"，里面的写法和之前其实差不多，把declare换成了export。

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

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

declare module"app"{

    function aaa(some:number):number

    export=aaa

}

以此类推，导出一个变量或常量的话这么写：

declare module"ccc"{

    constc:400

    export=c

}

效果：

ES6的模块化方式（import export）

declare var aaa:1

declare var bbb:2

declare var ccc:3//因为这个文件里我们使用了import或者export语法，所以bbb和ccc在其他代码里不能访问到，即不是全局变量

export{ aaa }

使用：

import{ a1, a2 }from"./A"

console.log(a1)

console.log(a2)

那么对应的A.d.ts文件是这样写的：

declare var a1:1

declare var a2:2

export{ a1,a2 }

当然了也能这样写：

export declare var a1:1

export declare var a2:2

不过建议之前的第一种写法，原因看这里https://segmentfault.com/a/11...

当然了还有人经常问default导出的写法：

declare var a1:1

export default a1

使用的时候当然就是这样用了：

import a1 from"./A";

console.log(a1)

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

}

.d.ts文件放到哪里

经常有人问写出来的d.ts文件（A.d.ts）文件放到哪个目录里，如果是模块化的话那就放到和源码（A.js）文件同一个目录下，如果是全局变量的话理论上放到哪里都可以————当然除非你在tsconfig.json 文件里面特殊配置过。

原文链接(如何编写一个d.ts文件)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,636评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,890评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,680评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,766评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,665评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,045评论 1赞 276
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,515评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,182评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,334评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,002评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,599评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2赞 341