Angular strictTemplate模式下TS索引签名缺失类型不兼容问题求解

问题描述 #

在Angular代码库中启用strictTemplate模式时，定义类型的过程遇到了问题。

已定义的基础模型 #

export class User {
  public 'name'!: Filter<string>;
  public 'email'!: Filter<string>;
  // 原代码此处为`:!`笔误，正确定义应为如下形式
  public 'age'!: Filter<number>;
}

export class Engine {
  public 'weight'!: Filter<number>;
  public 'isRunning'!: Filter<boolean>;
}

export class Filter<T> {
  public 'value'!: T;
  public 'isSortedAscending'?: boolean;
}

持有输入的组件定义 #

// 原代码此处@Component参数缺少大括号，已修正为合法写法
@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
})
export class TableComponent {
  @Input()
  public sort: TableSortModel;
  // 简化省略无关业务逻辑
}

export class TableSortModel {
  [key: string]: Filter<unknown>;
}

补充说明 #

Engine、User并非应用中传入的仅有的两类模型，应用中还有其他自定义模型，所有这些模型的属性类型均为Filter类型。

报错信息 #

类型'Engine'无法赋值给类型'TableSortModel'，类型'Engine'中缺少索引签名。
类型'User'无法赋值给类型'TableSortModel'，类型'User'中缺少索引签名。

核心疑问 #

应当如何调整TableSortModel的类型定义，才能够兼容传入上述提到的所有类（包括各类属性均为Filter类型的自定义类）？

解决方案 #

TypeScript 不允许无显式索引签名的类直接赋值给带字符串索引签名的类型，哪怕该类的所有属性都符合索引签名的类型要求。

推荐方案1：用带约束的映射类型替代硬编码索引签名 #

将TableSortModel从固定类改为通用映射类型，无需修改已有的User/Engine等模型，同时自动约束传入类型的合规性：

// 替换原有的TableSortModel类定义，新增泛型约束确保传入类型合规
export type TableSortModel<T extends Record<string, Filter<unknown>> = Record<string, Filter<unknown>>> = {
  [Key in keyof T]: T[Key];
};

在TableComponent中使用时，可按需指定泛型或用默认类型兼容多模型：

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
})
export class TableComponent {
  // 若明确当前sort是User类型，指定泛型获得更强的类型检查
  @Input()
  public sort!: TableSortModel<User>;
  
  // 若需要兼容多种模型（User/Engine/自定义模型），直接用默认泛型即可
  // @Input() public sort!: TableSortModel;
}

方案优势：

• 无需修改已有的User/Engine等模型
• 自动约束传入类型必须符合「所有属性为Filter类型」的要求
• 后续新增符合条件的自定义模型时，无需额外修改代码

方案2：给自定义模型添加兼容索引签名（适合模型数量固定的场景） #

如果不想修改TableSortModel，可给所有需要传入的自定义模型添加与TableSortModel兼容的索引签名：

export class User {
  // 新增兼容索引签名，类型需与TableSortModel的索引签名一致
  [key: string]: Filter<unknown>;
  public 'name'!: Filter<string>;
  public 'email'!: Filter<string>;
  public 'age'!: Filter<number>;
}

注意事项：

• 该方案仅适合模型数量固定的场景
• 后续新增模型时，需手动添加相同的索引签名，维护成本较高

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