TypeScript如何根据动态字符串转换API响应类型

要实现调用请求函数时，根据传入的类型字符串自动匹配对应返回类型，需要从类型约束和泛型推断两方面调整代码：

1. 定义合法的请求参数类型 #

首先约束apiType必须是ResponseTypes中存在的类型键，确保传入的类型字符串合法：

import * as ResponseTypes from './types';

// 约束apiType只能是ResponseTypes中已定义的类型键
type RequestObj = {
  APIURL: string;
  apiType: keyof typeof ResponseTypes;
};

2. 给request函数添加泛型绑定 #

通过泛型将apiType的类型和返回值类型关联，让TypeScript能准确推断返回类型：

export const request = async <T extends keyof typeof ResponseTypes>({ APIURL, apiType }: RequestObj) => {
  // 补充原代码缺失的headers和postBody定义（根据实际业务调整）
  const headers = { 'Content-Type': 'application/json' };
  const postBody = {};

  return fetch(`${APIURL}/`, {
    method: 'POST',
    headers,
    body: JSON.stringify(postBody),
  })
    .then((response) => {
      // 增加响应状态校验，避免无效数据流入后续逻辑
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.json();
    })
    .then((responseJson) => {
      // 类型断言为指定的ResponseTypes成员
      return responseJson as ResponseTypes[T];
    })
    .catch((error) => {
      console.error('请求捕获错误', error);
      throw error; // async函数直接抛出错误即可，无需Promise.reject
    });
};

3. 调用时的自动类型推断 #

现在调用request时，传入合法的apiType字符串，TypeScript会自动推断返回值的类型：

// 调用示例
const userData = await request({ APIURL: '..api.com/user', apiType: 'UserType' });
// userData会被自动推断为ResponseTypes.UserType类型，可直接访问对应属性
const email = userData.email;

关键说明 #

• 泛型T绑定了apiType的类型，确保返回值类型和传入的类型字符串严格对应；
• keyof typeof ResponseTypes限制了apiType的可选值，避免传入不存在的类型字符串；
• 原代码中冗余的Promise.resolve/Promise.reject可简化，因为async函数本身会返回Promise。

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