Union does not contain the specified property in Typescript

Here are the types that I have:


Foo {
    foobar: any
}

Bar {
    fooBarBar: any;
}

I want to use a function defined like this:

this.api.submit(param: Foo | Bar)

When trying to use it, I encountered an issue:

this.api.submit(param.foobar) // does not exist on Bar

Error: Property 'foobar' does not exist on type 'Foo| Bar'.
  Property 'foobar' does not exist on type 'Bar '

I thought TypeScript would automatically determine which model to use based on the union, so why am I getting this error?

To get around this issue, I found that using bracket notation param['foobar'] resolves the error.

typescript

Answer №1

Your explanation implies that the variable param can only be either of type Foo or Bar, leaving the compiler unable to determine which one it is when calling param.foobar.

If you wish to differentiate between the two, you could try something like this:

type Foo {
    kind: 'foo',
    foobar: any
}

type Bar {
    kind: 'bar',
    fooBarBar: any;
}
...
if (param.kind === 'foo') {
    param.foobar; // The if statement serves as a type guard for instances of Foo
}

Alternatively, if you intended for param to encompass both Foo and Bar, you would require intersection types, denoted by Foo & Bar.

Answer №2

Everything is operating as expected.

If a type can have either the property foobar or not, then you cannot guarantee that the property will exist.

This could lead to issues if you assume that it exists in every valid reference.

As a result, TypeScript raises an error.

You might consider specifying that Bar may have a (possibly undefined) foobar property:

Foo {
 foobar: any
}

Bar {
 foobar?: any;
 fooBarBar: any;
}

It's important to only use properties that are guaranteed to be present in all members of the union type.

In essence, think of the union type as an interface that includes all the shared properties.

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

The Typescript compiler has trouble locating the definition file for an npm package

Recently, I released an npm package that was written in typescript. However, I have been facing difficulties in getting the definition recognized by typescript (webback and vscode). The only workaround that has worked for me so far is creating a folder wit ...

typescriptnpm

Implementing the "$store" property within Vue components

Click here for a guide on how to type the $store property. Unfortunately, I've been encountering issues with it. In my Vue 2 project created using vue-cliI, I included a vuex.d.ts file in ./src directory but the $store property in my components still ...

typescriptvue.js

Angular 2 Date Input failing to bind to date input value

Having an issue with setting up a form as the Date input in my HTML is not binding to the object's date value, even though I am using [(ngModel)] Here is the HTML code snippet: <input type='date' #myDate [(ngModel)]='demoUser.date& ...

htmlangulartypescriptangular2-forms

React textarea trigger function on blur event

https://codesandbox.io/s/react-textarea-callback-on-blur-yoh8n?file=/src/App.tsx When working with a textarea in React, I have two main objectives: To remove focus and reset certain states when the user presses "Escape" To trigger a callback function (sa ...

javascriptreactjstypescriptdom-events

When using Typescript type aliases, make sure to let Intellisense display the alias name instead of the source

Take a look at this brief code snippet type A = number; declare function f(): A; const a = f(); // `a` is number, not A What could be the reason for TS displaying a: number instead of a: A? ...

typescripttypestype-alias

The file located at 'node_modules/minimatch/dist/cjs/index' does not contain an exported element called 'IMinimatch'. Perhaps you intended to reference 'Minimatch' instead?

I encountered an error while using rimraf as a devDependency (v5.0.0) in my project. The error message I received was: node_modules/@types/glob/index.d.ts:29:42 - error TS2694: Namespace '".../node_modules/minimatch/dist/cjs/index"' has ...

node.jstypescript

Why isn't the page showing up on my nextjs site?

I've encountered an issue while developing a web app using nextjs. The sign_up component in the pages directory is not rendering and shows up as a blank page. After investigating with Chrome extension, I found this warning message: Unhandled Runtime ...

javascriptreactjstypescriptnext.jsroutes

What is the most efficient way to apply multiple combinations for filtering the information within a table?

