如何编写⼀个d.ts⽂件
这篇⽂章主要讲怎么写⼀个typescript的描述⽂件（以d.ts结尾的⽂件名，⽐如xxx.d.ts)。
2018.12.18更新说明：
1.增加了全局声明的原理说明。
2.增加了es6的import、export对应的d.ts⽂件写法。
3.增加了d.ts⽂件放置位置的说明。
最近开始从js转ts了。但是要⽤到⼀些描述⽂件（d.ts），常⽤的⽐如jquery等都可以通过 npm下载到别⼈已经写好的npm install
@types/jquery。但是还是有⼀些⼩众的或者公司内部的公共库或者以前写过的公⽤js代码需要⾃⼰⼿动写描述⽂件。
之前也从⽹上⾯也了⼀些资料，但还是看的云⾥雾⾥模糊不清，经过⼀段摸索，将摸索的结果记录下来，也希望可以给别⼈⼀个参考。
jquery下载的文件怎么使用如果你只写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
函数
由上⾯的全局变量的写法我们很⾃然的推断出⼀个全局函数的写法如下：
case流程图怎么画/** 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
}
效果：go语言和java的区别
作为函数⽤：
作为对象⽤：
也就是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 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
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。