当在OR或两个类之一的类型上不存在属性p时，Typescript引发错误]

Question

我有一个组件类，其中我有一个类属性renderContent，它可以是给定的两个type s类/模型

LessonPageType

和TaskPageType之一我作为@Input()传递的值。下面是我的班级组件代码：

import {ChangeDetectionStrategy, Component, HostListener, Input, OnInit} from '@angular/core';
import {LessonPageType, TaskPageType} from '../../models/types';

@Component({
  selector: 'app-page-renderer',
  templateUrl: './page-renderer.component.html'
})
export class PageRendererComponent implements OnInit {

  @Input() renderContent: LessonPageType | TaskPageType;
  @Input() submission: TaskSubmissionType;
}

问题：-

我正在以renderContent的身份访问模板中的renderContent?.accept_answer变量对象。此accept_answer键在

TaskPageType

类中可用，但在另一类上不可用，这会导致在AOT下构建应用程序时出现以下错误。除了将renderContent的类型设置为any可以正常工作之外，还有其他解决方法吗？

错误：-

src / app / shared / components / page-renderer / page-renderer.component.html（16,17）：中的错误：类型'LessonPageType |不存在属性'accepts_answer'| TaskPageType”。属性“ accepts_answer”在“ LessonPageType”类型上不存在。

我有一个组件类，其中有一个类属性renderContent，它可以是基于我作为@Input（）传递的值的给定2种类型的类/模型LessonPageType和TaskPageType之一。下面...

Answer 1

如果将变量声明为两个或更多接口/类的OR，则只能访问它们之间共享的属性。我将使用的可能解决方案：

Answer 2

取决于您要在模板中显示什么，如果您有LessonPageType。