Урок 01

Настройка TypeScript в React

Создание проекта

Vite:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Next.js:

npx create-next-app@latest my-app --typescript

Оба варианта создают готовый проект с TypeScript.

Структура

src/
├── App.tsx
├── main.tsx
├── vite-env.d.ts   # типы для Vite
└── components/
    └── Button.tsx
tsconfig.json       # конфигурация

tsconfig.json для React

{
    "compilerOptions": {
        "target": "ES2022",
        "lib": ["ES2022", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "moduleResolution": "bundler",
        "jsx": "react-jsx",
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "isolatedModules": true,
        "allowImportingTsExtensions": true,
        "noEmit": true
    },
    "include": ["src"]
}

Ключевые опции

jsx

react-jsx — современный режим без импорта React. react-jsxdev — с отладкой. preserve — для Next.js.

lib

Библиотеки типов. DOM — для браузерных API. DOM.Iterable — для итерации по DOM-коллекциям.

strict

Обязательно. Включает все строгие проверки, включая strictNullChecks, noImplicitAny.

isolatedModules

Требуется для сборщиков вроде Vite. Ограничивает некоторые конструкции.

Типизация env

src/vite-env.d.ts:

/// <reference types="vite/client" />

Для своих переменных:

interface ImportMetaEnv {
    readonly VITE_API_URL: string;
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

Теперь import.meta.env.VITE_API_URL типизирован.

Расширения

  • .ts — обычный TypeScript
  • .tsx — с JSX
  • .d.ts — декларации типов

Импорт типов

import type { ReactNode } from 'react';

import type гарантирует, что импорт удалится при компиляции.

React типы

React экспортирует типы:

import type {
    ReactNode,
    ReactElement,
    FC,
    PropsWithChildren,
    ChangeEvent,
    MouseEvent,
    FormEvent,
    CSSProperties,
} from 'react';

Итоги

  • Vite и Next.js создают TS-проект из коробки
  • jsx: react-jsx для React
  • strict: true обязательно
  • vite-env.d.ts для переменных окружения
  • .tsx для компонентов
  • import type для типов