Пошук уроків, статей та іншого контенту
Типізуйте одновимірні та багатовимірні масиви за допомогою синтаксису TypeScript.
У TypeScript тип масиву визначає, які значення можуть у ньому зберігатися. Для масиву рядків це буде string[], для чисел — number[], для логічних значень — boolean[].
const names: string[] = ["Олена", "Андрій", "Марія"];
const scores: number[] = [10, 8, 9];
const completed: boolean[] = [true, false, true];Запис string[] читається як «масив рядків». Аналогічно:
number[] — масив чисел;
boolean[] — масив логічних значень;
Date[] — масив об'єктів Date.
TypeScript не дозволить додати до масиву значення іншого типу:
const ages: number[] = [20, 25, 30];
// Помилка: рядок не можна додати до масиву чисел
ages.push("35");Array<T>Масив можна типізувати за допомогою узагальненого типу Array<T>:
const names: Array<string> = ["Олена", "Андрій"];
const scores: Array<number> = [10, 8, 9];Array<string> і string[] означають одне й те саме. Для простих типів зазвичай використовують коротший синтаксис string[].
Синтаксис Array<T> може бути зручнішим, коли тип елемента складніший:
const matrix: Array<number[]> = [
[1, 2],
[3, 4],
];Якщо масив створюється одразу із значеннями, TypeScript зазвичай сам визначає його тип:
const cities = ["Київ", "Львів", "Одеса"];
// Тип: string[]
const prices = [100, 250, 75];
// Тип: number[]Після цього TypeScript контролює операції з масивом:
const prices = [100, 250, 75];
prices.push(300); // Правильно
prices.push("безкоштовно"); // ПомилкаЯвна типізація корисна, коли масив спочатку порожній або коли потрібно чітко вказати очікуваний тип:
const tasks: string[] = [];
tasks.push("Вивчити TypeScript");
tasks.push("Створити проєкт");Без явного типу порожній масив може отримати тип, який не відповідає задуму програми.
Елементами масиву можуть бути об'єкти. Для цього спочатку описують тип одного елемента:
type User = {
id: number;
name: string;
isActive: boolean;
};
const users: User[] = [
{
id: 1,
name: "Олена",
isActive: true,
},
{
id: 2,
name: "Андрій",
isActive: false,
},
];Кожен об'єкт у масиві users повинен мати властивості id, name та isActive із відповідними типами.
users.push({
id: 3,
name: "Марія",
isActive: true,
});
// Помилка: id має бути числом
users.push({
id: "4",
name: "Іван",
isActive: true,
});Багатовимірний масив — це масив, елементами якого є інші масиви.
Наприклад, тип двовимірного масиву чисел записують як number[][]:
const matrix: number[][] = [
[1, 2, 3],
[4, 5, 6],
];Такий тип можна прочитати як «масив масивів чисел».
Доступ до елемента відбувається за двома індексами:
const matrix: number[][] = [
[1, 2, 3],
[4, 5, 6],
];
const firstRow = matrix[0]; // number[]
const firstValue = matrix[0][0]; // number
console.log(firstRow);
console.log(firstValue);Кожен внутрішній масив також повинен містити лише числа:
const matrix: number[][] = [
[1, 2],
[3, 4],
];
// Помилка: рядок не є числом
matrix[0].push("5");Для кожного додаткового виміру додається ще одна пара квадратних дужок:
const cube: number[][][] = [
[
[1, 2],
[3, 4],
],
[
[5, 6],
[7, 8],
],
];Тип number[][][] означає:
зовнішній масив;
його елементи — масиви;
їхні елементи — масиви чисел.
Доступ до конкретного числа потребує трьох індексів:
const value = cube[0][1][0];
console.log(value); // 3У цьому прикладі функція отримує двовимірний масив чисел і повертає суму всіх його елементів:
function sumMatrix(matrix: number[][]): number {
let total = 0;
for (const row of matrix) {
for (const value of row) {
total += value;
}
}
return total;
}
const numbers: number[][] = [
[1, 2, 3],
[4, 5, 6],
];
console.log(sumMatrix(numbers)); // 21Параметр matrix: number[][] гарантує, що функція отримає масив рядків, а кожен рядок міститиме лише числа.
Іноді масив може містити значення кількох типів. Для цього використовують об'єднання типів:
const values: (string | number)[] = [
"TypeScript",
5,
"масив",
10,
];Дужки важливі. Запис (string | number)[] означає «масив, у якому кожен елемент є рядком або числом».
values.push("нове значення"); // Правильно
values.push(42); // Правильно
values.push(true); // ПомилкаОднак не слід використовувати такий тип без потреби. Якщо масив має містити лише числа, краще написати number[].
Тип масиву можна використовувати в оголошеннях функцій:
function getFirstItem(items: string[]): string {
return items[0];
}
const firstName = getFirstItem(["Олена", "Андрій"]);
console.log(firstName);Тут:
параметр items — масив рядків;
результат функції — рядок.
Для масиву чисел типи будуть іншими:
function doubleNumbers(numbers: number[]): number[] {
return numbers.map((number) => number * 2);
}
const result = doubleNumbers([1, 2, 3]);
console.log(result); // [2, 4, 6]const scores: number[] = [10, 8, 9];
// Помилка: значення має бути number
scores.push("10");Виправлення:
scores.push(10);const rows: number[][] = [
[1, 2],
["3", "4"],
];Другий внутрішній масив містить рядки, тому він не відповідає типу number[][].
Правильний варіант:
const rows: number[][] = [
[1, 2],
[3, 4],
];Неправильний запис:
const values: string | number[] = [];Він означає, що змінна може бути або рядком, або масивом чисел. Це не означає масив рядків і чисел.
Правильний запис:
const values: (string | number)[] = [];Тип any[] дозволяє додавати до масиву значення будь-яких типів:
const items: any[] = [1, "текст", true];
items.push({});Такий запис вимикає значну частину перевірок TypeScript. Використовуйте конкретний тип, якщо структура масиву відома:
const items: (string | number | boolean)[] = [1, "текст", true];Одновимірний масив рядків має тип string[].
Одновимірний масив чисел має тип number[].
Альтернативний синтаксис — Array<T>.
Двовимірний масив чисел має тип number[][].
Для кожного нового виміру додається ще одна пара [].
Масив об'єктів записують як User[], де User — тип одного об'єкта.
Для масиву з кількома можливими типами використовують (TypeA | TypeB)[].
Явна типізація допомагає TypeScript перевіряти додавання та обробку елементів масиву.