17370845950

本文旨在解决在 TypeScript 项目中自定义 `fetchServer` 方法时，如何正确引入并使用 `RequestInit` 类型，避免类型定义错误，并提供 ESLint 相关的配置建议，确保代码的正确性和可维护性。通过本文，你将能够掌握在 TypeScript 中使用 `fetch` API 相关类型的方法，并了解如何解决 ESLint 带来的潜在问题。

在 TypeScript 中使用 fetch API 时，RequestInit 类型用于定义 fetch 函数的可选参数，例如 headers、body 等。 然而，有时在自定义封装 fetch 方法时，可能会遇到无法正确引入 RequestInit 类型的问题，导致类型定义错误或 ESLint 报错。以下将介绍如何正确引入和使用 RequestInit 类型，并解决可能遇到的问题。

确保 tsconfig.json 中包含 "DOM"

首先，确认你的 tsconfig.json 文件中的 compilerOptions.lib 数组包含了 "DOM"。RequestInit 类型是在 DOM 标准中定义的，因此需要包含 "DOM" 才能正确识别该类型。

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

如果 "DOM" 已经存在，但仍然出现 RequestInit 未定义的错误，可能是 ESLint 的问题。

解决 ESLint 报错

即使 TypeScript 能够正确识别 RequestInit 类型，ESLint 仍然可能报错，提示 RequestInit 未定义。这通常是因为 ESLint 无法识别全局类型。有以下两种方法可以解决这个问题：

1. 使用 /* global RequestInit */ 注释

在需要使用 RequestInit 类型的 .ts 文件的顶部添加以*释：

/* global RequestInit */

export const fetchServer = async (
  url: string,
  options: RequestInit = {}, // 现在可以使用 RequestInit 类型
): Promise => {
  // ...
};

这个注释告诉 ESLint RequestInit 是一个全局变量，从而避免报错。

2. 配置 .eslintrc.js 文件

更通用的方法是在 .eslintrc.js 文件中配置 globals 属性，将 RequestInit 添加到全局变量列表中：

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

这样，ESLint 就会将 RequestInit 视为全局变量，整个项目中都不会再报错。

完整示例

下面是一个完整的示例，展示了如何正确引入和使用 RequestInit 类型，并解决 ESLint 报错：

/* global RequestInit */

export const fetchServer = async (
  url: string,
  options: RequestInit = {},
): Promise => {
  const alteredOptions: RequestInit = {
    ...options,
    headers: {
      ...options.headers,
      "Content-Type": "application/json",
    },
  };

  const rawResponse = await fetch(url, alteredOptions);

  if (!rawResponse.ok) {
    throw new Error(`HTTP error! status: ${rawResponse.status}`);
  }

  const data: T = await rawResponse.json();
  return data;
};

// 使用示例
async function fetchData() {
  try {
    const result = await fetchServer<{ message: string }>(
      "https://example.com/api/data",
      {
        method: "POST",
        body: JSON.stringify({ name: "John" }),
      }
    );
    console.log(result.message);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

fetchData();

注意事项

• 确保你的 TypeScript 版本支持 RequestInit 类型。通常情况下，较新的 TypeScript 版本都支持。
• 如果你使用了其他类型，例如 BodyInit 或 HeadersInit，也需要按照类似的方法处理 ESLint 报错。
• 在实际项目中，建议使用 .eslintrc.js 配置全局变量，避免在每个文件中添加注释。

总结

通过以上步骤，你应该能够正确引入和使用 RequestInit 类型，并解决 ESLint 报错。 关键在于确保 tsconfig.json 中包含 "DOM"，并通过注释或配置 .eslintrc.js 文件来解决 ESLint 的问题。 这样可以确保你的 TypeScript 代码能够正确编译和运行，并保持代码的清晰和可维护性。