角型护罩非缩窄型

Question

我有接口

Angular Typescript 类

interface A_DTO {
  type: string, 
  commonProperty: string, 
  uniquePropertyA: string, 
  etc..
}

interface B_DTO {
  type: string, 
  commonProperty: string, 
  uniquePropertyB: string,
  etc...
}

type AnyDTO = A_DTO | B_DTO

我有一个从 API 获取的对象。当它被获取时，通过读取“type”属性，它立即被转换为 A_DTO 或 B_DTO。但在那之后，它会被保存到一个服务中，以进行存储，在该服务中它被保存到单个变量，但类型为 AnyDTO（我用我使用的组件调用该服务变量 - 转换回 AnyDTO，并不造成任何财产损失，所以我很高兴）

角度模板

但是，在组件中，我有一些模板代码，

@if(object.type == "Type_A") {
 // do something
 // I can do object.commonProperty
 // but I cannot access object.uniquePropertyA
} @ else { object.type == "Type_B") {
 // do something
 // I can do object.commonProperty
 // but I cannot access object.uniquePropertyB
}

注意，上面，对象被读取为类型，AnyDTO = A_DTO | B_DTO

Angular Typescript 类

我尝试在界面上的打字稿类代码中创建类型保护，例如

  protected isTypeA(object: any): object is A_DTO {
    return object?.Type === "Type_A";
  }, 

角度模板

然后

@if(isTypeA(object)) {
 // do something
 // I can do object.commonProperty
 // but I still cannot access object.uniquePropertyA...
} @ else { object.type == "Type_B") {
 // do something
 // but I cannot access object.uniquePropertyB
}

即使在模板中调用类型保护，在@if内部，“对象”仍然被视为类型：A_DTO | B_DTO。尽管我在互联网上读到了什么，但类型缩小并没有发生。所以只能从“对象”访问公共属性。

我还尝试在模板中显式进行类型转换，使用 (object as A_DTO).uniquePropertyA 之类的东西，但这在 Angular 模板区域中不起作用

关于动态解决方案有什么想法吗（理想情况下不涉及为 Typescript 类中的每个子类型创建单独的变量）？

干杯，

ST

Answer 1

尝试将您

AnyDTO

重写为：

type AnyDTO = { type: 'Type_A' } & A_DTO | { type: 'Type_B' } & B_DTO;

这样 TS 应该以不同的方式对待

AnyDTO

和

Type_A

和

Type_B

。

请注意，您使用类型联合

|

，它将您的接口转换为类型，因此，理论上您可以使用

type

而不是

interface

来表示

A_DTO

和

B_DTO