Encountering an issue with the UNION operator in Typescript causes an error

Question

Encountering an issue with the UNION operator in Typescript causes an error

Currently, I am utilizing the OR operator within Typescript to designate that a product could be of type ProductI OR CartResponseInterface.Product

This is how it is structured:

product: ProductI | CartResponseInterface.Product

However, when attempting to extract the id and assign it to a variable productId like so:

productId = product.id || product.productId

I encounter the following errors:

Error 1:
Property 'id' does not exist on type 'ProductI | Product'.
Property 'id' does not exist on type 'Product'.ts(2339)

Error 2:
Property 'productId' does not exist on type 'ProductI | Product'.
Property 'productId' does not exist on type 'ProductI'.ts(2339)

In my product.model.ts file:

export interface ProductI {
  id?: string;
  name: string;
  price: number;
  .
  .
  .
}

In cart-response.model.ts:

export interface Product {
  productId: string;
  name: string;
  totalPrice: number;
  .
  .
  .
}

If anyone could provide assistance on resolving this issue, it would be greatly appreciated.

javascript angular typescript

Answer 1

Answer №1

If necessary, you can utilize Type Assertion to coerce the type and then verify the product's id.

You could try obtaining the product id using Type Assertion like this:
const productId = (product as ProductI).id || (product as Product).productId;
// or
const productId = (<ProductI>product).id || (<Product>product).productId;

However, consider alternative methods before resorting to this approach as there may be a more efficient way to leverage Typescript's types.

Answer 2

If necessary, you can utilize Type Assertion to coerce the type and then verify the product's id.

You could try obtaining the product id using Type Assertion like this:
const productId = (product as ProductI).id || (product as Product).productId;
// or
const productId = (<ProductI>product).id || (<Product>product).productId;

However, consider alternative methods before resorting to this approach as there may be a more efficient way to leverage Typescript's types.

Answer 3

Answer №2

Check out this StackBlitz demo on TypeScript interface inheritance!

import "./style.css";

export interface Product {
  id: string;
  name: string;
  price: number;
}

export interface ProductI extends Product {
  customPropI?: number;
}

export interface ProductII extends Product {
  customPropII?: number;
}

const product1 = {
  id: "23",
  name: "tmep",
  price: 140,
};

const product2 = {
  id: "23",
  name: "tmep",
  price: 140,
  customPropII: 280
};

// Testing
let customId = product1.id;

let customProp = null;
if((product2 as ProductI).customPropI) customProp = (product2 as ProductI).customPropI;
else if((product2 as ProductII).customPropII) customProp = (product2 as ProductII).customPropII;

const appDiv: HTMLElement = document.getElementById("app");
appDiv.innerHTML = customProp;

Answer 4

Check out this StackBlitz demo on TypeScript interface inheritance!

import "./style.css";

export interface Product {
  id: string;
  name: string;
  price: number;
}

export interface ProductI extends Product {
  customPropI?: number;
}

export interface ProductII extends Product {
  customPropII?: number;
}

const product1 = {
  id: "23",
  name: "tmep",
  price: 140,
};

const product2 = {
  id: "23",
  name: "tmep",
  price: 140,
  customPropII: 280
};

// Testing
let customId = product1.id;

let customProp = null;
if((product2 as ProductI).customPropI) customProp = (product2 as ProductI).customPropI;
else if((product2 as ProductII).customPropII) customProp = (product2 as ProductII).customPropII;

const appDiv: HTMLElement = document.getElementById("app");
appDiv.innerHTML = customProp;

Encountering an issue with the UNION operator in Typescript causes an error

Answer №1

If necessary, you can utilize Type Assertion to coerce the type and then verify the product's id.

Answer №2

Similar questions

Assigning numerical ratings to a web-based questionnaire in HTML

How to showcase an image with Angular 2?

Regular expressions can be used to remove specific parts of a URL that come before the domain name

Tips for manipulating the DOM: Pushing existing elements when new ones are dynamically created with JavaScript

Reorganizing JSON structures by incorporating unique identifiers into nested elements

Is it possible to apply JavaScript object destructuring but make changes to certain values before assigning them to a new object?

stop the page from refreshing when clicking on the map area

Leverage the Express JS .all() function to identify the specific HTTP method that was utilized

Determine the type of a nested class within TypeScript

Enhance the design of MDX in Next.js with a personalized layout

Unable to use the same hexadecimal HTML entity in the value props of a React JSX component

Having trouble with JQuery's .prop function not unchecking a checkbox?

JavaScript's POST method is failing to fetch data from the API, yet it is able to retrieve data successfully in

Encountered a connection error in the Spring Boot application: net::ERR_CONNECTION_REF

The soft keyboard on Android devices may be obscured by an input field when using Cordova

What is the process for transferring `Parentobject1` to `childobject2` and `childobject3` in Three.js?

Incorporate the teachings of removing the nullable object key when its value is anything but 'true'

Tips on how to eliminate focus after choosing a radio button in Angular Material?

Creating horizontal cards with Angular MaterialWould you like to learn how to design

Include a new button in the react material-table toolbar