How to make a generic add operator in TypeScript that works with numbers and strings

Question

While learning about generics in TypeScript, I wanted to try to recreate the following JavaScript:

function add(x, y){
    return x + y;
}

I tried like:

type StringOrNumber = string | number;

function add<MyType extends StringOrNumber>(x: MyType, y: MyType): MyType {
    return x + y;
}

This errors with:

error TS2365: Operator '+' cannot be applied to types 'MyType' and 'MyType'.

Why doesn't this work? I'd assume that MyType could be either a string or a number, and once "chosen" TypeScript would know it is either adding two strings or two numbers.

But each argument could be either string or number, your current types don't require them to be the same... — jonrsharpe
– jonrsharpe, Commented Jan 31, 2019 at 22:55

SpencerPark · Accepted Answer · 2019-02-01 21:19:59Z

9

A case that could also happen is that MyType can be string | number which extends StringOrNumber. For example add<string | number>('', 1); is a perfectly valid call to the function with the signature you have defined. A type extending a union type doesn't mean "pick exactly one".

Since your signature makes sense and you are learning about generics so we want to stick with it, we can also turn off type checking at that point. Sometimes typescript really can't figure out your complex scenario and you are left with no other option than to return (x as any) + y to abandon the type checking at this point.

Another way to handle this type of situation is with overloaded signatures like the following

function add(x: string, y: string): string;
function add(x: number, y: number): number;
function add(x: any, y: any): any {
    return x + y;
}

const t1: string = add(10, 1); // Type 'number' is not assignable to type 'string'.
const t2: number = add(10, 1); // OK
const t3: string = add('10', '1'); // OK
const t4: number = add('10', 1); // Argument of type '"10"' is not assignable to parameter of type 'number'.

edited Feb 1, 2019 at 21:19

answered Jan 31, 2019 at 23:16

SpencerPark

3,5261 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

unional Over a year ago

Unless you also rely on implicit conversions, i.e. add(1, '2') = 3. While that's anti-typescript, but it depends on your use cases. :)

Justin Meyer Over a year ago

Thanks. I considered that case. Though I couldn't understand why that case could happen. Your explanation of add<string | number> make the problem clear. I assumed either add<string> or add<number> would be allowed.

Yossi Sternlicht Over a year ago

How is the question answered, since even if the user would call "add<string | number>(' ', 1);", typescript could add " " + 1 without errors (as it lets this behaviour)

Atrag Over a year ago

This is fine as long as you aren't using arrow functions.

Collectives™ on Stack Overflow

How to make a generic add operator in TypeScript that works with numbers and strings

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related