Пошук уроків, статей та іншого контенту
Попрацюєте в TypeScript Playground, змінюючи параметри компілятора та спостерігаючи за згенерованим JavaScript.
TypeScript Playground — це онлайн-редактор, у якому можна:
писати код TypeScript;
одразу бачити згенерований JavaScript;
змінювати параметри компілятора;
спостерігати, як TypeScript перевіряє типи;
швидко перевіряти невеликі приклади без створення окремого проєкту.
Зазвичай редактор поділений на дві частини:
зліва — код TypeScript;
справа — JavaScript, створений компілятором.
TypeScript перевіряє типи під час компіляції, а браузер або Node.js зрештою виконують саме JavaScript.
Відкрийте TypeScript Playground і введіть такий код:
const userName: string = "Олена";
const age: number = 25;
console.log(`${userName} — ${age} років`);У згенерованому JavaScript типові анотації зникнуть:
const userName = "Олена";
const age = 25;
console.log(`${userName} — ${age} років`);У TypeScript ми записали типи:
const userName: string = "Олена";
const age: number = 25;Після компіляції:
: string видаляється;
: number видаляється;
значення та логіка програми залишаються;
JavaScript-код можна виконати без інформації про типи.
Типи TypeScript існують під час розробки та перевірки коду. У готовому JavaScript вони не зберігаються.
Замініть значення age на текст:
const userName: string = "Олена";
const age: number = "двадцять п'ять";
console.log(`${userName} — ${age} років`);TypeScript покаже помилку, оскільки змінна age має тип number, але їй передали рядок.
Правильний варіант:
const userName: string = "Олена";
const age: number = 25;
console.log(`${userName} — ${age} років`);Це одна з головних переваг TypeScript: помилки можна знайти ще до запуску програми.
Якщо в коді є помилка типів, Playground може все одно показати згенерований JavaScript. Наявність JavaScript не означає, що TypeScript-код правильний.
target змінює JavaScriptПараметр target визначає, яку версію JavaScript має генерувати TypeScript.
Наприклад, TypeScript може залишити сучасний синтаксис або перетворити його на старіший JavaScript для сумісності.
Спробуйте цей код:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);У сучасному JavaScript стрілкова функція може залишитися майже без змін:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);Змініть параметр target на старішу версію, наприклад ES5. TypeScript може перетворити стрілкову функцію на звичайну:
var numbers = [1, 2, 3, 4];
var doubled = numbers.map(function (number) { return number * 2; });
console.log(doubled);Логіка програми не змінилася. Змінився лише синтаксис згенерованого JavaScript.
Під час зміни target зверніть увагу:
const і let можуть перетворюватися на var;
стрілкові функції можуть перетворюватися на звичайні функції;
сучасні конструкції можуть отримувати довший згенерований код;
результат роботи програми залишається тим самим.
Зазвичай сучасні значення target дають коротший і зрозуміліший JavaScript, а старіші значення потрібні для сумісності зі старими середовищами.
Введіть приклад із класом:
class User {
constructor(
public name: string,
private age: number
) {}
describe(): string {
return `${this.name}, ${this.age} років`;
}
}
const user = new User("Олена", 25);
console.log(user.describe());TypeScript підтримує скорочений запис параметрів конструктора:
constructor(
public name: string,
private age: number
) {}Під час компіляції:
типи string і number зникнуть;
модифікатори public і private не залишаться в такому вигляді у звичайному JavaScript;
TypeScript створить JavaScript-код, який реалізує клас і його властивості.
Точний результат залежить від вибраного target. За сучасного target код може залишатися схожим на початковий, а за старішого — TypeScript згенерує довший код для сумісності.
Важливо: private у TypeScript перевіряється під час компіляції. Це не означає, що властивість автоматично стає недоступною в будь-якому згенерованому JavaScript-коді.
strictПараметр strict вмикає суворішу перевірку TypeScript. Це допомагає знаходити більше потенційних помилок.
Розглянемо приклад:
function greet(name: string | undefined): string {
return `Привіт, ${name.toUpperCase()}!`;
}
console.log(greet("Олена"));Параметр name може бути або рядком, або undefined, тому виклик name.toUpperCase() небезпечний. Якщо name буде undefined, програма завершиться з помилкою.
Безпечний варіант:
function greet(name: string | undefined): string {
if (name === undefined) {
return "Привіт!";
}
return `Привіт, ${name.toUpperCase()}!`;
}
console.log(greet("Олена"));
console.log(greet(undefined));Спробуйте вимкнути та ввімкнути strict і порівняйте повідомлення TypeScript.
strict кориснийСувора перевірка:
змушує явно обробляти можливі undefined і null;
допомагає помітити помилки до запуску;
робить поведінку функцій зрозумілішою;
особливо корисна у великих проєктах.
Параметри компілятора впливають на перевірку та спосіб генерації JavaScript, але не додають типи до виконуваного коду.
Виконайте послідовно такі експерименти.
function add(first: number, second: number): number {
return first + second;
}
console.log(add(2, 3));Знайдіть у JavaScript-результаті:
оголошення функції;
параметри first і second;
тіло функції.
Перевірте, що всі анотації типів зникли.
function add(first: number, second: number): number {
return first + second;
}
console.log(add(2, "3"));TypeScript повідомить про помилку типів, оскільки другий аргумент має бути числом.
Виправте виклик:
console.log(add(2, 3));targetconst message = "Привіт";
if (message.includes("ив")) {
console.log("Знайдено збіг");
}Змініть target і перевірте, чи змінюється сам виклик includes. Деякі можливості JavaScript не просто переписуються компілятором. Для них середовище виконання має підтримувати відповідний метод.
Тобто параметр target не гарантує, що всі сучасні можливості будуть доступні у старому середовищі. Він переважно визначає синтаксис згенерованого JavaScript.
Playground може показувати результат виконання коду окремо від згенерованого JavaScript. Для цього використовуйте console.log і панель запуску, якщо вона доступна у вибраній конфігурації редактора.
Наприклад:
function calculateTotal(price: number, quantity: number): number {
return price * quantity;
}
const total = calculateTotal(150, 2);
console.log(`Сума: ${total} грн`);Очікуваний результат:
Сума: 300 грнРозрізняйте два результати:
Згенерований JavaScript — код після компіляції.
Виведення програми — текст, який з’явився після виконання console.log.
Створіть функцію describeProduct, яка:
приймає назву товару типу string;
приймає ціну типу number;
повертає рядок із назвою та ціною;
викликається щонайменше один раз.
Приклад розв’язання:
function describeProduct(name: string, price: number): string {
return `${name}: ${price} грн`;
}
const productDescription = describeProduct("Навушники", 1200);
console.log(productDescription);Після цього:
змініть тип price на string;
подивіться, які помилки з’являться;
змініть target;
порівняйте згенерований JavaScript;
увімкніть і вимкніть strict;
поверніть коректні типи та перевірте результат виконання.
Браузер не виконує типи TypeScript безпосередньо. Спочатку TypeScript перетворюється на JavaScript.
Анотації на кшталт : string і : number видаляються під час компіляції. Вони потрібні для перевірки коду, а не для виконання.
Якщо Playground показує помилку, це сигнал перевірити код. Не слід орієнтуватися лише на те, що праворуч з’явився JavaScript.
target змінить логіку програмиtarget переважно змінює синтаксис згенерованого JavaScript і рівень сумісності. Він не має змінювати задуману логіку програми.
strict непотрібним для маленьких прикладівНавіть у короткому коді strict показує проблеми, які в реальному проєкті могли б спричинити помилку під час виконання.
TypeScript Playground дає змогу швидко писати та перевіряти TypeScript-код.
У лівій частині редактора міститься TypeScript, а праворуч — згенерований JavaScript.
Типові анотації видаляються під час компіляції.
Параметр target впливає на синтаксис і сумісність згенерованого JavaScript.
Параметр strict вмикає суворішу перевірку типів.
Помилки TypeScript потрібно виправляти, навіть якщо компілятор показує JavaScript-результат.
Playground зручний для коротких експериментів і спостереження за роботою компілятора.