Какво е TypeScript? Ръководство на разбираем език за не-програмисти

TypeScript е JavaScript с типове. Добавяте етикети, които казват какъв вид данни трябва да е всяка стойност – число, текст, списък с поръчки – а TypeScript проверява кода ви за несъответствия, преди да се изпълни. Сайтът на TypeScript го описва като „JavaScript със синтаксис за типове“; типовете се премахват, когато кодът се превърне в обикновен JavaScript, който се изпълнява навсякъде, където работи JavaScript.

Защо е важно, когато строите с AI

AI моделите пишат код бързо, а бързият код има грешки: поле customerName в един файл и customer_name в друг, цена, подадена като текст вместо число, функция, извикана без стойност. В обикновен JavaScript много от тези грешки се появяват едва когато някой натисне грешния бутон.

TypeScript хваща много от тях по-рано, докато кодът се пише:

• AI получава мигновена обратна връзка. Грешките на типовете сочат точния ред, който е грешен, така че агентът може да го поправи, преди да я видите.
• Промените са по-безопасни. Ако преименувате поле, TypeScript отбелязва всяко място, което още използва старото име.
• Кодът обяснява себе си. Типовете документират какво очаква и какво връща една функция, което помага на вас, на AI и на всеки разработчик, който работи с кода по-късно.
• Редакторите стават по-умни. Автодовършването и „отиди към дефиницията“ работят по-добре, защото редакторът знае какъв е всеки обект.

Това е голяма причина много AI билдъри да ползват TypeScript по подразбиране.

Ежедневна аналогия

Представете си склад за разтоварване с обозначени сектори. Всеки сектор има табела: „Само палети“, „Хладилен“, „Максимум 500 кг“. Когато пристигне доставка, контрольор на вратата сравнява стоката с табелата. Замразена риба, насочена към сектора за сухи стоки, се спира на вратата, а не се открива седмица по-късно, когато вече мирише.

TypeScript е контрольорът на вратата. Типовете са табелите. Проверката става преди стоката – вашият код – да влезе в употреба. А след като всичко е на място, табелите се махат: изпълнимият JavaScript вече няма типове.

Как работи TypeScript

1. Вие (или AI) пишете .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 навсякъде. Когато AI е заседнал, може да посегне към any или // @ts-ignore, за да заглуши грешките. Това крие проблемите вместо да ги поправя.
• Игнориране на грешките на типове, защото преглед работи. Някои инструменти все още изпълняват код с грешки в типовете. Грешките са бъгове, които чакат да се случат.
• „TypeScript е по-бавен.“ Типовете се премахват преди изпълнение; JavaScript, който се изпълнява, е по същество същият.
• „Той е само за големи екипи.“ Самостоятелните строители също печелят, особено когато AI прави повечето промени.

Какво да поискате от AI билдъра

• „Използвай TypeScript със строг режим.“
• „Дефинирай общи типове за основните ни записи – Customer, Booking, Invoice – и ги използвай както във фронтенда, така и в бекенда.“
• „Не използвай any или @ts-ignore, за да заобиколиш грешките; поправи реалния проблем и ми кажи какъв е бил.“
• „Валидирай всички входящи данни на сървъра, не само с типове.“
• „Пусни проверката на типовете и поправи всяка грешка, преди да ми кажеш, че е готово.“
• „Когато преименуваш поле, актуализирай всяко място, което TypeScript отбелязва.“
• „Обясни тази грешка на тип с прости думи.“

За повече за проверката на това, което AI е създал, вижте как да преглеждате генериран от AI код и как да дебъгнете приложение, построено с AI.

TypeScript в Mythex

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

Въпроси