Building a filter for a union type in TypeScript: a step-by-step guide

Question

Building a filter for a union type in TypeScript: a step-by-step guide

Allow me to present an example to demonstrate my current objective.

const v1: { type: "S"; payload: string } = { type: "S", payload: "test" };
const v2: { type: "N"; payload: number } = { type: "N", payload: 123 };

type Actions = typeof v1 | typeof v2;

const findByType = <A extends Actions>(type: A["type"]) => (
    action: Actions
): action is A => action.type === type;

const filterWithBothNameAndType = [v1, v2].filter(findByType<typeof v1>("S"));
console.log(filterWithBothNameAndType[0].payload.trim());

const findByTypeDoesntWork = <A extends Actions, T extends A["type"]>(type: T) => (
    action: Actions
): action is A => action.type === type;

const filterWithJustType = [v1, v2].filter(findByTypeDoesntWork("S"));
console.log(filterWithJustType[0].payload.trim());

typescript playground

I have a function called findByType with correct type information, and another function named filterWithJustType that has an API I prefer, but it loses important type data. My goal is to have the API simply as filter("S") without needing to pass generic types. As of now, it seems like this approach only works with classes and instanceof, yet I aim to make it compatible with plain objects.

typescript

Answer 1

Answer №1

To filter out certain values, the Exclude and Extract methods can be used as outlined in the documentation. Here's an example:

type Example1 = Exclude<"apple" | "banana" | "cherry" | "date", "apple" | "cherry" | "fig">;  // "banana" | "date"
type Example2 = Extract<"apple" | "banana" | "cherry" | "date", "apple" | "cherry" | "fig">;  // "apple" | "cherry"

type Example3 = Exclude<string | number | (() => void), Function>;  // string | number
type Example4 = Extract<string | number | (() => void), Function>;  // () => void

Answer 2

To filter out certain values, the Exclude and Extract methods can be used as outlined in the documentation. Here's an example:

type Example1 = Exclude<"apple" | "banana" | "cherry" | "date", "apple" | "cherry" | "fig">;  // "banana" | "date"
type Example2 = Extract<"apple" | "banana" | "cherry" | "date", "apple" | "cherry" | "fig">;  // "apple" | "cherry"

type Example3 = Exclude<string | number | (() => void), Function>;  // string | number
type Example4 = Extract<string | number | (() => void), Function>;  // () => void

Answer 3

Answer №2

Shoutout to @artem for inspiring the creation of ActionMap concept, which led me to introduce actionCreator ensuring synchronization between keys and payload types. Here's a glimpse:

type ActionMap = {
    S: string;
    N: number;
};

function actionCreatorFactory<
    T extends keyof ActionMap,
    P extends ActionMap[T]
>(type: T) {
    return function actionCreator(payload: P) {
        return { type, payload };
    };
}

const actionCreators = {
    s: actionCreatorFactory("S"),
    n: actionCreatorFactory("N"),
};

const v1 = actionCreators.s("test");
const v2 = actionCreators.n(123);

const findByType = <
    T extends keyof ActionMap,
    A extends { type: T; payload: ActionMap[T] }
>(
    type: T
) => (action: A): action is A => action.type === type;

const filterWithJustType = [v1, v2].filter(findByType("S"));
console.log(filterWithJustType[0].payload.trim());

This innovative solution centralizes type declarations in ActionMap, simplifying the process by deriving everything else from it.

UPDATE: Check out the newly published article with additional examples using this methodology https://medium.com/@dhruvrajvanshi/some-tips-on-type-safety-with-redux-98588a85604c

Answer 4

Shoutout to @artem for inspiring the creation of ActionMap concept, which led me to introduce actionCreator ensuring synchronization between keys and payload types. Here's a glimpse:

type ActionMap = {
    S: string;
    N: number;
};

function actionCreatorFactory<
    T extends keyof ActionMap,
    P extends ActionMap[T]
>(type: T) {
    return function actionCreator(payload: P) {
        return { type, payload };
    };
}

const actionCreators = {
    s: actionCreatorFactory("S"),
    n: actionCreatorFactory("N"),
};

const v1 = actionCreators.s("test");
const v2 = actionCreators.n(123);

const findByType = <
    T extends keyof ActionMap,
    A extends { type: T; payload: ActionMap[T] }
