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文件)

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容