Що таке Set у TypeScript?

TypeScriptJunior~1 хв читання

1. Що таке `Set`

Set<T> - це колекція значень типу T, де кожне значення трапляється лише один раз.

Приклад:

javascript

const numbers = new Set<number>([1, 2, 3, 3, 2]);
console.log(numbers); // Set(3) { 1, 2, 3 }

Усі дублікати автоматично прибралися. Порядок елементів зберігається в порядку вставки.

2. Оголошення `Set` з типом

javascript

const names: Set<string> = new Set(["Tim", "Max", "Oleh"]);

Кожен елемент буде строго string. Спроба додати число викличе помилку:

javascript

names.add("Bob"); // OK
names.add(123);    // Помилка: Argument of type 'number' is not assignable to parameter of type 'string'.

3. Основні методи `Set`

Метод	Що робить	Приклад
`.add(value)`	Додає елемент	`set.add(5)`
`.delete(value)`	Видаляє елемент	`set.delete(2)`
`.has(value)`	Перевіряє наявність	`set.has(3)` -> `true`
`.clear()`	Видаляє всі елементи	`set.clear()`
`.size`	К-сть елементів	`set.size` -> `3`
`.forEach(fn)`	Перебір елементів	`set.forEach(v => console.log(v))`

Приклад використання:

javascript

const ids = new Set<number>();

ids.add(10);
ids.add(20);
ids.add(10); // дублікат - ігнорується

console.log(ids.has(10)); // true
console.log(ids.size);    // 2

4. Перебір Set

Set - ітерована структура, можна використати:

javascript

for (const value of ids) {
  console.log(value);
}

ids.forEach(v => console.log(v));

або перетворити в масив:

javascript

const arr = [...ids]; // [10, 20]

5. Відмінності `Set` від масиву

Властивість	`Array`	`Set`
Дублікати	допускаються	заборонені
Перевірка наявності	повільна (`arr.includes()`)	швидка (`set.has()`)
Порядок елементів	зберігається	зберігається
Доступ за індексом	є (`arr[0]`)	немає
Додавання	`push()`	`add()`
Видалення	`splice()`	`delete()`
Розмір	`arr.length`	`set.size`
Тип	`T[]`	`Set<T>`

Приклад порівняння

javascript

const arr = [1, 2, 2, 3];
const set = new Set(arr);

console.log(arr.length); // 4
console.log(set.size);   // 3

Set автоматично видалив дублікати.

6. Перетворення між `Array` і `Set`

З масиву в Set

javascript

const arr = [1, 2, 3, 3];
const unique = new Set(arr); // Set(3) {1, 2, 3}

З Set у масив

javascript

const arr2 = Array.from(unique); // [1, 2, 3]

або

javascript

const arr3 = [...unique]; // [1, 2, 3]

7. Типізація Set з об'єктами

Можна зберігати не лише примітиви:

javascript

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

const users = new Set<User>();

users.add({ id: 1, name: "Tim" });
users.add({ id: 1, name: "Tim" }); // обидва залишаться, бо різні посилання

Set перевіряє унікальність за посиланням, а не за вмістом об'єкта. Тобто {id:1,name:"Tim"} і {id:1,name:"Tim"} - різні елементи.

8. Приклад практичного застосування

Видалення дублікатів з масиву

javascript

const numbers = [1, 2, 2, 3, 4, 3];
const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3, 4]

Підрахунок унікальних значень

javascript

function countUnique<T>(arr: T[]): number {
  return new Set(arr).size;
}

console.log(countUnique(["a", "b", "a", "c"])); // 3

Підсумок

Set - це колекція унікальних значень, зі швидкою перевіркою й ітеруванням.

Основні відмінності від масиву:

не зберігає дублікати;

не має індексів;

швидше перевіряє наявність елементів;

зберігає значення в порядку вставки.

Основний тип:

javascript
const set: Set<number> = new Set([1, 2, 3]);

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.