TypeScript类型校验问题：如何让Methods接口方法返回统一类型？

问题描述 #

定义了如下TypeScript接口与类型，编写的testFn函数接收该接口作为参数，意图校验方法类型并返回对应类型，但当前写法下返回类型始终为unknown，需要改写类型定义，使getMethod和getItemMethod拥有相同的关联返回类型：

type GetMethod<T> = () => Promise<T[]>
type GetItemMethod<T> = () => Promise<T>

interface Methods<T = unknown> {
  getMethod: GetMethod<T>;
  getItemMethod?: GetItemMethod<T>;
}

type CheckTypes<Options extends Methods> =
  Options['getMethod'] extends Function
    ? ValuesType<Awaited<ReturnType<Options['getMethod']>>>
    : unknown

function testFn<Options extends Methods>(props: Methods<CheckTypes<Options>>): CheckTypes<Options> {
  return props
}

type Fn1 = () => Promise<{ test: 1 }>
type Fn2 = () => Promise<{ test: 2 }[]>
const fn1: Fn1 = () => {}
const fn2: Fn2 = () => {}

const fData = testFn({
  getItemMethod: fn1,
  getMethod: fn2,
})

问题分析 #

1. 原CheckTypes中使用的ValuesType并非TypeScript内置类型，导致类型提取失败；
2. testFn的泛型约束与参数类型设计不合理，无法正确推导关联的T类型；
3. 返回语句return props存在类型不兼容问题：props是Methods<T>类型，而返回类型声明为T。

解决方案 #

方案一：从参数中自动推导关联类型 #

通过提取getMethod返回数组的元素类型，自动关联getItemMethod的返回类型，并修正返回语句的类型匹配：

type GetMethod<T> = () => Promise<T[]>
type GetItemMethod<T> = () => Promise<T>

interface Methods<T = unknown> {
  getMethod: GetMethod<T>;
  getItemMethod?: GetItemMethod<T>;
}

// 从传入的Methods中提取关联的T类型
type ExtractAssociatedType<Options extends Methods> = 
  Awaited<ReturnType<Options['getMethod']>>[number];

function testFn<Options extends Methods>(props: Options): ExtractAssociatedType<Options> {
  // 实际场景中可根据需求返回符合T类型的值，此处用类型断言占位
  return {} as ExtractAssociatedType<Options>;
}

// 测试代码
type Fn1 = () => Promise<{ test: 1 }>
type Fn2 = () => Promise<{ test: 2 }[]>
const fn1: Fn1 = async () => ({ test: 1 });
const fn2: Fn2 = async () => [{ test: 2 }];

// 类型不匹配时会报错：getItemMethod的返回类型与getMethod的T不兼容
// const fData = testFn({
//   getItemMethod: fn1,
//   getMethod: fn2,
// });

// 正确用法：两个方法的返回类型关联一致
const fn3 = async () => ({ test: 3 });
const fn4 = async () => [{ test: 3 }];
const fData2 = testFn({
  getItemMethod: fn3,
  getMethod: fn4,
}); // fData2类型推导为 { test: 3 }

方案二：显式约束泛型参数T #

直接将T作为泛型参数，强制要求传入的props符合Methods<T>，确保两个方法的返回类型一致：

type GetMethod<T> = () => Promise<T[]>
type GetItemMethod<T> = () => Promise<T>

interface Methods<T = unknown> {
  getMethod: GetMethod<T>;
  getItemMethod?: GetItemMethod<T>;
}

function testFn<T>(props: Methods<T>): T {
  return {} as T;
}

// 测试代码
type Fn1 = () => Promise<{ test: 1 }>
type Fn2 = () => Promise<{ test: 2 }[]>
const fn1: Fn1 = async () => ({ test: 1 });
const fn2: Fn2 = async () => [{ test: 2 }];

// 类型不匹配时直接报错
// const fData = testFn({
//   getItemMethod: fn1,
//   getMethod: fn2,
// });

// 正确用法
const fn3 = async () => ({ test: 3 });
const fn4 = async () => [{ test: 3 }];
const fData2 = testFn({
  getItemMethod: fn3,
  getMethod: fn4,
}); // fData2类型为 { test: 3 }

关键改动说明 #

• 替换了原CheckTypes的类型提取逻辑，使用TypeScript内置的Awaited和数组索引类型[number]获取关联的T类型；
• 调整泛型约束逻辑，确保getMethod和getItemMethod的返回类型自动关联或显式约束为同一T；
• 修正了返回语句的类型不兼容问题，使返回值类型与声明一致。

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