typescript⽂档阅读笔记-declaration声明⽂件
新语法索引
declare var 声明全局变量
declare function 声明全局⽅法embody
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明（含有⼦属性的）全局对象
interface 和 type 声明全局类型
export 导出变量
export namespace 导出（含有⼦属性的）对象
export default ES6 默认导出
export = commonjs 导出模块
export as namespace UMD 库声明全局变量
declare global 扩展全局变量
declare module 扩展模块
/// < reference /> 三斜线指令
什么是声明⽂件
以 .d.ts 结尾。⼀般来说，ts 会解析项⽬中所有的 *.ts ⽂件，当然也包含以 .d.ts 结尾的⽂件。所以当我们将某个 x.d.ts ⽂件放到项⽬中时，其他所有 *.ts ⽂件就都可以获得它的类型定义了。⼿动书写声明⽂件有以下⼏种场景
通常直接放到项⽬内部的（是指除 types ⽂件夹）情况有两种
全局声明⽂件，通过前⾯列出来的声明全局类型的语法，对全局的变量的类型进⾏定义
对 js ⽂件进⾏类型定义，通过在同⼀⽬录下，声明同名不同后缀(.d.ts)的⽂件，通过前⾯列出来的⼏
种 export ⽅式，可以对该.js ⽂件的导出成员类型进⾏定义
放到项⽬内的 types ⽂件夹，通常是对第三⽅模块的类型进⾏补充，例如某些没有类型声明的第三⽅库，或者⾃⼰需要对第三⽅库扩展类型等，⽂件名需要跟模块名同名，tsConfig 的配置如下：
{
"compilerOptions":{
....
"baUrl":"./",
"paths":{
"*":["types/*"]
}
.....
}
}
第三⽅声明⽂件
对于某些本⾝没有提供类型声明的第三⽅库，社区已经帮我们定义好了，我们可以直接下载下来使⽤，但是更推荐的是使⽤ @types 统⼀管理第三⽅库的声明⽂件。@types 的使⽤⽅式很简单，直接⽤ npm 安装对应的声明模块即可
书写声明⽂件
当⼀个第三⽅库没有提供声明⽂件时，我们就需要⾃⼰书写声明⽂件了。前⾯只介绍了最简单的声明⽂件内容，⽽真正书写⼀个声明⽂件并不是⼀件简单的事，以下会详细介绍如何书写声明⽂件。
在不同的场景下，声明⽂件的内容和使⽤⽅式会有所区别。
库的使⽤场景主要有以下⼏种：
全局变量：通过 < script > 标签引⼊第三⽅库，注⼊全局变量
npm 包：通过 import foo from ‘foo’ 导⼊，符合 ES6 模块规范
UMD 库：既可以通过 < script > 标签引⼊，⼜可以通过 import 导⼊
直接扩展全局变量：通过 < script > 标签引⼊后，改变⼀个全局变量的结构
在 npm 包或 UMD 库中扩展全局变量：引⽤ npm 包或 UMD 库后，改变⼀个全局变量的结构
模块插件：通过 < script > 或 import 导⼊后，改变另⼀个模块的结构
全局变量
使⽤全局变量的声明⽂件时，如果是以 npm install @types/xxx --save-dev 安装的，则不需要任何配置。如果是将声明⽂件直接存放于当前项⽬中，则建议和其他源码⼀起放到 src ⽬录下（或者对应的源码⽬录下）。
全局变量的声明⽂件主要有以下⼏种语法：
declare var|let|const 声明全局变量
declare function 声明全局⽅法
sfmy
declare class 声明全局类。
当全局变量是⼀个类的时候使⽤
declare enum 声明全局枚举类型
declare namespace 声明（含有⼦属性的）全局对象
namespace 是 ts 早期时为了解决模块化⽽创造的关键字，中⽂称为命名空间。由于历史遗留原因，在早期还没有 ES6 的时
候，ts 提供了⼀种模块化⽅案，使⽤ module 关键字表⽰内部模块。但由于后来 ES6 也使⽤了 module 关键字，ts 为了兼容ES6，使⽤ namespace 替代了⾃⼰的 module，更名为命名空间。随着 ES6 的⼴泛应⽤，现在已经不建议再使⽤ ts 中的
namespace，⽽推荐使⽤ ES6 的模块化⽅案了，故我们不再需要学习 namespace 的使⽤了。
namespace 被淘汰了，但是在声明⽂件中，declare namespace 还是⽐较常⽤的，它⽤来表⽰全局变量是⼀个对象，包含很多⼦属性。
如果对象拥有深层的层级，则需要⽤嵌套的 namespace 来声明深层的属性的类型
// src/jQuery.d.ts
declare namespace jQuery {
function ajax(url: string, ttings?: any):void;
const version: number;
class Event {
blur(eventType: EventType):void
}
enum EventType {
CustomClick
}
// 嵌套
namespace fn {
function extend(object: any):void;
}
}
// src/index.ts
jQuery.ajax('/api/get_something');
console.log(jQuery.version);
const e =new jQuery.Event();
e.blur(jQuery.EventType.CustomClick);
d({})
interface 和 type 声明全局类型
bitch是什么意思
这两个不需要使⽤ delcare 关键字就可以直接在声明⽂件中声明全局类型，但需要注意命名冲突，这⾥声明的是全局类型
需要注意的是，declare 语句也只能⽤来定义类型，不能⽤来定义具体的实现
npm 包
⼀般我们通过 import foo from 'foo'导⼊⼀个 npm 包，这是符合 ES6 模块规范的。
在我们尝试给⼀个 npm 包创建声明⽂件之前，需要先看看它的声明⽂件是否已经存在。⼀般来说，npm 包的声明⽂件可能存在于两个地⽅：
与该 npm 包绑定在⼀起。判断依据是 package.json 中有 types 字段，或者有⼀个 index.d.ts 声明⽂件。这种模式不需要额外安装其他包，是最为推荐的，所以以后我们⾃⼰创建 npm 包的时候，最好也将声明⽂件与 npm 包绑定在⼀起。
mas是哪个国家的缩写发布到 @types ⾥。我们只需要尝试安装⼀下对应的 @types 包就知道是否存在该声明⽂件，安装命令是 npm install @types/foo --save-dev。这种模式⼀般是由于 npm 包的维护者没有提供声明⽂件，所以只能由其他⼈将声明⽂件发布到 @types ⾥了。
假如以上两种⽅式都没有找到对应的声明⽂件，那么我们就需要⾃⼰为它写声明⽂件了。由于是通过 import 语句导⼊的模块，所以声明⽂件存放的位置也有所约束，⽅案：
创建⼀个 types ⽬录，专门⽤来管理⾃⼰写的声明⽂件，将 foo 的声明⽂件放到 types/foo/index.d.ts 或者 types.foo.d.ts中。这种⽅式需要配置下 tsconfig.json 中的 paths 和 baUrl 字段。
// tsConfig.json 内容
{
"compilerOptions":{
"baUrl":"./",
"paths":{
"*":["types/*"]
}
}
}
如此配置之后，通过 import 导⼊ foo 的时候，也会去 types ⽬录下寻找对应的模块的声明⽂件了。
npm 包的声明⽂件主要有以下⼏种语法：
export 导出变量
export namespace 导出（含有⼦属性的）对象
export default ES6 默认导出
export = commonjs 导出模块
export
npm 包的声明⽂件与全局变量的声明⽂件有很⼤区别。在 npm 包的声明⽂件中，使⽤ declare 不再会声明⼀个全局变量，⽽只会在当前⽂件中声明⼀个局部变量。只有在声明⽂件中使⽤ export 导出，然后在使⽤⽅ import 导⼊后，才会应⽤到这些类型声明。
// types/foo/index.d.ts
export const name: string;
// src/index.ts
import{ name }from'foo';
混⽤ declare 和 export
我们也可以使⽤ declare 先声明多个变量，最后再⽤ export ⼀次性导出。上例的声明⽂件可以等价的改写为:
// types/foo/index.d.ts
declare const name: string;
export{ name }
// src/index.ts
import{ name }from'foo';
注意，与全局变量的声明⽂件类似，interface 前是不需要 declare 的。
export namespace
与 declare namespace 类似，export namespace ⽤来导出⼀个拥有⼦属性的对象。
// types/foo/index.d.ts
佯嗔
export namespace foo {
const name: string;
namespace bar {
function baz(): string;
}
}
// src/index.ts
import{ foo }from'foo';
英语自我介绍演讲稿
console.log(foo.name);
foo.bar.baz();
export default
类似 export，但是注意，只有 function、class 和 interface 可以直接默认导出，其他的变量需要先定义出来，再默认导出敌人的英文
export =
对于某些第三⽅库，导出时使⽤的是 commonjs 的⽅式进⾏导出。假如要为它写类型声明⽂件的话，就需要使⽤到 export = 这种语法了。
// types/foo/index.d.ts
export= foo;
declare function foo(): string;
declare namespace foo {
const bar: number;
}
UMD 库
既可以通过
⼀般使⽤ export as namespace 时，都是先有了 npm 包的声明⽂件，再基于它添加⼀条 export as namespace 语句，即可将声明好的⼀个变量声明为全局变量
lb是什么// types/foo/index.d.ts
export= foo;
declare function foo(): string;
declare namespace foo {
const bar: number;
}
// 前⾯是 npm 包的类型声明，基于此再添加下⾯这句
export as namespace foo;
三斜杠指令
与 namespace 类似，三斜线指令也是 ts 在早期版本中为了描述模块之间的依赖关系⽽创造的语法。随着 ES6 的⼴泛应⽤，现在已经不建议再使⽤ ts 中的三斜线指令来声明模块之间的依赖关系了。
但是在声明⽂件中，它还是有⼀定的⽤武之地。
类似于声明⽂件中的 import，它可以⽤来导⼊另⼀个声明⽂件。与 import 的区别是，当且仅当在以下⼏个场景下，我们才需要使⽤三斜线指令替代 import：
当我们在书写⼀个全局变量的声明⽂件时
当我们需要依赖⼀个全局变量的声明⽂件时
书写⼀个全局变量的声明⽂件
这些场景听上去很拗⼝，但实际上很好理解——在全局变量的声明⽂件中，是不允许出现 import, export 关键字的。⼀旦出现了，那么他就会被视为⼀个 npm 包或 UMD 库，就不再是全局变量的声明⽂件了。故当我们在书写⼀个全局变量的声明⽂件时，如果需要引⽤另⼀个库的类型，那么就必须⽤三斜线指令了
// types/jquery-plugin/index.d.ts
/// <reference types="jquery" />
declare function foo(options: JQuery.AjaxSettings): string;
依赖⼀个全局变量的声明⽂件
在另⼀个场景下，当我们需要依赖⼀个全局变量的声明⽂件时，由于全局变量不⽀持通过 import 导⼊，当然也就必须使⽤三斜线指令来引⼊了
// types/node-plugin/index.d.ts
2018年6月英语四级答案/// <reference types="node" />
export function foo(p: NodeJS.Process): string;
// src/index.ts
import{ foo }from'node-plugin';
foo(global.process);
拆分声明⽂件
用英文打电话当我们的全局变量的声明⽂件太⼤时，可以通过拆分为多个⽂件，然后在⼀个⼊⼝⽂件中将它们⼀⼀引⼊，来提⾼代码的可维护性。⽐如jQuery 的声明⽂件就是这样的：
// node_modules/@types/jquery/index.d.ts
/// <reference types="sizzle" />
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />
export= jQuery;
其中⽤到了 types 和 path 两种不同的指令。它们的区别是：types ⽤于声明对另⼀个库的依赖，⽽ path ⽤于声明对另⼀个⽂件的依赖。其他三斜线指令
除了这两种三斜线指令之外，还有其他的三斜线指令，⽐如 /// <reference no-default-lib="true"/>, /// <amd-module />等，但它们都是废弃的语法，故这⾥就不介绍了，详情可见官⽹。
⾃动⽣成声明⽂件
如果库的源码本⾝就是由 ts 写的，那么在使⽤ tsc 脚本将 ts 编译为 js 的时候，添加 declaration 选项，就可以同时也⽣成 .d.ts 声明⽂件了。
