推断方法子类的正确返回类型

Question

我有以下类层次结构

TypeScript Playground

export abstract class AbstractControlModel<T> { ... }

export class FormArrayModel<T = any> extends AbstractControlModel<T[]> {
  constructor(private readonly _controls: AbstractControlModel<T>[] = []) { ... }

  findControl<E extends AbstractControlModel<T> = FormControlModel<T>>(index: number): E {
    if (!(index in this._controls))
      throw new Error(`Index "${index}" does not exist in this form array `);
    return this._controls[index] as E;
  }
}

export class FormGroupModel<T> extends AbstractControlModel<T>
  constructor(private _controls?: { [E in keyof T]: AbstractControlModel<T[E]> }) { ... }

  findControl<K extends keyof T>(name: K) {
    return this.controls.get(name);
  }

我创建了一个FormGroupModel 对象

const formGroup = new FormGroupModel({
    fullName: new FormControlModel('Hello World'), // Inferred type is FormControlModel<string>,
    addresses: new FormArrayModel([ // Inferred type is FormArrayModel<{street: string; city: string;}>
        new FormGroupModel({ // Inferred type is FormGroupModel<{street: string; city: string}>
            street: new FormControlModel('123 Street'),
            city: new FormControlModel('City')
        })
    ])
});

const fullNameControl = formGroup.findControl('fullName'); // The returned type is AbstractControlModel<any> instead of FormControlModel<string>

当我在上面的formGroup 变量上调用findControl 时，我希望TypeScript 返回一个FormControl<string> 类型的对象，而不是AbstractControl<any>。我应该如何更改声明以实现这一目标。非常感谢任何帮助。

Answer 1

正如目前所写，controls 的类型具体定义为 {[K in keyof T]: AbstractControl<T[K]>}，这意味着获取该类型上的键 K 不会为您提供所使用的实际值/类的准确类型信息，但是抽象类型，所以你得到的是any 或unknown。

相反，您应该将controls 的类型设为泛型，从该类型扩展，如下所示：

class FormGroup<T, C extends {[K in keyof T]: AbstractControl<T[K]>}> extends AbstractControl<T> {
    constructor(private controls: C) { ... }

    findControl<K extends keyof C>(name: K) {
        return this.controls[name];
    }
}

注意controls 的类型是新的泛型C，findControl 需要C 的键，而不是T。这应该允许 TypeScript 正确确定返回类型：

const formGroup = new FormGroup({
    fullName: new FormControl('Hello World'),
    addresses: new FormArray([
        new FormGroup({
            street: new FormControl('123 Street'),
            city: new FormControl('City')
        })
    ])
})

// Correctly inferred as FormControl<string>
const fullNameControl = formGroup.findControl('fullName')

Playground Link，将...s 替换为super()，这样类型检查器就不会报错。

Answer 2

我建议将通用 T 设为 controls 的类型，并从中计算“普通”版本，反之亦然。像这样的：

class FormGroup<T extends Record<keyof T, AbstractControl<any>>> extends
  AbstractControl<{ [K in keyof T]: T[K] extends AbstractControl<infer V> ? V : never }> {

  constructor(private controls: T) { super() }

  findControl<K extends keyof T>(name: K) {
    return this.controls[name];
  }
}

这里，普通版本是{[K in keyof T]: T[K] extends AbstractControl<infer V> ? V : never}，意思是你遍历每个控件，看看它代表什么类型。

您也可以对FormArray 做类似的事情：

class FormArray<T extends AbstractControl<any>[]> extends
  AbstractControl<T[number] extends AbstractControl<infer V> ? V[] : never> {
  constructor(private controls: T) { super() }

  findControl<N extends number>(index: N) {
    return this.controls[index];
  }
}

现在您的示例如下所示：

const formGroup = new FormGroup({
  fullName: new FormControl('Hello World'),
  addresses: new FormArray([
    new FormGroup({
      street: new FormControl('123 Street'),
      city: new FormControl('City')
    })
  ])
});

const fullNameControl = formGroup.findControl('fullName'); // FormControl<string>

甚至

const cityControl = formGroup.findControl('addresses').findControl(0)
  .findControl("city"); // FormControl<string>

好的，希望对您有所帮助；祝你好运！

Link to code