TypeScript构造函数泛型解析：类型匹配问题求助

class Variable<T> {
  constructor(private array: T[]) {}

  fill(length: number, value: T) {
    this.array.length = length;
    this.array.fill(value);
  }

  valueAt(index: number) {
    return this.array[index];
  }

  updateAt(index: number, value: T) {
    this.array[index] = value;
  }
}

class NumericVariable extends Variable<number> {
  // 一些数值相关的专属方法
}

class StringVariable extends Variable<string> {
  // 一些字符串相关的专属方法
}

class Reducer<T, U> {
  variable: Variable<U>;

  constructor(
    private length: number,
    private initialfn: () => U,
    private reducefn: (prev: U, next: T) => U
  ) {
    const type = typeof initialfn();

    this.variable = 
      type === "number" ? new NumericVariable([]) : new StringVariable([])
    // ^ Type 'NumericVariable | StringVariable' is not assignable to type 'Variable<U>'.

    this.variable.fill(length, initialfn());
  }

  clear() {
    this.variable.fill(this.length, this.initialfn());
  }

  updateAt(index: number, newValue: T) {
    const { variable, reducefn } = this;
    const updatedValue = reducefn(variable.valueAt(index), newValue);
    variable.updateAt(index, updatedValue);
  }
}

解决方案：建立类型与构造函数的显式映射 #

TypeScript编译器无法自动将条件分支中的具体类实例与泛型参数的约束关联起来，核心原因是运行时类型检查和编译时泛型类型是割裂的。我们可以通过构造函数映射表的方式，让编译器明确类型与实例的对应关系，无需使用as unknown as Foo<T>这类强制断言。

针对场景1的实现 #

type Foo<T> = { getValue(): T };

class NumberFoo implements Foo<number> {
  constructor(private value: number) {}
  getValue() {
    return this.value * 10;
  }
}

class StringFoo implements Foo<string> {
  constructor(private value: string) {}
  getValue() {
    return this.value + "!";
  }
}

// 定义泛型构造函数类型，约束构造函数参数和返回值
type FooConstructor<T> = new (value: T) => Foo<T>;

// 创建类型到构造函数的映射表
const fooConstructors: {
  number: FooConstructor<number>,
  string: FooConstructor<string>
} = {
  number: NumberFoo,
  string: StringFoo
};

class Bar<T extends string | number> {
  foo: Foo<T>;

  constructor(value: T) {
    // 通过typeof value作为索引，编译器能推断出对应的构造函数返回Foo<T>
    const constructor = fooConstructors[typeof value as keyof typeof fooConstructors];
    this.foo = new constructor(value);
  }
}

针对场景2的实现 #

class Variable<T> {
  constructor(private array: T[]) {}

  fill(length: number, value: T) {
    this.array.length = length;
    this.array.fill(value);
  }

  valueAt(index: number) {
    return this.array[index];
  }

  updateAt(index: number, value: T) {
    this.array[index] = value;
  }
}

class NumericVariable extends Variable<number> {
  // 一些数值相关的专属方法
}

class StringVariable extends Variable<string> {
  // 一些字符串相关的专属方法
}

// 定义泛型构造函数类型
type VariableConstructor<U> = new (array: U[]) => Variable<U>;

// 创建类型到构造函数的映射表
const variableConstructors: {
  number: VariableConstructor<number>,
  string: VariableConstructor<string>
} = {
  number: NumericVariable,
  string: StringVariable
};

class Reducer<T, U extends number | string> {
  variable: Variable<U>;

  constructor(
    private length: number,
    private initialfn: () => U,
    private reducefn: (prev: U, next: T) => U
  ) {
    const initialValue = initialfn();
    // 用initialValue的类型作为索引，获取对应构造函数
    const constructor = variableConstructors[typeof initialValue as keyof typeof variableConstructors];
    this.variable = new constructor([]);
    this.variable.fill(length, initialValue);
  }

  clear() {
    this.variable.fill(this.length, this.initialfn());
  }

  updateAt(index: number, newValue: T) {
    const { variable, reducefn } = this;
    const updatedValue = reducefn(variable.valueAt(index), newValue);
    variable.updateAt(index, updatedValue);
  }
}

关键原理 #

通过映射表的方式，我们给TypeScript编译器提供了一个明确的类型-构造函数对照表。当我们用typeof value或者typeof initialValue作为索引访问映射表时，编译器能将这个运行时类型检查的结果与泛型参数T/U的编译时类型约束关联起来，从而自动推断出构造函数返回的实例类型完全匹配Foo<T>或Variable<U>，无需额外断言。

之前尝试的类型守卫之所以无效，是因为类型守卫只能缩小具体值的类型范围，无法直接将这个缩小结果与泛型参数的约束绑定，而映射表则建立了这种绑定关系。

内容的提问来源于stack exchange，提问作者Adam B.