TypeScript 的 module augmentation 扩展三方接口

[981377660LMT]

如何覆盖三方库的接口

[981377660LMT]

要覆盖第三方库的接口，可以使用 TypeScript 的模块声明（Module Augmentation）特性，通过重新声明模块并扩展其接口定义。具体步骤如下：

1. 创建一个与第三方库类型声明相关的 .d.ts 文件，例如 src/types/axios.d.ts。

2. 使用 declare module 重新声明模块，并在其中扩展或修改需要的接口。

示例：

import type { AxiosPromise, AxiosRequestConfig } from 'axios'

declare module 'axios' {
  export interface AxiosResponse<T = any> {
    code: number
    data: T
    message: string
  }

  export interface AxiosInstance {
    request<T = any>(config: AxiosRequestConfig): AxiosPromise<T>
    get<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
    delete(url: string, config?: AxiosRequestConfig): AxiosPromise
    head(url: string, config?: AxiosRequestConfig): AxiosPromise
    post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>
    put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>
    patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>
  }
}

上述代码展示了如何在 axios 模块中，扩展 AxiosRequestConfig 接口和 AxiosInstance 接口，添加自定义属性和方法。

可以看到，三方库内部的接口被扩展了

[981377660LMT]

为什么我没写typeRoots，.d.ts也生效了

[981377660LMT]

TypeScript 默认会包含项目中的所有 .d.ts 文件，无需显式指定 typeRoots。typeRoots 主要用于自定义类型声明文件的位置。如果不设置 typeRoots，TypeScript 会自动从以下位置查找类型声明：

@types

• 项目中的所有包含的文件夹（如 src）

因此，即使没有在

tsconfig.json

中配置 typeRoots，放置在项目目录下的 .d.ts 文件仍然会被识别和应用。

建议：

1. 确保 .d.ts 文件位于被包含的目录中，如 src/types。
2. **检查

tsconfig.json

的 include 设置**，确保包含了 .d.ts 文件所在的路径。例如：

   {
     "compilerOptions": {
       // 其他配置
     },
     "include": ["src/**/*"]
   }

3. 重启 IDE 或 TypeScript 服务，以确保类型声明生效。

这样，TypeScript 会自动识别并应用你的类型覆盖，无需额外配置 typeRoots。