Creating a function that can map various types of objects to a single type

Question

Creating a function that can map various types of objects to a single type

type ShapeA = {
  id: number;
  length: string;
  width: string;
  height: string;
}

type ShapeB = {
  id: number;
  side1: string;
  side2: string;
  side3: string;
}

type Shapes = (ShapeA | ShapeB)[]

type MappedShape = {
  id: number;
  dimension1: string;
  dimension2: string;
  dimension3: string;
}

type MapFunction = (shape: Shapes) => MappedShape[];

const mapShapeA: MapFunction = (shape: ShapeA[]) => shape.map(item => ({
  id: item.id,
  dimension1: item.length,
  dimension2: item.width,
  dimension3: item.height
}));

const mapShapeB: MapFunction = (shape: ShapeB[]) => shape.map(item => ({
  id: item.id,
  dimension1: item.side1,
  dimension2: item.side2,
  dimension3: item.side3
}));

While working on the above example, I encountered an issue with TypeScript not recognizing the compatibility between ShapeA and ShapeB in both functions, even though I provided the objects explicitly. It seems like TypeScript should be able to differentiate between the two objects when needed.

Type 'Shapes' is not assignable to type 'ShapeA[]'. Type 'ShapeA | ShapeB' is not assignable to type 'ShapeA'. Type 'ShapeB' is missing properties such as length, width, and height from type 'ShapeA'.

What is a more appropriate TypeScript approach to solving this problem? I believe there may be a misunderstanding on my part regarding unions.

If I were to pass both objects as arguments to the functions, it might work by adding checks for the keys to be returned. However, this could become messy if handling a large number of objects for mapping.

typescript

Answer 1

Answer №1

When establishing a MapFn, it is structured as a union of various function types that will be allocated to MapFn instances. However, the purpose of this type might be unclear since the functions designated to it can only manage a specific type of list.

For instance, consider this scenario where ListA, ListB, and MappedList are transformed into ObjectA, ObjectB, and MappedObject respectively, as they are no longer lists. Below is the MapFn type:

type MapFn =
    | ((list: ObjectA[]) => MappedObject[])
    | ((list: ObjectB[]) => MappedObject[]);

(Remember to include () around each function type for TypeScript interpretation.)

Collectively, we have:

type ObjectA = {
    id: number;
    x: string;
    y: string;
    z: string;
};

type ObjectB = {
    id: number;
    a: string;
    b: string;
    c: string;
};

type MappedObject = {
    id: number;
    a: string;
    s: string;
    d: string;
};

type MapFn =
    | ((list: ObjectA[]) => MappedObject[])
    | ((list: ObjectB[]) => MappedObject[]);

const mapListA: MapFn = (list: ObjectA[]) =>
    list.map((el) => ({
        id: el.id,
        a: el.x,
        s: el.y,
        d: el.z,
    }));

const mapListB: MapFn = (list: ObjectB[]) =>
    list.map((el) => ({
        id: el.id,
        a: el.a,
        s: el.b,
        d: el.c,
    }));

Playground link

Answer 2

When establishing a MapFn, it is structured as a union of various function types that will be allocated to MapFn instances. However, the purpose of this type might be unclear since the functions designated to it can only manage a specific type of list.

For instance, consider this scenario where ListA, ListB, and MappedList are transformed into ObjectA, ObjectB, and MappedObject respectively, as they are no longer lists. Below is the MapFn type:

type MapFn =
    | ((list: ObjectA[]) => MappedObject[])
    | ((list: ObjectB[]) => MappedObject[]);

(Remember to include () around each function type for TypeScript interpretation.)

Collectively, we have:

type ObjectA = {
    id: number;
    x: string;
    y: string;
    z: string;
};

type ObjectB = {
    id: number;
    a: string;
    b: string;
    c: string;
};

type MappedObject = {
    id: number;
    a: string;
    s: string;
    d: string;
};

type MapFn =
    | ((list: ObjectA[]) => MappedObject[])
    | ((list: ObjectB[]) => MappedObject[]);

const mapListA: MapFn = (list: ObjectA[]) =>
    list.map((el) => ({
        id: el.id,
        a: el.x,
        s: el.y,
        d: el.z,
    }));

const mapListB: MapFn = (list: ObjectB[]) =>
    list.map((el) => ({
        id: el.id,
        a: el.a,
        s: el.b,
        d: el.c,
    }));

Playground link

Answer 3

Answer №2

