When working with Typescript, an error is thrown if property "p" does not exist on one of the classes that are OR

Question

When working with Typescript, an error is thrown if property "p" does not exist on one of the classes that are OR

In my component class, I have a property called renderContent which can be of either LessonPageType or TaskPageType based on the input value. Below is the code snippet from my component:

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;
}

Issue: -

In my template, I'm trying to access the object within renderContent using renderContent?.accept_answer. However, the key accept_answer exists only in the TaskPageType and not in the other type. This discrepancy results in an error during AOT compilation as shown below. Is there any solution apart from changing the type of renderContent to any?

Error:-

ERROR in src/app/shared/components/page-renderer/page-renderer.component.html(16,17): : Property 'accepts_answer' does not exist on type 'LessonPageType | TaskPageType'. Property 'accepts_answer' does not exist on type 'LessonPageType'.

angular typescript aot union-types

Answer 1

Answer №1

When combining two or more interfaces/classes into a variable, only the properties that are common between them can be accessed. To address this limitation, I suggest the following solutions:

Add an optional accept_answer property to the LessonPageType
Extend the LessonPageType with TaskPageType to inherit all properties and add custom ones
As a last resort, define renderContent as type any

I hope these suggestions are helpful!

Answer 2

When combining two or more interfaces/classes into a variable, only the properties that are common between them can be accessed. To address this limitation, I suggest the following solutions:

Add an optional accept_answer property to the LessonPageType
Extend the LessonPageType with TaskPageType to inherit all properties and add custom ones
As a last resort, define renderContent as type any

I hope these suggestions are helpful!

Answer 3

Answer №2

Depending on the specific content you wish to display in your template with a LessonPageType, different approaches may be taken.

If the value is an empty string, one possible solution is as follows:

class PageRendererComponent implements OnInit {
  @Input() renderContent: LessonPageType | TaskPageType;
  @Input() submission: TaskSubmissionType;

  get acceptAnswer(): string {
    return 'accept_answer' in this.renderContent ? this.renderContent.accept_answer : '';
  }
}

Within your template, utilize the acceptAnswer function instead of directly accessing renderContent?.accept_answer.

Answer 4

Depending on the specific content you wish to display in your template with a LessonPageType, different approaches may be taken.

If the value is an empty string, one possible solution is as follows:

class PageRendererComponent implements OnInit {
  @Input() renderContent: LessonPageType | TaskPageType;
  @Input() submission: TaskSubmissionType;

  get acceptAnswer(): string {
    return 'accept_answer' in this.renderContent ? this.renderContent.accept_answer : '';
  }
}

Within your template, utilize the acceptAnswer function instead of directly accessing renderContent?.accept_answer.

When working with Typescript, an error is thrown if property "p" does not exist on one of the classes that are OR

Answer №1

Answer №2

Similar questions

Unresponsive Textbox Input Issue within Reactive Form

There was an error when trying to read the file '.angular-cli.json'. Please double-check to ensure that the file contains valid JSON format. The error message indicates an unexpected

What is the best way to assign a type based on a variadic type in TypeScript?

Tips for efficiently combining mergeMap observables and providing a singular value for the entire observable

Error with Angular2+ Top Level Navigation Including both Parents and Children - activated route issue

Theme customization in Material UI includes the addition of a custom color. However, this custom color is missing from the control values in Story

Converting strict primitive types to primitive types in Typescript

Despite the fact that one field is optional, failing to enter it will still result in the form being considered invalid

Is there a way to access Validators directly from the formControl?

The connection to Socket IO was refused due to a network error (net::

The MemoizedSelector cannot be assigned to a parameter of type 'string'

Angular: undefined value detected during NgOnInit execution

Having trouble simulating a custom Axios Class in JavaScript/TypeScript

While running tslint in an angular unit test, an error was encountered stating 'unused expression, expected an assignment or function call'

The font awesome symbol is not showing up in the nz-th element

Exploring Angular: How to Access HTTP Headers and Form Data from POST Request

Angular: Execute a function once all BehaviorSubject subscriptions have been initialized

What steps should I take to successfully compile my Typescript Webpack project without any errors?

Uncovering Module - which interface is missing a defined structure?

What are the potential drawbacks of using this alternative method instead of `useCallback` in React to prevent unnecessary re-renders of children components?