Declare：有声明更智能，更高效省心 ​

声明文件是什么？ ​

有什么用？ ​

声明文件，就是批量声明变量类型的文件。必须以.d.ts结尾。
作用：就是给 js 代码补充类型标注。这样在 ts 编译环境下，就不会提示 js 文件"缺少类型"。

应该放在哪里？ ​

网友断案说，任意路径/文件名，ts 编译器都可以识别。
但为了避免后期一些可能的奇怪问题，推荐放在根目录下。

@types/xxx ​

一般情况下，著名的 js 库，都已经有大佬在npm 包库的@types包下，写好了声明文件的。我们安装一下，拿来就用。比如 jQuery。安装完成后，可以在node_modules/@types/jquery看到声明文件。

npm i @types/jquery

如果@types包下没有相关的声明文件，那就得我们自己下手了。

怎么写全局声明文件？ ​

declare ​

declare声明全局变量类型。

// global.d.ts
declare var count: number;
declare let name: string;
declare const info: object;
declare function nanZhi(msg: string): number;
declare enum boxer {
  top,
  right,
  bottom,
  left,
}

declare namespace ​

namespace后面的全局变量是一个自定义对象。

declare namespace bianCheng {
  var id: number;
  var city: string;
  var codeDay: (msg: string) => object;
}

修改已有的全局声明 ​

安装typescript时, 会自带一些系统变量的声明文件, 在node_modules/typescript/lib下。
例：为node下的global String添加属性声明。

declare global {
  interface String {
    nanzhi(input: string): string;
  }
}

怎么写模块声明文件？ ​

declare module 扩展模块声明 ​

已有的库包已经存在声明文件，那怎么扩展声明？ 如下为Vue添加$fanyi新属性的类型声明：

declare module "vue" {
  interface ComponentCustomProperties {
    $fanyi: (key: string) => string;
  }
}

对非 ts/js 文件模块进行类型扩充 ​

ts只支持模块的导入导出。那css/html等文件怎么办呢？这时候就需要用通配符，让ts把他们当做模块。 如下为Vue官方对.vue文件的支持：

// global.d.ts
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

声明把vue文件当做模块, 同时标注模块的默认导出是component类型。这样在vue的components字段中注册模块才可以正确识别类型。

【参考资料】