Typescript如何基于函数参数值精准缩小函数返回类型

实现方案 #

你可以通过给useApiClient函数添加泛型约束+索引访问类型实现需求，仅需要修改函数定义部分即可，修改后代码如下：

import exampleApiResource from './resources/example';
import exampleApiResource2 from './resources/example2';
import { ApiResources } from './typings';

const apiResources: ApiResources = {
  exampleResource: exampleApiResource,
  exampleResource2: exampleApiResource2,
};

// 修改为泛型函数
export function useApiClient<T extends keyof ApiResources>(resource: T): ApiResources[T] {
  return apiResources[resource];
}

export default apiResources;

/** typings **/
export type ApiResources = {
  exampleResource: ExampleType;
  exampleResource2: ExampleType2;
};

export type ExampleType = {
  getExample: () => Promise<TestResource>;
};

export type ExampleType2 = {
  getExample2: () => Promise<TestResource>;
};

效果说明 #

• 传入字面量参数useApiClient('exampleResource')时，TypeScript会自动推导返回类型为ExampleType，可以直接调用getExample方法，不会出现类型报错
• 传入字面量参数useApiClient('exampleResource2')时，返回类型会自动推导为ExampleType2，可以直接调用getExample2方法

注意事项 #

如果传入的参数是变量而非字面量，需要给变量添加as const断言，保证变量类型是具体的字面量类型，而非宽泛的keyof ApiResources联合类型，才能正确缩小返回类型：

// 正确写法，返回ExampleType
const resourceKey = 'exampleResource' as const;
const client = useApiClient(resourceKey);

// 错误写法，返回ExampleType | ExampleType2联合类型
const resourceKey: keyof ApiResources = 'exampleResource';
const client = useApiClient(resourceKey);

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