Comparing SomeType to SomeType[] - Which One Is Better?

Question

Comparing SomeType to SomeType[] - Which One Is Better?

Using a constant string value to narrow down a union type is simple and effective:

type Payload1 = { /* ... arbitrary type ... */ };
type Payload2 = { /* ... arbitrary type ... */ };
type T1 = { type: 'type1', payload: Payload1 }
type T2 = { type: 'type2', payload: Payload2 }
type T = T1 | T2;

const fn = (value: T) => {

    if (value.type === 'type1') {
        value; // TypeScript recognizes `value is T1`
    }

    if (value.type === 'type2') {
        value; // TypeScript recognizes `value is T2`
    }

};

Initially, there are only two cases to consider:

value.type is the constant "type1"
value.type is the constant "type2"

But when expanding T to allow payload to be a single item or an array, the possibilities increase to 4:

value.type is "type1" and value.payload is not an array
value.type is "type1" and value.payload is an array
value.type is "type2" and value.payload is not an array
value.type is "type2" and value.payload is an array

Here's an illustration:

type Payload1 = {};
type Payload2 = {};
type T1Single = { type: 'type1', payload: Payload1 }
type T1Batch = { type: 'type1', payload: Payload1[] };
type T2Single = { type: 'type2', payload: Payload2 }
type T2Batch = { type: 'type2', payload: Payload2[] };

// Updated T with 4 types:
type T = T1Single | T1Batch | T2Single | T2Batch;

const fn = (value: T) => {

    if (value.type === 'type1' && !Array.isArray(value.payload)) {
        value; // TypeScript indicates `value is T1Single | T1Batch` now
    }

    if (value.type === 'type1' && Array.isArray(value.payload)) {
        value; // TypeScript indicates `value is T1Single | T1Batch` now
    }

    if (value.type === 'type2' && !Array.isArray(value.payload)) {
        value; // TypeScript indicates `value is T2Single | T2Batch` now
    }

    if (value.type === 'type2' && Array.isArray(value.payload)) {
        value; // TypeScript indicates `value is T2Single | T2Batch` now
    }

};

Playground

Why is typescript only partially narrowing down the type, and how can I achieve fully narrowed values for the 4 cases?

UPDATE: It appears that using multiple conditions in the if statement does not help; TypeScript struggles with narrowing based on Array.isArray alone:

type Payload = {};
type Single = { payload: Payload }
type Batch = { payload: Payload[] };

const fn = (value: Single | Batch) => {

    if (!Array.isArray(value.payload)) {
        value; // TypeScript still shows `value is Single | Batch`
    }

    if (Array.isArray(value.payload)) {
        value; // TypeScript still shows `value is Single | Batch`
    }

};

typescript narrowing

Answer 1

Answer №1

When attempting to handle T as a discriminated union, it's important to note that the payload property is not identified as a discriminant. In order for a property to serve as a valid discriminant, it must consist of unit/literal types. While your type property is acceptable due to "type1" and "type2" acting as string literal types, arrays and your Payload types are considered object types rather than literal types. Therefore, attempting to validate value.payload will not effectively narrow the apparent type of value itself.

It's worth noting that Array.isArray(value.payload) acts as a type guard on the value.payload property, but does not propagate the narrowing up to value due to it not being a discriminant. There is an existing feature request at microsoft/TypeScript#42384 to enable property type guards to spread up to containing objects. However, this feature is not currently implemented as it was deemed costly to generate new types for every type guard check on a nested property.

For the time being, if you want to achieve similar behavior, you can create a custom type guard function that narrows a value based on whether its payload property is an array. Here's an example:

function hasArrayPayload<T extends { payload: any }>(
    value: T): value is Extract<T, { payload: any[] }> {
    return Array.isArray(value.payload)
}

Instead of directly using Array.isArray(value.payload), you can utilize hasArrayPayload(value):

const fn = (value: T) => {
    if (value.type === 'type1' && !hasArrayPayload(value)) {
        value; // (parameter) value: T1Single
    }

    if (value.type === 'type1' && hasArrayPayload(value)) {
        value; // (parameter) value: T1Batch
    }

    if (value.type === 'type2' && !hasArrayPayload(value)) {
        value; // (parameter) value: T2Single
    }

    if (value.type === 'type2' && hasArrayPayload(value)) {
        value; // (parameter) value: T2Batch
    }
};

Playground link to code

Answer 2

When attempting to handle T as a discriminated union, it's important to note that the payload property is not identified as a discriminant. In order for a property to serve as a valid discriminant, it must consist of unit/literal types. While your type property is acceptable due to "type1" and "type2" acting as string literal types, arrays and your Payload types are considered object types rather than literal types. Therefore, attempting to validate value.payload will not effectively narrow the apparent type of value itself.

