Typescript: how to express a generic function where a type is limited to one of several types

Question

For example, if there is a method that adds two arguments, a and b, where they must be of the same type, and this type must be a string or a number.

Attempt 1:

function add(a: string | number, b: string | number) { return a + b; } 

This will not work because types a and b may not match; therefore, the resulting error makes sense: error TS2365: Operator '+' cannot be applied to types 'string | number' and 'string | number'. error TS2365: Operator '+' cannot be applied to types 'string | number' and 'string | number'.

Attempt 2:

 function add<T extends string | number>(a: T, b: T) { return a + b; } 

This returns the same error code: error TS2365: Operator '+' cannot be applied to types 'T' and 'T'.

Attempt 3:

 function add(a: string, b: string): string; function add(a: number, b: number): number; function add(a: any, b: any) { return a + b; } 

This function (function overload) works correctly, but seems redundant. Is there a more elegant way to express it?

Answer 1

You can also combine your attempts 2 and 3 as follows:

 function add<T extends string | number>(a: T, b: T): T; function add(a: any, b: any) { return a + b; } 

Then you can use it as follows:

 // Return type is `number` add(1, 2); // Return type is `string` add('1', '2'); add<number>(1, 2); add<string>('1', '2'); 

... and they cause type errors as expected:

 add(1, '2'); add<number>('1', '2'); add<string>(1, 2); add(true, false); 

However, if you are not going to use an input type, I would only stick to function overloads. The easiest way to understand, in my opinion.