Що таке TypeScript? Простий посібник для не-розробників

TypeScript — це JavaScript з типами. Ви додаєте мітки, що вказують, яким має бути кожне значення: числом, текстом, списком замовлень — і TypeScript перевіряє ваш код на невідповідності ще до запуску. На сайті TypeScript його описано як «JavaScript із синтаксисом для типів»; типи видаляються, коли код перетворюється на звичайний JavaScript, який потім працює всюди, де працює JavaScript.

Чому це важливо, коли ви створюєте з ШІ

Моделі ШІ пишуть код швидко, а швидкий код має помилки: поле customerName в одному файлі та customer_name в іншому, ціна передана як текст замість числа, функція викликана без обов’язкового значення. У звичайному JavaScript багато таких помилок проявляються, лише коли хтось натисне не ту кнопку.

TypeScript ловить багато з них раніше, поки код ще пишеться:

• ШІ отримує миттєвий зворотний зв’язок. Помилки типів вказують на точний рядок, де щось не так, тож агент може виправити його до того, як ви його побачите.
• Зміни безпечніші. Перейменуйте поле, і TypeScript позначить кожне місце, де ще використовується стара назва.
• Код пояснює себе. Типи документують, що очікує і що повертає функція, що допомагає вам, ШІ та будь-якому розробнику, який працюватиме з кодом пізніше.
• Редактори розумніші. Автодоповнення та «перейти до визначення» працюють краще, бо редактор знає, яким є кожне значення.

Це велика причина, чому багато ШІ-конструкторів застосунків використовують TypeScript за замовчуванням.

Повсякденна аналогія

Уявіть складський склад із позначеними секціями. Кожна секція має табличку: «Лише палети», «Холодильна», «Максимум 500 кг». Коли прибуває вантаж, контролер на дверях порівнює товар із табличкою. Заморожена риба, що прямує до сухої секції, зупиняється на дверях, а не виявляється через тиждень, коли вже пахне.

TypeScript — це контролер на дверях. Типи — це таблички. Перевірка відбувається до того, як товар — ваш код — почне використовуватися. А коли все на місці, таблички знімають: у працюючому JavaScript вже не залишається типів.

Як працює TypeScript

1. Ви (або ШІ) пишете файли .ts або .tsx — TypeScript з мітками типів.
2. Перевірювач типів читає код і повідомляє про невідповідності як про помилки в редакторі або під час збирання.
3. Крок збирання видаляє типи, створюючи звичайний JavaScript.
4. JavaScript запускається в браузері або на сервері (Node.js, Deno, Bun).

Важливий наслідок: TypeScript перевіряє код, який ви написали, а не дані, що надходять під час роботи застосунку. Якщо зовнішній API повертає щось неочікуване, TypeScript цього не побачить, доки ви не додасте перевірку під час виконання.

Приклад: форма бронювання

Наприклад, ви створюєте застосунок бронювання для перукарні. Ось тип, що описує бронювання:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // знак ? означає необов’язкове поле
};

І функція, що рахує завдаток:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Тепер подивіться, що ловить TypeScript.

Помилка в назві поля.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript повідомляє, що prise не є відомою властивістю, а price відсутній. У звичайному JavaScript це тихо порахувало б завдаток як NaN (не число).

Значення неправильного типу.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript повідомляє, що рядок не можна використати там, де очікується число. Без нього "40" * 0.2 випадково працює, але "40" + 5 дає "405" — саме така помилка з’являється в рахунку.

Послуги, якої не існує.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript повідомляє, що "perm" не є дозволеною послугою. Коли перукарня пізніше додасть перми, ви додасте їх до типу, і TypeScript покаже всі місця, які потребують оновлення: прайс-лист, форму, кольори календаря.

Чого він не може зловити. Якщо форма бронювання надсилає price: "40" з браузера на сервер, TypeScript на сервері цього не бачить під час виконання. Саме тому добре зроблені застосунки також перевіряють вхідні дані, часто за допомогою бібліотеки валідації, яка перевіряє структуру і перетворює її на коректний Booking.

TypeScript проти JavaScript

Пояснення поширених термінів

Поширені помилки та хибні уявлення

• «TypeScript робить код вільним від помилок». Він ловить невідповідності в структурі даних, а не хибну логіку. Завдаток 2% замість 20% пройде перевірку типів без проблем.
• «Типи захищають мене від поганих вхідних даних». Типи зникають під час виконання. Перевіряйте дані від користувачів, форм і API.
• any скрізь. Коли ШІ застрягає, він може звернутися до any або // @ts-ignore, щоб заглушити помилки. Це приховує проблеми замість їх виправлення.
• Ігнорування помилок типів, бо попередній перегляд працює. Деякі інструменти все одно запускають код із помилками типів. Ці помилки все одно є багами, що чекають свого часу.
• «TypeScript повільніший». Типи видаляються перед запуском; JavaScript, який виконується, по суті той самий.
• «Це лише для великих команд». Соло-творці також отримують вигоду, особливо коли більшість правок робить ШІ.

Що попросити у вашого ШІ-конструктора

• «Використовуй TypeScript із увімкненим строгим режимом.»
• «Визнач спільні типи для наших основних записів — Customer, Booking, Invoice — і використовуй їх і на фронтенді, і на бекенді.»
• «Не використовуй any або @ts-ignore, щоб обійти помилки; виправ першопричину і скажи мені, що це було.»
• «Перевіряй усі вхідні дані на сервері, а не лише типами.»
• «Запусти перевірку типів і виправ кожну помилку, перш ніж скажеш, що це готово.»
• «Коли ти перейменовуєш поле, онови кожне місце, яке позначає TypeScript.»
• «Поясни цю помилку типу простою англійською.»

Щоб дізнатися більше про перевірку того, що створив ШІ, див. як перевіряти код, згенерований ШІ і як налагоджувати застосунок, створений ШІ.

TypeScript у Mythex

Якщо ви нічого конкретного не просите, Mythex запускає нові проєкти на Vite + React + TypeScript + Tailwind. Редактор коду має мовний аналіз — доповнення, діагностику та перехід до визначення для TypeScript і JavaScript та інших мов — тож помилки типів видно в самому коді, а не лише в попередньому перегляді. Редактор лише для читання на Free і повністю редагується на Pro. Ви все ще можете попросити іншу конфігурацію у своєму першому запиті; сторінка документації про як обирається технологія пояснює як, а документація редактора коду описує, що показує редактор.

Запитання