Identifying the specific type within a union of types using a discriminator

Question

Identifying the specific type within a union of types using a discriminator

How can I specify the correct typing for the action argument in the function withoutSwitchReducer as shown below?

enum ActionTypesEnum {
    FOO = 'FOO',
    BAR = 'BAR',
}

type ActionTypes = {
    type: ActionTypesEnum.FOO,
    payload: { username: string }
} | {
    type: ActionTypesEnum.BAR,
    payload: { password: string },
};

// The existing "withSwitchReducer" successfully infers the discriminator from action.type

function withSwitchReducer(action: ActionTypes) {
    switch (action.type) {
        case 'FOO':
            return action.payload.username;
        case 'BAR':
            return action.payload.password;
        default:
            return null;
    }
}

// The issue arises below due to a lack of IntelliSense when trying to access properties that don't exist on certain payloads

const withoutSwitchReducer = {
    [ActionTypesEnum.FOO]: (action: ActionTypes) => {
        return action.payload.username;
    },
    [ActionTypesEnum.BAR]: (action: ActionTypes) => {
        return action.payload.password;
    }
};

For easier understanding, you can view the same code with IntelliSense here: TS Playground Link

typescript typescript2.0 typescript3.0

Answer 1

Answer №1

Here are a couple of approaches to tackle this problem:

One option is to define the type once:

const withoutSwitchHandler: { [key in ActionTypesEnum]: (action: Extract<ActionTypes, { type: key }>) => string } = {
    [ActionTypesEnum.FOO]: (action) => {
        return action.payload.username;
    },
    [ActionTypesEnum.BAR]: (action) => {
        return action.payload.password;
    },
};

Alternatively, you can specify them separately:

const withoutSwitchHandler2 = {
    [ActionTypesEnum.FOO]: (action: Extract<ActionTypes, { type: ActionTypesEnum.FOO }>) => {
        return action.payload.username;
    },
    [ActionTypesEnum.BAR]: (action: Extract<ActionTypes, { type: ActionTypesEnum.BAR }>) => {
        return action.payload.password;
    },
};

The advantage of declaring the type once is that you avoid repetition, while defining them individually enables type inference for the return values of those functions.

UPDATE: A suggestion from Titian Cernicova-Dragomir in the comments is to declare it as a reusable type:

type HandlerMap<T extends { type: string }> = { [P in T['type']]: (action: Extract<T, { type: P }>) => any }

The function's return type is any. Although attempting to infer the actual return value for each definition may not be feasible.

Considering it's utilized as a reducer map, the output value might not be crucial since it's consumed by the framework.

Answer 2

Here are a couple of approaches to tackle this problem:

One option is to define the type once:

const withoutSwitchHandler: { [key in ActionTypesEnum]: (action: Extract<ActionTypes, { type: key }>) => string } = {
    [ActionTypesEnum.FOO]: (action) => {
        return action.payload.username;
    },
    [ActionTypesEnum.BAR]: (action) => {
        return action.payload.password;
    },
};

Alternatively, you can specify them separately:

const withoutSwitchHandler2 = {
    [ActionTypesEnum.FOO]: (action: Extract<ActionTypes, { type: ActionTypesEnum.FOO }>) => {
        return action.payload.username;
    },
    [ActionTypesEnum.BAR]: (action: Extract<ActionTypes, { type: ActionTypesEnum.BAR }>) => {
        return action.payload.password;
    },
};

The advantage of declaring the type once is that you avoid repetition, while defining them individually enables type inference for the return values of those functions.

UPDATE: A suggestion from Titian Cernicova-Dragomir in the comments is to declare it as a reusable type:

type HandlerMap<T extends { type: string }> = { [P in T['type']]: (action: Extract<T, { type: P }>) => any }

The function's return type is any. Although attempting to infer the actual return value for each definition may not be feasible.

Considering it's utilized as a reducer map, the output value might not be crucial since it's consumed by the framework.

Answer 3

Answer №2

ActionTypes is considered a composite type, therefore when declaring a variable of this type, it is important to explicitly define its specific type using the as keyword.

Solution:

function withSwitchReducer(action: ActionTypes) {
    switch (action.type) {
        case 'FOO':
            return (action.payload as {
                type: ActionTypesEnum.FOO,
                payload: { username: string }
            }).username;
        case 'BAR':
            return (action.payload as {
              type: ActionTypesEnum.BAR,
              payload: { password: string }
            }).password;
        default:
            return null;
    }
}

