.d.ts

当我们在TS文件中需要引入外部库时，编译时是无法判断传入参数的类型的，所以我们需要在引入前加入一个声明文件来帮助ts判断类型。

当然现在大部分库都自带有自己的声明文件，一般在@types目录下。

声明语法

声明全局变量

通过declare let/const声明全局变量

声明全局方法

通过declare function声明全局方法

声明全局类

通过declare class声明全局类

声明全局枚举

通过declare enum声明全局枚举

声明全局对象

通过declare namespace声明全局对象

声明全局类型

通过interface/type声明全局类型。interface/type前面不需要加declare, 因为编译后的JavaScript文件是不能识别interface/type的，所以加上declare也没有意义。

声明全局模块

声明自定义模块

定义模块
declare module "TestModule" {
    type BarType = string | number;
    interface ObjType {
        name:string;
        age:number;
    }
    interface FunType{
        (argu:string):string
    }
    interface FunLinkType{
        fun:(argu:string) => FunLinkType;
    }
}

使用模块
import TestModule from 'TestModule'

const num:TestModule.BarType = 3;
const obj:TestModule.ObjType = {
   name:'哈哈',
   age:23
}
const foo:TestModule.FunType = function(argu){
   return argu;
}
foo('哈哈')


const fooLink:TestModule.FunLinkType = {
   fun(argu){
       return fooLink;
   }
}
fooLink.fun('哈哈').fun('嘻嘻');

使用方法

在声明文件tsconfig.json的include/files字段下添加声明文件的路径;

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", ".eslintrc.js", "*.ts"],

使用场景

在ts文件中对引用的外部库做类型判断；

::: warning 注意

声明文件一般只能声明外部引入的npm包；
声明文件一定要用declare module 'vue'显式的声明自己的外部库名称； :::

:::details *.d.ts 声明 vue 库

declare module '*.vue' {
    import type { DefineComponent } from 'vue';

    const component: DefineComponent<{}, {}, any>;
    export default component;
}

:::

:::details *.d.ts 声明 loader 库

declare module 'slash2';
declare module '*.css';
declare module '*.less';
declare module '*.scss';
declare module '*.sass';
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.md';
declare module '*.json';
declare module '*.woff';
declare module '*.ttf';

:::

制作npm包时，书写自己的声明文件，需要在package.json的typing/types字段注册声明文件的路径；
不使用ts时，也可以添加声明文件与（自己的）的模块存放在同一目录下，简单做一下数据结构体，对IDE参数声明也有用哦；

:::details *.d.ts 声明项目数据类型
```
interface ResponseData {
    code: number;
    msg?: string;
    data?: string | number | [];
}

interface User {
    id: number;
    name: string;
    avatar: string;
}
```
:::

声明语法​

声明全局变量​

声明全局方法​

声明全局类​

声明全局枚举​

声明全局对象​

声明全局类型​

声明全局模块​

使用方法​

使用场景​