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

The 'Component' binding element is assumed to have an unspecified 'any' type in TypeScript

Tailored production method based on specific criteria

Modify the key within an array of objects that share a common key

What is the reason behind typescript making it necessary for me to find a way to set a value of type

How can I utilize the Redux store outside of a component in a React application with ASP.NET Core and TypeScript?

Tips for utilizing the keyword 'this' within a Promise

The routerlink feature consistently directs back to the default page

retrieve a nested object's property using a dynamic string

The element of type 'OverridableComponent<LinkTypeMap<{}, "a">>' cannot be assigned to a 'ReactNode'

Adding Components Dynamically to Angular Parent Dashboard: A Step-by-Step Guide

Angular 2 decorators grant access to private class members

Is it possible to maintain component data in Angular while also incorporating dynamic components?

Currently, I am utilizing version 6.10.0 of @mui/x-date-pickers. I am interested in learning how to customize the color and format of a specific component within the library

Tips for addressing the browser global object in TypeScript when it is located within a separate namespace with the identical name

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

Defining a structure for an entity in which its attributes distinguish between different data types and an array combination

TypeOrm is struggling to identify the entities based on the directory path provided

Webpack, TypeScript, and modules are set to "esnext," resulting in a change to undefined

Working with Angular to add various items to an array based on multiple conditions

No matter what I attempt, Ng-options is still failing to work properly