</>
halfcoder

Гайды

TypeScript: строгая типизация в JS-проектах

strict и noUncheckedIndexedAccess, type vs interface, unknown вместо any, generics, paths и tsc в CI.

~10 мин чтения

ФронтендTypeScriptJavaScript

TypeScript: строгая типизация в JS-проектах

TypeScript надстраивает статическую типизацию над JavaScript: компиляция в JS, структурная типизация, generics, union/intersection, strict режимы. Подходит для крупных фронтов и Node-бэкендов. Сборка — Webpack и Vite; React — React: компоненты и хуки.

1. tsconfig «строго»

json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

strict включает noImplicitAny, strictNullChecks и др.

2. Типы vs интерфейсы

interface — расширяемость, слияние деклараций. type — union, mapped types. Для объектов API часто type + zod/io-ts для runtime.

3. unknown вместо any

any отключает проверки. Для внешних данных: unknown + сужение (typeof, custom guard).

4. Generics и утилиты

Pick, Omit, Partial, Record, ReturnType, Parameters — DRY для DTO.

5. Модули и path

paths: @/components/* в tsconfig + настройка bundler/Vite.

6. satisfies и сужение типов

satisfies фиксирует литеральные типы без потери узкости (в отличие от явной аннотации : Type). Сужение через in, discriminated union, asserts-guard функции — предпочтительнее множественных as.

ts
type Route = { path: string; method: "GET" | "POST" };

const routes = [
  { path: "/health", method: "GET" },
  { path: "/orders", method: "POST" },
] as const satisfies readonly Route[];

Здесь as const + satisfies дают и проверку формы, и узкие литеральные типы для дискриминации.

7. Модули и verbatimModuleSyntax

При verbatimModuleSyntax: true явно помечайте import type и export type, чтобы не генерировать лишний runtime-import. Следите за isolatedModules при Babel/swc.

8. Чек-лист

  • noEmit или emit только через сборщик — одна правда.
  • Типы из OpenAPI — OpenAPI и генерация клиентов.
  • CI: tsc --noEmit на каждый PR.
  • skipLibCheck осознанно (ускорение vs строгость в .d.ts).
  • Единая версия TypeScript в IDE, CI и lockfile.

Дальше: тег TypeScript