TypeScript z React — przewodnik krok po kroku dotyczący integracji

Zintegrowanie TypeScript z React zwiększa komfort programowania, zapewniając statyczne sprawdzanie typów i lepsze wsparcie narzędzi. Ten przewodnik przeprowadza przez proces konfigurowania TypeScript w projekcie React od podstaw.

Wymagania wstępne

Upewnij się, że Node.js i npm (Node Package Manager) są zainstalowane w systemie. Te narzędzia są wymagane do zarządzania zależnościami i skryptami projektu.

Tworzenie nowego projektu React z TypeScript

Najprostszym sposobem na rozpoczęcie nowego projektu React z TypeScript jest użycie szablonu Create React App with TypeScript. Wykonaj następujące kroki:

1. Utwórz nowy projekt: Użyj polecenia Create React App, aby wygenerować nowy projekt React ze wsparciem języka TypeScript.

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

To polecenie tworzy nowy projekt React o nazwie my-app z gotową konfiguracją TypeScript.

Zrozumienie konfiguracji TypeScript

Utworzony projekt zawiera plik tsconfig.json, który zawiera opcje kompilatora TypeScript i ustawienia projektu. Oto przykładowa konfiguracja:

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

Pisanie komponentów TypeScript

Komponenty React mogą być pisane przy użyciu TypeScript, aby zapewnić bezpieczeństwo typu. Oto przykład funkcjonalnego komponentu z 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;

W tym przykładzie interfejs Props definiuje typy dla właściwości komponentu. Typ React.FC jest używany dla komponentów funkcjonalnych z elementami podrzędnymi i sprawdzaniem typów.

Uruchomienie projektu

Po skonfigurowaniu języka TypeScript i napisaniu komponentów projekt można uruchomić za pomocą następującego skryptu npm:

npm start

To polecenie uruchamia serwer programistyczny i otwiera aplikację React w domyślnej przeglądarce internetowej.

Dodatkowe wskazówki

• Definicje typów: W przypadku bibliotek innych firm zainstaluj definicje typów za pomocą npm. Na przykład npm install @types/react @types/react-dom --save-dev udostępnia typy dla React i ReactDOM.
• Używanie TypeScript z Redux: Podczas używania Redux z TypeScript, pamiętaj o wpisaniu akcji, reduktorów i pamięci masowej w celu zwiększenia bezpieczeństwa typu i automatycznego uzupełniania.

Wniosek

Zintegrowanie TypeScript z React usprawnia rozwój, zapewniając bezpieczeństwo typu i lepszą łatwość utrzymania kodu. Postępując zgodnie z krokami opisanymi w tym przewodniku, projekt React z TypeScript może zostać skutecznie skonfigurowany, umożliwiając programistom wykorzystanie funkcji TypeScript do tworzenia solidnych i skalowalnych aplikacji.