Exploring Objects with Union Types in TypeScript

Question

Exploring Objects with Union Types in TypeScript

Looking to iterate through an object that combines two interfaces.

    interface Family {
      cat: string;
      age: string;
      family: string;
      lastYearFamily: string;
    }
    
    interface Model {
      cat: string;
      age: string;
      model: string;
      lastYearModel: string;
    }
    
    interface Props {
        attributionType: 'family' | 'model';
        attributions?: Family[] | Model[];
    }
    
    const RowComponent = ({
    attributionType,
    attributions
    }: props) =>{
    
       return (
          {attributions && attributions.map((attribution: Family | Model ) => (
                             <tr>
                                {
                                    attributionType === 'family' && (
                                        <React.Fragment>
                                            <th>{attribution.family}</th>
                                            <th>Family</th>
                                        </React.Fragment>
                                    )
                                } 
                                {
                                    attributionType === 'model' && (
                                        <React.Fragment>
                                            <th>{attribution.model}</th>
                                            <th>Model</th>
                                        </React.Fragment>
                                    )
                                } 
                             </tr>
                        ))}
    );
    
    }

Struggling with accessing non-common members in the union object.

Can only access cat and age, not family, lastYearFamily, etc.

Prefer to keep code generic without separate components for each attribution type.

typescript

Answer 1

Answer №1

When defining the string 'family' in the Props interface, it is important to explicitly specify that it should infer to Family[] for the attributions. Otherwise, there may be confusion regarding the correlation between attributionType and attributions.

    // your code
    interface Props {
        attributionType: 'family' | 'model';
        attributions?: Family[] | Model[];
    }

To provide clear guidance to the compiler, it is recommended to define separate interfaces for each type and then combine them accordingly:

interface FamilyProp {
  attributionType: "family";
  attributions?: Family[];
}

interface ModelProp {
  attributionType: "model";
  attributions?: Model[];
}

type Props = ModelProp | FamilyProp;

function foo(bar: Props) {
    if (bar.attributionType === "model") {
        bar.attributions[0].lastYearModel; // compiles fine
    }
    if (bar.attributionType === "family") {
        bar.attributions[0].lastYearFamily; // compiles fine
    }
}

By using Type Guard, the compiler will properly infer the types within the if statements.

Answer 2

When defining the string 'family' in the Props interface, it is important to explicitly specify that it should infer to Family[] for the attributions. Otherwise, there may be confusion regarding the correlation between attributionType and attributions.

    // your code
    interface Props {
        attributionType: 'family' | 'model';
        attributions?: Family[] | Model[];
    }

To provide clear guidance to the compiler, it is recommended to define separate interfaces for each type and then combine them accordingly:

interface FamilyProp {
  attributionType: "family";
  attributions?: Family[];
}

interface ModelProp {
  attributionType: "model";
  attributions?: Model[];
}

type Props = ModelProp | FamilyProp;

function foo(bar: Props) {
    if (bar.attributionType === "model") {
        bar.attributions[0].lastYearModel; // compiles fine
    }
    if (bar.attributionType === "family") {
        bar.attributions[0].lastYearFamily; // compiles fine
    }
}

By using Type Guard, the compiler will properly infer the types within the if statements.

Answer 3

Answer №2

To implement this functionality, one would typically utilize custom type guards. These guards involve converting a variable to a potential type and verifying the presence of a specific field unique to that type. This process allows for the inference that the value stored in the variable is indeed of the specified type.

interface Family {
      cat: string;
      age: string;
      family: string;
      lastYearFamily: string;
}
    
interface Model {
      cat: string;
      age: string;
      model: string;
      lastYearModel: string;
}

const isFamily = (f: Family|Model): f is Family => {
    return (f as Family).family !== undefined
}

const isModel = (f: Family|Model): f is Model => {
    return (f as Model).model !== undefined
}

const x : (Family | Model)[] = [
    {cat: "x", age: "y", family: "z", lastYearFamily: "w"},
    {cat: "x", age: "y", model: "z", lastYearModel: "w"}
]

x.map(e => {
    if (isFamily(e)) {
        return e.family;
    } else {
        return e.model;
    }
})

Answer 4

To implement this functionality, one would typically utilize custom type guards. These guards involve converting a variable to a potential type and verifying the presence of a specific field unique to that type. This process allows for the inference that the value stored in the variable is indeed of the specified type.

interface Family {
      cat: string;
      age: string;
      family: string;
      lastYearFamily: string;
}
    
interface Model {
      cat: string;
      age: string;
      model: string;
      lastYearModel: string;
}

const isFamily = (f: Family|Model): f is Family => {
    return (f as Family).family !== undefined
}

const isModel = (f: Family|Model): f is Model => {
    return (f as Model).model !== undefined
}

const x : (Family | Model)[] = [
    {cat: "x", age: "y", family: "z", lastYearFamily: "w"},
    {cat: "x", age: "y", model: "z", lastYearModel: "w"}
]

x.map(e => {
    if (isFamily(e)) {
        return e.family;
    } else {
        return e.model;
    }
})

Exploring Objects with Union Types in TypeScript

Answer №1

Answer №2

Similar questions

Importing configuration file in CRA Typescript with values for post-deployment modifications

Displaying data from an Angular subscription in a user interface form

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

Transforming button click from EventEmitter to RXJS observable

Express Server Providers for Angular 17's Server-Side Rendering

Creating Beautiful MDX Layouts with Chakra UI

Stepper that is vertical combined with table information

Tips for specifying the return type of app.mount()

What could be causing the issue with Vite build and npm serve not functioning together?

The resend email feature isn't functioning properly on the production environment with next js, however, it works seamlessly in the development environment

Guide on integrating google play services into a nativescript plugin seed?

The Angular custom modal service is malfunctioning as the component is not getting the necessary updates

Issue with exclude not functioning in tsconfig.json for Angular Typescript deployment

One-Of-A-Kind Typescript Singleton Featuring the Execute Method

Difficulty with Angular's Interpolation and incorporating elements

Distinguishing Between TypeScript Interface Function Properties

Deactivate the button if the mat-radio element is not selected

Using Rxjs to dynamically map values from an array with forkJoin

What is the proper way to enhance properties?

Developing a declaration for an unnamed function in a JavaScript file