plantillas - Typescript: Cómo expresar una función genérica donde el tipo está restringido a uno de varios tipos

Por ejemplo, si un método que suma dos argumentos, a y b, donde deberían ser del mismo tipo y ese tipo debería ser una cadena o un número.

Intento 1:

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

Esto no funcionará porque los tipos de a y b pueden no coincidir; por lo que el error resultante tiene sentido: error TS2365: El operador '+' no se puede aplicar a los tipos 'string | number' y 'string | number'.

Intento 2:

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

Esto devuelve el mismo código de error: error TS2365: El operador '+' no se puede aplicar a los tipos 'T' y 'T'.

Intento 3:

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

Esto (sobrecarga de funciones) funciona correctamente, pero parece excesivo. ¿Hay una forma más elegante de expresar esto?

Respuesta #1

También puedes combinar tus intentos 2 y 3 así:

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

Entonces puedes usarlo así:

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

... y estos provocan errores de tipo como se esperaba:

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

Sin embargo, si no vas a usar el tipo de entrada, entonces me quedaría solo con las sobrecargas de funciones. Lo más fácil de entender en mi opinión.