TS：.d.ts 文件和 declare 的作用-Toy模板网

这篇具有很好参考价值的文章主要介绍了TS：.d.ts 文件和 declare 的作用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先说一下我对 .d.ts文件和 declare 的理解，.d.ts文件和 declare 都是用来做外部声明的，而 .d.ts 文件做外部声明是 declare 做外部声明的简化形式。

备注：
我理解外部声明就是声明全局类型、变量或者模块，可以直接使用而不用去 import 或者 import type 相应的变量或者类型。

1 declare 做外部声明

如果 types.ts 文件在 ts 编译范围内的情况下，在 types.ts 文件中，通过 declare 声明的变量、类型或者模块是全局性的，即，可以在不导入类型的情况下直接使用。

1. 何为 types.ts 文件在 ts 编译范围内的情况下？
在 TS 配置文件（tsconfig.js）中，通过 include 选项设置的编译范围内包含 types.ts 文件。
2. 用 declarre 声明的变量、类型或者模块不能全局使用的情况？
types.ts 文件不能是模块，即，文件内不用有导入/导出语句（import，import type，export，export type）。如果文件中包含导入导出语句，types.ts 文件中的声明将失去全局性，必须导出声明，并在使用时先导入，否则会报错。

1.1 声明外部类型

// ajax 请求方式
declare type AjaxType = 'GET' | 'POST' | 'DELETE' | 'PUT' | 'PATCH';

1.2 声明外部模块

1.2.1 解决引入资源模块报错

declare module '*.css';
declare module '*.scss';
declare module '*.png';

此例中，不对导入的资源模块进行类型检查。如果不进行以上声明，导入 css/less/png 等资源文件时会提示编译错误。

1.2.2 跳过对第三方库的类型检查

declare module 'jquery';

如果想要使用一些用js 编写的第三方库，可以通过声明外部模块，跳过对第三方库的类型检查
此例中，jquery模块中所有成员的类型都成了any类型，这等同于不对jQuery进行类型检查。

1.3 声明外部变量

declare var a: boolean;
declare let b: boolean;
declare const c: boolean;

如果外部变量声明中没有使用类型注解，那么变量的类型为 any类型。

这个什么情况下会用到呢？假如我在项目中引入了一个sdk，这个sdk（我们以微信的sdk为例）里面有一些全局的对象（比如wx），但是如果不经过任何的声明，在ts文件里面直接用wx.config()的话，肯定会报错。

declare就是告诉 TS编译器你担保这些变量和模块存在，并声明了相应类型，编译的时候按照声明的类型进行类型检查，如果没有声明类型，默认是 any 类型。

1.4 声明外部命名空间（作用域）

declare namespace API {
     var a: boolean;
     let b: boolean;
     const c: boolean;
     function foo(bar: string, baz: boolean): void;
}

外部命名空间的成员默认为导出成员，不需要使用export关键字来明确地导出它们，但使用了export关键字也没有错误。

声明完之后在其他 ts文件中，就可以直接 API.xxx 引用。

2 .d.ts 文件做外部声明

和 declare 做外部声明一样， .d.ts 文件（例如：types.d.ts）在 ts 编译范围内，且 .d.ts 文件不是模块的情况下，文件中声明的变量、类型或者模块都是外部声明。只不过在 .d.ts 文件中的声明可以省略 declare。

// types.d.ts文件中
type PlainObjectType<T = any> = { [propType: string]: T };
// declare type PlainObjectType<T = any> = { [propType: string]: T };

以上两种声明，都是外部声明，效果相同。

注意：
1. .d.ts 文件提供的声明仅在编译阶段有效
.d.ts 文件中只提供类型声明，不提供任何值，如字符串和函数实现等，在编译TypeScript程序的过程中，.d.ts文件不会生成对应的 .js文件。
2. .d.ts 文件不能是模块
.d.ts 文件不能是模块，即，文件内不用有导入/导出语句（import，import type，export，export type）。如果文件中包含导入导出语句，.d.ts 文件中的声明将失去全局性，必须导出声明，并在使用时先导入，否则会报错。

3 declare global {} 在模块中做外部声明

使用 declare global {} 可以实现在模块中做外部声明。以下示例中：
MainMenuType 类型就是外部接口类型，在其他模块中不用引入就可以直接使用。
UserType 类型在其他模块中需要引入才能使用。文章来源地址https://www.toymoban.com/news/detail-786397.html

import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';

declare global {
  interface MainMenuType {
    eventCode: string,
    businessCode: string,
    menuOrder: number,
    icon: string,
    menuId: string,
    menuPid: string,
    isMultiple: boolean,
    menuName: string,
    menuType: string,
    menuGroup: string,
    menuAttestWay: string,
    children?: MainMenuType[]
  }
}

export interface UserType {
  common: PlainObjectType,
  mainMenus: MainMenuType[],
  [key: string]: any
}