在我们实际的开发中，可能之前并没有用到 TS，但是后面我们想给项目加入 TS，难道我们要把整个项目重写吗？答案是不用。我们可以通过给项目加上类型声明文件来达到不重写项目还能使用 TS 的目的。

在 TS 中 declare 表示声明的意思，我们可以用它来实现各种声明。类型声明在编译的时候都会被删除，不会影响真正的代码。下面列举了几种常用的类型声明：

declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明(含有子属性的)全局对象
interface 和 type 声明全局类型

普通类型声明

我们可以使用 declare 声明一个变量：

declare let name: string;  //变量
console.log(name)

编译后的结果：

(function () {
    'use strict';
    console.log(name);
})();

可以看到，虽然我们在 index.ts中给声明了变量 name ，但是编译后的结果并没有包含 declare 声明的变量，直接使用了一个未声明的变量的 name 。

外部枚举

外部枚举是使用declare enum定义的枚举类型，外部枚举用来描述已经存在的枚举类型的形状：

declare enum Direction {
  UP,
  DOWN,
  LEFT,
  RIGHT
}
let direction = [
  Direction.UP,
  Direction.DOWN,
  Direction.LEFT,
  Direction.RIGHT
];

编译后的结果如下：

(function () {
  'use strict';
  [
      Direction.UP,
      Direction.DOWN,
      Direction.LEFT,
      Direction.RIGHT
  ];
})();

下面我们看下常量枚举：

declare const enum Direction {
  UP,
  DOWN,
  LEFT,
  RIGHT
}
let direction = [
  Direction.UP,
  Direction.DOWN,
  Direction.LEFT,
  Direction.RIGHT
];

结果如下：

(function () {
  'use strict';
  var direction = [
      0 /* UP */,
      1 /* DOWN */,
      2 /* LEFT */,
      3 /* RIGHT */
  ];
  console.log(direction);
})();

namespace

如果一个全局变量包含了很多属性，这时我们可以使用namespace。注意：在命名空间内部的变量不需要使用declare声明：

declare namespace Vue {
  const version: string;
  function nextTick(cb?: () => void):Promise<void>
}
Vue.version;
Vue.nextTick(() => { })

编译结果：

(function () {
  'use strict';
  Vue.version;
  Vue.nextTick(function () { });
})();

类型声明文件

在实际开发中我们会把类型声明放到一个单独的文件中，这个文件的命名遵循 *.d.ts ，在使用第三方库时，阅读类型声明文件可以帮助我们了解库的使用方式。

下面我们把使用 namespace 定义的 Vue， 抽离到单独的文件中：

declare namespace Vue {
  const version: string;
  function nextTick(cb?: () => void):Promise<void>
}

Vue.version;
Vue.nextTick(() => { })
export { };

配置 tsconfig.json 文件：

{
  // ...
  "include": [
    "src/**/*",
    "typings/**/*"
  ]
}

这里简单说下配置文件中的 include 选项，它主要用来指定需要编译处理的文件列表，支持 glob 模式匹配，文件的解析路径相对于当前项目的tsconfig.json文件位置，详细请阅读 官网 。

但是一般我们在使用第三方库的时候不可能所有类型声明文件都要我们手写，我们可以安装第三方类型声明文件，所有的第三方的类型声明库都会带有@types 前缀，这是约定。JS 本身有很多内置对象，我们把它们被当做声明好的类型使用。 我们可以在 这里 查看内置对象的类型声明文件。

我们以使用 jQuery 举例：

安装 jQuery：

cnpm i jquery -D

在 src/index.ts 文件中导入：

import * as jQuery from 'jquery';
jQuery.ajax();

上述代码报错 Cannot find module 'jquery'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?我们需要在 tsconfig.json文件中配置 moduleResolution选项：

{
  "compilerOptions": {
    "moduleResolution": "node" 
  }
}

配置完成后代码还是会报错：

Could not find a declaration file for module 'jquery'. '/Users/sun/Desktop/learn/ts/ts/node_modules/jquery/dist/jquery.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/jquery` if it exists or add a new declaration (.d.ts) file containing `declare module 'jquery';`

