Чим запис string[] відрізняється від Array<string>?

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

1. Головна відмінність

Запис	Що означає	Еквівалент
`string[]`	"масив рядків"	`Array<string>`
`Array<string>`	"масив елементів типу `string` (через дженерик)"	`string[]`

Тобто обидва варіанти означають одне й те саме: масив рядків. Різниця лише в синтаксисі та читабельності.

Приклад 1 - еквівалентні оголошення

javascript

const a: string[] = ["a", "b", "c"];
const b: Array<string> = ["a", "b", "c"];

Обидва масиви ідентичні за типом і поведінкою. Компілятор TypeScript не бачить різниці між ними.

2. Де краще `string[]`, а де `Array<string>`

`string[]` - простіше і коротше

Використовується у 90% випадків, коли тип - примітив або простий об'єкт.

javascript

const nums: number[] = [1, 2, 3];
const names: string[] = ["Тім", "Макс"];

`Array<тип>` - зручніше при складних типах

Коли всередині - generic, union, intersection чи функція:

javascript

type User = { id: number; name: string };

const users: Array<User> = [
  { id: 1, name: "Тім" },
  { id: 2, name: "Макс" },
];

або

javascript

const mixed: Array<string | number> = ["a", 1, "b", 2];

Тут Array<string | number> читається трохи легше, ніж (string | number)[].

Приклад зі складним типом функції

javascript

type Callback = () => void;

const callbacks1: Callback[] = [];
const callbacks2: Array<Callback> = [];

callbacks1.push(() => console.log("ok"));
callbacks2.push(() => console.log("ok"));

Обидва варіанти працюють однаково, але Array<Callback> може бути трохи наочнішим, якщо тип довгий.

3. Технічно - `T[]` це просто "синтаксичний цукор"

Усередині TypeScript обидва варіанти обробляються однаково. Це два способи записати одне й те саме generic-визначення:

javascript

T[]  ===  Array<T>

T[] - коротка форма запису, Array<T> - повна форма generic-типу.

4. Особливі випадки: `ReadonlyArray`

Якщо ти використовуєш незмінні масиви, то Array<T> дає більше можливостей.

javascript

const arr: ReadonlyArray<number> = [1, 2, 3];
arr.push(4); // Помилка

Для readonly number[] і ReadonlyArray<number> поведінка однакова, але ReadonlyArray можна зручно комбінувати з generic'ами:

javascript

function freeze<T>(arr: ReadonlyArray<T>): void {}

5. Приклад із багатовимірними масивами

Обидва варіанти еквівалентні й читаються по-різному:

javascript

const matrix1: number[][] = [[1, 2], [3, 4]];
const matrix2: Array<Array<number>> = [[1, 2], [3, 4]];

Тут number[][] простіший візуально, а Array<Array<number>> - формальніший.

Підсумок

Порівняння	`string[]`	`Array<string>`
Стислість	коротше	довше
Зручність при складних типах	середньо	краще читається
Підтримка generic-функцій	є	є
Семантика	однакова	однакова
Частота використання	дуже висока	рідше (формальніший стиль)

Правило практики:

Для простих випадків - T[] (string[], number[], User[])

Для складних generic-типів - Array<T> (Array<User | Admin>, Array<() => void>)

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

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

Premium

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