Покроковий посібник із інтеграції TypeScript з React

Інтеграція TypeScript з React покращує досвід розробки, забезпечуючи статичну перевірку типів і кращу підтримку інструментів. Цей посібник розповідає про процес налаштування TypeScript у проекті React з нуля.

передумови

Переконайтеся, що в системі встановлено Node.js і npm (Node Package Manager). Ці інструменти потрібні для керування залежностями проекту та сценаріями.

Створення нового проекту React за допомогою TypeScript

Найпростіший спосіб розпочати новий проект React із TypeScript — це використати шаблон Create React App із TypeScript. Виконайте такі дії:

1. Створіть новий проект: Використовуйте Create React App, щоб створити новий проект React із підтримкою TypeScript.

npx create-react-app my-app --template typescript

Ця команда встановлює новий проект React під назвою my-app із конфігурацією TypeScript.

Розуміння конфігурації TypeScript

Створений проект містить файл tsconfig.json, який містить параметри компілятора TypeScript і налаштування проекту. Ось приклад конфігурації:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

Написання компонентів TypeScript

Компоненти React можна писати за допомогою TypeScript, щоб забезпечити безпеку типів. Ось приклад функціонального компонента з TypeScript:

import React from 'react';

interface Props {
  name: string;
  age?: number;
}

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

export default Greeting;

У цьому прикладі інтерфейс Props визначає типи для атрибутів компонента. Тип React.FC використовується для функціональних компонентів із дочірніми елементами та перевірки типу.

Запуск проекту

Після налаштування TypeScript і написання компонентів проект можна запускати за допомогою наступного сценарію npm:

npm start

Ця команда запускає сервер розробки та відкриває програму React у веб-браузері за замовчуванням.

Додаткові поради

• Визначення типів: Для бібліотек сторонніх розробників установіть визначення типів за допомогою npm. Наприклад, npm install @types/react @types/react-dom --save-dev надає типи для React і ReactDOM.
• Використання TypeScript із Redux: Під час використання Redux із TypeScript переконайтеся, що вводите дії, редуктори та зберігаєте для кращої безпеки типів і автозавершення.

Висновок

Інтеграція TypeScript з React покращує розробку, забезпечуючи безпеку типів і кращу підтримку коду. Дотримуючись кроків, описаних у цьому посібнику, можна ефективно налаштувати проект React із TypeScript, дозволяючи розробникам використовувати функції TypeScript для створення надійних і масштабованих програм.