在 TypeScript 中正确导入和使用 RequestInit 类型

本文旨在解决在 TypeScript 项目中使用 `fetch` 函数时，如何正确导入和使用 `RequestInit` 类型的问题。通过提供清晰的示例和配置指导，帮助开发者避免类型错误，并充分利用 TypeScript 的类型检查能力，编写更健壮的网络请求代码。

在使用 TypeScript 构建 Web 应用时，经常需要自定义 fetch 函数来处理网络请求。 fetch 函数的第二个参数 init 接受一个 RequestInit 类型的对象，用于配置请求的各种选项，如 headers、body、method 等。 然而，在某些情况下，开发者可能会遇到无法正确导入或使用 RequestInit 类型的问题，导致类型错误。

问题分析

RequestInit 类型是 TypeScript 内置的 DOM 类型定义的一部分。 如果你的 tsconfig.json 文件中 compilerOptions.lib 包含了 "dom" 或 "dom.iterable" 或 "esnext"，那么 TypeScript 应该能够识别 RequestInit 类型。

解决方案

1. 确认 tsconfig.json 配置:

   确保你的 tsconfig.json 文件中的 compilerOptions.lib 数组包含了 "dom" 或 "dom.iterable" 或 "esnext"。 这是最常见的导致 RequestInit 类型无法识别的原因。

   {
     "compilerOptions": {
       "target": "es5",
       "lib": ["dom", "dom.iterable", "esnext"],
       // ... 其他配置
     }
   }

2. ESLint 配置 (如果使用):

   即使 TypeScript 能够识别 RequestInit 类型，ESLint 仍然可能报错，提示 RequestInit 未定义。 这是因为 ESLint 默认情况下不会将 DOM 类型视为全局类型。

   

   Cursor

   一个新的IDE，使用AI来帮助您重构、理解、调试和编写代码。

   下载

   解决这个问题有两种方法：

   • 在 .ts 文件中添加全局声明: 在出现 RequestInit 类型错误的文件顶部添加 /* global RequestInit */ 注释。

     /* global RequestInit */
     
     export const fetchServer = async <T>(
       url: string,
       options: RequestInit = {},
     ): Promise<T> => {
       // ...
     };

   • 在 .eslintrc.js 或 .eslintrc.json 中配置 globals: 在 ESLint 配置文件中添加 RequestInit 到 globals 对象中。

     // .eslintrc.js
     module.exports = {
       // ... 其他配置
       globals: {
         RequestInit: true,
       },
     };

3. 正确使用 RequestInit 类型:

   在确认 TypeScript 和 ESLint 配置正确后，你就可以在你的代码中安全地使用 RequestInit 类型了。

   export const fetchServer = async <T>(
     url: string,
     options: RequestInit = {},
   ): Promise<T> => {
     const alteredOptions: RequestInit = {
       ...options,
       // 你的自定义代码
       headers: {
         ...options.headers,
         "Content-Type": "application/json",
       },
     };
     const rawResponse = await fetch(url, alteredOptions);
     // ...
     return rawResponse.json() as Promise<T>;
   };

   注意事项:

   • RequestInit 类型定义了 fetch 函数可以接受的各种选项，例如 method、headers、body、mode、credentials 等。
   • 你可以根据需要扩展 RequestInit 类型，添加自定义的属性。 例如，你可以定义一个 CustomRequestInit 接口，继承自 RequestInit，并添加你需要的属性。

     interface CustomRequestInit extends RequestInit {
       customProperty?: string;
     }
   
     export const fetchServer = async <T>(
       url: string,
       options: CustomRequestInit = {},
     ): Promise<T> => {
       const alteredOptions: CustomRequestInit = {
         ...options,
         customProperty: "some value",
       };
       const rawResponse = await fetch(url, alteredOptions);
       // ...
       return rawResponse.json() as Promise<T>;
     };

总结

正确配置 TypeScript 和 ESLint 是使用 RequestInit 类型的关键。 通过确保 tsconfig.json 中包含了 "dom" 或 "dom.iterable" 或 "esnext"，并在 ESLint 中正确配置 globals，你可以避免类型错误，并充分利用 TypeScript 的类型检查能力，编写更健壮的网络请求代码。 此外，理解 RequestInit 类型的结构和如何扩展它，可以让你更灵活地自定义 fetch 函数，满足你的特定需求。