类型定义文件
参考:巧妙利用TypeScript模块声明帮助你解决声明拓展
参考:JavaScript 和 TypeScript 交叉口 —— 类型定义文件(*.d.ts)
简介
为了给js文件添加类型,以及给第三方库扩展类型,typescript推出了.d.ts文件类型,这里面是不能有具体实现的。当你引入一个js文件时,tsc会自动寻找同目录下同名的.d.ts文件,用于静态类型分析, 当然你没有这个.d.ts文件,tsc也不会有啥异常,但ts的核心功能——静态类型判断,就没了
常见应用
为项目中的js添加类型定义 - 新建一个同名的.d.ts文件,放在同一个目录下(我的猜测:如果不放在同一目录或者名字不一样,tsc不能判断这个.d.ts文件是对应js的定义文件)
参考官方定义文件:Module: Function
扩展npm库中的类型定义 - 新建一个任意命名的.d.ts文件,放在项目任意目录中,tsconfig.json中没有配置相关路径的话,默认加载项目所有.d.ts文件
ts// 扩展axios,需要有个import或者export语句,这样才是定义模块类型,没有的话就是定义全局类型,会导致覆盖掉npm中的类型定义 export {} declare module 'axios' { // 模块内的接口声明会自动合并 interface AxiosRequestConfig { showLoading: boolean; // 是否显示全局loading } }
全局定义文件
全局定义就是给全局变量添加类型定义,全局变量的使用是不需要导入的
如果在.d.ts文件中没有任何的import, export语句, 那么所有的declare定义都被认为是全局定义,比如你没有安装@types/jquery, 那么如何手动添加jquery的类型定义,如下: 添加一个.d.ts文件,放在项目任意目录下
// global.d.ts
declare function $(selector: string): {html(str: string): void}
如何在有import,export语句的文件中定义全局类型呢?
declare global {
declare function funA(): void;
}
.d.ts文件的查找
在没有tsconfig.json文件的时候,需要手动通过reference的形式指定如何查找对应的声明文件
// 通过typescript的三斜杠形式,引入对应的.d.ts文件
/// <reference path="global.d.ts" />
type a = MyGlobalClass
$('#app').html('<p>你好,.d.ts</p>')
console.log(myGlobalVariable);
myGlobalFunction();
console.log(myGlobalObject.prop);
const myObject = new MyGlobalClass('John');
myObject.sayHello();
如果项目中有tsconfig.json后,可以设置一个空的tsconfig.json,那么其中的include会默认包含整个项目所有的.ts和.d.ts文件, 所以就不再需要通过reference引入声明文件了
// tsconfig.json
{
"compilerOptions": {
"target": "ES6"
},
}