Простые приложения на TypeScript

ДЛЯ НОВИЧКОВ

Разработчику

Дальше: TypeScript и React · TypeScript и Node.js · Первая программа · Асинхронность

---

Теория из Типы данных и типизация в TypeScript и Первая программа на TypeScript закрепляется тремя мини-проектами — консоль, браузерная форма, клиент REST API. В каждом — один доменный тип, строгие функции и явные ветки для пустых данных и ошибок без any.

После практикума переходите к TypeScript и React или TypeScript и Node.js. Запросы к API в лаборатории — curl / fetch.

---

Что общее для всех трёх проектов

Правило	Назначение
Один type / interface на сущность	единый контракт
const по умолчанию	меньше мутаций
unknown + guard для внешних данных	честная модель
Union для состояний UI/API	все ветки видны компилятору — Асинхронное программирование в TypeScript
tsc --noEmit перед сдачей	как в CI — Экосистема и архитектура TypeScript

---

Консольное приложение Todo CLI

Цель

Массив задач в памяти — добавить, завершить, список. Без БД — фокус на типах и find.

src/todo.ts:

Код ITЗагрузка примера кода…

src/index.ts:

import { addTodo, completeTodo, listTodos } from "./todo.js";

addTodo("Изучить TypeScript");
addTodo("Запустить tsc");
completeTodo(listTodos()[0]?.id ?? 0);
console.log(listTodos());

Разбор:

• find → Todo | undefined — обработка not-found через Result — Обработка ошибок в TypeScript.
• Импорт с .js при NodeNext — Форматы и подключение TypeScript.

Расширения

• CLI-аргументы через process.argv и парсинг команд.
• Сохранение в todos.json с readFile / writeFile — TypeScript и Node.js.

---

Веб-форма регистрации пользователя

Цель

Собрать RegistrationForm, валидировать до fetch, показать ошибки.

Код ITЗагрузка примера кода…

Подключение через index.html и main.ts:

const form = document.querySelector("form");
if (!(form instanceof HTMLFormElement)) throw new Error("no form");

form.addEventListener("submit", (e: SubmitEvent) => {
  e.preventDefault();
  const values = readForm(form);
  const errors = validate(values);
  if (Object.keys(errors).length > 0) {
    console.log(errors);
    return;
  }
  console.log("OK", values);
});

Разбор:

• instanceof HTMLFormElement сужает тип — Операторы и условные ветвления в TypeScript.
• События — События и обработка событий в TypeScript; в React — TypeScript и React.

---

Type-safe клиент REST API

Цель

Загрузить пользователя, описать LoadState, не использовать слепой as User.

Код ITЗагрузка примера кода…

UI-рендер (псевдо-DOM или React):

function renderUserState(state: LoadState): string {
  switch (state.status) {
    case "idle":
      return "Готов к загрузке";
    case "loading":
      return "Загрузка…";
    case "success":
      return state.data.name;
    case "error":
      return state.message;
  }
}

Разбор:

• Полный разбор async — Асинхронное программирование в TypeScript.
• Для mock API используйте jsonplaceholder или локальный Express — TypeScript и Node.js.

---

Чеклист готовности проекта

Критерий	Проверка
Нет новых any	npm run typecheck
Внешний JSON через unknown	есть isUser или Zod
Состояния загрузки	union, не три флага
Ошибки обработаны	Result или LoadState.error
README с командами	npm run build, dev

---

Частые ошибки в учебных проектах

Ошибка	Что делать
as User на json()	guard
let todos: any[]	Todo[]
Игнорировать find → undefined	if (!todo)
Один файл на 500 строк	модули todo.ts, api.ts
Нет strict	включить в tsconfig — Рекомендации по разработке на TypeScript

---

Итоговая практика

1. Завершите Todo CLI с командой list / add / done.
2. Добавьте в форму поле повтор пароля и типизированную валидацию.
3. Подключите реальный или mock API и отобразите все 4 LoadState.
4. Вынесите типы в src/types.ts и используйте import type.
5. Добавьте typecheck в package.json и прогоните перед сдачей.

---

Смежные статьи

• Первая программа · Типы · Async
• TypeScript и React · TypeScript и Node.js · Ошибки
• Справочник — Справочник по TypeScript