Is there a more efficient method to specify to typescript the type of "data"?

Question

Is there a more efficient method to specify to typescript the type of "data"?

Recently, I've adopted the action/reducer pattern for React based on Kent Dodds' approach and now I'm exploring ways to enhance type safety within it.

export type Action = 
    { type: "DO_SOMETHING", data: { num: Number } } |
    { type: "DO_SOMETHING_ELSE", data: { nums: Number[] } };

type Actions = {
    [key in Action["type"]]: (state: State, data: Action["data"]) => State;
};

const actions: Actions = {
   DO_SOMETHING: (state, data) => {
       return { nums: [data.num] }; // Encountering a type error here
   },
   DO_SOMETHING_ELSE: (state, data) => {
       return { nums: data.nums }; // Also resulting in a type error
   }
};

The beauty of this code lies in its ability to guarantee that the actions object includes all the defined action types from the union type Action, while offering type safety when dispatching an action. The issue arises when trying to access members of data.

Property 'num' does not exist on type '{ num: Number; } | { nums: Number[]; }'.
  Property 'num' does not exist on type '{ nums: Number[]; }'.

However, by structuring the code as follows:

export type Action = 
    { type: "DO_SOMETHING", data: { num: Number } } |
    { type: "DO_SOMETHING_ELSE", data: { nums: Number[] } };

type Actions = {
    [key in Action["type"]]: (state: State, action: Action) => State;
};

const actions: Actions = {
   DO_SOMETHING: (state, action) => {
       if (action.type !== "DO_SOMETHING") return state;
       return { nums: [action.data.num] }; // Resolved the previous type error
   },
   DO_SOMETHING_ELSE: (state, action) => {
       if (action.type !== "DO_SOMETHING_ELSE") return state;
       return { nums: action.data.nums }; // No more type error encountered
   }
};

By adopting this structure, TypeScript is now able to recognize that action.data corresponds exactly with the specified action.type. Is there a more streamlined approach to achieve this without resorting to extensive inline actions within a switch statement?

PS - To delve deeper into these concepts, you may explore the comprehensive playground snippet I've been utilizing for testing purposes.

typescript typescript-generics

Answer 1

Answer №1

Almost there but not quite.

The issue lies in this code snippet Action['data'] within

(state: State, data: Action["data"]) => State;

, it should have been associated with the key property instead.

Action['data'] needs to be connected with the key property as shown in this sample:

type State = {
    nums: number[]
}
export type Action =
    | { type: "DO_SOMETHING", data: { num: number } }
    | { type: "DO_SOMETHING_ELSE", data: Pick<State, 'nums'> };

type Actions = {
    [Type in Action["type"]]: (state: State, data: Extract<Action, { type: Type }>['data']) => State;
};

const actions: Actions = {
    DO_SOMETHING: (state, data) => ({ nums: [data.num] }),
    DO_SOMETHING_ELSE: (state, data) => ({ nums: data.nums })
};

Check Playground

I opted for using Type in place of key since we are iterating through the types property.

The function Extract requires two arguments - a union as the first argument and the type it should match as the second. Think of it as similar to Array.prototype.filter for unions.

As a side note, please refrain from utilizing constructor types like Number; opt for number instead.

The interface Number pertains to number as an object whereas Number as a class corresponds to a class constructor:

interface Number {
    toString(radix?: number): string;
    toFixed(fractionDigits?: number): string;
    toExponential(fractionDigits?: number): string;
    toPrecision(precision?: number): string;
    valueOf(): number;
}

interface NumberConstructor {
    new(value?: any): Number;
    (value?: any): number;
    readonly prototype: Number;
    readonly MAX_VALUE: number;
    readonly MIN_VALUE: number;
    readonly NaN: number;
    readonly NEGATIVE_INFINITY: number;
    readonly POSITIVE_INFINITY: number;
}

declare var Number: NumberConstructor;

UPDATE

An excerpt from your shared example concerning the error you encountered:

function reducer(state: State, action: Action): State {
    
    /**
     * Argument of type '{ num: Number; } | { nums: Number[]; }'
     *  is not assignable to parameter of type '{ num: Number; } & { nums: Number[]; }'.
     */
    const newState = actions[action.type](state, action.data);
    return { ...state, ...newState };
}

This error occurs due to:

multiple candidates for the same type variable in contra-variant positions causes an intersection type to be inferred.

Therefore, the second argument of actions[action.type] function represents an intersection of all arguments within the Actions list.

Here you can find more examples, and read my article here.

You can include a conditional statement like so:

const reducer = (state: State, action: Action): State => {
    if(action.type==="DO_SOMETHING"){
        const newState = actions[action.type](state, action.data); // ok
    }
// ....
}

However, this approach might not be optimal when dealing with numerous actions. Another method would be preferred.

This link provides a similar example for reference.

Hence, you have options aside from the previous ones.

Firstly, you can go for type assertion using as and proceed.

Alternatively, consider this approach:


type Builder<A extends { type: PropertyKey, data: any }> = {
    [K in A["type"]]: (state: State, data: Extract<A, { type: K }>["data"]) => State;
};


const reducer = <
    Type extends PropertyKey,
    Data,
    Act extends { type: Type, data: Data },
    Acts extends Builder<Act>
>(actions: Acts) =>
    (state: State, action: Act): State => {
        const newState = actions[action.type](state, action.data);
        return { ...state, ...newState };
    }

Notice how I inferred each property of Action and established a strong connection between actions and action.

Explore Full Example

P.S. Remember that reducer is curried, so ensure to pass it as reducer(actions) to useReducer.

Answer 2

Almost there but not quite.

The issue lies in this code snippet Action['data'] within

(state: State, data: Action["data"]) => State;

