Типизация массивов

Типизация массивов в TypeScript позволяет точно указать, какие значения могут находиться внутри коллекции. Это предотвращает ошибки при работе с данными и делает код более предсказуемым.

Базовый синтаксис

Самый распространённый способ описания массива — добавить [] после типа элемента. Например, массив строк описывается как string[].

const names: string[] = ["Анна", "Борис", "Вера"];
const scores: number[] = [85, 92, 78];

Этот синтаксис читается как «массив значений типа string».

Альтернативная форма через Array`<T>`

TypeScript также поддерживает обобщённую (generic) форму записи: Array<T>, где T — тип элемента.

const names: Array<string> = ["Анна", "Борис", "Вера"];
const scores: Array<number> = [85, 92, 78];

Обе формы эквивалентны. Однако в сообществе React и TypeScript чаще используется T[], так как она короче и проще для восприятия.

Кортежи (tuples)

Кортеж — это массив фиксированной длины, где каждый элемент имеет строго определённый тип. В отличие от обычного массива, порядок и типы элементов важны.

type UserTuple = [string, number];

const user: UserTuple = ["Иван", 30]; // правильно
// const user2: UserTuple = [30, "Иван"]; // ошибка: типы не совпадают
// const user3: UserTuple = ["Иван"];     // ошибка: недостаточно элементов

Кортежи полезны, когда нужно вернуть из функции несколько значений разного типа или передать пару связанных данных.

Именованные элементы (для читаемости)

Хотя TypeScript не требует имён для элементов кортежа, их можно добавить в виде комментариев или использовать в современных версиях TS (4.0+) для лучшей документации:

type UserData = [id: string, name: string, isActive: boolean];

const userData: UserData = ["u123", "Мария", true];

Это не влияет на типизацию, но улучшает понимание кода.

Массивы объектов

Часто массив содержит объекты. В этом случае тип элемента — это интерфейс или алиас типа.

interface Product {
  id: string;
  title: string;
  price: number;
}

const products: Product[] = [
  { id: "p1", title: "Ноутбук", price: 65000 },
  { id: "p2", title: "Мышь", price: 1500 }
];