TypeScript mit React beherrschen: Eine Schritt-für-Schritt-Anleitung

??‍♀️ Einführung

TypeScript fügt JavaScript statische Typisierung hinzu, die dabei hilft, potenzielle Fehler zu erkennen, bevor sie überhaupt ausgeführt werden. In Kombination mit React verbessert TypeScript Ihre Komponenten durch die Durchsetzung der Typsicherheit. In diesem Artikel gehen wir die wesentlichen Konzepte für die Verwendung von TypeScript mit React durch.

---

⚛️ Wie verwende ich TypeScript mit React?

Zuerst müssen Sie TypeScript in einem React-Projekt installieren. Wenn Sie bei Null anfangen, erstellen Sie eine neue React-App mit aktiviertem TypeScript:

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

Für ein bestehendes Projekt können Sie TypeScript hinzufügen, indem Sie Folgendes ausführen:

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

Jetzt können Sie beginnen, .tsx-Dateien anstelle von .js oder .jsx zu verwenden, und Ihre React-Komponenten profitieren von den Funktionen von TypeScript.

---

Typen für React-Komponenten-Requisiten

Wenn Sie eine Komponente in React definieren, können Sie die Typen für ihre Requisiten angeben, um die Verwendung der Komponente klarer und sicherer zu machen. Hier ist ein einfaches Beispiel:

type UserProps = {
  name: string;
  age: number;
};

const UserCard = ({ name, age }: UserProps) => (
  <div>
    <h1>{name}</h1>
    <p>{age} years old</p>
  </div>
);

In diesem Beispiel erwartet UserCard zwei Requisiten: Name (eine Zeichenfolge) und Alter (eine Zahl). Wenn Sie versuchen, falsche Typen zu übergeben, zeigt TypeScript einen Fehler an.

---

ReactNode vs. ReactElement

Sie fragen sich vielleicht, wann Sie ReactNode oder ReactElement zum Eingeben von React-Komponenten verwenden sollten.

• ReactNode: Stellt alles dar, was von React gerendert werden kann. Dazu gehören Strings, Zahlen, JSX, Arrays und Null.

• ReactElement: Bezieht sich auf ein tatsächliches React-Element, das spezifischer ist und keine Zeichenfolgen oder Nullen abdeckt.

Beispiel:

type CardProps = {
  children: ReactNode;
};

const Card = ({ children }: CardProps) => <div>{children}</div>;

// Usage
<Card><p>Hello, World!</p></Card>

ReactNode wird hier verwendet, weil Kinder jedes renderbare Element sein können, nicht nur React-Elemente.

---

Typ vs. Schnittstelle

Beim Definieren der Form von Requisiten oder anderen Objekten können sowohl Typ als auch Schnittstelle verwendet werden. Was ist also der Unterschied?

• Typ: Am besten zum Erstellen von Vereinigungstypen oder komplexeren Kombinationen geeignet.
• Schnittstelle: Oft besser, wenn Sie planen, zusätzliche Typen zu erweitern oder zu implementieren.

Hier ist ein Vergleich:

// Using type
type ButtonProps = {
  label: string;
  onClick: () => void;
};

// Using interface
interface LinkProps {
  href: string;
  openInNewTab?: boolean;
}

Obwohl beide ähnlich sind, kann die Benutzeroberfläche natürlicher erweitert werden:

interface IconButtonProps extends ButtonProps {
  icon: string;
}

---

Wie tippe ich Requisiten mit TypeScript?

Um Requisiten für eine Komponente einzugeben, deklarieren Sie einen Typ oder eine Schnittstelle und übergeben Sie ihn als Typanmerkung für die Requisiten der Komponente.

Beispiel:

type AlertProps = {
  message: string;
  severity: 'error' | 'warning' | 'info';
};

const Alert = ({ message, severity }: AlertProps) => (
  <div className={`alert ${severity}`}>{message}</div>
);

---

Wie tippe ich Funktionskomponenten-Requisiten ein?

Um die Requisiten einer Funktionskomponente einzugeben, können Sie React.FC verwenden. oder deklarieren Sie die Requisiten explizit. Während React.FC häufig verwendet wurde, bevorzugen viele mittlerweile explizite Typen.

Hier ist ein Beispiel mit expliziten Typen:

type BadgeProps = {
  text: string;
  color: string;
};

const Badge = ({ text, color }: BadgeProps) => (
  <span style={{ backgroundColor: color }}>{text}</span>
);

In diesem Beispiel verfügt Badge über zwei Requisiten, Text und Farbe, beide als Zeichenfolgen eingegeben.

---

⛓ Reagieren Sie Hooks mit TypeScript

React-Hooks können auch in TypeScript eingegeben werden, um die Typsicherheit für die Zustands- und Effektlogik in Ihren Komponenten zu gewährleisten.

So verwenden Sie useState und useEffect mit TypeScript:

import { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log(`Count is: ${count}`);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

In diesem Beispiel wird der useState-Hook typisiert, um sicherzustellen, dass count immer eine Zahl ist, und useEffect protokolliert die aktuelle Anzahl, wenn sie sich ändert.

---

Wenn Sie diese Best Practices befolgen, können Sie das volle Potenzial von TypeScript in Ihren React-Anwendungen nutzen, was zu robusterem, wartbarerem Code führt.

Und bevor Sie loslegen, wenn Sie auch mit SQL arbeiten, schauen Sie sich unser ultimatives SQL-Cheatsheet an, um Ihre SQL-Kenntnisse sowohl bei einfachen als auch bei fortgeschrittenen Abfragen zu verbessern!

---

Das obige ist der detaillierte Inhalt vonTypeScript mit React beherrschen: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!