Challenges encountered when retrieving parameters from union types in TypeScript

Why can't I access attributes in union types like this?

export interface ICondition {
  field: string
  operator: string
  value: string
}

export interface IConditionGroup {
  conditions: ICondition[]
  group_operator: string
}

function foo(item: ICondition | IConditionGroup) {
  if(typeof item.conditions === "undefined") { // does not work
    let field = item.field; // does not work
    ///.. do something 
  } else {
    let conditions = item.conditions; // does not work
    /// .. do something else
  }
}

The errors received are:

error TS2339: Property 'conditions' does not exist on type 'ICondition | IConditionGroup'.
error TS2339: Property 'conditions' does not exist on type 'ICondition | IConditionGroup'.
error TS2339: Property 'field' does not exist on type 'ICondition | IConditionGroup'.

To make it work, casting the types is necessary - like this:

function foo2(inputItem: ICondition | IConditionGroup) {
  if(typeof (<IConditionGroup>inputItem).conditions === "undefined") {
    let item= (<ICondition>inputItem);
    let field = item.field;
    ///.. do something 
  } else {
    let item= (<IConditionGroup>inputItem);
    let conditions = item.conditions;
    /// .. do something else
  }
}

The need for explicit casting in TypeScript arises from losing type information in JavaScript.

Answer №1

If you're dealing with TypeScript, handling different types can be done using Type Guards. Typically, it's a simple check like:

if (typeof item === "string") { ... } else { ... }

Alternatively,

if (item instanceof MyClass) { ... } else { ... }

In cases where interfaces are used, creating custom User-Defined Type Guards becomes necessary:

function isConditionGroup(item: ICondition | IConditionGroup): item is IConditionGroup {
    return (item as IConditionGroup).conditions !== undefined;
}

function foo(item: ICondition | IConditionGroup) {
    if (isConditionGroup(item)) {
        let conditions = item.conditions;
        // perform an action
    } else {
        let field = item.field;
        // perform another action
    }
}

(view code in playground)

You also have the option to handle this without type guards:

function foo(item: ICondition | IConditionGroup) {
    if ((item as IConditionGroup).conditions !== undefined) {
        let conditions = (item as IConditionGroup).conditions;
        // perform an action
    } else {
        let field = (item as ICondition).field;
        // perform another action
    }
}

However, this method involves more typing and assertion of the item variable multiple times, which could lead to verbosity.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide to populating a JavaScript array with AJAX requests

Having some trouble with populating a JavaScript array using an Ajax request. Here is the code I'm working with. The Ajax portion seems to be running smoothly. function GetColumns() { var customArray = []; $.ajax({ url: '@Url.Con ...

jquery target descendants with specific names

In the provided HTML code snippet, there is a main div with the class name of cxfeeditem feeditem, and it contains multiple child elements with similar class names and structure. My query pertains to extracting values from specific children within all the ...

TypeScript struggling to recognize specified types when using a type that encompasses various types

I have a defined type structure that looks like this: export type MediaProps = ImageMediaProps | OembedProps; Following that, the types it references are defined as shown below: type SharedMediaProps = { /** Type of media */ type: "image" | "oembed"; ...

JavaScript - Uncaught ReferenceError: WebSocket is undefined

Looking at just the client side API (since each server side language has its own API), this code snippet demonstrates opening a connection, setting up event listeners for connect, disconnect, and message events, sending a message to the server, and closing ...

The width of the table remains consistent

I have created a division that includes two tables stacked on top of each other. However, I am facing an issue where the width of the second table remains fixed and does not change even when I try to increase it. Here is the code snippet below: functio ...

Troubleshooting problem with Zscaler and Ajax communication

When making an AJAX call on my website, everything runs smoothly except for when it is accessed behind a Zscaler proxy. In that case, the browser throws a CORS error: "No 'Access-Control-Allow-Origin' header is present on the requested resource. ...

I am experiencing a 404 error when attempting to import a local JS file in Angular

After creating a new project with "ng new xxx", all you need to do is add one line of code in index.html: <!doctype html> <html lang="en> <head> <meta charset="utf-8> <title>Bbb</title> <base href="/&g ...

Looking for a rival on socket.io

Currently, I am working on a script utilizing socket.io with express in node.js to find an opponent. In this setup, only two players are allowed in a room. If no free rooms are available, a new one should be created automatically. The core logic of the c ...

Creating dynamic HTML elements for each section using JavaScript

Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...

When should CSS compression and combining / JS minification be performed - at runtime or during build time?

I need to find a way to compress, version (for caching reasons), and possibly combine our JS and CSS files. I've come across two main approaches so far: 1) During the build process: Using an MSBuild task or similar. 2) Dynamically at runtime: Through ...

Ensure that the JavaScript is loaded prior to refreshing the webpage

Below is the HTML code snippet: <script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap&v=quarterly" defer></script> <script src="{% static '/javascript/maplanguage.js' %}">< ...

Adjusting the amount of rows and columns in a fluid manner with CSS grid (updated)

After conducting my research, it seems that the most effective way to set the final value of a CSS grid is either by directly specifying it or by creating/manipulating the css :root value. A similar query was previously raised here, although the answers p ...

"Troubleshooting: Why are errors not appearing in ts-node

Whenever I encounter an error in my code while compiling with ts-node, the error does not seem to appear in the console. For instance:let data = await fs.readFileSync(path); In the following code snippet, I am using "fs" to read a file by passing a path ...

Is it possible for a Vue component to contain both data and props simultaneously?

How does a standard Vue component look? Vue.component('blog-post', { // camelCase in JavaScript props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) The basic documentation on components does not us ...

Master the art of manipulating tags in Django templates using JavaScript

In my Django quiz app, there are two main components. The first part involves displaying 10 sentences with corresponding audio to help with memorization, one per page. The second part consists of asking questions based on the same set of sentences. I initi ...

Setting default values for class members in Typescript is important for ensuring consistent behavior and

My model is pretty straightforward: export class Profile extends ServerData { name: string; email: string; age: number; } Whenever I make a server call using Angular 4's $http, I consistently receive this response: { name: string; email: ...

Determine the hour difference between two provided dates by utilizing the date-fns library

My API returns a "datePublished" timestamp like this: "2019-11-14T14:54:00.0000000Z". I am attempting to calculate the difference in hours between this timestamp and the current time using date.now() or new Date(). I am utilizing the date-fns v2 library fo ...

Is there a way to create a PHP function that can process an AJAX request and return a boolean value?

After some testing, I discovered that when the code snippet below is executed within my PHP function to manage an AJAX call: session_start(); if ( $_POST['animal'] != $_SESSION['animal'] ) die(json_encode(false)); Upon returning to th ...

Exploring Laravel's method for retrieving data from multiple tables in the controller

In an effort to make my jQuery call more dynamic, I have a controller with the following method: public function api(Request $request , $project_id){ return Program::where('project_id',$project_id)->get(); } This results in: [{"id":178," ...

updating the page using the latest AJAX function

I have a webpage that showcases the newest images. I am utilizing an AJAX request to organize these images : $('#trier').on('click', function() { // Clicking on the button triggers sorting action var b = document.getElementByI ...