4.1 Знакомство React и TypeScript
React и TypeScript — мощное сочетание для разработки современных веб-приложений. React обеспечивает гибкую библиотеку для создания пользовательских интерфейсов, а TypeScript добавляет статическую типизацию, что помогает улучшить качество и поддерживаемость кода. В этой лекции мы рассмотрим основы и настройку проекта, использующего React и TypeScript.
Что такое React?
React — это библиотека для создания пользовательских интерфейсов, разработанная Facebook. Она позволяет строить компоненты, которые описывают части пользовательского интерфейса, и обновлять их, когда данные изменяются.
Основные концепции React:
- Компоненты: основные строительные блоки React-приложений.
- JSX: синтаксис, позволяющий писать HTML-подобный код в JavaScript.
- Однонаправленный поток данных: данные передаются от родительского компонента к дочерним через пропсы.
Почему стоит использовать React и TypeScript вместе
Использование React и TypeScript вместе дает несколько преимуществ:
- Улучшенная поддерживаемость: статическая типизация помогает выявлять ошибки до выполнения кода
- Лучшее автодополнение: современные редакторы кода могут предоставить более точное автодополнение и рефакторинг
- Документация кода: типы служат встроенной документацией, облегчая понимание кода
4.2 Совместная работа React и TypeScript
Настройка проекта React с TypeScript
1. Установка Node.js и npm
Для начала убедитесь, что у вас установлены Node.js и npm. Вы можете скачать их с официального сайта Node.js.
2. Создание нового проекта с Create React App
Create React App — это инструмент, который позволяет быстро создать новый проект React с минимальной настройкой. С флагом --template typescript можно сразу создать проект с поддержкой TypeScript.
npx create-react-app my-app --template typescript
cd my-app
Этот процесс создаст новый проект с готовой конфигурацией для работы с TypeScript.
3. Структура проекта
После создания проекта структура папок будет выглядеть следующим образом:
my-app/
├── node_modules/
├── public/
├── src/
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ └── setupTests.ts
├── package.json
├── tsconfig.json
└── README.md
4. Основные файлы конфигурации
- tsconfig.json — файл конфигурации TypeScript, который содержит настройки компилятора TypeScript
- package.json — файл, содержащий метаданные проекта и список зависимостей
4.3 Основные настройки tsconfig.json
Файл tsconfig.json определяет, как TypeScript должен компилировать ваш код. Созданный по умолчанию tsconfig.json содержит базовые настройки:
{
"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"
},
"include": ["src"]
}
Основные параметры:
- target: определяет версию ECMAScript, в которую будет компилироваться TypeScript
- lib: указывает стандартные библиотеки, которые должны быть включены
- strict: включает строгую проверку типов
- jsx: определяет поддержку JSX
Пример простого компонента на TypeScript
После настройки проекта создадим простой компонент React на TypeScript.
src/App.tsx:
import React from 'react';
interface AppProps {
message: string;
}
const App: React.FC<AppProps> = ({ message }) => {
return (
<div>
<h1>{message}</h1>
</div>
);
};
export default App;
В этом примере мы определили интерфейс AppProps для типизации пропсов компонента App.
src/index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<App message="Hello, TypeScript and React!" />
</React.StrictMode>,
document.getElementById('root')
);
Здесь мы импортируем компонент App и рендерим его с помощью ReactDOM, передавая пропс message.
4.4 Настройка тестов с Jest и React Testing Library
Тестирование также является важной частью разработки. Create React App автоматически настраивает Jest и React Testing Library для тестирования компонентов.
Пример теста для компонента App
src/App.test.tsx:
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders message', () => {
render(<App message="Test Message" />);
const linkElement = screen.getByText(/Test Message/i);
expect(linkElement).toBeInTheDocument();
});
В этом тесте мы используем render для рендеринга компонента App и проверяем, что элемент с текстом "Test Message" присутствует в документе.
4.5 Настройка линтинга и форматирования кода
Для поддержания высокого качества кода и согласованного стиля используйте линтеры и форматеры.
Установка ESLint и Prettier:
npm install eslint prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser
@typescript-eslint/eslint-plugin --save-dev
Создание конфигурации ESLint
.eslintrc.json:
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"plugins": ["react", "@typescript-eslint"],
"rules": {
// Ваши правила
},
"settings": {
"react": {
"version": "detect"
}
}
}
Создание конфигурации Prettier
.prettierrc:
{
"singleQuote": true,
"trailingComma": "es5"
}
Добавление скриптов для линтинга и форматирования в package.json:
"scripts": {
"lint": "eslint 'src/**/*.{ts,tsx}'",
"format": "prettier --write 'src/**/*.{ts,tsx}'"
}
Запуск линтинга и форматирования:
npm run lint
npm run format
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