Angular/TypeScript - 如何在 HTML 文件中进行类型转换？

Question

我有一个 TypeScript 接口(interface):

export interface iA {
  name: string;
}
export interface iB {
  size: number;
}
export interface iX {
  id: number;
  data: iA | iB;
}

然后在我的一个 Angular 组件类中，我使用了 iX 接口(interface):

// example.component.ts
class ExampleComplnent {
  public item: iX = {
    id: 1,
    data: { name: 'test' }
  }
}

<!-- example.component.html -->
<div>{{ item.data.name }}</div>

这将引发错误: Propery 'name' not exist on type 'iB' .
我知道在 TypeScript 文件中我可以像这样使用强制转换:

const name = (item.data as iA).name;

但是我怎样才能在 HTML 端进行转换呢？
我还想提一下，在我的代码中，我正在验证 item.data是 iA 类型, 不是 iB 类型.所以我确定它具有“名称”属性。

Answer 1

另一种解决方案。我将此用于行模板

创建效用函数

export function castTo<T>(): (row) => T {
  return (row) => row as T
}

组件中的调用函数

$row = castTo<YourType>();

在模板中使用

$row(row).properties