Do you think these two types are completely different? I have a feeling they might have some similarities since you're aiming to map them into a common type. If that's the case, a discriminator could be useful.

For instance, a Discount type could be either a percent discount or an amount discount. An AmountDiscount would only have an amount property and no percent, while a PercentDiscount may have a percent property but no amount.

interface AmountDiscount {
  id: string;
  amount: 10
}

interface PercentDiscount {
  id: string;
  percent: 5
}

The ideal scenario is to be able to handle all objects of type

Discount</code, regardless of whether they are <code>Percent

or Amount, in a type-safe manner. By type-safe, I mean you wouldn't want a Discount type that has both percent and amount properties, and one of them is sometimes null. This could lead to confusion for the user of the type, as they would need to determine which property is populated and could potentially use percent or amount incorrectly in certain situations.

One solution is to use the in keyword to check if a specific property exists on an object.

Link to example demonstrating the use of the in keyword

This is how I would approach it personally: check out this sandbox. Basically, you would have an enum that explicitly defines the different types you want to map to a common type. There would be a base type that includes this enum and any other shared properties among the distinct types you are mapping. Then, for each type you want to map, extend the base class, specify the particular type it is, and define any type-specific properties. Finally, combine all these types into a single union type, and use a switch or if statements to determine the type and map them to the common type. Here's an example of using a discriminator property, establishing a base type, extending it for specific types, and processing it using a union type. You should be able to derive what you need to do from that. Feel free to ask more questions.

CodeSandbox with an example

Answer 4

Do you think these two types are completely different? I have a feeling they might have some similarities since you're aiming to map them into a common type. If that's the case, a discriminator could be useful.

For instance, a Discount type could be either a percent discount or an amount discount. An AmountDiscount would only have an amount property and no percent, while a PercentDiscount may have a percent property but no amount.

interface AmountDiscount {
  id: string;
  amount: 10
}

interface PercentDiscount {
  id: string;
  percent: 5
}

The ideal scenario is to be able to handle all objects of type

Discount</code, regardless of whether they are <code>Percent

or Amount, in a type-safe manner. By type-safe, I mean you wouldn't want a Discount type that has both percent and amount properties, and one of them is sometimes null. This could lead to confusion for the user of the type, as they would need to determine which property is populated and could potentially use percent or amount incorrectly in certain situations.

One solution is to use the in keyword to check if a specific property exists on an object.

Link to example demonstrating the use of the in keyword

This is how I would approach it personally: check out this sandbox. Basically, you would have an enum that explicitly defines the different types you want to map to a common type. There would be a base type that includes this enum and any other shared properties among the distinct types you are mapping. Then, for each type you want to map, extend the base class, specify the particular type it is, and define any type-specific properties. Finally, combine all these types into a single union type, and use a switch or if statements to determine the type and map them to the common type. Here's an example of using a discriminator property, establishing a base type, extending it for specific types, and processing it using a union type. You should be able to derive what you need to do from that. Feel free to ask more questions.

CodeSandbox with an example

Creating a function that can map various types of objects to a single type

Answer №1

Answer №2

Similar questions

elimination of nonexistent object

TypeScript and Redux mapDispatchToProps are not in sync

The requested property does not exist within the 'CommonStore' type in mobx-react library

Adding a total property at the row level in JavaScript

What is the best method for accessing a store in Next.js with Redux Toolkit?

Communicating Progress Updates from C# to Angular 6 Using HttpPost

Tips for connecting data to an HTML page with Angular 2

Utilizing the dialogue feature within Angular 6

Creating an HTTP method handler function in Next.js API routes with an unspecified number of generic parameters

Is there a way to dynamically alter the fill color of an SVG component using props along with tailwindcss styling?

Understanding the Use of Promises and Async/Await in Typescript

TypeScript maintains the reference and preserves the equality of two objects

Angular2 displays an error stating that the function start.endsWith is not recognized as a valid function

"Looking to log in with NextAuth's Google Login but can't find the Client Secret

Is it possible to switch the hamburger menu button to an X icon upon clicking in Vue 3 with the help of PrimeVue?

What is the easiest way to compile a single .ts file in my src folder? I can achieve this by configuring the tsconfig.js file and running the yarn

"When attempting to render a Node inside the render() method in React, the error message 'Objects are not valid as a React child' is

How can you display a set of components in React using TypeScript?

Mastering the Art of Injecting Objects from the Server

Setting up TypeScript to function with Webpack's resolve.modules