>(
    type: T
) => (action: A): action is A => action.type === type;

const filterWithJustType = [v1, v2].filter(findByType("S"));
console.log(filterWithJustType[0].payload.trim());

This innovative solution centralizes type declarations in ActionMap, simplifying the process by deriving everything else from it.

UPDATE: Check out the newly published article with additional examples using this methodology https://medium.com/@dhruvrajvanshi/some-tips-on-type-safety-with-redux-98588a85604c

Answer 5

Answer №3

One issue is that the compiler must assume that if a type extending Actions possesses a type member with literal value S, it must be typeof v1. However, this assumption is risky due to the weak constraint of extends Actions, allowing for situations like:

const v3: { type: "S"; payload: boolean } = { type: "S", payload: false };

const filterWithJustType3 = [v1, v2, v3].filter(findByTypeDoesntWork("S"));

While this code does not compile in version 2.6 when strictFunctionTypes is enabled, the additional soundness introduced by this setting is not fully utilized by type inference.

To explicitly inform the compiler that a union member can only be inferred from its type property, you can establish the type mapping manually:

const v1: { type: "S"; payload: string } = { type: "S", payload: "test" };
const v2: { type: "N"; payload: number } = { type: "N", payload: 123 };

interface ActionMap {
    S: typeof v1;
    N: typeof v2;
}

type Actions = ActionMap[keyof ActionMap];


const findByTypeWorks = <T extends keyof ActionMap>(type: T) => (
    action: Actions
): action is ActionMap[T] => action.type === type;

const filterWithJustType = [v1, v2].filter(findByTypeWorks("S"));
console.log(filterWithJustType[0].payload.trim());

Answer 6

One issue is that the compiler must assume that if a type extending Actions possesses a type member with literal value S, it must be typeof v1. However, this assumption is risky due to the weak constraint of extends Actions, allowing for situations like:

const v3: { type: "S"; payload: boolean } = { type: "S", payload: false };

const filterWithJustType3 = [v1, v2, v3].filter(findByTypeDoesntWork("S"));

While this code does not compile in version 2.6 when strictFunctionTypes is enabled, the additional soundness introduced by this setting is not fully utilized by type inference.

To explicitly inform the compiler that a union member can only be inferred from its type property, you can establish the type mapping manually:

const v1: { type: "S"; payload: string } = { type: "S", payload: "test" };
const v2: { type: "N"; payload: number } = { type: "N", payload: 123 };

interface ActionMap {
    S: typeof v1;
    N: typeof v2;
}

type Actions = ActionMap[keyof ActionMap];


const findByTypeWorks = <T extends keyof ActionMap>(type: T) => (
    action: Actions
): action is ActionMap[T] => action.type === type;

const filterWithJustType = [v1, v2].filter(findByTypeWorks("S"));
console.log(filterWithJustType[0].payload.trim());

Building a filter for a union type in TypeScript: a step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Ways to set a default value for a union type parameter without encountering the error "could be instantiated with a different subtype of constraint"

What is the best way to display multiple HTML files using React?

Encountering a Typescript Type error when attempting to include a new custom property 'tab' within the 'Typography' component in a Material UI theme

Angular 2: The *ngFor directive is unable to locate a suitable differing framework

Angular // binding innerHTML data

The issue of not displaying the Favicon in Next.js is a common problem

Top method for transforming an array into an object

Operators within an observable that perform actions after a specific duration has elapsed

Encountering difficulty when trying to define the onComplete function in Conf.ts. A type error is occurring, stating that '(passed: any) => void' is not compatible with type '() => void'.ts(2322)'

Passing data between parent and child components within an Angular application using mat tab navigation

Preserve the custom hook's return value in the component's state

The type declaration for the Storage.prototype.setObject method

Make sure that every component in create-react-app includes an import for react so that it can be properly

The functionality of allowEmpty : true in gulp 4.0 does not seem to be effective when dealing with

Passing data from getServerSideProps to an external component in Next.js using typescript

Transferring 'properties' to child components and selectively displaying them based on conditions

Tips for defining types for specific CSS properties in TypeScript, such as variables

Eliminating null values from a multidimensional array

Dynamically load a custom element with a Component

Thoroughly verifying API responses in RTK Query with Zod schema