TypeScript verwenden

TypeScript ist eine beliebte Methode, um Typdefinitionen zu JavaScript-Codebasen hinzuzufügen. TypeScript unterstütztJSX von Haus ausund Sie erhalten vollständige React-Web-Unterstützung, indem Sie@types/reactund@types/react-domzu Ihrem Projekt hinzufügen.

Installation

Alleproduktionsreifen React-Frameworksbieten Unterstützung für die Verwendung von TypeScript. Befolgen Sie die frameworkspezifische Anleitung zur Installation:

• Next.js
• Remix
• Gatsby
• Expo

TypeScript zu einem bestehenden React-Projekt hinzufügen

Um die neueste Version der Typdefinitionen von React zu installieren:

npm install --save-dev @types/react @types/react-dom

Die folgenden Compiler-Optionen müssen in Ihrertsconfig.jsongesetzt werden:

1. dommuss inlibenthalten sein (Hinweis: Wenn keinelib-Option angegeben ist, wirddomstandardmäßig eingeschlossen).
2. jsxmuss auf eine der gültigen Optionen gesetzt werden.preserveWenn Sie eine Bibliothek veröffentlichen, konsultieren Sie diejsx-Dokumentation, um zu entscheiden, welchen Wert Sie wählen sollten.

TypeScript mit React-Komponenten

Das Schreiben von TypeScript mit React ist dem Schreiben von JavaScript mit React sehr ähnlich. Der entscheidende Unterschied bei der Arbeit mit einer Komponente ist, dass Sie Typen für die Props Ihrer Komponente angeben können. Diese Typen können zur Korrektheitsprüfung und zur Bereitstellung von Inline-Dokumentation in Editoren verwendet werden.

Nehmen wir dieMyButton-Komponenteaus demSchnellstart-Leitfaden, können wir einen Typ hinzufügen, der dentitlefür den Button beschreibt:

Diese Inline-Syntax ist die einfachste Methode, um Typen für eine Komponente bereitzustellen, obwohl sie unhandlich werden kann, sobald Sie einige Felder zu beschreiben haben. Stattdessen können Sie eininterfaceoder einentypeverwenden, um die Props der Komponente zu beschreiben:

Der Typ, der die Props Ihrer Komponente beschreibt, kann so einfach oder komplex sein, wie Sie benötigen, sollte jedoch ein Objekttyp sein, der entweder mittypeoderinterfacebeschrieben wird. Sie können inObjekttypenerfahren, wie TypeScript Objekte beschreibt, aber Sie könnten auch daran interessiert sein,Union-Typenzu verwenden, um eine Prop zu beschreiben, die einer von wenigen verschiedenen Typen sein kann, und den LeitfadenTypen aus Typen erstellenfür fortgeschrittenere Anwendungsfälle.

Beispiele für Hooks

Die Typdefinitionen aus@types/reactenthalten Typen für die eingebauten Hooks, sodass Sie sie in Ihren Komponenten ohne zusätzliche Einrichtung verwenden können. Sie sind so konzipiert, dass sie den Code berücksichtigen, den Sie in Ihrer Komponente schreiben, sodass Sie in vielen Fällenabgeleitete Typenerhalten und idealerweise nicht die Details der Typbereitstellung handhaben müssen.

Dennoch können wir uns einige Beispiele ansehen, wie man Typen für Hooks bereitstellt.

useState

DeruseState-Hookverwendet den als Anfangszustand übergebenen Wert erneut, um zu bestimmen, welchen Typ der Wert haben sollte. Zum Beispiel:

Dies weistenabledden Typbooleanzu, undsetEnabledwird eine Funktion sein, die entweder einboolean-Argument oder eine Funktion akzeptiert, die einenbooleanzurückgibt. Wenn Sie explizit einen Typ für den State angeben möchten, können Sie dies tun, indem Sie demuseState-Aufruf ein Typargument bereitstellen:

In diesem Fall ist das nicht sehr nützlich, aber ein häufiger Fall, in dem Sie einen Typ angeben möchten, ist, wenn Sie einen Union-Typ haben. Zum Beispiel kannstatushier einer von wenigen verschiedenen Zeichenketten sein:

Oder, wie in denPrinzipien für die Strukturierung von Stateempfohlen, können Sie verwandten State als Objekt gruppieren und die verschiedenen Möglichkeiten über Objekttypen beschreiben:

useReducer

DeruseReducer-Hookist ein komplexerer Hook, der eine Reducer-Funktion und einen Anfangszustand entgegennimmt. Die Typen für die Reducer-Funktion werden aus dem Anfangszustand abgeleitet. Sie können optional ein Typargument für denuseReducer-Aufruf bereitstellen, um einen Typ für den State anzugeben, aber es ist oft besser, den Typ stattdessen auf dem Anfangszustand festzulegen:

Wir verwenden TypeScript an einigen wichtigen Stellen:

• interface Statebeschreibt die Struktur des Reducer-Zustands.
• type CounterActionbeschreibt die verschiedenen Aktionen, die an den Reducer gesendet werden können.
• const initialState: Statestellt einen Typ für den Anfangszustand bereit und ist auch der Typ, der standardmäßig vonuseReducerverwendet wird.
• stateReducer(state: State, action: CounterAction): Statelegt die Typen für die Argumente und den Rückgabewert der Reducer-Funktion fest.

Eine explizitere Alternative zum Setzen des Typs aufinitialStateist, ein Typ-Argument anuseReducerzu übergeben:

useContext

DeruseContext-Hookist eine Technik, um Daten die Komponentenstruktur hinunter zu übergeben, ohne Props durch Komponenten leiten zu müssen. Er wird verwendet, indem eine Provider-Komponente erstellt wird und oft auch ein Hook, um den Wert in einer Kindkomponente zu konsumieren.

