Implementierung von TypeScript im React-Projekt

1. Einleitung

Die alleinige Verwendung von TypeScript führt nicht zu hohen Lernkosten, aber die meisten Projekte von Front-End-Entwicklern basieren auf Frameworks.

Wenn Sie beispielsweise in Kombination mit Frameworks wie Vue und React verwendet werden, gibt es eine gewisse Schwelle

Um React-Code mit TypeScript zu schreiben, müssen Sie zusätzlich zur Typescript-Bibliothek @types/react und @types/react-dom installieren.

npm ich @types/react -s
npm ich @types/react-dom -s

Der Grund für die Verwendung von @types-Bibliotheken besteht darin, dass viele JavaScript-Bibliotheken keine eigenen TypeScript-Deklarationsdateien bereitstellen.

Daher kennt ts die Typen dieser Bibliotheken und den entsprechenden exportierten Inhalt nicht. Hier ist @types tatsächlich die DefinitelyTyped-Bibliothek in der Community, die die Deklarationen der meisten derzeit auf dem Markt befindlichen JavaScript-Bibliotheken definiert.

Wenn Sie also die entsprechende @types-Deklaration des entsprechenden Javascripts herunterladen, können Sie die entsprechende Typdefinition der Bibliothek verwenden

2. Nutzung

Beim Schreiben von React-Projekten werden folgende Komponenten am häufigsten verwendet:

• Zustandslose Komponenten
• Zustandsbehaftete Komponenten
• Kontrollierte Komponenten

Zustandslose Komponenten

Die Hauptfunktion besteht darin, die Benutzeroberfläche anzuzeigen. Bei einer Deklaration mit js würde sie wie folgt aussehen:

importiere * als React von 'react'

export const Logo = Requisiten => {
    const { Logo, Klassenname, Alt } = Requisiten

    zurückkehren (
        <img src={logo} Klassenname={Klassenname} alt={alt} />
    )
}

Zu diesem Zeitpunkt wird jedoch bei ts eine Fehlermeldung angezeigt. Der Grund dafür ist, dass der Porps-Typ nicht definiert ist. Zu diesem Zeitpunkt können Sie die Schnittstelle interface verwenden, um Porps wie folgt zu definieren:

importiere * als React von 'react'

Schnittstelle IProps {
    Logo?: Zeichenfolge
    Klassenname?: Zeichenfolge
    alt?: Zeichenfolge
}

exportiere const Logo = (Eigenschaften: IProps) => {
    const { Logo, Klassenname, Alt } = Requisiten

    zurückkehren (
        <img src={logo} Klassenname={Klassenname} alt={alt} />
    )
}

Wir wissen jedoch alle, dass in Props eine untergeordnete Eigenschaft vorhanden ist, und wir können nicht in jeder Porps-Schnittstelle ein weiteres untergeordnetes Element definieren, und zwar wie folgt:

Schnittstelle IProps {
    Logo?: Zeichenfolge
    Klassenname?: Zeichenfolge
    alt?: Zeichenfolge
    Kinder?: ReactNode
}

Eine standardisiertere Schreibweise besteht darin, die in React definierte FC-Eigenschaft zu verwenden, die den untergeordneten Typ bereits wie folgt definiert hat:

exportiere const Logo: React.FC<IProps> = props => {
    const { Logo, Klassenname, Alt } = Requisiten

    zurückkehren (
        <img src={logo} Klassenname={Klassenname} alt={alt} />
    )
}

• React.FC definiert den Rückgabetyp explizit, andere Methoden werden implizit abgeleitet
• React.FC bietet Typprüfung und Autovervollständigung für statische Eigenschaften: displayName, propTypes, defaultProps
• React.FC bietet implizite Typisierung für untergeordnete Elemente (ReactElement | null)

Zustandsbehaftete Komponenten

Kann eine Klassenkomponente mit Eigenschaften und Statusattributen sein

Wenn Sie eine Typescript-Deklaration verwenden, sieht es folgendermaßen aus:

importiere * als React von 'react'

Schnittstelle IProps {
  Farbe: Schnur,
  Größe?: Zeichenfolge,
}
Schnittstelle IState {
  Anzahl: Zahl,
}
Klasse App erweitert React.Component<IProps, IState> {
  öffentlicher Status = {
    Anzahl: 1,
  }
  öffentliches Rendern () {
    zurückkehren (
      <div>Hallo Welt</div>
    )
  }
}

Oben werden Generika verwendet, um die Typen von Requisiten und Zuständen zu definieren, sodass Sie bei ihrer Verwendung bessere intelligente Eingabeaufforderungen im Compiler erhalten.

Die Definition der generischen Komponentenklasse finden Sie in der React-Typdefinitionsdatei node_modules/@types/react/index.d.ts, wie unten dargestellt:

Klasse Komponente<P, S> {

    schreibgeschützte Eigenschaften: Schreibgeschützt<{ children?: ReactNode }> & Schreibgeschützt<P>;

    Status: Nur-Lese<S>;

}

Wie oben zu sehen ist, definiert die Statuseigenschaft auch einen lesbaren Typ, um direkte Aufrufe von this.state zum Aktualisieren des Status zu verhindern.

Kontrollierte Komponenten

Die Eigenschaft einer gesteuerten Komponente besteht darin, dass der Inhalt des Elements durch den Zustand der Komponente gesteuert wird.

Da es sich bei den Ereignissen innerhalb der Komponente um synthetische Ereignisse handelt, sind sie nicht mit nativen Ereignissen identisch.

Beispielsweise ändert eine Eingabekomponente ihren internen Zustand. Die allgemeine Definition lautet wie folgt:

privater Updatewert(e: React.ChangeEvent<HTMLInputElement>) {
    this.setState({ itemText: e.target.value })
}

Allgemeine Ereignisobjekttypen:

• ClipboardEvent<T = Element> Zwischenablage-Ereignisobjekt
• DragEvent<T = Element> Drag-Event-Objekt
• ChangeEvent<T = Element> Ereignisobjekt ändern
• KeyboardEvent<T = Element> Tastaturereignisobjekt
• MouseEvent<T = Element> Mausereignisobjekt
• TouchEvent<T = Element> Touch-Ereignisobjekt
• WheelEvent<T = Element> Radereignisobjekt
• AnimationEvent<T = Element> Animationsereignisobjekt
• TransitionEvent<T = Element> Übergangsereignisobjekt

T empfängt einen DOM-Elementtyp

Abschluss

Das Obige ist nur eine einfache Verwendung von Typescript in React-Projekten, aber beim Schreiben von React-Projekten gibt es auch Hooks, Standardparameter und Stores usw.

Die Lernkosten für die Verwendung von Typescript im Framework sind relativ hoch und Sie müssen es kontinuierlich schreiben, um kompetent zu werden

Dies ist das Ende dieses Artikels über die Implementierung von TypeScript in React-Projekten. Weitere Inhalte zur Anwendung von TypeScript in React-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!