Angular类型问题：TypeScript为何不允许组件子类赋值给父类？

问题背景 #

我基于Angular开发了两个组件AngleEditorComponent和TimeEditorComponent，二者共享大量外观与行为逻辑，因此将共性逻辑提取到抽象父类DigitSequenceEditorDirective<T>中：

抽象父类代码 #

@Directive({ standalone: true })
export abstract class DigitSequenceEditorDirective<T> implements
    AfterViewInit, ControlValueAccessor, OnInit, OnDestroy, Validator {
  // 共性逻辑实现
}

子类代码 #

@Component({
  selector: 'tbw-angle-editor',
  animations: [BACKGROUND_ANIMATIONS],
  templateUrl: '../digit-sequence-editor/digit-sequence-editor.directive.html',
  styleUrls: ['../digit-sequence-editor/digit-sequence-editor.directive.scss'],
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AngleEditorComponent), multi: true },
              { provide: NG_VALIDATORS, useExisting: forwardRef(() => AngleEditorComponent), multi: true }],
  imports: [NgStyle, NgClass],
  standalone: true
})
export class AngleEditorComponent extends DigitSequenceEditorDirective<number> implements OnInit {
  // 组件特有逻辑
}

@Component({
  selector: 'tbw-time-editor',
  animations: [BACKGROUND_ANIMATIONS],
  templateUrl: '../digit-sequence-editor/digit-sequence-editor.directive.html',
  styleUrls: ['../digit-sequence-editor/digit-sequence-editor.directive.scss', './time-editor.component.scss'],
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeEditorComponent), multi: true },
              { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimeEditorComponent), multi: true }],
  imports: [NgClass, NgStyle],
  standalone: true
})
export class TimeEditorComponent extends DigitSequenceEditorDirective<number> implements OnInit {
  // 组件特有逻辑
}

为了复用Karma/Jasmine的测试代码，我尝试将子类传入泛型约束为DigitSequenceEditorDirective<any>的通用测试函数：

type DigitSequenceSuperclass = DigitSequenceEditorDirective<any>;

export class CommonTestEnvironment<T, U extends DigitSequenceSuperclass> {
  // 通用测试环境逻辑
}

export async function sharedBeforeEach<T, U extends DigitSequenceSuperclass>(
  qlass: Type<T>, 
  innerClass: U,
  selector: string, 
  initValue: string
): Promise<CommonTestEnvironment<T, U>> {
  await TestBed.configureTestingModule({
    // 测试模块配置
  });
  // ...
}

但不使用@ts-ignore会触发类型错误：DigitSequenceEditorDirective<T>并非自身的子类。虽然单元测试实际运行正常，且instanceof DigitSequenceEditorDirective能正确识别子类实例，但希望找到更规范的类型处理方式。

问题原因 #

1. TypeScript泛型的子类型规则：默认情况下，泛型类的子类型关系是协变的，但DigitSequenceEditorDirective<number>并不被视为DigitSequenceEditorDirective<any>的子类型——不同具体类型参数的泛型实例之间，除非显式配置类型兼容性，否则TypeScript静态检查不会认可它们的父子关系，哪怕number是any的子类型。
2. 运行时与静态检查的差异：instanceof基于原型链判断，所以运行时能正确识别子类，但TypeScript的静态类型系统不认可这种泛型实例的赋值兼容性。

解决方案 #

方案1：调整泛型约束逻辑 #

将DigitSequenceSuperclass改为支持泛型的类型别名，让通用测试代码接受任意继承自DigitSequenceEditorDirective的类型，而非固定any参数的版本：

// 替换原有固定参数的类型别名
export type DigitSequenceSuperclass<T = any> = DigitSequenceEditorDirective<T>;

// 调整测试类与函数的泛型约束
export class CommonTestEnvironment<T, U extends DigitSequenceSuperclass<T>> {
  // 通用测试环境逻辑
}

export async function sharedBeforeEach<T, U extends DigitSequenceSuperclass<T>>(
  qlass: Type<T>, 
  innerClass: Type<U>, // 注意：这里应传入类的类型，而非实例
  selector: string, 
  initValue: string
): Promise<CommonTestEnvironment<T, U>> {
  await TestBed.configureTestingModule({
    // 测试模块配置
  });
  // ...
}

方案2：使用显式类型断言 #

在调用通用测试函数时，用类型断言明确告知TypeScript子类符合约束，比@ts-ignore更清晰，且能保留其他类型检查：

// 调用示例
await sharedBeforeEach(
  AngleEditorComponent, 
  AngleEditorComponent as unknown as DigitSequenceSuperclass,
  'tbw-angle-editor',
  '90'
);

方案3：定义非泛型基接口 #

如果测试中不需要区分泛型参数，可以定义一个非泛型的接口，让抽象父类实现该接口，再用这个接口作为测试代码的约束：

// 定义非泛型基接口，包含父类的所有生命周期与接口实现
export interface IDigitSequenceEditor extends 
  AfterViewInit, ControlValueAccessor, OnInit, OnDestroy, Validator {}

// 修改抽象父类实现该接口
@Directive({ standalone: true })
export abstract class DigitSequenceEditorDirective<T> implements IDigitSequenceEditor {
  // 共性逻辑实现
}

// 测试代码中使用非泛型接口作为约束
type DigitSequenceSuperclass = IDigitSequenceEditor;

export class CommonTestEnvironment<T, U extends DigitSequenceSuperclass> {
  // 通用测试环境逻辑
}

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