Пошук уроків, статей та іншого контенту
Навчіться явно задавати типи змінним, параметрам і значенням та зрозумієте, як TypeScript визначає типи автоматично.
TypeScript додає до JavaScript інформацію про типи даних. Тип описує, які значення може містити змінна або приймати функція:
string — текст;
number — число;
boolean — true або false;
null — відсутність значення;
undefined — значення не задане.
Завдяки типам TypeScript може перевірити код ще до його запуску та попередити про помилки.
let userName: string = "Олена";
let age: number = 25;
let isStudent: boolean = true;
console.log(userName);
console.log(age);
console.log(isStudent);Після двокрапки записується тип:
let змінна: тип = значення;У наведеному прикладі:
userName може містити лише текст;
age може містити лише число;
isStudent може містити лише логічне значення.
Якщо спробувати присвоїти значення іншого типу, TypeScript повідомить про помилку:
let age: number = 25;
// Помилка: рядок не можна присвоїти змінній типу number
age = "двадцять п'ять";Явне задання типу називається type annotation — анотація типу. Вона повідомляє TypeScript, який тип має змінна, параметр або значення.
let city: string = "Львів";
let temperature: number = 18;
let hasAccess: boolean = true;Анотацію типу можна використовувати з let, const і var, хоча в сучасному коді зазвичай використовують let і const.
const language: string = "TypeScript";
let version: number = 5;Якщо змінна може містити кілька різних типів, їх можна об'єднати за допомогою оператора |. Це називається union type:
let id: number | string;
id = 101;
id = "user-101";Тепер id може містити число або рядок, але не, наприклад, об'єкт:
let id: number | string = 101;
// Помилка: boolean не входить до типу number | string
id = true;Типи параметрів записуються після їхніх імен:
function greet(name: string): string {
return `Привіт, ${name}!`;
}
console.log(greet("Марія"));У цьому прикладі:
name: string означає, що параметр name має бути рядком;
: string після дужок означає, що функція повертає рядок.
Передача неправильного типу спричинить помилку:
function greet(name: string): string {
return `Привіт, ${name}!`;
}
// Помилка: number не можна передати замість string
greet(42);Для функції з кількома параметрами тип кожного параметра задається окремо:
function add(first: number, second: number): number {
return first + second;
}
console.log(add(10, 5));voidЯкщо функція нічого не повертає, для її результату можна вказати тип void:
function printMessage(message: string): void {
console.log(message);
}
printMessage("Повідомлення виведено");Функція з void може виконувати дію, але не повертає корисного значення через return.
Type inference — це автоматичне визначення типу. TypeScript часто може сам визначити тип за початковим значенням, тому анотація не завжди потрібна.
let userName = "Олена";
let age = 25;
let isStudent = true;TypeScript автоматично визначить:
userName як string;
age як number;
isStudent як boolean.
Такий код поводиться подібно до коду з явними анотаціями:
let userName: string = "Олена";
let age: number = 25;
let isStudent: boolean = true;Після визначення типу TypeScript не дозволить записати несумісне значення:
let age = 25;
// Помилка: змінна age має тип number
age = "25";TypeScript не змінює тип змінної лише тому, що їй пізніше намагаються присвоїти інше значення.
constДля const TypeScript може зберегти точніше значення, адже така змінна не може бути переприсвоєна:
const direction = "north";У цьому випадку TypeScript знає, що direction має конкретне значення "north".
Для змінної з let тип зазвичай ширший:
let direction = "north";
direction = "south";TypeScript визначає direction як string, оскільки змінній із let можна присвоїти інший рядок.
У більшості повсякденних ситуацій достатньо розуміти це так:
const не можна переприсвоїти;
let можна переприсвоїти значення того самого визначеного типу.
Автоматичне визначення типів робить код коротшим:
const productName = "Ноутбук";
const price = 42000;
const available = true;Явна анотація може зробити очікуваний тип зрозумілішим або дозволити оголосити змінну без початкового значення:
let selectedProduct: string;
selectedProduct = "Ноутбук";Без анотації TypeScript не завжди може правильно визначити тип змінної без початкового значення:
let selectedProduct: string;
selectedProduct = "Ноутбук";Анотація також потрібна, коли значення може мати кілька типів:
let response: string | number;
response = "Успішно";
response = 200;Корисне правило для початківців:
якщо тип очевидний із початкового значення, можна покластися на inference;
якщо змінна оголошується без значення, задайте тип явно;
для параметрів функцій типи краще вказувати явно;
якщо тип має бути ширшим або складнішим за очевидний, використовуйте анотацію.
Для масиву рядків можна записати тип як string[]:
const fruits: string[] = ["яблуко", "банан", "груша"];Для масиву чисел:
const scores: number[] = [10, 8, 9];TypeScript також може вивести тип масиву автоматично:
const colors = ["червоний", "зелений", "синій"];
const numbers = [1, 2, 3];У цьому випадку colors має тип string[], а numbers — number[].
Усі елементи масиву повинні відповідати його типу:
const scores: number[] = [10, 8, 9];
// Помилка: рядок не є number
scores.push("десять");Якщо масив може містити значення кількох типів, використовуйте об'єднання типів:
const values: (string | number)[] = ["код", 100, "готово"];Дужки потрібні, щоб об'єднання застосовувалося до типу елементів масиву.
Тип властивостей об'єкта можна вказати безпосередньо:
const user: {
name: string;
age: number;
isActive: boolean;
} = {
name: "Ірина",
age: 28,
isActive: true,
};TypeScript перевіряє назви властивостей і їхні типи:
const user: {
name: string;
age: number;
} = {
name: "Ірина",
age: 28,
};У цього об'єкта не можна додати властивість із неправильним типом:
// Помилка: age має бути number
user.age = "28";Для простих прикладів такий запис підходить. Складніші способи опису об'єктів будуть розглянуті окремо.
const courseName = "TypeScript для початківців";
const lessonNumber: number = 1;
const isPublished = true;
function createLessonTitle(title: string, number: number): string {
return `${number}. ${title}`;
}
function printCourseInfo(
name: string,
published: boolean,
): void {
const status = published ? "опубліковано" : "не опубліковано";
console.log(`Курс: ${name}`);
console.log(`Статус: ${status}`);
}
const lessonTitle = createLessonTitle(courseName, lessonNumber);
console.log(lessonTitle);
printCourseInfo(courseName, isPublished);У цьому прикладі:
courseName отримує тип string через inference;
lessonNumber має явну анотацію number;
isPublished отримує тип boolean автоматично;
параметри createLessonTitle і printCourseInfo мають явні типи;
функція createLessonTitle повертає string;
функція printCourseInfo нічого не повертає, тому має тип void.
Такий код правильний:
const name: string = "Олена";
const count: number = 3;Але типи тут очевидні з початкових значень. Коротший варіант також безпечний:
const name = "Олена";
const count = 3;Не потрібно додавати анотацію до кожної змінної без причини. Водночас явна анотація може бути корисною для читабельності або документації.
let count = 10;
// Помилка: count має тип number
count = "десять";Inference визначає початковий тип змінної. Він не означає, що змінна може приймати будь-які значення.
Якщо справді потрібні різні типи, це потрібно вказати явно:
let count: number | string = 10;
count = "десять";// Не варто залишати параметр без типу
function double(value) {
return value * 2;
}Для параметрів краще явно вказувати тип:
function double(value: number): number {
return value * 2;
}Так TypeScript перевірить виклики функції та допоможе уникнути неочікуваних значень.
const names: string[] = ["Анна", "Олег"];
// Помилка: масив приймає лише рядки
names.push(100);Перевіряйте, який тип мають елементи масиву, і за потреби використовуйте union type.
Виправте типи в цьому коді:
let productName: string = "Клавіатура";
let productPrice: number = 2500;
function formatProduct(name: string, price: number): string {
return `${name}: ${price} грн`;
}
console.log(formatProduct(productName, productPrice));Очікуваний результат:
Клавіатура: 2500 грнСпробуйте самостійно:
змінити productPrice на інше число;
передати в formatProduct неправильний тип;
додати змінну isAvailable з типом boolean;
викликати функцію так, щоб TypeScript показав помилку.
Записувати тип у лапках: let age: "number" = 25. Правильно: let age: number = 25.
Плутати number і string: значення 25 — число, а "25" — рядок.
Очікувати, що TypeScript автоматично дозволить змінювати тип змінної.
Не вказувати типи параметрів функції.
Забувати дужки в типі масиву з об'єднанням: правильно (string | number)[].
Використовувати any, щоб приховати помилку замість правильного опису типу.
Type annotation — це явне задання типу після імені змінної або параметра.
Type inference — автоматичне визначення типу за значенням.
Для змінних із очевидним початковим значенням TypeScript часто сам визначає тип.
Типи параметрів функцій потрібно вказувати явно.
Тип результату функції можна записати після дужок параметрів.
Для кількох можливих типів використовується оператор |.
Масиви описуються за допомогою string[], number[] або (string | number)[].
Типи допомагають знаходити помилки до запуску програми.