Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чим запис string[] відрізняється від Array<string>?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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>`)

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати463 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.