TypeScript的声明文件_declare let

本文全部来自阮一峰的TypeScript入门教程。

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。

声明语句

// index.ts

console.log($("#root"));//Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i --save-dev @types/jquery`
1
2
3

编译报错，是因为TypeScript不知道$是什么。

// index.ts

declare var $:(selector:string) => any;

console.log($("#root"));
1
2
3
4
5

如此，就不会报错了。
declare var 并没有定义一个真正的变量，只是声明了一个全局变量，定义了一个全局变量的类型，用于TypeScript编译时的检查，在编译结果中declare var最终会被删除。

声明文件

// index.ts

console.log($("#root"));
1
2
3

//jQuery.d.ts

declare var $:(selector:string) => any;
1
2
3

声明文件必须以.d.ts结尾，如本例中的jQuery.d.ts。
一般来说，TypeScript会解析项目中的所有*.ts文件，当然也包括.d.ts结尾的文件。所以，当我们将jQuery.d.ts放入到项目中时，其他所有的*.ts文件都能够获得jQuery.d.ts中的类型定义。
如果仍然无法解析，可以检查下tsconfig.json中的files、include和exclude配置，确保其包含了jQuery.d.ts。

第三方声明文件

当然了，jQuery的声明文件并不需要我们自己定义，npm i --save-dev @types/jquery，就可以直接下载使用。其中，推荐使用@types来统一管理第三方库的声明文件。另外，可以在这个页面搜索你需要的声明文件。

书写声明文件

当一个第三方库没有提供声明文件时，就需要我们自己书写声明文件了。
前面只是介绍了最简单的声明文件内容，而真正书写一个声明文件并不是一件简单的事。在不同场景下，声明文件的内容和使用方式会有所区别。

全局变量

declare var，声明全局变量

declare const $:(selector:string) => any;
1

declare var，用来定义一个全局变量的类型。与其类似的，还有declare let和declare const。
declare var和declare let没有什么区别。
declare const，表示此时的全局变量是一个常量，不允许再去修改它的值了。
一般来说，全局变量都是禁止修改的变量，所以大部分情况下应该使用const，而不是var或let。
需要注意的是，声明语句只是定义类型，切勿在声明语句中定义具体实现。

declare function，声明全局方法

declare function add(x:number,y:number):number;

declare const sum:(x:number,y:number) => number;
1
2
3

declare class，声明全局类

declare class Animal{
    name:string;
    constructor(name:string);
    play():void
}

class Cat{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    play():void{
        console.log(`${this.name} is playing`);
    }

}

const cat:Animal = new Cat("tom");
cat.play();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

delcare enum，声明全局枚举类型

// Days.d.ts

declare enum Days{
    Sun,
    Mon,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat
}
1
2
3
4
5
6
7
8
9
10
11

// index.ts

let weekday = [Days.Mon,Days.Tue,Days.Wed,Days.Thu,Days.Fri];
let weekend = [Days.Sun,Days.Sat];
1
2
3
4

注意哈，declare enum只是用来定义类型，而不是具体的值。
Days.d.ts仅仅会用于编译时的检查，声明文件中的内容在编译结果中会被删除。

interface和type，声明全局类型

• 使用interface定义类型

// index.ts

interface Point2D{
    x:number,
    y:number
}

interface Point3D{
    x:number,
    y:number,
    z:number
}

let p1:Point2D = {
    x:1,
    y:2
}
let p2:Point3D = {
    x:100,
    y:200,
    z:300
}
console.log(`p1:(${p1.x},${p1.y})`);
console.log(`p2:(${p2.x},${p2.y},${p2.z})`);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 使用type定义类型

// index.ts

type Student = {
    name:string,
    age:number,
    score:number
}

let stu1:Student = { 
    name:"Tom",
    age:10,
    score:99
}
let stu2:Student = {
    name:"John",
    age:10,
    score:90
}
console.log(stu1.name,stu1.age,stu1.score);
console.log(stu2.name,stu2.age,stu2.score);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

declare namespace，声明（含有子属性的）全局变量

namespace，是ts早期提供的模块化方案。随着ES6的广泛引用，现在不建议使用ts中的namespace，推荐使用ES6的模块化方案。
虽然namespace已被淘汰了，但在声明文件中，declare namespace还是比较常见的，它用来表示一个全局对象，且包含了很多子属性。

//jQuery.d.ts

declare interface AjaxSettings {
    method?:"GET"|"POST",
    data:any
}

declare namespace jQuery{
    function ajax(url:string,settings:AjaxSettings):void
}
1
2
3
4
5
6
7
8
9
10

//index.ts

let settings:AjaxSettings = {
    method:"GET",
    data:{
        name:"foo"
    }
}

jQuery.ajax("/test",settings);
1
2
3
4
5
6
7
8
9
10

在declare namespace内部，直接使用function ajax，而不是使用declare function ajax。类似的，在declare namespace内部，直接使用const、enum、class等，而不是declare const、declare enum、declare class。