我们需要在终端执行 npm i --save-dev @types/jquery ，执行完安装命令后可以看到代码正常运行了。我们可以在 node_modules/@types 文件下看到多了一个 jquery 文件，打开文件可以看到里面放的几乎全是类型声明文件。这里我们借助这个例子来简要说下类型声明文件的查找顺序：

1. 先查找 node_modules/jquery/package.json 文件，看看里面的 types 属性有没有指定声明文件地址，如："types":"types/xxx.d.ts" 。
2. 没有找到的话会去查找 node_modules/jquery/index.d.ts 文件
3. 如果还没找到，会去查找 node_modules/@types/jquery/index.d.ts 文件
4. 最后查找 typings\jquery\index.d.ts
5. 如果都没找到就会报错。

细心的朋友的可能看到了，在上述代码中我们导入 jQuery 用的是 import * as jQuery from 'jquery'; 为啥要这么用呢，直接 import jQuery from 'jquery'; 不行吗？试过之后发现不行，报错了：

Module '"/Users/sun/Desktop/learn/ts/ts/node_modules/@types/jquery/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

查看下 jQuery 的类型声明文件，发现它是像下面这样导出的：

// 这是 TS 类型声明的一种导出语法
export = jQuery;

查阅官方文档 可以看到有下面这句话：

Note that using export default in your .d.ts files requires esModuleInterop: true to work. If you can’t have esModuleInterop: true in your project, such as when you’re submitting a PR to Definitely Typed, you’ll have to use the export= syntax instead. This older syntax is harder to use but works everywhere. Here’s how the above example would have to be written using export=:

我们可以在 tsconfig.json文件中配置 esModuleInterop: true：

{
  "compilerOptions": {
    // 省略代码
    "esModuleInterop": true
    // 省略代码
  }
}

然后修改 node_modules/@types/jquery/index.d.ts 导出形式为 export default jQuery;再修改 src/index.ts中的导入为 import jQuery from 'jquery';

import jQuery from 'jquery';
console.log(jQuery)
jQuery.ajax('');
export { };

可见代码运行正常。但是上面我们修改了 jQuery 库的类型声明文件导出方式，这显示是不合适的，在开发中我们一般很少修改库的源代码。实际上我们配置了 esModuleInterop: true 后直接就可以使用 import jQuery from 'jquery';了，这是因为 esModuleInterop 配置项的主要作用如下：

Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.

扩展全局变量的类型

我们可以使用 interface 扩展全局变量类型。在下面的例子中，我们给 String扩展了一个全局变量函数 log：

declare var String: StringConstructor;
interface StringConstructor {
  new(val?: any): String;
  (val?: any): String;
  readonly prototype: String
}
interface String {
  toString(): string
}
interface String {
  log(): void
}
String.prototype.log = function () {
  console.log(this);
};
'fang'.log(); // 'fang'
// 注意，这里不能加 export，因为要给全局扩展
// export {}

下面的例子我们给 window 扩展了一个全局变量 fang：

interface Window {
  fang: number
}
window.fang;
// 不能使用 export ，因为要给全局扩展

细心的读者可能看到了上面两个代码中都明确标明了不能使用 export 也就是不能将文件变为局部模块。如果我们非要使用呢？怎么解决报错问题呢？我们可以使用 declare global 来扩展全局变量类型：

declare var String: StringConstructor;
interface StringConstructor {
  new(val?: any): String;
  (val?: any): String;
  readonly prototype: String
}
declare global {
  interface String {
    toString():string
  }
  interface String {
    log(): void
  }
  interface Window {
    fang: string;
  }
}
String.prototype.log = function () {
  console.log(this);
};
'fang'.log();
window.fang;
export { };

注意，我们不能在一个单独的文件里直接使用上面的方法进行全局扩展，如：

declare global {
  interface Window {
    age: string;
  }
}

这样会报如下错误：

Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.

我们需要使用 export 导出才行：

declare global {
  interface Window {
    age: string;
  }
}
export {}

合并声明

