21.01.2025 в 09:14

Интеграция TypeScript в проект React с Vite

Vite – современный и быстрый инструмент сборки, ставший популярным выбором для веб-разработки. Он обеспечивает мгновенный запуск и горячую перезагрузку (HMR) для React-приложений. В этом руководстве описана настройка TypeScript в React-проекте, созданном с помощью Vite.

Требования

Перед началом убедитесь, что установлено следующее:

Node.js: скачайте последнюю версию с официального сайта Node.js.
Vite: Vite упрощает создание современных веб-приложений, включая React с TypeScript.

Шаг 1: Создание React-проекта с Vite

Если вы начинаете с нуля, самый простой способ создать React-проект с TypeScript через Vite – использовать следующие команды:

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

Откройте терминал и выполните команду для создания нового проекта React + TypeScript с Vite:

npm create vite@latest my-vite-app --template react-ts

Здесь:

my-vite-app – имя проекта (можно изменить).
--template react-ts указывает на использование React с TypeScript.

1.2. Переход в каталог проекта

После создания перейдите в каталог проекта:

cd my-vite-app

1.3. Установка зависимостей

Установите необходимые зависимости:

npm install

1.4. Запуск сервера разработки

Запустите сервер, чтобы проверить работу:

npm run dev

Приложение React должно запуститься на http://localhost:3000 с поддержкой TypeScript.

Что предоставляет шаблон Vite React

Шаблон react-ts в Vite устанавливает необходимую конфигурацию TypeScript и зависимости для React-приложения. Основные файлы:

tsconfig.json: конфигурация TypeScript.
vite.config.ts: конфигурация Vite для сборки приложения.
Поддержка расширения .tsx для компонентов React.
Предустановленная поддержка JSX с TypeScript.

Шаг 2: Добавление TypeScript в существующий проект React + Vite

Чтобы добавить TypeScript в уже существующий проект React, созданный с помощью Vite, выполните следующие действия:

2.1. Установка TypeScript и определений типов

В терминале выполните команды для установки TypeScript и определений типов для React:

npm install --save typescript @types/react @types/react-dom

Эти пакеты устанавливают TypeScript и определения типов для React и React DOM.

2.2. Создание/обновление tsconfig.json

Создайте или обновите файл tsconfig.json в корне проекта. Можно использовать следующую базовую конфигурацию:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "lib": ["dom", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

2.3. Переименование файлов в .tsx

В React-проекте с TypeScript файлы компонентов должны иметь расширение .tsx (из-за JSX). Переименуйте файлы .jsx или .js в .tsx или .ts (если они не содержат JSX). Например:

App.jsx → App.tsx
index.jsx → index.tsx

2.4. Обновление компонентов React с TypeScript

После настройки TypeScript можно добавлять типы в компоненты React. Пример функционального компонента с типизированными свойствами:

import React from 'react';

// Define the prop types using an interface
interface GreetingProps {
  name: string;
  age: number;
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

export default Greeting;

В этом примере:

GreetingProps определяет типы свойств компонента.
React.FC<GreetingProps> указывает, что это функциональный компонент React с свойствами типа GreetingProps.

Шаг 3: Запуск и проверка

После настройки запустите сервер разработки:

npm run dev

Откройте http://localhost:3000 в браузере. Приложение React должно работать с TypeScript. В редакторе кода должна быть полная поддержка TypeScript (проверка типов, автодополнение).

Шаг 4: Дополнительная конфигурация TypeScript

Для дополнительной настройки TypeScript в проекте можно изменить параметры в файле tsconfig.json:

Строгий режим: для более строгих проверок типов убедитесь, что включена опция "strict": true. Это поможет найти потенциальные ошибки и улучшить качество кода.
Псевдонимы путей: используйте псевдонимы путей, чтобы упростить импорты и избежать относительных путей (например, ../../components/Button). Пример настройки:

"compilerOptions": {
  "baseUrl": "./src",
  "paths": {
    "@components/*": ["components/*"]
  }
}

После настройки импортировать компоненты можно так:

import Button from '@components/Button';

ESLint и Prettier: для линтинга и форматирования кода интегрируйте ESLint и Prettier, чтобы обеспечить единообразный стиль и качество. Существуют плагины для TypeScript и React.

Заключение

Интеграция TypeScript в React-проект с Vite проста и дает преимущества безопасности типов и улучшенных инструментов разработки. TypeScript предоставляет такие возможности, как вывод типов, проверка типов, автодополнение и обнаружение ошибок во время компиляции.

В этом руководстве описано, как:

Создать новый React-проект с TypeScript, используя Vite.
Добавить TypeScript в существующий проект React + Vite.
Писать React-компоненты с TypeScript.
Запускать и проверять React-приложение с TypeScript.

Теперь вы можете создавать более масштабируемые и поддерживаемые React-приложения с помощью TypeScript!

Источник:

Exit fullscreen mode

#React #TypeScript

Войти на сайт