, it should have been associated with the key property instead.

Action['data'] needs to be connected with the key property as shown in this sample:

type State = {
    nums: number[]
}
export type Action =
    | { type: "DO_SOMETHING", data: { num: number } }
    | { type: "DO_SOMETHING_ELSE", data: Pick<State, 'nums'> };

type Actions = {
    [Type in Action["type"]]: (state: State, data: Extract<Action, { type: Type }>['data']) => State;
};

const actions: Actions = {
    DO_SOMETHING: (state, data) => ({ nums: [data.num] }),
    DO_SOMETHING_ELSE: (state, data) => ({ nums: data.nums })
};

Check Playground

I opted for using Type in place of key since we are iterating through the types property.

The function Extract requires two arguments - a union as the first argument and the type it should match as the second. Think of it as similar to Array.prototype.filter for unions.

As a side note, please refrain from utilizing constructor types like Number; opt for number instead.

The interface Number pertains to number as an object whereas Number as a class corresponds to a class constructor:

interface Number {
    toString(radix?: number): string;
    toFixed(fractionDigits?: number): string;
    toExponential(fractionDigits?: number): string;
    toPrecision(precision?: number): string;
    valueOf(): number;
}

interface NumberConstructor {
    new(value?: any): Number;
    (value?: any): number;
    readonly prototype: Number;
    readonly MAX_VALUE: number;
    readonly MIN_VALUE: number;
    readonly NaN: number;
    readonly NEGATIVE_INFINITY: number;
    readonly POSITIVE_INFINITY: number;
}

declare var Number: NumberConstructor;

UPDATE

An excerpt from your shared example concerning the error you encountered:

function reducer(state: State, action: Action): State {
    
    /**
     * Argument of type '{ num: Number; } | { nums: Number[]; }'
     *  is not assignable to parameter of type '{ num: Number; } & { nums: Number[]; }'.
     */
    const newState = actions[action.type](state, action.data);
    return { ...state, ...newState };
}

This error occurs due to:

multiple candidates for the same type variable in contra-variant positions causes an intersection type to be inferred.

Therefore, the second argument of actions[action.type] function represents an intersection of all arguments within the Actions list.

Here you can find more examples, and read my article here.

You can include a conditional statement like so:

const reducer = (state: State, action: Action): State => {
    if(action.type==="DO_SOMETHING"){
        const newState = actions[action.type](state, action.data); // ok
    }
// ....
}

However, this approach might not be optimal when dealing with numerous actions. Another method would be preferred.

This link provides a similar example for reference.

Hence, you have options aside from the previous ones.

Firstly, you can go for type assertion using as and proceed.

Alternatively, consider this approach:


type Builder<A extends { type: PropertyKey, data: any }> = {
    [K in A["type"]]: (state: State, data: Extract<A, { type: K }>["data"]) => State;
};


const reducer = <
    Type extends PropertyKey,
    Data,
    Act extends { type: Type, data: Data },
    Acts extends Builder<Act>
>(actions: Acts) =>
    (state: State, action: Act): State => {
        const newState = actions[action.type](state, action.data);
        return { ...state, ...newState };
    }

Notice how I inferred each property of Action and established a strong connection between actions and action.

Explore Full Example

P.S. Remember that reducer is curried, so ensure to pass it as reducer(actions) to useReducer.

Answer 3

Answer №2

const EventDataMap = {
    CLICK_EVENT: { count: Number },
    HOVER_EVENT: { counts: Number[] } 
};

const EventType = keyof EventDataMap
const EventsMap = {
  [E in EventType]: { event: E; info: EventDataMap[E] }
}

// creating a union type:
type Event = EventsMap[EventType]

// accessing specific events by indexing into EventsMap with the key variable
type EventHandlers = {
    [E in EventType]: (state: State, eventData: EventsMap[E]) => State;
};

Answer 4

const EventDataMap = {
    CLICK_EVENT: { count: Number },
    HOVER_EVENT: { counts: Number[] } 
};

const EventType = keyof EventDataMap
const EventsMap = {
  [E in EventType]: { event: E; info: EventDataMap[E] }
}

// creating a union type:
type Event = EventsMap[EventType]

// accessing specific events by indexing into EventsMap with the key variable
type EventHandlers = {
    [E in EventType]: (state: State, eventData: EventsMap[E]) => State;
};

Is there a more efficient method to specify to typescript the type of "data"?

Answer №1

Answer №2

Similar questions

Leveraging global attributes beyond Vue components - Vue 3

Express not functioning properly with custom error handler

There was a TypeError error that occurred: Unable to access the property 'title' of null in Angular/Firebase

Is it possible to use a '.JS' file downloaded through Node Package Manager (npm) directly in a web browser?

Create a functioning implementation for retrieving a list of objects from a REST API

"Looking to personalize marker clusters using ngx-leaflet.markercluster? Let's explore some ways to customize

Retrieving a variable value set within a jQuery function from within an Angular 2 component

Using RxJs in Angular, you can invoke an observable from within an error callback

Pause and be patient while in the function that delivers an observable

Encountering a compiler error due to lack of patience for a promise?

Unselected default option in Angular 4's select dropdown

Empowering your Angular2 application with data binding

The module './product-list/product-list.component' could not be located

Differences Between Public and Private Constructors in TypeScript

My router-outlet is malfunctioning when trying to display my component

Utilizing the useSelect hook in Typescript to create custom types for WordPress Gutenberg, specifically targeting the core/editor

Obtaining the dimensions of each individual child component within an NgTemplate

Data has not been loaded into the Angular NGX Datatable

The defineProps<SomePropType>() method is not rendering the props as expected

Unraveling URLs in JSON with TypeScript