const withoutSwitchReducer = {
    [ActionTypesEnum.FOO]: (action: ActionTypes) => {
        return (action.payload as {
            type: ActionTypesEnum.FOO,
            payload: { username: string }
        }).username;
    },
    [ActionTypesEnum.BAR]: (action: ActionTypes) => {
        return (action.payload as {
          type: ActionTypesEnum.BAR,
          payload: { password: string }
        }).password;
    }
};

A more efficient solution:

interface Foo {
    type: 'FOO'
    payload: { username: string }
}

interface Bar {
    type: 'BAR'
    payload: { password: string }
}

type ActionTypes = Foo | Bar

function withSwitchReducer(action: ActionTypes) {
    switch (action.type) {
    case 'FOO':
        return (action.payload as Foo).username;
    case 'BAR':
        return (action.payload as Bar).password;
    default:
        return null;
    }
}

const withoutSwitchReducer = {
    'FOO': (action: ActionTypes) => {
        return (action.payload as Foo).username;
    },
    'BAR': (action: ActionTypes) => {
        return (action.payload as Bar).password;
    }
};

In TypeScript, you can use string literals as types, for example var a: 'Apple'. You can also combine these string literal types, like var b: 'Apple' | 'Orange'.

Answer 4

ActionTypes is considered a composite type, therefore when declaring a variable of this type, it is important to explicitly define its specific type using the as keyword.

Solution:

function withSwitchReducer(action: ActionTypes) {
    switch (action.type) {
        case 'FOO':
            return (action.payload as {
                type: ActionTypesEnum.FOO,
                payload: { username: string }
            }).username;
        case 'BAR':
            return (action.payload as {
              type: ActionTypesEnum.BAR,
              payload: { password: string }
            }).password;
        default:
            return null;
    }
}

const withoutSwitchReducer = {
    [ActionTypesEnum.FOO]: (action: ActionTypes) => {
        return (action.payload as {
            type: ActionTypesEnum.FOO,
            payload: { username: string }
        }).username;
    },
    [ActionTypesEnum.BAR]: (action: ActionTypes) => {
        return (action.payload as {
          type: ActionTypesEnum.BAR,
          payload: { password: string }
        }).password;
    }
};

A more efficient solution:

interface Foo {
    type: 'FOO'
    payload: { username: string }
}

interface Bar {
    type: 'BAR'
    payload: { password: string }
}

type ActionTypes = Foo | Bar

function withSwitchReducer(action: ActionTypes) {
    switch (action.type) {
    case 'FOO':
        return (action.payload as Foo).username;
    case 'BAR':
        return (action.payload as Bar).password;
    default:
        return null;
    }
}

const withoutSwitchReducer = {
    'FOO': (action: ActionTypes) => {
        return (action.payload as Foo).username;
    },
    'BAR': (action: ActionTypes) => {
        return (action.payload as Bar).password;
    }
};

In TypeScript, you can use string literals as types, for example var a: 'Apple'. You can also combine these string literal types, like var b: 'Apple' | 'Orange'.

Identifying the specific type within a union of types using a discriminator

Answer №1

Answer №2

Solution:

A more efficient solution:

Similar questions

To dismiss a popup on a map, simply click on any area outside the map

Adding an item into a list with TypeScript is as simple as inserting it in the correct

Experiencing a hitch when attempting to deploy an Angular 2 application on Heroku

Vue + TypeScript prop type issue: "'Foo' is intended as a type, but is being treated as a value in this context."

Challenges encountered while implementing generic types in TypeScript and React (including context provider, union types, and intersection

Using TypeScript to test a Vue3 component that includes a slot with Cypress

Mastering the art of theming components using styled-components and Material-UI

Error encountered in Storybook: The value is not iterable (property Symbol(Symbol.iterator) cannot be read)

Seamless database migrations using sequelize and typescript

The directive for angular digits only may still permit certain characters to be entered

How to effectively implement React Context with the useState hook in a TypeScript project

Encountering errors in Typescript build due to issues in the node_modules directory

How to extract key-value pairs from an object in a TypeScript API request

What could be causing my Vue code to behave differently than anticipated?

What is the best way to restrict the maximum number of items stored in local storage?

Reusing a lazy-loaded module across multiple applications

"Trouble with Typescript's 'keyof' not recognizing 'any' as a constraint

Errors occur with Metro bundler while utilizing module-resolver

Creating Object of Objects in TypeScript: A Comprehensive Guide

React: Implement a feature to execute a function only after the user finishes typing