The specified property is not found within this type (Union type)

When working with one of multiple interfaces, I encounter an issue in Vue where it claims the property does not exist.

export interface Link {
  to: string
  text?: string;
}
export interface Text {
  text: string;
}
export interface Html {
  html: string
}
export type DataItem = Text | Link | Html;

Within my Vue loop over data items, attempting to access a property triggers an error:

 <template
     v-for="(dataItem, index) in item.data" :key="index"
 >

   <p if="dataItem?.text" :class="itemClasses">
         {{ dataItem.text }}
   </p>

The error message specifically states 

Property 'text' does not exist on type 'DataItem'.

typescript

Answer №1

Vue struggles to determine the type of dataItem solely based on the union type (which could be Text, Link, or Html). To address this, a type check on dataItem is needed before accessing its properties:

<template v-for="(dataItem, index) in item.data" :key="index">
  <p v-if="('text' in dataItem)" :class="itemClasses">
    {{ (dataItem as Text).text }}
  </p>
</template>

Answer №2

In order to make the variable work, you must cast it, although it may not be possible within the template structure. This limitation arises because the Html interface does not include that specific property, allowing only common properties in unions.

If you were working in a .ts file, you could access the property as follows:

dataItem.text as Text or dataItem.text as Link

To quickly resolve this issue, consider adding an optional property text to the Html interface so that it becomes part of the union type.

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

Utilizing the subclass type as a parameter in inheritance

Looking for a way to restrict a function in C# to only accept classes of a specific base class type? In my current implementation, I have a base class (which can also be an interface) and n-classes that extend it. Here is what I am currently doing: abstr ...

c#typescript

manipulator route in Nest.js

I have the following PATCH request: http://localhost:3000/tasks/566-344334-3321/status. The handler for this request is written as: @Patch('/:id/status') updateTaskStatus() { // implementation here return "got through"; } I am struggling t ...

typescriptexpressnestjshandler

Replicating entities in TypeScript

I am currently developing an Angular 2 application using TypeScript. In a User Management component, I have implemented a table that displays all the users in my system. When a user is clicked on within the table, a form appears with their complete set of ...

angulartypescript

What is the specific type of event for a change handler in TypeScript?

As a newcomer to TypeScript, I recently crafted a change handling function that accepts the event as a parameter to assign the value, like event.target.value. Currently, I have designated this as any, but I suspect there is a more appropriate type for this ...

reactjstypescript

Struggling to refine the result set using jsonpath-plus

Utilizing the jsonpath-plus module (typescript), I am currently working on navigating to a specific object within a json document. The target object is nested several levels deep, requiring passage through 2 levels of arrays. When using the following jsonp ...

jsontypescriptjsonpathjsonpath-plus

Angular 6 - Use *ngIf to apply the readonly attribute to an input when a certain condition is met

In my current project, I am attempting to set a condition on an input field where if a variable equals 'view', then the readonly attribute should be added to the input. Here is the code snippet I am currently using: <input *ngIf="mode == &ap ...

angulartypescriptangular6

Using TypeScript to dynamically assign types to object properties

As a newcomer to TypeScript, I am in the process of migrating some of my custom components/plugins to TS. One of the challenges I'm facing is setting object properties dynamically when the property name is a variable. I would greatly appreciate a be ...

javascripttypescript

When ts-loader is used to import .json files, the declaration files are outputted into a separate

I've encountered a peculiar issue with my ts-loader. When I import a *.json file from node_modules, the declaration files are being generated in a subfolder within dist/ instead of directly in the dist/ folder as expected. Here is the structure of my ...

jsontypescriptwebpackts-loader

Create an instance of a class from a group of subclasses, all the while retaining the ability to access static members in Types

I seem to have encountered a dilemma where I am looking to have both the static and abstract keywords used for a member of an abstract class in TypeScript, but it appears that this combination is not supported. The nearest workaround I could come up with ...

typescripttypesabstract-classabstracttypescript-types

What is the most effective method of utilizing union or extend in TypeScript when faced with a comparable scenario?

I have a function that takes in two different types of objects: const canBeGenericOrDefaultData = { id: 123, pointData: { square: 'x145', triangle: 'y145' } } function submitHandler(canBeGenericOrDefaultData: AllTheDatas | G ...

javascripttypescripttypesinterface

Running a function before triggering a refresh in Angular 2/4

When a user clicks or presses the F5 button on an HTML page, the page refreshes. However, before the refresh occurs, I want to execute a function or display a simple alert. The user can trigger a refresh by clicking the refresh button, pressing F5, or usi ...

angulartypescript

Looking for someone to break down this Typescript code snippet for me

As a Javascript developer, I am currently diving into an unfamiliar TypeScript code block within a project. Here is the code snippet: ViewModel newPropertyAddress = new ViewModel(){name, previousPro = oldValue } ...

javascripttypescript

Develop a custom function in Typescript that resolves and returns the values from multiple other functions

Is there a simple solution to my dilemma? I'm attempting to develop a function that gathers the outcomes of multiple functions into an array. TypeScript seems to be raising objections. How can I correctly modify this function? const func = (x:number, ...

javascripttypescriptfunction

Sequelize 5: Error encountered when using many-to-many functions

Currently, I am working with Sequelize 5.21.7 (in a next.js application) to establish a many-to-many relationship between the Image and Tag models. However, I encounter TypeErrors when attempting to utilize the imageInstance.addTag() and imageInstance.getT ...

node.jstypescriptsequelize.js

The propagation of onClick events in elements that overlap

Having two divs absolutely positioned overlapping, each containing an onClick handler. The issue is that only the top element's onClick handler fires when clicked. React 17 is being used. Here is some sample code: <div style={{ position: "abs ...

javascripthtmlreactjstypescript

Is it possible to retrieve the precise key currently indexed within type declaration?

I am currently working on developing a simple type that would require a nested object key to reference the outer level. For better understanding, let's take an example: const obj = { foo: { name: 'bar', ref: 'foo' // & ...

typescripttypescript-genericsnested-object

exporting an enum from a typescript type definition file

As I compile the type definitions for a library that I'm utilizing, I came across one function that identifies the mouse button clicked by an integer: //index.d.ts export as namespace myLib; // activates the library listening for a specific mouse ...

typescripttypescript-typings

No data is generated when choosing from the dropdown menu in mat-select

I have a select function where all options are selected, but the selected sections are not shown. When I remove the all select function, everything works fine. Can you help me find the error? Check out my work on Stackblitz Here is my code: Select <m ...

angulartypescriptselectangular-material

Encountering Errors when Transitioning a Standard React Component to TypeScript

I am currently in the process of migrating https://github.com/catalinmiron/react-typical to TypeScript. However, I am encountering some challenges. Below is a screenshot depicting the errors in VSCode: https://i.sstatic.net/IKZK2.png Here is the same co ...

javascriptreactjstypescriptreact-ref

Unraveling the mystery of "??=" in Javascript/Typescript code

In a recent TypeScript code snippet, I came across the following: const arrayAA: Record< someSchema['propX'], typeof arrayBB > = {}; for (const varB of arrayBB) { (arrayAA[someStringValue] ??= []).push(varB) } What is ...

javascripttypescript