Typescript tip: Changing the property type in a discriminated union

Question

Typescript tip: Changing the property type in a discriminated union

I'm encountering a slight issue with TypeScript inference on discriminated unions. Let's say I have the following types:

type TypeA = {
  type: 'a';
  formData: number;
  onSubmit: (data: number) => void;
};

type TypeB = {
  type: 'b';
  formData: Date;
  onSubmit: (data: Date) => void;
};

type TypeAB = TypeA | TypeB;

For simplicity, let's assume I also have a function that takes a parameter typed as the discriminated union

export const MyForm = (props: TypeAB) => {
  const handleSubmit = () => {
    // do other things

    props.onSubmit(props.formData);
  };

  return  "return does no matter"
};

The issue arises when calling submit as TypeScript complains that props.formData may not match the expected type of onSubmit

https://i.sstatic.net/oxOsJ.png

However, based on the defined types, this should not be possible. onSubmit always corresponds to the type of formData

If I check for the type before calling onSubmit, it works without any issues

const handleSubmit = () => {
    // do other things
    if(props.type === 'a') props.onSubmit(props.formData);
    if(props.type === 'b') props.onSubmit(props.formData);

  };

Nevertheless, it seems unnecessary to perform this check. Any insights on why TypeScript is raising concerns here and how to properly define the discriminated union?

typescript discriminated-union

Answer 1

Answer №1

When analyzing code in TypeScript, it can only process a single block at a time. It would be beneficial if TypeScript could evaluate the line

props.onSubmit(props.formData);

twice, once assuming that props is of type TypeA, and another time assuming it is of type TypeB. However, this is not currently possible.

The analysis focuses on the types of props.onSubmit (a union type)

((data: number) => void) | ((data: Date) => void)

and props.formData (number | Date). The conclusion drawn is based solely on these types, disregarding the fact that both originate from the same props object. TypeScript does not account for identities, only types.

This results in the compiler losing the correlation between union types props.onSubmit and props.formData, as detailed in microsoft/TypeScript#30581.

The recommended solution, outlined in microsoft/TypeScript#47109, involves refactoring away from unions and instead utilizing generic indexed accesses into mapped types.

This approach allows the compiler to analyze the code block once with appropriately generic types, establishing correlations through the appearance of the generic type parameter.

To refactor the example provided, first create a simple mapping type from the old key type to the formData type using a utility interface:

interface TypeMap {
    a: number;
    b: Date;
}

Define TypeA, TypeB, and TypeAB within a distributive object type:

type TypeAB<K extends keyof TypeMap = keyof TypeMap> = { [P in K]: {
    type: P;
    formData: TypeMap[P];
    onSubmit: (data: TypeMap[P]) => void;
} }[K];

TypeAB represents TypeAB<"a" | "b">, equivalent to the original version. To obtain TypeA and TypeB, you can use the following:

type TypeA = TypeAB<"a">;

type TypeB = TypeAB<"b">;

Make MyForm generic by specifying the key type K:

export const MyForm = <K extends keyof TypeMap>(props: TypeAB<K>) => {
    const handleSubmit = () => {
        props.onSubmit(props.formData); // all good
    };   
    return "return does no matter"
};

This modification works because props.onSubmit is recognized as the function type

(data: TypeMap[K]) => void</code, and <code>props.formData

fits the type TypeMap[K], matching the parameter type for props.onSubmit.

For further insights into the refactoring process and its necessity, refer to microsoft/TypeScript#47109.

Playground link to code

Answer 2

When analyzing code in TypeScript, it can only process a single block at a time. It would be beneficial if TypeScript could evaluate the line

props.onSubmit(props.formData);

twice, once assuming that props is of type TypeA, and another time assuming it is of type TypeB. However, this is not currently possible.

The analysis focuses on the types of props.onSubmit (a union type)

((data: number) => void) | ((data: Date) => void)

and props.formData (number | Date). The conclusion drawn is based solely on these types, disregarding the fact that both originate from the same props object. TypeScript does not account for identities, only types.

This results in the compiler losing the correlation between union types props.onSubmit and props.formData, as detailed in microsoft/TypeScript#30581.

The recommended solution, outlined in microsoft/TypeScript#47109, involves refactoring away from unions and instead utilizing generic indexed accesses into mapped types.

This approach allows the compiler to analyze the code block once with appropriately generic types, establishing correlations through the appearance of the generic type parameter.

To refactor the example provided, first create a simple mapping type from the old key type to the formData type using a utility interface:

interface TypeMap {
    a: number;
    b: Date;
}

Define TypeA, TypeB, and TypeAB within a distributive object type:

type TypeAB<K extends keyof TypeMap = keyof TypeMap> = { [P in K]: {
    type: P;
    formData: TypeMap[P];
    onSubmit: (data: TypeMap[P]) => void;
} }[K];

TypeAB represents TypeAB<"a" | "b">, equivalent to the original version. To obtain TypeA and TypeB, you can use the following:

type TypeA = TypeAB<"a">;

type TypeB = TypeAB<"b">;

Make MyForm generic by specifying the key type K:

export const MyForm = <K extends keyof TypeMap>(props: TypeAB<K>) => {
    const handleSubmit = () => {
        props.onSubmit(props.formData); // all good
    };   
    return "return does no matter"
};

This modification works because props.onSubmit is recognized as the function type

(data: TypeMap[K]) => void</code, and <code>props.formData

fits the type TypeMap[K], matching the parameter type for props.onSubmit.

For further insights into the refactoring process and its necessity, refer to microsoft/TypeScript#47109.

Playground link to code

Typescript tip: Changing the property type in a discriminated union

Answer №1

Similar questions

Angular's ng-select fails to select the value when generating the dynamic control

Transform the date format from Google Forms to TypeScript

Convert a fresh Date() to the format: E MMM dd yyyy HH:mm:ss 'GMT'z

The FormGroup Matrix in Angular 2+

React Traffic Light Component: Colors Stuck After Timeout

Buttons for camera actions are superimposed on top of the preview of the capacitor camera

An object that appears to be empty at first glance, but contains values that are undefined

What is the best way to create a mapping function in JavaScript/TypeScript that accepts multiple dynamic variables as parameters?

The technique for concealing particular div elements is contingent upon the specific values within an array

Guide on integrating TypeScript with the Esri Leaflet JavaScript Plugin

How to use TypeScript to filter arrays with multiple dimensions

Implement a global interceptor at the module level in NestJS using the Axios HttpModule

Unable to utilize class identifiers in TypeScript because of 'incompatible call signatures' restriction

Using AngularJS to inject a service into a static property of a standard class

One effective way to transfer state to a child component using function-based React

Ionic application encountering 'push' property error in MQTT only when used within an if statement

Displaying a React component within a StencilJS component and connecting the slot to props.children

Is it possible to utilize useRef to transfer a reference of an element to a child component?

What method can be used to verify if a username exists within Angular data?

Different ways to determine if a given string exists within an Object