It's worth noting that Array.isArray(value.payload) acts as a type guard on the value.payload property, but does not propagate the narrowing up to value due to it not being a discriminant. There is an existing feature request at microsoft/TypeScript#42384 to enable property type guards to spread up to containing objects. However, this feature is not currently implemented as it was deemed costly to generate new types for every type guard check on a nested property.

For the time being, if you want to achieve similar behavior, you can create a custom type guard function that narrows a value based on whether its payload property is an array. Here's an example:

function hasArrayPayload<T extends { payload: any }>(
    value: T): value is Extract<T, { payload: any[] }> {
    return Array.isArray(value.payload)
}

Instead of directly using Array.isArray(value.payload), you can utilize hasArrayPayload(value):

const fn = (value: T) => {
    if (value.type === 'type1' && !hasArrayPayload(value)) {
        value; // (parameter) value: T1Single
    }

    if (value.type === 'type1' && hasArrayPayload(value)) {
        value; // (parameter) value: T1Batch
    }

    if (value.type === 'type2' && !hasArrayPayload(value)) {
        value; // (parameter) value: T2Single
    }

    if (value.type === 'type2' && hasArrayPayload(value)) {
        value; // (parameter) value: T2Batch
    }
};

Playground link to code

Answer 3

Answer №2

It is impossible to simultaneously categorize multiple types in one go.

Instead, you can utilize type predicates or type guards.

For instance:

type Payload1 = { action: string };
type Payload2 = { action: number };
type T1 = { type: "type1"; payload: Payload1 };
type T2 = { type: "type2"; payload: Payload2 };
type T3 = { type: "type1"; payload: Payload1[] };
type T4 = { type: "type2"; payload: Payload2[] };
type T = T1 | T2 | T3 | T4;

const isType1 = (arg: T1 | T2 | T3 | T4): arg is T1 | T3 => {
  return arg.type === "type1";
};
const isTypeArray = <T>(arg: T | T[]): arg is T[] => {
  return Array.isArray(arg);
};

Check out the codesandbox link for the example above: playground

Answer 4

It is impossible to simultaneously categorize multiple types in one go.

Instead, you can utilize type predicates or type guards.

For instance:

type Payload1 = { action: string };
type Payload2 = { action: number };
type T1 = { type: "type1"; payload: Payload1 };
type T2 = { type: "type2"; payload: Payload2 };
type T3 = { type: "type1"; payload: Payload1[] };
type T4 = { type: "type2"; payload: Payload2[] };
type T = T1 | T2 | T3 | T4;

const isType1 = (arg: T1 | T2 | T3 | T4): arg is T1 | T3 => {
  return arg.type === "type1";
};
const isTypeArray = <T>(arg: T | T[]): arg is T[] => {
  return Array.isArray(arg);
};

Check out the codesandbox link for the example above: playground

Comparing SomeType to SomeType[] - Which One Is Better?

Answer №1

Answer №2

Similar questions

Issues with Cross-Origin Resource Sharing (CORS) have been identified on the latest versions of Android in Ionic Cordova. However, this problem does not

Handling errors in nested asynchronous functions in an express.js environment

The type 'never' does not have a property named 'map'

Ways to avoid using a specific type in TypeScript

I'm encountering a Typescript error where I'm unable to assign a function to RefObject.current and it's indicating that the function is not callable

Issue connecting to Oracle database: Unable to access properties of undefined (attempting to read '_getConnection')

When I select a checkbox in Angular 2, the checkall function does not continue to mark the selected checkbox

Incorrect line numbers displayed in component stack trace [TypeScript + React]

Encountering an error in Angular 8 where attempting to access an element in ngOnInit results in "Cannot read property 'focus' of null"

Angular 1.5 Karma unit test causes duplicate loading of ng-mock library

Error Message: The Reference.update operation in Angular Firebase failed due to the presence of undefined value in the 'users.UID.email' property

Typescript Syntax for Inferring Types based on kind

Type Assertion for Optional Values in TypeScript

Adding existing tags to Select2 in Angular2 can be accomplished by following these steps:

Error: Attempting to access 'pageContext' property on undefined object, resulting in TypeError while utilizing sp pnp v3

What is the process of mapping in a React Element?

Leverage one Injectable service within another Injectable service in Angular 5

How to use TypeScript to print a blob (PDF) in Internet Explorer or Microsoft Edge?

How to stop a method in Angular2 when a specific response is received?

Saving a boolean value and a number to Firestore in an Angular application