如何编写一个d.ts文件的步骤详解

declare var aaa:number

declare var aaa:number|string //注意这里用的是一个竖线表示"或"的意思

declare const max:200

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

get(1234)
get("zhangsan",18)

declare function get(id: string | number): string
declare function get(name:string,age:number): string

declare function render(callback"htmlcode">

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
}


总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。