如何为返回函数的参数定义类型以约束axios服务的请求配置

问题原因 #

你当前的类型定义仅约束了fetchOne函数的入参格式和返回值类型，TypeScript不会反向推导函数内部调用fetch实例时的入参类型，因此你传入任意AxiosRequestConfig都不会触发类型校验。

解决方案 #

有三种常用的实现方案，均可强制校验传入的配置是否符合TFetchOneConfig要求：

方案1：显式标注配置变量类型 #

在调用fetch前先定义配置变量，显式指定其类型为TFetchOneConfig，如果配置不符合要求会直接在变量定义阶段报错：

const AccountService: Service = {
  fetchOne: (id) => {
    const config: TFetchOneConfig = { 
      url: `/accounts/${id}`, 
      // 如果此处写 method: 'POST' 会直接触发TS类型错误
      method: 'GET' 
    };
    return fetch(config);
  }
};

方案2：调用时添加类型断言 #

通过类型断言显式要求传入的配置符合TFetchOneConfig规范，如果配置项不匹配会直接触发类型错误：

const AccountService: Service = {
  fetchOne: (id) => fetch({ 
    url: `/accounts/${id}`, 
    method: 'GET' 
  } as TFetchOneConfig),
};

方案3：预封装带类型约束的请求函数 #

如果有多处相同类型的请求需求，可以提前封装专用的请求函数，避免每次重复声明类型：

// 预先封装仅接受TFetchOneConfig配置的请求函数
const fetchGet = (config: TFetchOneConfig) => fetch(config);

// 调整TFetchOne的返回值类型
type TFetchOne = (id: number) => ReturnType<typeof fetchGet>;

interface Service {
  fetchOne: TFetchOne;
}

// 实现时自动触发类型校验
const AccountService: Service = {
  fetchOne: (id) => fetchGet({ url: `/accounts/${id}`, method: 'GET' }),
};

内容的提问来源于stack exchange，提问作者Jacob Godin