Der Typ des vom Kontext bereitgestellten Werts wird aus dem Wert abgeleitet, der an den Aufruf voncreateContextübergeben wird:

Diese Technik funktioniert, wenn Sie einen sinnvollen Standardwert haben – aber es gibt gelegentlich Fälle, in denen Sie keinen haben, und in diesen Fällen kannnullals Standardwert vernünftig erscheinen. Damit das Typsystem Ihren Code verstehen kann, müssen Sie jedoch explizitContextShape | nullfür dencreateContextfestlegen.

Dies führt zu dem Problem, dass Sie das| nullim Typ für die Kontext-Konsumenten eliminieren müssen. Wir empfehlen, dass der Hook eine Laufzeitprüfung auf dessen Existenz durchführt und einen Fehler wirft, wenn es nicht vorhanden ist:

useMemo

DeruseMemo-Hook erstellt/ruft einen memoisierten Wert aus einem Funktionsaufruf wieder auf und führt die Funktion nur dann erneut aus, wenn sich die als zweiter Parameter übergebenen Abhängigkeiten ändern. Das Ergebnis des Hook-Aufrufs wird aus dem Rückgabewert der Funktion im ersten Parameter abgeleitet. Sie können expliziter sein, indem Sie dem Hook ein Typ-Argument bereitstellen.

useCallback

DeruseCallbackstellt eine stabile Referenz auf eine Funktion bereit, solange die als zweiter Parameter übergebenen Abhängigkeiten gleich bleiben. Wie beiuseMemowird der Typ der Funktion aus dem Rückgabewert der Funktion im ersten Parameter abgeleitet, und Sie können expliziter sein, indem Sie dem Hook ein Typ-Argument bereitstellen.

Bei der Arbeit im TypeScript-Strict-Modus erfordertuseCallbackdas Hinzufügen von Typen für die Parameter in Ihrem Callback. Dies liegt daran, dass der Typ des Callbacks aus dem Rückgabewert der Funktion abgeleitet wird und ohne Parameter der Typ nicht vollständig verstanden werden kann.

Je nach Ihren Code-Stil-Präferenzen könnten Sie die*EventHandler-Funktionen aus den React-Typen verwenden, um den Typ für den Event-Handler gleichzeitig mit der Definition des Callbacks bereitzustellen:

Nützliche Typen

Das Paket @types/reactenthält eine recht umfangreiche Sammlung von Typen. Es lohnt sich, diese zu lesen, wenn Sie sich mit der Interaktion von React und TypeScript vertraut fühlen. Sie finden sieim React-Ordner von DefinitelyTyped. Hier behandeln wir einige der gängigeren Typen.

DOM-Events

Bei der Arbeit mit DOM-Events in React kann der Typ des Events oft vom Event-Handler abgeleitet werden. Wenn Sie jedoch eine Funktion extrahieren möchten, die an einen Event-Handler übergeben werden soll, müssen Sie den Typ des Events explizit festlegen.

Die React-Typen bieten viele Event-Typen – die vollständige Liste finden Siehier, die auf denhäufigsten Events des DOMbasiert.

Um den gesuchten Typ zu bestimmen, können Sie zunächst die Hover-Informationen für den verwendeten Event-Handler ansehen, die den Typ des Events anzeigen.

Wenn Sie ein Event verwenden müssen, das nicht in dieser Liste enthalten ist, können Sie den TypReact.SyntheticEventverwenden, der der Basistyp für alle Events ist.

Children

Es gibt zwei gängige Wege, um die Children einer Komponente zu beschreiben. Der erste ist die Verwendung des TypsReact.ReactNode, einer Vereinigung aller möglichen Typen, die in JSX als Children übergeben werden können:

Dies ist eine sehr breite Definition von Children. Der zweite Weg ist die Verwendung des TypsReact.ReactElement, der nur JSX-Elemente und keine JavaScript-Primitive wie Strings oder Zahlen umfasst:

Beachten Sie, dass Sie TypeScript nicht verwenden können, um zu beschreiben, dass die Children einen bestimmten Typ von JSX-Elementen sind. Daher können Sie das Typsystem nicht nutzen, um eine Komponente zu beschreiben, die nur<li>-Children akzeptiert.

Sie können ein Beispiel für sowohlReact.ReactNodeals auchReact.ReactElementmit dem Type-Checker indiesem TypeScript Playgroundsehen.

Style-Props

Bei der Verwendung von Inline-Styles in React können SieReact.CSSPropertiesverwenden, um das Objekt zu beschreiben, das an diestyle-Prop übergeben wird. Dieser Typ ist eine Vereinigung aller möglichen CSS-Eigenschaften und eignet sich gut, um sicherzustellen, dass Sie gültige CSS-Eigenschaften an diestyle-Prop übergeben und Auto-Vervollständigung in Ihrem Editor zu erhalten.

Weiterführendes Lernen

Einzelne API-Seiten in der Dokumentation können vertiefende Informationen darüber enthalten, wie sie mit TypeScript verwendet werden.

Wir empfehlen die folgenden Ressourcen:

• Das TypeScript-Handbuchist die offizielle Dokumentation für TypeScript und behandelt die meisten wichtigen Sprachfunktionen.
• Die TypeScript-Release-Notesbehandeln neue Funktionen im Detail.
• React TypeScript Cheatsheetist ein von der Community gepflegtes Cheatsheet für die Verwendung von TypeScript mit React, das viele nützliche Randfälle abdeckt und einen breiteren Umfang bietet als dieses Dokument.
• TypeScript Community Discordist ein großartiger Ort, um Fragen zu stellen und Hilfe bei TypeScript- und React-Problemen zu erhalten.