Remove duplicates from array in typescript

Question

I am new to typescript, and i've been having some problems in using my javascript skills. For example, can someone help me to write this exactly same javascript code below in typescript?

If not possible at all, any typescript function that will render the expected output (array without duplicate values).

This is just a simple way to remove duplicates from an array, but seems like typescript doesn't let me define an empty object... I'm not sure...

The output of the code below is: ['John', 'Paul', 'George', 'Ringo']

Thanks!

const names = ['John', 'Paul', 'George', 'Ringo', 'John'];

function removeDups(names) {
  let unique = {};
  names.forEach(function(i) {
    if(!unique[i]) {
      unique[i] = true;
    }
  });
  return Object.keys(unique);
}

removeDups(names)

@frozen not when you enable the `strict` compile flag, which is the default with `tsc --init`... — Patrick Roberts, Aug 09 '20 at 05:18

score 1 · Answer 1 · answered Aug 09 '20 at 05:08

names = ['John', 'Paul', 'George', 'Ringo', 'John']; 

removeDups(names) {
 let unique = {};
  this.names.forEach((i) => {
    if(!unique[i]) {
      unique[i] = true;
    }
  });
  return Object.keys(unique);
}

Then call removeDups from where you want

Here is another way:

names = ['John', 'Paul', 'George', 'Ringo', 'John']; 

removeDups(names) {

  return this.names.filter((elem, index, self)=> {
    return index === self.indexOf(elem);
})
}

score 0 · Answer 2 · answered Aug 09 '20 at 05:01

0

In this case, you just have to add types

const names = ['John', 'Paul', 'George', 'Ringo', 'John'];

function removeDups(names: string[]) {
  let unique: any = {};
  names.forEach(function(i: string) {
    if(!unique[i]) {
      unique[i] = true;
    }
  });
  return Object.keys(unique);
}

removeDups(names)

typescript playground

answered Aug 09 '20 at 05:01

hgb123

13,869
3
20
38

Using `any` is bad practice, and should be avoided. Consider `any` as basically saying "Don't use TypeScript for this part". – Mark Hanna Jul 06 '23 at 23:47

score 0 · Answer 3 · answered Jul 06 '23 at 23:19

Here is a simple and generic method to de-duplicate any array.

Js:
deDup = (arr) => arr.reduce((acc, current) => {
  if(!acc.includes(current)) acc.push(current)
  return acc
}, [])

Ts:
deDup = (arr: any[]) => arr.reduce((acc, current) => {
  if(!acc.includes(current)) acc.push(current)
  return acc
}, [] as any[])

Since this by definition is reducing an array by removing duplicate values, call reduce being sure to pass in an initial value of a new empty array (accumulator). On each index (current) if it's not in the accumulator array then add it, then return the accumulator array. This will quickly return a new array to the caller without any duplicates.

Hi, welcome to StackOverflow :) It's worth knowing that using `Array.prototype.reduce` in this way will construct a new array for each element of the initial array, so this approach will be relatively slow and memory-intensive. `reduce` is also pretty infamous for being difficult for humans to parse, compared to a loop. It works, but there are definitely better ways to reach the same outcome. The type `any` is also best avoided, because it's basically saying "Don't use TypeScript for this bit" - you lose all type safety with the `any` type. — Mark Hanna, Jul 06 '23 at 23:49

Mark Hanna · Answer 4 · 2023-07-06T23:43:11.333

There's actually a very easy and performant way to remove duplicate elements from an array by leveraging the built-in behaviour of Set:

/**
 * Construct a copy of an array with duplicate items removed.
 * Where duplicate items exist, only the first instance will be kept.
 */
function removeDups<T>(array: T[]): T[] {
    return [...new Set(array)];
}

const names = ['John', 'Paul', 'George', 'Ringo', 'John'];
console.log(removeDups(names)); // ["John", "Paul", "George", "Ringo"]

TypeScript Playground

That function converts your array to a Set, which removes duplicates faster than any native loop through the array will manage, and then uses spread syntax to convert that Set back into a new array.

By making the removeDups function use a generic type, it can be used with any type of array, not just string arrays like your example.

To convert the function you have written into TypeScript, here's what you can use:

const names = ['John', 'Paul', 'George', 'Ringo', 'John'];

function removeDups(names: string[]): string[] {
  let unique: Record<string, boolean> = {};
  names.forEach(function(i) {
    if(!unique[i]) {
      unique[i] = true;
    }
  });
  return Object.keys(unique);
}

removeDups(names)

TypeScript Playground

This uses the utility type Record for your unique object's type. However, due to how Object.keys works, this function will only be able to work on arrays of strings. If you want to use this approach with all types of array, you could consider using a Map instead so you can index it by other types.

That would look something like this:

const names = ['John', 'Paul', 'George', 'Ringo', 'John'];

function removeDups<T>(names: T[]): T[] {
  let unique: Map<T, boolean> = new Map();
  names.forEach(function(i) {
    if(!unique.has(i)) {
      unique.set(i, true);
    }
  });
  return Array.from(unique.keys());
}

console.log(removeDups(names)); // ["John", "Paul", "George", "Ringo"]

TypeScript Playground

Remove duplicates from array in typescript

4 Answers4