如何修复React+TypeScript中fetch的RequestCredentials类型不匹配错误

我是Vite环境下学习React+TypeScript的初学者，编写了一个发送fetch请求的注册函数。此前因拼写错误将credentials写成credential，导致Chrome开发者工具网络面板中未记录服务器返回的Cookie，修正拼写后功能正常，但出现了TypeScript错误：

Argument of type '{ method: string; headers: { "Content-Type": string; }; body: string; credentials: string; }' is not assignable to parameter of type 'RequestInit'.
Types of property 'credentials' are incompatible.
Type 'string' is not assignable to type 'RequestCredentials | undefined'.

以下是我的代码：

import { RegisterProps } from "../pages/Register";

export const register = async (formData: RegisterProps) => {
  const API_URI = import.meta.env.VITE_BASE_URL;
  //specify the options
  const option = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(formData),
    credentials: "include",
  };
  //fetch request
  const response = await fetch(`${API_URI}/apiv1/auth/register`, option);
  //data response form the server
  const data = await response.json();
  if (!response.ok) {
    throw new Error(data.message);
  }
};

修复方案 #

问题根源是TypeScript对credentials字段的类型推断过宽：你写的"include"被推断为通用string类型，但RequestInit接口要求credentials必须是RequestCredentials类型——它的可选值仅为"include"、"same-origin"、"omit"这三个特定字符串字面量。

你可以用以下任意一种方式修复：

• 显式指定option的类型为RequestInit
  直接给变量添加类型注解，强制TypeScript按照RequestInit的规则校验：

const option: RequestInit = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(formData),
  credentials: "include",
};

• 用as const缩小类型范围
  给credentials的值加上as const，告诉TypeScript该值是固定的字符串字面量，而非宽泛的string：

const option = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(formData),
  credentials: "include" as const,
};

• 单独定义符合类型的credentials变量
  先声明一个类型为RequestCredentials的变量，再赋值给option：

const credentials: RequestCredentials = "include";
const option = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(formData),
  credentials,
};

以上三种方法都能让TypeScript正确识别credentials的类型，消除错误提示。

内容的提问来源于stack exchange，提问作者Aldrin Torion