Developing Sets and Arrays in TypeScript from a list of numbers or strings

Question

Developing Sets and Arrays in TypeScript from a list of numbers or strings

I am currently working on a function that takes an array of numbers or strings and returns a Set containing unique elements:

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

However, I am encountering an error message:

The call does not match any overload.
Overload 1 of 2, '(iterable?: Iterable | null | undefined): Set', produced the following error. The argument 'number[] | string[]' cannot be assigned to a parameter of type 'Iterable | null | undefined'. Type 'string[]' cannot be assigned to type 'Iterable'. The types returned by 'Symbol.iterator.next(...)' are incompatible between these types. Type 'IteratorResult<string, any>' cannot be assigned to type 'IteratorResult<number, any>'. Type 'IteratorYieldResult' cannot be assigned to type 'IteratorResult<number, any>'. Type 'IteratorYieldResult' cannot be assigned to type 'IteratorYieldResult'. Type 'string' cannot be assigned to type 'number'.
Overload 2 of 2, '(values?: readonly number[] | null | undefined): Set', produced the following error. The argument 'number[] | string[]' cannot be assigned to a parameter of type 'readonly number[] | null | undefined'. Type 'string[]' cannot be assigned to type 'readonly number[]'. Type 'string' cannot be assigned to type 'number'.

I can change the input type from number[] | string[] to (number | string)[], but this means that the array could contain both numbers and strings simultaneously, which is not what I intend.

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

f([1,2,3]);        // okay
f(['1','2','3']);  // okay
f([1,2,'3','4']);  // okay, should actually be error
f([true, {}, 1]);  // should be an error, as expected

javascript arrays typescript

Answer 1

Answer №1

UPDATE: After some investigation, it appears that this is related to TypeScript configuration. One way to handle this is by spreading the array you are creating the set from and then casting the return value, like this:

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

As mentioned by udalmik, you can use any, but that somewhat defeats the purpose.

Answer 2

UPDATE: After some investigation, it appears that this is related to TypeScript configuration. One way to handle this is by spreading the array you are creating the set from and then casting the return value, like this:

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

As mentioned by udalmik, you can use any, but that somewhat defeats the purpose.

Answer 3

Answer №2

To eliminate this issue, simply cast the argument to any[]:

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

Answer 4

To eliminate this issue, simply cast the argument to any[]:

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

Answer 5

Answer №3

I believe either of these options could be more effective

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

let result1 = func([1,2,3,4,5,5,5]);
let result2 = func(['a','b','c','c','c']);
let result3 = func(['a','b','c','a','b',1,2,3,4]);//error

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

let result1 = func([1,2,3,4,5,5,5]);
let result2 = func(['a','b','c','c','c']);
let result3 = func(['a','b','c','a','b',1,2,3,4]);//error

In this manner, the function strictly accepts arrays of numbers or strings but not a mix of both, maintaining the return type integrity. If an array of numbers is passed in, Typescript correctly identifies the return value as an array of numbers.

Answer 6

I believe either of these options could be more effective

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

let result1 = func([1,2,3,4,5,5,5]);
let result2 = func(['a','b','c','c','c']);
let result3 = func(['a','b','c','a','b',1,2,3,4]);//error

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

let result1 = func([1,2,3,4,5,5,5]);
let result2 = func(['a','b','c','c','c']);
let result3 = func(['a','b','c','a','b',1,2,3,4]);//error

In this manner, the function strictly accepts arrays of numbers or strings but not a mix of both, maintaining the return type integrity. If an array of numbers is passed in, Typescript correctly identifies the return value as an array of numbers.

Developing Sets and Arrays in TypeScript from a list of numbers or strings

Answer №1

Answer №2

Answer №3

Similar questions

The concept of Nested TypeScript Map Value Type

Why do array[0] and array.first behave differently in Swift?

Creating a clickable button that will trigger a function when pressed, continuously running the function until the button is released

Uncertain about the ins and outs of AJAX

SlickGrid checkbox formatter/editor experiencing issues with data consistency

Obtaining input value when button is clicked

Customize Your Calendar: A Guide to Disabling Dates with Pikaday.js

Simple ways to simulate Axios requests in tests

Using Angular 4's ngModel can result in the transformation of data type from 'number' to 'string'

Hold on until the page is reloaded: React

Is the transition not smooth when sliding the element up and down on mobile devices?

Issue encountered while serializing data in next.js when utilizing getServerSideProps function

The issue with Ionic 2 arises when attempting to use this.nav.push() because it

AJAX request bypassed form validation

When you drag and drop multiple items, the entire data set is erased

Inheritance-based type inference

Counting occurrences of characters in a string: A simple guide

Make sure to declare rest parameters first when using Typescript

creating a checkerboard using an array of JPanels

The issue with session storage persisting even after closing the iframe