Пошук уроків, статей та іншого контенту
Порівняєте TypeScript і JavaScript за типізацією, синтаксисом, виконанням та сумісністю у вебпроєктах.
TypeScript і JavaScript використовують для створення вебзастосунків. JavaScript безпосередньо виконується браузером, а TypeScript розширює JavaScript додатковими можливостями, головна з яких — статична типізація.
TypeScript не замінює JavaScript під час виконання. Код TypeScript спочатку перетворюється на JavaScript, а вже потім виконується браузером або середовищем Node.js.
JavaScript має динамічну типізацію. Тип змінної визначається під час виконання програми й може змінюватися:
let value = 10;
value = "десять";
console.log(value); // десятьТакий код є допустимим: спочатку value містить число, а потім — рядок.
JavaScript перевіряє типи переважно під час виконання. Через це деякі помилки з’являються лише тоді, коли відповідна частина програми запускається.
function double(value) {
return value * 2;
}
console.log(double("5")); // 10
console.log(double("abc")); // NaNФункція очікує число, але JavaScript не повідомляє про проблему під час написання коду.
TypeScript має статичну типізацію. Типи можна вказувати явно:
let value: number = 10;
value = "десять"; // Помилка TypeScriptTypeScript перевіряє код до його виконання. Редактор або компілятор повідомить, що рядок не можна присвоїти змінній типу number.
Типи також можна вказувати для параметрів і результатів функцій:
function double(value: number): number {
return value * 2;
}
console.log(double(5)); // 10
console.log(double("5")); // Помилка TypeScriptЦе допомагає виявляти помилки раніше та робить призначення коду зрозумілішим.
TypeScript містить синтаксис JavaScript і додає власні конструкції. Найпоширеніша додаткова конструкція — анотація типу:
const userName: string = "Олена";
const age: number = 25;
const isAdmin: boolean = false;У JavaScript ці анотації недоступні:
const userName = "Олена";
const age = 25;
const isAdmin = false;Більшість звичайного JavaScript-коду є правильним TypeScript-кодом:
const message = "Привіт";
console.log(message);TypeScript визначає тип змінної автоматично. Це називається виведенням типів:
const count = 10;
// TypeScript визначає тип count як number
count = "десять"; // ПомилкаОскільки count оголошено через const, його значення взагалі не можна змінити. Для прикладу з типізацією змінної можна використати let:
let count = 10;
// TypeScript визначає тип count як number
count = 20; // Правильно
count = "двадцять"; // ПомилкаTypeScript дає змогу описувати форму об’єктів за допомогою interface:
interface User {
name: string;
age: number;
}
const user: User = {
name: "Олена",
age: 25,
};Інтерфейс повідомляє, які властивості повинен мати об’єкт і які типи вони мають.
Якщо властивість пропущена або має неправильний тип, TypeScript повідомить про помилку:
interface User {
name: string;
age: number;
}
const user: User = {
name: "Олена",
age: "25", // Помилка: очікується number
};У JavaScript форма об’єкта не перевіряється до запуску:
const user = {
name: "Олена",
age: "25",
};Браузери мають JavaScript-рушії, які можуть виконувати JavaScript-код. Наприклад, браузер може завантажити файл:
<script src="app.js"></script>У цьому випадку файл app.js виконується без попереднього перетворення TypeScript.
Браузер не виконує TypeScript-анотації типів безпосередньо. Перед запуском TypeScript-код потрібно перетворити на JavaScript. Цей процес називається транспіляцією або компіляцією.
Наприклад, TypeScript-код:
function greet(name: string): string {
return `Привіт, ${name}!`;
}
console.log(greet("Олена"));Після перетворення типи зникають, і результат може виглядати так:
function greet(name) {
return `Привіт, ${name}!`;
}
console.log(greet("Олена"));Анотація : string потрібна TypeScript для перевірки коду, але в JavaScript під час виконання вона не використовується.
TypeScript розроблено як надмножину JavaScript. Це означає, що TypeScript підтримує можливості JavaScript і додає до них власні можливості.
Зазвичай JavaScript-код можна поступово перенести в TypeScript:
перейменувати файл із .js на .ts;
перевірити помилки типів;
поступово додати типи;
налаштувати перетворення TypeScript у JavaScript.
TypeScript сумісний із типовими вебтехнологіями:
HTML;
CSS;
JavaScript у браузері;
JavaScript у Node.js;
JavaScript-бібліотеками та фреймворками.
Після перетворення результатом усе одно є JavaScript, тому браузеру не потрібно розуміти TypeScript.
JavaScript:
function calculateTotal(price, quantity) {
return price * quantity;
}
console.log(calculateTotal(100, 2)); // 200
console.log(calculateTotal("100", 2)); // 200У другому виклику JavaScript автоматично перетворює рядок "100" на число під час множення.
TypeScript:
function calculateTotal(price: number, quantity: number): number {
return price * quantity;
}
console.log(calculateTotal(100, 2)); // 200
console.log(calculateTotal("100", 2)); // Помилка TypeScriptTypeScript не дозволяє передати рядок туди, де очікується число. Це не означає, що TypeScript змінює правила виконання JavaScript. Він допомагає знайти потенційну помилку ще до запуску програми.
Файл app.ts:
interface Product {
name: string;
price: number;
quantity: number;
}
function getTotal(product: Product): number {
return product.price * product.quantity;
}
const product: Product = {
name: "Клавіатура",
price: 1200,
quantity: 2,
};
console.log(`${product.name}: ${getTotal(product)} грн`);Перед виконанням TypeScript перевіряє:
чи має product усі властивості інтерфейсу Product;
чи є price і quantity числами;
чи повертає getTotal число;
чи передається у функцію об’єкт правильної форми.
Після перевірки код перетворюється на JavaScript. Під час цього перетворення interface Product і типи видаляються, адже вони потрібні лише на етапі розробки.
JavaScript може бути зручним вибором, коли:
потрібно швидко створити невеликий скрипт;
проєкт має мінімум файлів;
додаткова перевірка типів не потрібна;
середовище вже налаштоване лише для JavaScript.
TypeScript особливо корисний, коли:
проєкт має багато файлів;
над кодом працює кілька розробників;
дані мають складну структуру;
потрібно зменшити кількість помилок через неправильні типи;
код потрібно зручно змінювати та підтримувати.
Вибір залежить від проєкту. TypeScript додає етап перевірки та перетворення, але натомість допомагає краще контролювати код.
Не варто підключати TypeScript-файл так, ніби це звичайний JavaScript:
<script src="app.ts"></script>Браузеру зазвичай потрібно передати вже перетворений файл JavaScript:
<script src="app.js"></script>У сучасних проєктах перетворення часто виконує інструмент збірки або середовище розробки.
Типи TypeScript допомагають перевірити код до запуску. Після перетворення вони видаляються:
const age: number = 25;У JavaScript залишиться приблизно таке:
const age = 25;Тому TypeScript-анотації не перевіряють дані автоматично під час виконання програми.
Якщо передати неправильний тип у TypeScript, редактор може показати помилку ще до запуску:
function printAge(age: number): void {
console.log(age);
}
printAge("25"); // Помилка TypeScriptЯкщо примусово обійти перевірку типів або отримати дані ззовні, помилка може виникнути вже під час виконання. Статична типізація допомагає, але не замінює перевірку даних, отриманих від користувача чи сервера.
JavaScript має динамічну типізацію, а TypeScript додає статичну типізацію.
TypeScript є надмножиною JavaScript.
TypeScript-код спочатку перетворюється на JavaScript.
Браузер зазвичай виконує JavaScript, а не TypeScript.
Типи, інтерфейси та інші конструкції TypeScript допомагають знаходити помилки до запуску.
Після перетворення типи TypeScript видаляються.
JavaScript і TypeScript сумісні у вебпроєктах, оскільки кінцевим кодом для браузера є JavaScript.