TypeScript不同结构对象类型报Property 'handler'不存在最佳实践

你当前的代码有两个核心问题导致类型报错：

1. 你给items定义的是固定长度的元组类型，而非任意长度的数组类型，这本身不符合工具栏配置可放置任意数量项的实际场景；元组中不同位置的元素类型不同，遍历的时候TS会拿到所有位置元素的联合类型。
2. 联合类型中没有通过必填的字面量类型字段建立类型辨识关系，模板的*ngIf判断无法触发TS的自动类型收窄，因此TS无法确认进入type === 'button'分支的项一定存在handler属性。

你追加| any的写法会彻底关闭items字段的所有类型检查，后续编写相关代码时TS不会提示任何属性拼写、类型不匹配错误，很容易引入隐蔽bug，不推荐使用。

使用TS的**可辨识联合（Discriminated Union）**重构类型定义，这是处理同类不同结构数据的TS标准最佳实践：

1. 拆分不同类型工具栏项的类型定义，将type字段设为必填的字面量类型，作为类型辨识的标记；对应类型的独有属性（比如按钮的handler）直接设为必填，不需要加可选标记。
2. 将items的类型从固定长度元组改为工具栏项联合类型的普通数组。

重构后的类型代码如下：

// 按钮类型工具栏项
type ToolbarButtonItem = {
  type: 'button';
  label?: string;
  handler: () => void; // 比宽泛的Function类型更安全，明确是无返回值的函数
}

// 其他类型工具栏项，可根据业务继续扩展
type ToolbarTextItem = {
  type: 'text';
  label?: string;
}

type ToolbarSeparatorItem = {
  type: 'separator';
}

// 所有工具栏项的联合类型
type ToolbarItem = ToolbarButtonItem | ToolbarTextItem | ToolbarSeparatorItem;

export interface IToolbarConfig {
  items: ToolbarItem[];
}

重构后你原有的模板代码不需要额外修改，Angular的模板类型检查会在*ngIf="item.type === 'button'"的分支内自动将item的类型收窄为ToolbarButtonItem，能识别到handler属性的存在，不会再抛出类型错误。

如果暂时不想重构类型定义，可以在模板中使用Angular内置的$any()函数做局部类型转义，仅绕过单行的类型检查，不会污染全局类型定义，比在接口中加| any的影响范围小很多：

<ng-container *ngFor="let item of config.items">
    <ng-container *ngIf="item.type === 'button'">
        <button (click)="$any(item).handler()">{{ item.label }}</button> 
    </ng-container>
</ng-container>

注意：这种方法本质是绕过类型检查，长期维护还是推荐使用可辨识联合的方案。

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