Master the art of properly switching on reducer-style payloads in Typescript

Currently, I am dealing with two types of data: GenArtWorkerMsg and VehicleWorkerMsg. Despite having a unique type property on the payload, my Searcher is unable to differentiate between these data-sets when passed in.

How can I make it understand and distinguish between the different payloads?

Check out my solution on Typescript Playground so far.

type GenArtWorkerMsg = {
    extra: 'names' | 'descs';
    data: LoadTableReturn['2'];
    type: 'vehicleGroups';
};

type VehicleWorkerMsg = {
    extra: 'carName' | 'carGroup';
    data: LoadTableReturn['3'];
    type: 'genericArticles';
};

type SearchActions = {
    genericArticles: GenArtWorkerMsg;
    vehicleGroups: VehicleWorkerMsg;
};

type SearchType<type extends keyof SearchActions> = {
    term_id: number;
    lang_ids: number[];
    dataOwner: SearchActions[type]['data'][number];
    extra: SearchActions[type]['extra'];
    type: type;
    uuid: string;
    translations?: translations[];
};

type TransAction = {
    type: 'completedSearch';
    payload: SearchType<'genericArticles' | 'vehicleGroups'>;
}

const messageHandler = (action: TransAction) => {
    const { uuid, dataOwner, translations, extra, type } = action.payload;

    switch (action.payload.type) {
        case 'genericArticles':
            {
                // Only GenArtWorkerMsg data has type 'genericArticles', but the payload includes both GenArtWorkerMsg and VehicleWorkerMsg
typescript

Answer №1

To effectively narrow down the union, you must elevate it a level higher, shifting it from being a generic parameter to becoming part of the type definition itself. TypeScript's ability to narrow unions is most effective when they are located at the topmost level rather than embedded within a generic parameter.

Therefore, make the following adjustment:

type Transaction = {
    type: 'completedSearch';
    payload: SearchType<'genericArticles'> | SearchType<'vehicleGroups'>;
}

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

Can someone explain how to create a Function type in Typescript that enforces specific parameters?

Encountering an issue with combineReducers not being strict enough raises uncertainty about how to approach it: interface Action { type: any; } type Reducer<S> = (state: S, action: Action) => S; const reducer: Reducer<string> = (state: ...

typescriptreduxtypescript2.4

Ways to retrieve the quantity of a particular value within an object using TypeScript

I'm inquiring about how to retrieve the number of a specific value within an object using TypeScript. Here is the structure of the object: obj : TestObject = { name: "test", street: "test" subobj1: { status: warning, time: ...

angulartypescript

How can I make sure that my function returns a mutated object that is an instance of the same class in

export const FilterUndefined = <T extends object>(obj: T): T => { return Object.entries(obj).reduce((acc, [key, value]) => { return value ? { ...acc, [key]: value } : acc; }, {}) as T; }; During a database migration process, I encounte ...

javascripttypescriptjavascript-objectsimmutability

Challenges arise when attempting to share a theme across different repositories within a Storybook monorepo that utilizes

In my unique project setup, I have a singular repository containing atoms, molecules, and organisms along with storybooks to develop a custom components library. This library is based on MUI framework with a customized theme applied, all built with TypeScr ...

reactjstypescriptmaterial-uistorybook

Using Angular 6 to Share Data Among Components through Services

I am facing an issue in my home component, which is a child of the Dashboard component. The object connectedUser injected in layoutService appears to be undefined in the home component (home userID & home connectedUser in home component logs); Is there ...

angulartypescriptangular6

Invoking a controller from another controller in the Express framework using Typescript

Currently, I am trying to call a controller from another controller in my code. While attempting to pass parameters using {params: {task_id: String(task_id), result}}, TypeScript is flagging an error indicating that res does not have all the required attri ...

node.jstypescriptexpress

Resolving the issue of 'type' property missing but required in 'SeriesXrangeOptions' within the Angular Highcharts module

I'm attempting to showcase a price chart view for a specific cryptocurrency chosen from a list of cryptocurrencies, but I keep encountering a type mismatch error. Within my application, I have utilized the angular-highcharts module and brought in the ...

angulartypescripthighcharts

Which TypeScript AsyncGenerator type returns a Promise?

I am currently in the process of assigning a return type to the function displayed below: async function *sleepyNumbers() { // trying to determine TypeScript type let n = 0; while (true) { yield new Promise(resolve => resolve(n++)); ...

typescriptgeneratoriterable

Can a JavaScript object be created in TypeScript?

Looking for a way to utilize an existing JavaScript "class" within an Angular2 component written in TypeScript? The class is currently defined as follows: function Person(name, age) { this.name = name; this.age = age; } Despite the fact that Java ...

javascriptangulartypescript

How do I use TypeScript and protractor to retrieve the column index of a grid by matching the header text of that column?

I have been attempting to create a function that can determine the column index of a grid based on the header text for that particular column. Despite several attempts, as shown in the comments below, the function consistently returns -1 instead of the exp ...

typescriptprotractorwebstorm

Testing the Compatibility of Angular JS and Angular 8 in a Hybrid Application

I am currently working on a hybrid application using AngularJS and Angular 8. The new components I create in Angular need to be downgraded for use in AngularJS. Here is a snippet of the module code: @NgModule({ // Declarations and Imports providers ...

angularjsangulartypescriptunit-testingkarma-jasmine

Problem with Anular5 - "this" not functioning correctly inside of ready()

I am encountering an issue in graph.component.ts this.cContainer = cytoscape ( { ready: function(e) { this._dataService.setResultData(); } }); However, I am getting the following error message: ERROR TypeError: Cannot read property &ap ...

angulartypescriptcallback

Issue with Angular 6 and Chrome: Event listener ($event) occasionally throws the error "unable to access property 'value' of null"

It appears that the buttons are being iterated correctly using ngFor, and upon inspection they have the correct attributes. However, when clicked, the function in the controller sometimes claims the parameter is 'undefined', happening randomly ab ...

angulartypescriptgoogle-chromedebuggingangular6

Exploring how enums can be utilized to store categories in Angular applications

My application has enums for category names on both the back- and front-end: export enum CategoryEnum { All = 'All', Category1 = 'Category1', Category2 = 'Category2', Category3 = 'Category3', Cate ...

htmlangulartypescriptenums

Guide on utilizing external namespaces to define types in TypeScript and TSX

In my current project, I am working with scripts from Google and Facebook (as well as other external scripts like Intercom) in TypeScript by loading them through a script tag. However, I have encountered issues with most of them because I do not have acces ...

typescriptfacebook-javascript-sdk

Creating a versatile TypeScript interface that can accurately represent a wide range of types, interfaces, and objects whilst imposing restrictions on the allowable value types within

I am looking to define a versatile TypeScript interface that can accommodate any type, interface, or object while imposing restrictions on the types of values it contains. Let me introduce MyInterface, which includes properties fooIProp and barIProp stori ...

javascripttypescriptobjecttypesinterface

Using Typescript types or a linter can help avoid mistakenly rendering the raw function in JSX instead of its executed return value

Seeking a resolution to prevent the recurring mistake I often make, as shown below: export function scratch_1 (props: scratch_1Props): ReactElement | null { function renderA (): string { return "A"; } function renderB (): string { ...

reactjstypescriptjsx

Is there a possible solution to overcome the type error when utilizing dynamic environment variables in conjunction with TypeORM and TypeScripts?

I'm currently working on a backend project using the TsED framework, which leverages TypeScript and ExpressJS. To work with TypeORM, I have also integrated the dot-env package in order to utilize custom environment variables sourced from a .env file ...

typescriptexpresstypeorm

What is the method to retrieve Response Headers in cases of an empty response?

Currently, I am working with Angular2 and dotcms. My goal is to retrieve response headers after making a call to subscribe. const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) .append('Access ...

angulartypescriptputdotcms

Update the function's argument type signature if the current argument is a function with properties

Looking for input on a potential title change, but for now, here are the details of my specific use case: I'm currently developing a library that facilitates executing methods remotely and accessing properties across serialized boundaries like those ...

typescript