Что такое 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. В первом запросе вы всё равно можете попросить другой стек; на странице документации как выбирается стек объясняется, как это сделать, а документация редактора кода описывает, что он показывает.

Вопросы