[5] 类型声明文件

声明变量使用关键字declare来表示声明其后面的全局变量的类型.。

思路：包里是否自己带了，这里别人是否写过了​，好吧都没有自己写吧。

1 声明文件

• .d.ts 结尾；
• 声明文件一般为js库而生成，ts引js库必须有声明文件；
• 使用外部类库，首先看有没有声明文件，没有的话去类库先查找【2】，没有就自己写
• 自己编写的.d.ts文件直接放在项目的目录下，ts自己会去识别，不用我们做什么操作

2 社区提供的声明文件

www.typescriptlang.org/dt/search?s…
搜索：@types/***

3 自己写声明文件

创建一个 types 目录，专门用来管理自己写的声明文件，将 foo 的声明文件放到 src/modules/types/foo.d.ts 中。

这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。告诉编译器到哪里去查找模块。ts路径映射（路径别名） 和webapck resolve的alias类似。

"baseUrl": ".",
"paths": {
    "@modules/*": ["src/modules/*"]
}

3.1 全局型

关键字：declare 导出一些你用到的js变量啥的，不是自己的，是用别人的变量。

// biz-global.d.ts
declare var __POWERED_BY_QIANKUN__: boolean

declare var process: any;

declare var require: any;

declare var Owl: any;

declare var LXAnalytics: any;

3.2 npm包型 - export

3.3 npm包型 - export default

3. 4 module 拓展

模块导出声明里的名称必须通过 import/require 才能使用。

// main.ts
import cookie from 'cookie-monster';

cookie-monster 社区没有声明文件，所以我们自己写，项目里用到了它的几个api，所以声明文件里需要将它们声明下。让编辑器知道。
// external-modules.d.ts
declare module 'cookie-monster' {
    export function setItem(field: string, value: string, domain?: object): void
    export function getItem(field: string): string;
}

4 Vue项目中引用TS

Vue项目里2个必须的类型声明文件

• shims-vue.d.ts
  要用于 TypeScript 识别 .vue 文件， Ts默认并不支持导入 vue 文件，这个文件告诉 ts导入 .vue 文件都按 VueConstructor处理。
  没有这个文件，项目里所有的import 导入的文件都会报错。
• shims-tsx.d.ts
  允许你以 .tsx结尾的文件，在 Vue项目中编写 jsx代码。为了能够解析.tsx文件，对.tsx文件进行类型校验。