~/VibeHandbook

Языки

typescriptlang.org

TypeScript

Что это такое

TypeScript — это JavaScript с надстроенной поверх статической системой типов. Он компилируется в обычный JavaScript, так что работает везде, где работает JS — браузеры, Node, Deno, Bun, edge-среды выполнения — при этом отлавливая целый класс багов ещё до того, как ваш код вообще запустится.

Сильные стороны

  • Статические типы отлавливают опечатки, ошибки с null и несовпадения форм на этапе компиляции.
  • Выдающийся опыт работы в редакторе: автодополнение, встроенная документация, безопасный рефакторинг.
  • Постепенное внедрение — вы можете типизировать столько, сколько хотите.
  • Один и тот же язык на фронтенде и бэкенде, с огромной экосистемой npm.

Компромиссы

  • Шаг сборки/компиляции и tsconfig.json для настройки.
  • Система типов достаточно мощная, чтобы стать по-настоящему сложной (дженерики, условные типы), и может превратиться в поглотитель времени.
  • Типы стираются во время выполнения, поэтому для недоверенного ввода всё равно нужна валидация в рантайме (например, Zod).
  • Текучка в настройке и инструментарии между сборщиками и средами выполнения.

Когда за ним тянуться

Берите TypeScript на любом нетривиальном JavaScript-проекте, особенно с несколькими участниками или долгим сроком жизни. Это выбор по умолчанию для современных веб-приложений (React, Next.js, SvelteKit), бэкендов на Node/edge и всего, где важна безопасность рефакторинга.

Подходит для вайб-кодинга

ИИ-ассистенты процветают в TypeScript, потому что проверка типов даёт им — и вам — быструю петлю обратной связи: вставьте обратно ошибку компиляции, и модель обычно аккуратно её исправляет. Направляйте ИИ, прося точные типы вместо any, и запрашивайте валидацию в рантайме на границах доверия (входные данные API, переменные окружения). Явно сообщайте версии вашей среды выполнения и фреймворка, чтобы сгенерированные импорты и конфигурация совпадали. Когда типы становятся запутанными, попросите модель объяснить выведенный тип, а не слепо его расширять.

type User = { id: number; name: string; email?: string };

function greet(user: User): string {
  return `Hi ${user.name}` + (user.email ? ` <${user.email}>` : "");
}

console.log(greet({ id: 1, name: "Ada" }));