Модуль 11: React + TypeScript

Node.js версии 16.0 или выше (рекомендуется последняя LTS-версия). Проверить установку можно командой: node --version

npm (входит в комплект с Node.js) или yarn — менеджер пакетов для установки зависимостей. Проверить: npm --version

Кодовый редактор — Visual Studio Code с расширениями: ESLint, Prettier, TypeScript Nightly (опционально), и расширением для React (ES7+ React/Redux/React-Native snippets).

my-typescript-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── reportWebVitals.ts
│   └── setupTests.ts
├── tsconfig.json
├── tsconfig.node.json
├── package.json
├── package-lock.json
└── README.md

tsconfig.json — файл конфигурации TypeScript, определяющий параметры компиляции

tsconfig.node.json — дополнительная конфигурация для Node.js-среды

*.tsx и *.ts файлы — файлы с расширениями TypeScript

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

"target": "es5"

Определяет версию JavaScript, в которую будет компилироваться TypeScript. ES5 совместим со всеми современными браузерами. Вы можете изменить на "es6" или "es2020", если не поддержка старых браузеров не требуется.

"lib": ["dom", "dom.iterable", "esnext"]

Указывает, какие типы доступны из стандартных библиотек. "dom" предоставляет типы для работы с DOM, "dom.iterable" — для итераторов по DOM-элементам, "esnext" — для новых возможностей JavaScript.

"strict": true

Включает все строгие проверки типов. Это включает: strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitAny, noImplicitThis, alwaysStrict. Рекомендуется всегда держать это значение включённым.

"jsx": "react-jsx"

Определяет, как TypeScript обрабатывает JSX-выражения. "react-jsx" использует новый автоматический импорт React (не нужно писать import React в каждом файле).

"esModuleInterop": true

Позволяет импортировать модули CommonJS (module.exports) с помощью синтаксиса import/export. Это делает код более совместимым с различными библиотеками.

"noFallthroughCasesInSwitch": true

Запрещает пропуск break в switch-выражениях. Это помогает избежать распространённой ошибки, когда разработчик забывает поставить break ивыполнениепродолжаетвыполнениеследующий case.

my-vite-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
})

import React from 'react';

// Определяем интерфейс для пропсов компонента

interface GreetingProps {
  name: string;
  age?: number;  // Необязательный пропс

  greeting?: string;
}

// Функциональный компонент с типизацией пропсов

const Greeting: React.FC<GreetingProps> = ({ name, age, greeting }) => {
  const displayGreeting = greeting || 'Привет';
  const ageText = age ? `, тебе ${age} лет` : '';

  return (
    <div className="greeting">
      <h2>{displayGreeting}, {name}!{ageText}</h2>
    </div>
  );
};

export default Greeting;

import React from 'react';
import Greeting from './components/Greeting';

function App() {
  return (
    <div className="App">
      {/*. Типизация автоматически проверяет пропсы */}

      <Greeting name="Анна" age={25} greeting="Добро пожаловать" />
      
      {/*. Ошибка компиляции: name обязателен */}

      {/* <Greeting age={25} /> */}

      
      {/*. Ошибка компиляции: age должен быть числом */}

      {/* <Greeting name="Анна" age="двадцать пять" /> */}

    </div>
  );
}

export default App;

React.FC<P> — тип для функционального компонента с пропсами типа P

React.ReactNode — тип для любого валидного JSX-узла (строки, числа, элементы, массивы, фрагменты, null, undefined)

React.CSSProperties — тип для CSS-стилей в формате объекта

React.ChangeEvent<HTMLInputElement> — тип для события изменения input-элемента

React.FormEvent<HTMLFormElement> — тип для события отправки формы

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["@typescript-eslint", "react", "react-hooks"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
  }
}

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.autoImports": true
}

src/
├── components/          # Переиспользуемые компоненты
│   ├── common/         # Общие компоненты (Button, Input, Modal)
│   ├── layout/         # Компоненты макета (Header, Footer, Sidebar)
│   └── features/       # Компоненты функциональных областей
├── hooks/              # Пользовательские хуки
├── services/           # Сервисы (API, аутентификация, логирование)
├── types/              # TypeScript-интерфейсы и типы
├── utils/              # Вспомогательные функции
├── constants/          # Константы приложения
├── context/            # React Context
├── assets/             # Статические ресурсы (изображения, шрифты)
├── styles/             # Глобальные стили
├── pages/              # Страницы (компоненты маршрутов)
├── App.tsx             # Корневой компонент
├── index.tsx           # Точка входа
└── react-app-env.d.ts  # Объявления типов

// src/types/index.ts


// Типы для пользователя

export interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
  role: 'admin' | 'user' | 'guest';
  createdAt: Date;
}

// Типы для поста

export interface Post {
  id: string;
  title: string;
  content: string;
  author: User;
  tags: string[];
  published: boolean;
  createdAt: Date;
  updatedAt: Date;
}

// Типы для API-ответов

export interface ApiResponse<T> {
  data: T;
  status: number;
  message?: string;
}

// Типы для пагинации

export interface PaginatedResponse<T> extends ApiResponse<T> {
  total: number;
  page: number;
  limit: number;
  totalPages: number;
}

// Типы для событий

export type FormInputEvent = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;
export type FormSelectEvent = React.ChangeEvent<HTMLSelectElement>;
export type FormSubmitEvent = React.FormEvent<HTMLFormElement>;

// Неправильно:

const handleChange = (e) => {
  console.log(e.target.value); // e имеет тип 'any'

};

// Правильно:

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value); // e.target.value имеет тип string

};

// Ещё лучше — вынести тип в отдельную переменную:

type InputChangeEvent = React.ChangeEvent<HTMLInputElement>;

const handleChange = (e: InputChangeEvent) => {
  console.log(e.target.value);
};

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

1. Создайте новый React-проект с TypeScript используя Create React App или Vite
2. Настройте ESLint и Prettier
3. Создайте структуру папок, описанную в уроке
4. Определите базовые типы в файле types/index.ts

Задание 2: Компонент профиля

1. Создайте интерфейс UserProfile с полями: name, email, avatar (опционально), bio (опционально)
2. Создайте компонент UserProfile, который принимает эти пропсы
3. Добавьте обработку случая, когда avatar не передан (показать заглушку)
4. Создайте компонент UserList, который принимает массив пользователей и отображает список

Задание 3: Стилизация

1. Создайте интерфейс ButtonProps с полями: variant ('primary' | 'secondary' | 'danger'), size ('small' | 'medium' | 'large'), disabled (boolean), children (React.ReactNode)
2. Создайте компонент Button с правильной типизацией
3. Примените стили в зависимости от пропсов variant и size
4. Проверьте, что TypeScript не позволяет передать неверные значения

Запуск development-сервера:

Сборка для продакшена:

Запуск тестов:

Проверка типов без компиляции:

Форматирование всех файлов:

Запуск линтера с исправлением:

• Преимущества использования React с TypeScript
• Создание проекта с помощью Create React App и Vite
• Настройку tsconfig.json и его параметры
• Настройку ESLint и Prettier для поддержания чистоты кода
• Рекомендуемую структуру проекта
• Создание первого типизированного компонента
• Полезные команды для работы с проектом

Советы для эффективной работы

1. Всегда используйте строгий режим TypeScript (strict: true)
2. Определяйте интерфейсы для пропсов в том же файле, что и компонент, или в централизованном файле типов
3. Используйте автоматическое форматирование при сохранении файла
4. Не бойтесь использовать встроенные типы React
5. Регулярно запускайте проверку типов (tsc --noEmit)

Отличная работа! Вы успешно изучили настройку React-проекта с TypeScript!