Пошук уроків, статей та іншого контенту
З’ясуєте, що таке TypeScript, які проблеми JavaScript він розв’язує та як статична типізація допомагає розробникам.
TypeScript — це мова програмування, побудована на основі JavaScript. Вона додає до JavaScript статичну типізацію та інші можливості, які допомагають знаходити помилки під час розробки.
TypeScript-код не виконується браузером безпосередньо. Спочатку він перетворюється на звичайний JavaScript за допомогою компілятора TypeScript. Отриманий JavaScript уже можна запускати в браузері або на сервері.
Процес виглядає так:
Розробник пише код TypeScript.
TypeScript перевіряє типи та інші помилки.
Компілятор перетворює TypeScript на JavaScript.
JavaScript виконується середовищем запуску.
TypeScript є надмножиною JavaScript. Це означає, що коректний JavaScript-код зазвичай можна використовувати у файлі TypeScript.
JavaScript має динамічну типізацію. Тип змінної визначається під час виконання програми та може змінюватися:
let value = 10;
value = "десять";Іноді така гнучкість зручна, але вона може призводити до помилок, які проявляються лише під час виконання.
Розглянемо функцію:
function calculateTotal(price, quantity) {
return price * quantity;
}
console.log(calculateTotal(100, 3)); // 300
console.log(calculateTotal("100", 3)); // 300
console.log(calculateTotal("сто", 3)); // NaNФункція очікує числові значення, але JavaScript не забороняє передати рядок. У деяких випадках результат може бути несподіваним, а помилка з’явиться далеко від місця, де її було допущено.
У великих програмах такі проблеми ускладнюються:
важче зрозуміти, які дані очікує функція;
помилкові значення можуть передаватися між різними частинами програми;
частина помилок виявляється лише після запуску;
зміна структури даних може вимагати ручної перевірки багатьох файлів.
У TypeScript можна явно вказати типи параметрів і результату функції:
function calculateTotal(price: number, quantity: number): number {
return price * quantity;
}
const total = calculateTotal(100, 3);
console.log(total);У цьому прикладі:
price: number означає, що price має бути числом;
quantity: number означає, що quantity має бути числом;
: number після дужок означає, що функція повертає число.
Якщо передати рядок, TypeScript повідомить про помилку ще до запуску програми:
function calculateTotal(price: number, quantity: number): number {
return price * quantity;
}
// Помилка TypeScript: аргумент має бути числом
const total = calculateTotal("100", 3);Це не дозволяє випадково передати в функцію дані неправильного типу.
Статична типізація означає, що типи перевіряються під час написання або компіляції коду, а не лише під час його виконання.
Наприклад:
let age: number = 25;
let userName: string = "Олена";
let isActive: boolean = true;Для кожної змінної вказано дозволений тип:
number — числа;
string — рядки;
boolean — логічні значення true або false.
Спроба присвоїти значення іншого типу спричинить помилку:
let age: number = 25;
// Помилка TypeScript: рядок не можна присвоїти змінній типу number
age = "двадцять п’ять";Перевірка відбувається ще до запуску програми. Це дає змогу виправити проблему раніше, не чекаючи, поки вона проявиться в браузері або на сервері.
TypeScript не завжди вимагає вказувати тип вручну. У багатьох випадках він може визначити його за початковим значенням:
const message = "Привіт";
const count = 3;
const completed = false;TypeScript розуміє, що:
message має тип string;
count має тип number;
completed має тип boolean.
Це називається виведенням типів. Воно дозволяє писати менше зайвого коду, зберігаючи переваги статичної типізації.
Після визначення типу TypeScript не дозволить використати змінну несумісним способом:
const count = 3;
// Помилка TypeScript: count має тип number
count.toUpperCase();Метод toUpperCase призначений для рядків, тому TypeScript може попередити про помилку ще під час розробки.
TypeScript знаходить багато типових проблем до запуску програми:
передавання неправильного типу аргументу;
звернення до властивості, якої немає;
повернення значення неправильного типу;
неправильне використання методів значення.
Це скорочує час пошуку помилок і зменшує кількість проблем під час виконання.
Типи документують призначення змінних і функцій без додаткових коментарів:
function greetUser(name: string, age: number): string {
return `${name}, вам ${age} років`;
}Із такого оголошення одразу зрозуміло:
функція отримує ім’я як рядок;
функція отримує вік як число;
функція повертає рядок.
Завдяки типам редактор коду може:
підказувати доступні властивості та методи;
знаходити помилки без запуску програми;
безпечніше перейменовувати змінні та функції;
показувати очікувані типи параметрів.
Це особливо корисно, коли код складається з багатьох файлів.
Якщо змінити тип або структуру даних, TypeScript може показати місця, які потрібно оновити.
Наприклад, функція може очікувати об’єкт із конкретними властивостями:
type User = {
name: string;
age: number;
};
function describeUser(user: User): string {
return `${user.name}, ${user.age} років`;
}
const user: User = {
name: "Олена",
age: 28,
};
console.log(describeUser(user));Якщо випадково пропустити age або записати його як рядок, TypeScript повідомить про проблему.
Статична типізація перевіряє код під час розробки та компіляції, але не може передбачити всі можливі проблеми.
Наприклад, дані, які надходять від користувача або із зовнішнього сервера, можуть мати неправильний формат. TypeScript не перевіряє автоматично вміст таких даних під час виконання.
Також типи TypeScript видаляються під час перетворення на JavaScript. У браузері виконується JavaScript, а не TypeScript.
Тому TypeScript:
допомагає описати очікувані типи;
знаходить помилки в коді до запуску;
покращує зрозумілість і підтримку програми;
але не гарантує відсутність усіх помилок.
TypeScript добре підходить для програм, у яких:
багато файлів і функцій;
над кодом працює кілька розробників;
дані мають визначену структуру;
програму потрібно довго підтримувати;
важливо зменшити кількість помилок через неправильні типи.
Для невеликого скрипту JavaScript може бути достатнім. Проте зі зростанням програми переваги TypeScript стають помітнішими.
TypeScript не запускається безпосередньо замість JavaScript. Його потрібно спочатку скомпілювати в JavaScript.
Явні типи корисні, але не завжди необхідні. Якщо TypeScript може надійно вивести тип, додатковий запис часто лише збільшує код:
const language: string = "TypeScript";У цьому випадку достатньо:
const language = "TypeScript";Тип буде виведено автоматично.
Якщо об’єкт отримано від сервера, сам запис типу не змінює його фактичний вміст. Типи допомагають під час розробки, але зовнішні дані все одно можуть бути неправильними.
Помилка типів часто вказує на реальну проблему в логіці програми. Не варто без потреби обходити її або вимикати перевірку.
TypeScript — це надмножина JavaScript зі статичною типізацією.
TypeScript-код компілюється у JavaScript перед виконанням.
Статична типізація допомагає знаходити помилки до запуску програми.
Типи роблять код зрозумілішим і покращують підказки редактора.
TypeScript може виводити типи автоматично.
Типізація особливо корисна у великих і довготривалих проєктах.
TypeScript не замінює перевірку даних під час виконання і не усуває всі можливі помилки.