Лучшие практики TypeScript: безопасность типов и качество кода

Зачем использовать TypeScript?

TypeScript — это надмножество JavaScript. Весь код JavaScript является валидным кодом TypeScript. Добавляет статическую проверку типов.

Безопасность типов: обнаруживает ошибки типов на этапе компиляции. Уменьшает ошибки времени выполнения (undefined is not a function).

Опыт разработчика: автодополнение IDE, рефакторинг, переход к определению работают с информацией о типах.

Крупные проекты: по мере роста кодовой базы проверка типов облегчает сопровождение и рефакторинг. Улучшает командную работу.

Лучшие практики определения типов

interface vs type: используйте interface для форм объектов. Используйте type для union/intersection типов. interface может быть расширен с помощью extends.

Избегайте any: any отключает проверку типов. Используйте unknown и выполняйте проверку типов: if (typeof x === 'string') { ... }.

Strict mode: установите strict: true в tsconfig.json. Это включает проверки, такие как noImplicitAny, strictNullChecks, strictFunctionTypes.

Вывод типов: используйте вывод типов TypeScript вместо явной аннотации типа. const name = 'John' (выводится как string).

Литеральные типы: используйте конкретные значения вместо string или number: type Status = 'active' | 'inactive' | 'pending'.

Продвинутые техники типов

Generic типы: создавайте переиспользуемые, типобезопасные функции и классы: function identity<T>(arg: T): T { return arg; }.

Условные типы: возвращайте различные типы на основе условий типа: type IsString<T> = T extends string ? true : false.

Mapped типы: трансформируйте существующие типы: type Readonly<T> = { readonly [P in keyof T]: T[P]; }.

Utility типы: используйте встроенные utility типы TypeScript: Partial, Required, Pick, Omit, Record, Exclude, Extract.

Template literal типы: создавайте типобезопасные строки с помощью манипуляции строками: type EventName = `on${Capitalize<string>}`.

TypeScript с React

Определение props: interface Props { name: string; age?: number; onClick: () => void; }. Используйте ? для опциональных props.

useState: const [count, setCount] = useState<number>(0);. Вывод типов обычно достаточен: useState(0) (выводится как number).

useRef: const inputRef = useRef<HTMLInputElement>(null);. Используйте правильный тип для ссылок на DOM-элементы.

Обработчики событий: используйте типы событий React, такие как React.ChangeEvent<HTMLInputElement>, React.FormEvent<HTMLFormElement>.

Children: используйте React.ReactNode (общий) или React.ReactElement (только элемент). Добавьте prop children с помощью PropsWithChildren.

Обработка ошибок и отладка

Type assertions: преобразуйте типы с помощью ключевого слова as: const value = input as string. Предпочитайте type guards, когда возможно.

Type guards: выполняйте проверку типов во время выполнения с помощью typeof, instanceof, оператора in и пользовательских функций type guard.

Non-null assertion: укажите, что значение не null/undefined, с помощью оператора !: element!.value. Используйте только при уверенности.

tsconfig strictNullChecks: обрабатывайте null и undefined явно. Используйте optional chaining (?.) и nullish coalescing (??).

ESLint + TypeScript: добавляйте дополнительные правила с помощью плагина @typescript-eslint. Включайте правила, такие как no-unused-vars, no-explicit-any.

Конфигурация проекта

tsconfig.json: установите strict: true, target: 'ES2020', module: 'ESNext', moduleResolution: 'bundler', esModuleInterop: true.

Path aliases: сокращайте пути импорта с помощью baseUrl и paths: "@/*": ["src/*"]. import { Button } from '@/components/Button'.

Project references: используйте project references для инкрементальных сборок в крупных проектах. Используйте массив references в tsconfig.json.

Monorepo: настройте TypeScript monorepo с помощью Turborepo или Nx. Создавайте общие пакеты для типов и утилит.

Declaration files: добавляйте определения типов к JavaScript-библиотекам с помощью файлов .d.ts. Используйте пакеты @types/*.