Angular模板中的类型推断与继承：实现列组件强类型校验

现有组件定义 #

TableComponent #

TableComponent<T extends object, K extends keyof T> {
  ...

  @Input()
  data!: T[];

  @ContentChildren(ColumnComponent<K>)
  columns!: QueryList<ColumnComponent<K>>;

  ...
}

ColumnComponent #

ColumnComponent<K> {
  ...

  @Input()
  property!: K;

  ...
}

使用场景与需求 #

在模板中使用时，希望列组件的property能自动继承父表格data的键类型，输入无效属性时IDE能给出明确提示：

<app-table [data]="someArray">
  <!-- 有效属性，无提示 -->
  <app-column property="validProperty" />
  <app-column property="anotherValidProperty" />
  <!-- 无效属性，期望IDE提示错误 -->
  <app-column property="invalidProperty" />
  <app-column [property]="'anotherInvalidProperty'" />
</app-table>

解决方案 #

1. 优化组件泛型定义 #

调整TableComponent

简化泛型参数，直接将列组件的类型与表格数据的键关联：

import { Component, Input, ContentChildren, QueryList } from '@angular/core';
import { ColumnComponent } from './column.component';

@Component({
  selector: 'app-table',
  template: `<!-- 表格模板内容 -->`,
})
export class TableComponent<T extends object> {
  @Input()
  data!: T[];

  @ContentChildren(ColumnComponent)
  columns!: QueryList<ColumnComponent<keyof T>>;
}

调整ColumnComponent

保留泛型参数，并通过注入父表格组件增强编译时类型校验：

import { Component, Input, Optional, Inject } from '@angular/core';
import { TableComponent } from './table.component';

@Component({
  selector: 'app-column',
  template: `<!-- 列模板内容 -->`,
})
export class ColumnComponent<K extends string | number | symbol> {
  @Input()
  property!: K;

  // 注入父表格，辅助TypeScript校验列属性与表格数据的匹配性
  constructor(@Optional() @Inject(TableComponent) private parentTable?: TableComponent<Record<K, unknown>>) {}
}

2. 开启严格模板类型检查 #

在tsconfig.json中启用strictTemplates，确保IDE和Angular编译器能识别模板中的类型错误：

{
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

3. 模板中的类型提示效果 #

当someArray的类型明确时，IDE会自动校验app-column的property值：

• 输入属于T的键时，无错误提示；
• 输入无效键时，会立即提示类型不匹配。

核心原理 #

• 通过keyof T将列组件的属性键类型与表格数据类型强绑定，确保列属性只能是数据对象的有效键；
• 注入父表格组件的方式让TypeScript在编译阶段就能校验类型一致性；
• strictTemplates配置是模板类型检查生效的关键，开启后Angular会对模板中的输入属性进行严格类型校验。

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