The property you are trying to access is not defined on the enum type in Types

Looking to revise the TypeScript syntax of a lesson found at this link.

I am aiming to extract a specific type from a union type using the following syntax:

Actions['type'][ActionTypes.FEED_CREATE_POST]

The available action types are defined as:

type Actions = IActionWithPayload<ActionTypes.FEED_CREATE_POST, {
    text: string;
    files: any;
}> | IActionWithPayload<ActionTypes.FEED_GET_NEWS, {
    loadMore: boolean;
}>

Regarding the 'type' property:

(property) type: ActionTypes.FEED_GET_NEWS | ActionTypes.FEED_CREATE_POST

An issue arises with the message stating:

Property 'FEED_CREATE_POST' does not exist on type 'ActionTypes.FEED_GET_NEWS | ActionTypes.FEED_CREATE_POST'.

What is causing this error and how can it be resolved? Using TypeScript version 3.1.3.

Answer №1

If you want to extract a specific type from a union, simply using a type query won't work. Instead, consider utilizing the conditional type called Extract

type FeedCreate = Extract<Actions, IActionWithPayload<ActionTypes.FEED_CREATE_POST, unknown>>

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

What is the best way to reverse a text using typescript?

Is there a way to convert text into an inverted form using TypeScript? Regular text: how are you? Expected text: https://i.sstatic.net/8GnsU.png ...

Is it possible for moduleNameMapper to exclude imports made by a module located within node_modules directory?

I am trying to figure out how to make my moduleNameMapper ignore imports from the node_modules directory. The issue is that one of the dependencies, @sendgrid/mail, uses imports starting with ./src/ which causes problems when importing into Jest. My curre ...

`In TypeScript Angular, encountering challenges with accessing object properties`

My TypeScript object looks like this const playlist: { tracks: Array<Track> } = { tracks: new Array<Track>() }; This is the Track interface I am working with interface Track { title?: string; album?: string; artists?: string; duration? ...

Troubleshooting TS Errors in Vue 3 and Vite with Typescript Integration

Currently experimenting with Vue 3, Vite, and TypeScript to build a Vue project. The configuration process has proven to be quite challenging. Despite consulting various documentation sources, I have not been successful in achieving my desired outcome. My ...

The function getStaticPaths() will generate a 404 error, indicating that the page

I have encountered a persistent issue with the getStaticPaths() function throwing a 404 error. After investigating, I suspect that the problem may lie in the implementation of the getAllPostIds() function, which is supposed to generate an array of object ...

Furnish an item for a particular service

I am currently attempting to utilize a service created by another individual (github). This particular service requires a configuration to be passed to it. As stated in the repository: To configure Neo4jSettings in your bootstrap: provide('Neo4jSet ...

Tips on revealing TypeScript modules in a NodeJS environment

Currently, I am working on developing a TypeScript library. My goal is to make this library compatible with both TypeScript and JavaScript Node projects. What would be the most effective approach for achieving this? Should I create two separate versions ...

Dynamically load components within a modal window

I am looking for a way to dynamically load a custom component inside a modal while keeping it as flexible as possible. Here is an example : -HTML CODE- <button id="floating_button" class="floating_button animation_floating_in" (click)="loadCustomComp ...

The interfaces being used in the Redux store reducers are not properly implemented

My Redux store has been set up with 2 distinct "Slice" components. The first one is the appSlice: appSlice.ts import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import type { RootState } from "./store"; export interface CounterState { value ...

How can we define and put into action a function in TypeScript that incorporates certain properties?

I have a vision of creating a message feature that can be invoked directly with overloading capabilities. I also wish to incorporate other function calls within this message feature, such as message.confirm(). Achieving this in TypeScript seems challenging ...

Dynamically loading external JavaScript for an Angular component and triggering the window load event

I am currently dealing with an external javascript file that I only want to be included on a specific component, so the approach I'm taking involves dynamically loading it. I came across this answer that explains exactly how to achieve this. The prob ...

Referring to a component type causes a cycle of dependencies

I have a unique situation where I am using a single service to open multiple dialogs, some of which can trigger other dialogs through the same service. The dynamic dialog service from PrimeNg is being used to open a dialog component by Type<any>. Ho ...

Tips for correctly implementing an authorize function in TypeScript with NextAuth.js

Trying to implement the Credentials Provider in NextJs ("next": "^12.0.7") and NextAuth ("next-auth": "^4.1.2") using TypeScript has been a challenge. I am encountering difficulties in getting the function to work co ...

A guide to declaring MongoDB models in TypeScript across multiple files

In my Node.js TypeScript project, the structure is as follows: https://i.stack.imgur.com/YgFjd.png The crucial part of the structure lies in mongoModels. I have 2 models where each Category model is connected and contains field category.expertUserIds whi ...

Ensure that a particular key type is determined by the value of another key within the object (Utilizing Discriminated Unions)

The title of my question may not have been clear about what I am looking for, but what I need is something known as discriminated unions. You can find more information about it here: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.htm ...

Mistakes following update to Angular 4 from Angular 2

After upgrading from Angular2 to Angular4, I encountered these errors in the CLI. While my app continues to function after the upgrade, I am curious about possible solutions to resolve these errors. Any suggestions? https://i.stack.imgur.com/CyYqw.png He ...

What measures can I take to guarantee a particular datatype is enforced when saving data in MongoDB?

Currently, I am utilizing mongodb for my project. I encountered an issue while saving a record with a long number - I don't want it to be saved as a float number but rather as a string. For instance, when I tried to save "171829572137423434" it was ...

Building a BaseObserver in TypeScript with RxJS

Initially, I created a class called BaseObserver in Swift. In the subscribe method, I pass this class. Now, I am attempting to achieve the same functionality in RxJS using TypeScript. This approach proves useful when you need to execute actions both befor ...

Establish a connection with MongoDB and make changes to the data

I am facing an issue while trying to update values stored in MongoDB. I thought of using mongoose to view and edit the data, but it seems like I'm encountering an error along the way. Has anyone successfully implemented this kind of task before? impo ...

Retrieve the name from the accordion that was clicked

Hey there, I have a simple accordion that is based on an API called "names". <div *ngFor="let item of showDirNames | async | filter: name; let i = index;"> <button class="accordion" (click)="toggleAccordian($event, i)&q ...