How to Find the Difference Between Two Arrays in TypeScript

The runtime logic for array difference in TypeScript is identical to plain JavaScript - filter one array against a Set built from the other. What TypeScript adds is a way to make that logic generic and type-safe, so it works correctly across every array type in your codebase without copy-pasting the same function for strings, numbers, and object shapes.

A generic, typed difference function

function difference<T>(a: readonly T[], b: readonly T[]): T[] {
  const setB = new Set(b);
  return a.filter(x => !setB.has(x));
}

const a = ['apple', 'banana', 'cherry'];
const b = ['banana', 'date'];

const aOnly = difference(a, b);
console.log(aOnly); // ['apple', 'cherry'], typed as string[]

Using readonly T[] instead of T[] for the parameters is a small but meaningful improvement: it lets the function accept both mutable arrays and readonly/as const arrays, and it documents that the function won't mutate what you pass in. T is inferred from the call - you never need to write difference<string>(a, b) explicitly.

Comparing arrays of objects by key

interface User {
  id: number;
  name: string;
}

function differenceBy<T, K extends keyof T>(a: T[], b: T[], key: K): T[] {
  const setB = new Set(b.map(x => x[key]));
  return a.filter(x => !setB.has(x[key]));
}

const usersA: User[] = [{ id: 1, name: 'Ana' }, { id: 2, name: 'Ben' }];
const usersB: User[] = [{ id: 2, name: 'Ben' }];

const onlyInA = differenceBy(usersA, usersB, 'id');
console.log(onlyInA); // [{ id: 1, name: 'Ana' }]

The K extends keyof T constraint means the compiler checks that key is a real property of T - passing 'email' when User has no email field is a compile error, not a bug you find at runtime. This is the version worth reaching for whenever you're diffing arrays of objects, since two objects are never === to each other even with identical properties.

The ES2024 Set.prototype.difference() method

// tsconfig.json: "lib": ["ES2024"] or "esnext"

const a = new Set(['apple', 'banana', 'cherry']);
const b = new Set(['banana', 'date']);

const aOnly: Set<string> = a.difference(b);
console.log([...aOnly]); // ['apple', 'cherry']

This is typed correctly once your tsconfig.json lib array includes ES2024 (or the rolling esnext), but it still depends on the runtime actually supporting it - check your minimum supported Node or browser version before relying on it without a polyfill. It also returns a Set, not an array, and like every set-based approach it drops duplicates and doesn't preserve the original order of a.

Symmetric difference, typed

function symmetricDifference<T>(a: readonly T[], b: readonly T[]): T[] {
  const setA = new Set(a);
  const setB = new Set(b);
  return [
    ...a.filter(x => !setB.has(x)),
    ...b.filter(x => !setA.has(x)),
  ];
}

console.log(symmetricDifference(['apple', 'banana'], ['banana', 'date']));
// ['apple', 'date']

Same generic pattern as the difference function above, just running the filter in both directions and concatenating the results. This is the TypeScript equivalent of what's covered in more depth in the JavaScript array difference guide - the runtime code is the same, TypeScript just adds the generic type signature on top.