在 TS 中有些关键字声明的变量既可以作为类型使用又可以作为值使用，有些只能作为类型使用，而有些只能作为值使用：

从上面的表格中我们可以看出类既可以作为类型使用，也可以作为值使用：

class Student {
  name: string = '';
}
// 这种情况是作为类型使用的
let s1: Student;
// 这种情况是作为值使用的
let s = new Student;

合并类型声明

同一名称的两个独立声明会被合并成一个，合并后的声明拥有原先两个声明的特性。比如接口，接口只能作为类型使用，不能作为值使用，下面的代码虽然声明了两个接口，但它们会进行合并成一个，所以给 p 赋值时，需要包含两个属性：

interface Person {
  name: string;
}
interface Person {
  age: number;
}
const p: Person = {
  name: 'f',
  age: 18
};

我们可以利用接口合并的特性给第三方扩展类型声明：

interface Person {
  name: string;
}

interface Person{
  age: number;
}
const p: Person = {
  name: 'f',
  age: 18
};

使用命名空间进行一些扩展

我们还可以借助 namespace 实现很多功能。下面我们来简单列举下在开发过程中我们可能用到的几种情况：

1. 我们可以使用命名空间扩展类

   class Student {
   name!: string;
   age!: number;
   scores!: Student.Scores;
   }
   namespace Student {
   export class Scores {
    Math: number = 100;
    English: number = 100;
    Chinese: number = 100;
   }
   }
   let student: Student = {
   name: 'f',
   age: 18,
   scores: {
    Math: 100,
    English: 100,
    Chinese: 100
   }
   };

   上面的例子中我们使用命名空间给 Student 类扩展了 scores 属性。

2. 使用命名空间扩展函数 ```typescript function eat(name: string): string { return eat.person + name; }

namespace eat { export let person = “fang”; }

console.log(eat(‘apple’)) // ‘fangapple’

3. 使用命名空间扩展枚举类型
```typescript
enum Color {
  red = 1
}
namespace Color {
  export const green=2;
}
console.log(Color.green) // 2

下面我们来道题练练手：

import { createStore, Store } from 'redux';
const store = createStore(state=>state);
// any Property 'name' does not exist on type 'Store<unknown, Action<any>>'.
store.name = 'fang';

上面代码中我们想给 store 添加一个 name 属性，但是代码报错了，怎么样修改才可以正常运行呢？仔细想想哈，先不要看下面的答案。

你想出来了吗，下面我们来揭晓答案：

import { createStore, Store } from 'redux';
type StoreName = Store & { name: string };
const store:StoreName = createStore(state=>state);
store.name = 'fang';

生成声明文件

当我们把 TS 编译成 JS 后，会丢失类型声明：

let num: number = 1;
console.log(num);

编译后的结果：

    var num = 1;
    console.log(num);

可以看到类型声明没有了，这样如果我们想让别人使用咱们打包后的文件时，咱们写的类型声明也就失效了。这应该怎么办呢？

我们可以配置 tsconfig.json文件中的 declaration 选项为 true：

{
  "compilerOptions": {
    "declaration": true, /* Generates corresponding '.d.ts' file. */
  }
}

然后执行打包命令，这样选项主要用来设置在编译时是否生成对应的 .d.ts 文件：

类型声明实战

前面我们讲了那么多类型声明相关的东西，不能光说不练嘴把式吧。下面我们来个简单的例子来练练手，给下面代码添加类型声明：

import { MyEventEmitter } from 'my-events';
const e = new MyEventEmitter;
e.on('click', function () { })
e.emit('click');
e.once('click', function () { });
e.addListener('click', function () { })
export { };

在前面讲过的 types 文件下新建 my-events 文件夹，再在这个文件下新建 index.d.ts 文件，将下面的代码粘贴过去即可。

type Type = string | symbol;
type Listener = (...args: any[]) => void;
export class MyEventEmitter {
  on(type: Type, listener: Listener): this;
  emit(type: Type, ...args: any[]): boolean;
  once(type: Type, listener: Listener): this;
  addListener(type: Type, listener: Listener):this;
}