TypeScript mit React – Schritt-für-Schritt-Integrationshandbuch

Die Integration von TypeScript in React verbessert das Entwicklungserlebnis durch statische Typprüfung und bessere Tool-Unterstützung. Diese Anleitung führt Sie durch den Prozess der Einrichtung von TypeScript in einem React-Projekt von Grund auf.

Voraussetzungen

Stellen Sie sicher, dass Node.js und npm (Node Package Manager) auf dem System installiert sind. Diese Tools werden zum Verwalten von Projektabhängigkeiten und Skripten benötigt.

Erstellen eines neuen React-Projekts mit TypeScript

Der einfachste Weg, ein neues React-Projekt mit TypeScript zu starten, ist die Verwendung der Vorlage „React-App mit TypeScript erstellen“. Folgen Sie diesen Schritten:

1. Neues Projekt erstellen: Verwenden Sie „Create React App“, um ein neues React-Projekt mit TypeScript-Unterstützung zu generieren.

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

Dieser Befehl richtet ein neues React-Projekt namens my-app mit sofort einsatzbereiter TypeScript-Konfiguration ein.

Grundlegendes zur TypeScript-Konfiguration

Das erstellte Projekt enthält eine tsconfig.json-Datei, die TypeScript-Compileroptionen und Projekteinstellungen enthält. Hier ist eine Beispielkonfiguration:

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

Schreiben von TypeScript-Komponenten

React-Komponenten können mit TypeScript geschrieben werden, um die Typsicherheit zu gewährleisten. Hier ist ein Beispiel für eine funktionale Komponente mit 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;

In diesem Beispiel definiert die Schnittstelle Props die Typen für die Eigenschaften der Komponente. Der Typ React.FC wird für funktionale Komponenten mit untergeordneten Elementen und Typprüfung verwendet.

Ausführen des Projekts

Nachdem TypeScript eingerichtet und Komponenten geschrieben wurden, kann das Projekt mit dem folgenden npm-Skript ausgeführt werden:

npm start

Dieser Befehl startet den Entwicklungsserver und öffnet die React-Anwendung im Standardwebbrowser.

Zusätzliche Tipps

• Typdefinitionen: Installieren Sie für Bibliotheken von Drittanbietern Typdefinitionen mit npm. Beispielsweise bietet npm install @types/react @types/react-dom --save-dev Typen für React und ReactDOM.
• Verwenden von TypeScript mit Redux: Achten Sie bei der Verwendung von Redux mit TypeScript darauf, Aktionen, Reduzierer und Stores einzugeben, um eine bessere Typsicherheit und automatische Vervollständigung zu gewährleisten.

Abschluss

Die Integration von TypeScript in React verbessert die Entwicklung, indem sie Typsicherheit und eine bessere Wartbarkeit des Codes bietet. Indem Sie die in diesem Handbuch beschriebenen Schritte befolgen, können Sie ein React-Projekt mit TypeScript effektiv einrichten, sodass Entwickler die Funktionen von TypeScript nutzen können, um robuste und skalierbare Anwendungen zu erstellen.