TypeScript 中有没有办法从扩展固定接口的泛型中获取类型？

Question

问题是：

我有一个类，它有一些方法可以进行特定的 api 调用。此类获取作为构造函数参数的接口，其中有一组方法用于将 API 响应转换为其他内容。但是从API类的角度来看，没有必要知道transformer的实现，这样就可以以任何方式实现transformer。我想做的是在实例化所有内容后知道返回的类型。

所需行为的代码示例

type SomeObj = {
  stringKey: string;
  numberKey: number;
}

type SomeOtherObj = {
  stringKey: string;
  numberKey: number;
}

function fetch1() {
  return { stringKey: 'stringKey', numberKey: 2 }
}

function fetch2() {
  return { stringKey: 'stringKey', numberKey: 2 }
}

interface IATransformer {
  transformResOne: (res1: SomeObj) => any;
  transformResTwo: (res2: SomeOtherObj) => any;
}

class ATransformer {
  transformResOne(res1: SomeObj): string {
    return res1.stringKey
  }
  transformResTwo(res2: SomeOtherObj): number {
    return res2.numberKey;
  }
}

interface IA<T extends ATransformer> {
  getOne: (param: string) => any; // Not "any" but something from the generic
  getTwo: (param2: string) => any; // Not "any" but something from the generic
}

class A<T extends ATransformer> implements IA<T> {
  constructor(
    private readonly transformer: T
  ) { }

  // Return type doesn't work in this way but don't know how to sobstitute it
  getOne(param: string): ReturnType<this.transformer.getOne> {
    const res = fetch1()
    return this.transformer.transformResOne(res)
  }

  // Return type doesn't work in this way but don't know how to sobstitute it
  getTwo(param2: string): ReturnType<this.transformer.getTwo> {
    const res = fetch2();
    return this.transformer.transformResTwo(res)
  }
}

const transformer = new ATransformer();
// Generic is inferred from the parameter
const a = new A(transformer);

// Desired result ---> ERROR: the type returned from the function is not number but string
const resOneResult: number = a.getOne('Some string')

我已经尝试过使用泛型，我的最佳猜测是这样的：

class A implements IA {
  constructor(
    private readonly transformer: IATransformer
  ) { }

  getOne(param: string): ReturnType<typeof this.transformer.transformResOne> {
    const res = fetch1()
    return this.transformer.transformResOne(res)
  }

  getTwo(param2: string): ReturnType<typeof this.transformer.transformResTwo> {
    const res = fetch2();
    return this.transformer.transformResTwo(res)
  }
}

当然不行！

Answer 1

给定一个扩展IATransformer的泛型类型T，T类型的transformResOne()方法的返回类型可以写成ReturnType<T['transformResOne']>，使用the ReturnType utility type得到返回类型，而T[K]indexed access operator 获取T 的成员的类型，键为"transformResOne"。 transformResTwo 也可以做类似的声明。这意味着我们可以像这样定义IA 和A：

interface IA<T extends IATransformer> {
  getOne: (param: string) => ReturnType<T['transformResOne']>;
  getTwo: (param2: string) => ReturnType<T['transformResTwo']>;
}

class A<T extends IATransformer> implements IA<T> {
  constructor(
    private readonly transformer: T
  ) { }

  getOne(param: string): ReturnType<T['transformResOne']> {
    const res = fetch1()
    return this.transformer.transformResOne(res)
  }

  getTwo(param2: string): ReturnType<T['transformResTwo']> {
    const res = fetch2();
    return this.transformer.transformResTwo(res)
  }
}

这应该可以如你所愿：

const transformer = new ATransformer();
const a = new A(transformer);
const resOneResult: number = a.getOne('Some string'); // error!
// Type 'string' is not assignable to type 'number'

---

但是，请注意，在 A 的实现中，编译器不能真正遵循这种涉及 conditional type （如 ReturnType）的高阶类型杂耍，这取决于未解析的 generic 类型参数，如 @987654343 @。

相反，它需要一些捷径，例如推断this.transformer.transformResOne(res) 返回的结果与IATransformer 的transformResOne(res) 方法所做的相同，即the any type。 any 类型是故意松散的，因此如果您使用不当，编译器不会注意到或警告您：

getOops(param2: string): ReturnType<T['transformResTwo']> {
  const res = fetch2();
  return this.transformer.transformResOne(res); // no error, inferred as any
}

所以你必须小心这样的实现。

---

如果你想确保更多的类型安全，我建议尽可能避免使用这种条件类型。一种仍然允许良好类型推断的方法是重构以使返回类型 T1 和 T2 中的所有内容都通用：

interface IA<T1, T2> {
  getOne: (param: string) => T1;
  getTwo: (param2: string) => T2;
}

interface IATransformer<T1, T2> {
  transformResOne: (res1: SomeObj) => T1;
  transformResTwo: (res2: SomeOtherObj) => T2;
}

class A<T1, T2> implements IA<T1, T2> {
  constructor(
    private readonly transformer: IATransformer<T1, T2>
  ) { }

  getOne(param: string) {
    const res = fetch1()
    return this.transformer.transformResOne(res)
  }

  getTwo(param2: string) {
    const res = fetch2();
    return this.transformer.transformResTwo(res)
  }

  getOops(param2: string): T2 {
    const res = fetch2();
    return this.transformer.transformResOne(res); // error!
  }
}

正如您所提到的，您可能不想为具有大量类型参数的东西执行此操作，但您可以看到编译器在捕获错误和推断类型方面要好得多（您甚至不必注释getOne() 和 getTwo()) 的返回类型。让我们确保它仍然有效：

const transformer = new ATransformer();
const a = new A(transformer);
const resOneResult: number = a.getOne('Some string'); // error!
// Type 'string' is not assignable to type 'number'

看起来不错！

Playground link to code