I'm facing an issue with my Angular project. I have 4 select boxes that allow users to apply different filters: office worker project name employee activities The problem I'm encountering is the difficulty in predicting all possible combination ...

angulartypescriptfilter

What is the process for initiating an Angular 2 Materialize component?

I'm new to using angular2 materialize and I've found that the CSS components work perfectly fine. However, I'm facing an issue when it comes to initializing components like 'select'. I'm unsure of how or where to do this initi ...

typescriptangularmaterialize

The entry for "./standalone" in the "@firebase/database-compat" package does not have any documented conditions

Upon running npm run build for my sveltekit project, I encountered the following error generated by vite: 7:55:49 PM [vite-plugin-svelte] When trying to import svelte components from a package, an error occurred due to missing `package.json` files. Contact ...

typescriptfirebasenpmsveltesveltekit

Exploring TypeScript in the world of Shopify Command Line Interface

Exploring the process of developing a Shopify app using Typescript starting with the shopify-app-cli boilerplate, which utilizes Koa for the server and Nextjs for the frontend in React JavaScript. see https://github.com/Shopify/shopify-app-cli Encounterin ...

typescriptshopifynext.jskoa

The issue of a malfunctioning react TypeScript map when used in conjunction with useContext

I am attempting to retrieve data from the TVMaze API using React, TypeScript, and useContext. Although I can display the data, the useContext does not update with the return value, so when I use the map function, nothing is displayed. Any advice on how to ...

javascriptreactjstypescriptfetchreact-hooks

Is there a way to ensure in TypeScript that a generic type includes a property that implements a particular method?

To better explain my query, let me provide an illustration. Suppose I aim to create a method that accepts three parameters, as shown below: customFilter<T>(values: T[], filterString: string, propName: string) any[] { return values.filter((value) ...

typescripttypescript-generics

Angular Material Select Dropdown that emits the entire object item, rather than just the value

When using the Angular Material select dropdown API, only a value is emitted. Both [(ngModel)] and (selectionChange) will only emit a single member, not the entire object's data fields. For example, it will only emit something like food.value = 2, wi ...

angulartypescriptangular-materialangular7angular8

Implementing child components rendering in a React application using TypeScript

Just a little background information: I am attempting to build a carousel with pagination using ReactJS. Here is the code snippet I currently have: interface HTMLCarouselT { children: Array<JSX.Element> size: number; } const HTMLCarousel = ({ch ...

javascriptreactjstypescript

Is it possible for a service to retrieve a component's template?

I am faced with a scenario where two services (A and B) need to communicate with each other. Service A is required to build a chart based on asynchronous data received from service B, which is used in other areas so it operates independently. I attempted t ...

angulartypescriptchart.jsangular2-templateangular-services

A step-by-step guide to integrating a legend on a leaflet map using Angular and the ngx-leaflet plugin

I am attempting to integrate a legend into a map generated using Asymmetrik/ngx-leaflet. The tutorial I followed for creating the map can be found at https://github.com/Asymmetrik/ngx-leaflet. There are two distinct layers on the map, each requiring its ow ...

angulartypescriptleafletngx-leaflet

Flow error: Unable to access the value of this.props.width as the property width is not defined in T

In my React Native project, I am utilizing Flow for type checking. For more information, visit: I currently have two files named SvgRenderer.js and Cartoon.js where: Cartoon extends SvgRenderer Below is the source code for both of these files: SvgRend ...

javascripttypescriptreact-nativejsxflowtype

In what manner can I retrieve this particular type?

Can you provide me with an example of how to use this type? interface MyCode{ (): Function; title: string; } I've been thinking about various possibilities but haven't been able to figure it out. One approach is: let testCode: MyCode = ...

typescript

What is the best way to generate a type that generates a dot notation of nested class properties as string literals?

In relation to the AWS SDK, there are various clients with namespaces and properties within each one. The library exports AWS, containing clients like DynamoDB and ACM. The DynamoDB client has a property named DocumentClient, while ACM has a property call ...

typescript