Creating a general function to accommodate two alike types

Question

Creating a general function to accommodate two alike types

Is there a way to modify the addSuffix function to handle two different types and return them simultaneously?

Here's an example:

   type First = {
        name: string,
        address: string,  
    }
    
    type Second = {
        name: string,
        email: string,
    }
    
    type Third = First | Second;
    
    function addSuffix(payload: Third): Third {
        payload.name += "suffix";
        return payload;
    }
    
    const a: First = {
        "name": "John",
        "address": "London",
    }
    
    const b: Second = {
        "name": "Alice",
        "email": "example@example.com"
    }
    
    function doA(payload: First): First {
        // some operations
        return addSuffix(payload);
    }
    
    function doB(payload: Second): Second {
        // some operations
        return addSuffix(payload);
    }
    
    doA(a);
    doB(b);

An issue arises:

'Third' is not compatible with 'First'. 'address' is required in 'First' but missing in 'Second'.

How can the addSuffix function be modified to resolve this issue? In traditional OOP languages, interfaces can be used (interface with name property), but how can it be achieved in TypeScript?

javascript typescript

Answer 1

Answer №1

The main issue here is that the function addSuffix does not clearly indicate that it will always return the same type that is passed in. As a result, functions doA and doB cannot guarantee the type of object they will receive as output.

In object-oriented programming languages, one would typically use interfaces (with a name property) to address this issue. But how can this be achieved in TypeScript?

Thankfully, TypeScript provides interfaces for this purpose:

interface Nameable {
    name: string;
}

function addSuffix<T extends Nameable>(payload: T): T {
    payload.name += "suffix";
    return payload;
}

There is no need to manually implement the Nameable interface for objects like First and Second, as it is inferred from the presence of the name property in both.

Additionally, you can use a type alias instead of an interface to achieve the same goal, but with slightly different syntax:

type Nameable = {
    name: string
}

function addSuffix<T extends Nameable>(payload: T): T {
    payload.name += "suffix";
    return payload;
}

Alternatively, you can define the type directly in the function signature:

function addSuffix<T extends { name: string }>(payload: T): T {
    payload.name += "suffix";
    return payload;
}

Answer 2

The main issue here is that the function addSuffix does not clearly indicate that it will always return the same type that is passed in. As a result, functions doA and doB cannot guarantee the type of object they will receive as output.

In object-oriented programming languages, one would typically use interfaces (with a name property) to address this issue. But how can this be achieved in TypeScript?

Thankfully, TypeScript provides interfaces for this purpose:

interface Nameable {
    name: string;
}

function addSuffix<T extends Nameable>(payload: T): T {
    payload.name += "suffix";
    return payload;
}

There is no need to manually implement the Nameable interface for objects like First and Second, as it is inferred from the presence of the name property in both.

Additionally, you can use a type alias instead of an interface to achieve the same goal, but with slightly different syntax:

type Nameable = {
    name: string
}

function addSuffix<T extends Nameable>(payload: T): T {
    payload.name += "suffix";
    return payload;
}

Alternatively, you can define the type directly in the function signature:

function addSuffix<T extends { name: string }>(payload: T): T {
    payload.name += "suffix";
    return payload;
}

Answer 3

Answer №2

In my opinion, incorporating an intersection type is essential:

type Third = First & Second;

By implementing the intersection type in the addSuffix method, the resulting third type becomes compatible with the desired first or second type due to its inclusion of the required properties.

An alternative and more organized approach involves utilizing an interface for extension:

interface INamed {
    name: string,
}

type Second = INamed & {
    email: string,
}

function addSuffix<T extends INamed>(payload: T): T {
  ...

For more details, refer to the documentation: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types

Answer 4

In my opinion, incorporating an intersection type is essential:

type Third = First & Second;

By implementing the intersection type in the addSuffix method, the resulting third type becomes compatible with the desired first or second type due to its inclusion of the required properties.

An alternative and more organized approach involves utilizing an interface for extension:

interface INamed {
    name: string,
}

type Second = INamed & {
    email: string,
}

function addSuffix<T extends INamed>(payload: T): T {
  ...

For more details, refer to the documentation: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types

Creating a general function to accommodate two alike types

Answer №1

Answer №2

Similar questions

Guide for inserting personalized buttons onto a map with the Bing Maps 6.3 Ajax Control

Specific generic types do not incorporate abstract type context

The TransferList component in Material UI does not update its state based on props when using the useState

The action 'addSection' is restricted to private access and can only be utilized internally by the class named 'File'

Troubleshooting a Missing Angular (8) Pipe Error in Your Ionic 4 Application

Using React-Testing-Library to Jest TestBed Hook in TypeScript for Jest Testing

"Combining background images with javascript can result in displaying visual elements

The Node Express.js app is functioning properly when run locally, but displays the error "Cannot GET /" when running in a Docker container

I seem to be having trouble locating the correct file location

Setting up and launching a fresh JS project

Issue with Jquery animation persists: mouse cursor does not change and style remains unchanged even after clicking

Is it possible to showcase D3 charts on an .epub file?

Exploring the combination of Express router, Auth0, and plain Javascript: A guide to implementing post-login authentication on a router

Tips for deactivating dates in the jquery datepicker that correspond to entries in a MySQL database

Develop a versatile JavaScript or jQuery script that automatically sets the focus on the first input field within a div or tag when the user clicks on it

Pass the initial value from a parent component to a child component in ReactJS without the need for state management

Personalized Dropdown Menus for Internet Explorer 8

What is the process for connecting personalized toggle controls to a checkbox input field?

After manipulating the array, Vue fails to render the input fields generated by the v-for directive

Using the .val method on an input element modifies the HTML content without affecting the value displayed