TypeScript creating Set/Array from array of numbers or strings

Question

I'm trying to create a function, that takes array of numbers or array of string and return Set from that array, like this:

const f = (arr: number[] | string[]): number[] | string[] => {
    return [...new Set(arr)]; 
}

And getting an error:

No overload matches this call.
Overload 1 of 2, '(iterable?: Iterable | null | undefined): Set', gave the following error. Argument of type 'number[] | string[]' is not assignable to parameter of type 'Iterable | null | undefined'. Type 'string[]' is not assignable to type 'Iterable'. The types returned by 'Symbol.iterator.next(...)' are incompatible between these types. Type 'IteratorResult<string, any>' is not assignable to type 'IteratorResult<number, any>'. Type 'IteratorYieldResult' is not assignable to type 'IteratorResult<number, any>'. Type 'IteratorYieldResult' is not assignable to type 'IteratorYieldResult'. Type 'string' is not assignable to type 'number'.
Overload 2 of 2, '(values?: readonly number[] | null | undefined): Set', gave the following error. Argument of type 'number[] | string[]' is not assignable to parameter of type 'readonly number[] | null | undefined'. Type 'string[]' is not assignable to type 'readonly number[]'. Type 'string' is not assignable to type 'number'.

I can change the incoming type from number[] | string[] to (number | string)[] but it means that in the array could be numbers and strings at the same time, that is not what I want.

const f = (arr: (number | string)[]): (number | string)[] => {
    return [...new Set(arr)];
}

f([1,2,3]);        // ok
f(['1','2','3']);  // ok
f([1,2,'3','4']);  // ok, but should be err
f([true, {}, 1]);  // err, like it should be

Answer 1

EDIT: seems like this relates to some TS config. One way is to spread the array you're making the set from and cast the return value, like so:

const f = (arr: number[] | string[]): number[] | string[] => {
    return Array.from(new Set([...arr])) as number[] | string[];
}

As udalmik says you can use any though that kinda defeats the point.

Answer 2

You can get rid of this error by casting argument to any[]:

function f(arg: number[] | string[]): number[] | string[] {
    return [...new Set(arg as any[])];
}

Answer 3

I think either of these might work better

const f = <T extends number[] | string[]>(arr: T):  T => {
    return <T> [...new Set(arr as any[])];
}

let f1 = f([1,2,3,4,5,5,5]);
let f2 = f(['a','b','c','c','c']);
let f3 = f(['a','b','c','a','b',1,2,3,4]);//error

function f(arr:number[]):number[];
function f(arr:string[]):string[];
function f(arr:any[]):any[]{
    return [...new Set(arr)];
}

let f1 = f([1,2,3,4,5,5,5]);
let f2 = f(['a','b','c','c','c']);
let f3 = f(['a','b','c','a','b',1,2,3,4]);//error

This way the function only accepts arrays of numbers or strings but not both, and it preserves the return type information. If you pass in an array of numbers then typescript knows the return value is an array of numbers.