Як оголосити масив у TypeScript?

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

1. Простий масив примітивів

Синтаксис 1 - через `тип[]`

javascript

const numbers: number[] = [1, 2, 3, 4];
const names: string[] = ["Tim", "Max", "Bob"];

Найчастіший і зручний спосіб - тип[].

Синтаксис 2 - через дженерик `Array<тип>`

javascript

const numbers: Array<number> = [1, 2, 3, 4];
const names: Array<string> = ["Tim", "Max", "Bob"];

Повністю еквівалентно number[], просто інша форма запису (зручна, коли всередині складні типи).

2. Масив об'єктів

javascript

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

const users: User[] = [
  { id: 1, name: "Tim" },
  { id: 2, name: "Max" },
];

Кожен елемент повинен відповідати інтерфейсу User.

3. Масив з кількома можливими типами (union)

javascript

const data: (string | number)[] = [1, "two", 3, "four"];

Усі елементи повинні бути або string, або number.

4. Масив масивів (двовимірний)

javascript

const matrix: number[][] = [
  [1, 2],
  [3, 4],
];

Тип читається як "масив масивів чисел".

5. Незмінний масив (`readonly`)

Якщо потрібно заборонити модифікацію масиву:

javascript

const ids: readonly number[] = [1, 2, 3];
ids.push(4); // Помилка: push не можна

або еквівалентна форма:

javascript

const ids: ReadonlyArray<number> = [1, 2, 3];

Корисно для константних даних (наприклад, списків ролей або статусів).

6. Масив фіксованої довжини (tuple / кортеж)

Кортеж - це "масив фіксованої довжини" із заздалегідь відомими типами елементів.

javascript

const pair: [string, number] = ["age", 25];

pair[0] - завжди рядок, pair[1] - завжди число.

7. Масив невідомого вмісту (`any[]`)

javascript

const arr: any[] = [1, "text", true, { key: "value" }];

Такий масив вимикає перевірку типів, намагайся уникати any[], якщо можна вказати точний тип.

8. Масив з дженериком (Generic)

Якщо функція повинна працювати з масивом будь-яких елементів:

javascript

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const n = firstElement([1, 2, 3]);       // n: number
const s = firstElement(["a", "b", "c"]); // s: string

Універсальний спосіб писати типобезпечні функції для масивів.

9. Тип для масиву через `type` або `interface`

javascript

type StringArray = string[];
type Matrix = number[][];

interface UserArray {
  [index: number]: User;
}

Це дає можливість перевикористовувати тип у різних місцях.

Підсумок

Завдання	Синтаксис	Приклад
Простий масив чисел	`number[]`	`[1, 2, 3]`
Масив рядків	`string[]`	`["a", "b"]`
Альтернатива	`Array<number>`	`[1, 2, 3]`
Масив об'єктів	`User[]`	`[{id:1,name:"Tim"}]`
Кілька типів	`(string \| number)[]`	`["a", 1]`
Двовимірний масив	`number[][]`	`[[1,2],[3,4]]`
Тільки для читання	`readonly string[]`	`["A","B"]`
Кортеж (tuple)	`[string, number]`	`["id", 5]`

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

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

Premium

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