So migrieren Sie eine React -App in TypeScript

Migrieren eines vorhandenen React-Projekts in TypeScript: Schritt-für-Schritt-Handbuch

Wenn Sie zum ersten Mal Typenschriften lernen, hören Sie häufig Vorschläge: "Wechseln Sie ein vorhandenes Projekt! Dies ist der beste Weg, um zu lernen!" Migrieren Sie eine React -App in TypeScript.

Dieser Artikel soll Ihr Freund sein und Ihnen helfen, Ihre Projekte in Typenkript zu migrieren. Zur Veranschaulichung werde ich einige Fragmente aus meinem persönlichen Projekt verwenden, die ich während des Migrationsprozesses migriert habe.

Schlüsselpunkte

• Migrieren von React -Anwendungen zu Typscript, indem Sie das Projekt hinzufügen, tsconfig.json hinzufügen, mit Einfachheit, Konvertierung aller Dateien, Erhöhung der Stringenz, Reinigen und Feiern erfolgreicher Migrationen.
• Schritt durch die Übernahme von TypeScript, beginnend mit einer einfachen Komponente. Ändern Sie die Dateierweiterung in .tsx und fügen Sie einen Typ Kommentar hinzu. Konvertieren Sie alle Dateien Schritt für Schritt im Projekt.
• Verbessern Sie die Strenge von Tsconfig.json, indem Sie strengere Regeln ermöglichen. Dies kann Schritt für Schritt erfolgen, um sie zu beheben, wenn Fehler auftreten. Ziel ist es, schnell voranzukommen und später zurückzukehren, um Probleme zu beheben.
• Verwenden Sie Verknüpfungen wie @TS-IGNORE und FixMelater, um die Belastung während des Migrationsprozesses zu lindern. Priorisieren Sie im Laufe der Zeit das Ersetzen dieser Abkürzungen durch die richtige Sicherheit.

Plan

Um diesen Prozess weniger entmutigend zu machen, werden wir ihn in Schritte unterteilen, damit Sie die Migration in Stücken durchführen können. Ich finde das immer hilfreich, wenn ich mich mit großen Aufgaben befasse. Hier sind alle Schritte, die wir unternehmen werden, um unser Projekt zu migrieren:

1. fügen Sie TypeScript
hinzu
2. add tsconfig.json
3. Beginnen Sie mit Einfachheit
4. alle Dateien
konvertieren
5. Strenge
verbessern
6. Reinigung
7. feiern Sie

Hinweis: Der wichtigste Schritt im gesamten Prozess ist Schritt 7. Obwohl wir diese Schritte nur ausführen können, um dorthin zu gelangen.

1.

Zunächst müssen wir unserem Projekt Typscript hinzufügen. Unter der Annahme, dass Ihr React-Projekt mit Create-React-App gestartet wird, können wir es gemäß dem Dokument ausführen:

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

oder wenn Sie Garn verwenden:

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

Bitte beachten Sie, dass wir noch nichts in TypeScript geändert haben. Wenn wir den Befehl ausführen, um das Projekt lokal zu starten (in meinem Fall Garnstart), ändert sich nichts. Wenn dies der Fall ist, wäre das großartig! Wir sind bereit, zum nächsten Schritt zu wechseln.

2

Bevor wir TypeScript nutzen können, müssen wir es über tsconfig.json konfigurieren. Die einfache Art und Weise, wie wir beginnen, besteht darin, einen mit dem folgenden Befehl zu erstellen:

Dies gibt uns einige Grundkenntnisse.

<code>npx tsc --init</code>

Wir haben noch nicht mit TypeScript interagiert. Wir haben nur die notwendigen Maßnahmen zur Vorbereitung ergriffen. Unser nächster Schritt ist die Migration der Datei in TypeScript. Damit können wir diesen Schritt abschließen und mit dem nächsten Schritt fortfahren.

3.

Die Schönheit von TypeScript ist, dass Sie es Schritt für Schritt übernehmen können. Wir können den ersten Teil der Migration von einer einfachen Komponente aus starten. Für mein Projekt werde ich mit einer Knopfkomponente beginnen, die so aussieht:

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

Um es richtig zu konvertieren, müssen wir zwei Dinge tun:

Ändern Sie die Dateierweiterung in .tsx
Fügen Sie einen Typ Kommentar hinzu

Da diese Komponente zwei Requisiten verwendet, müssen wir etwas ändern:

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

Lassen Sie uns überprüfen, ob alles ordnungsgemäß funktioniert, indem wir das Projekt ausführen, um sicherzustellen, dass wir nichts brechen. Bitte beachten Sie, dass hier reagierte Schriften automatisch neue Änderungen erkennen und tsconfig.json für uns ändern! Sehen! Wie schön ist das?

Wenn alles gut läuft, funktioniert unser Projekt weiterhin. Klopfen Sie Ihren Rücken! Sie haben Ihre erste Datei erfolgreich in TypeScript migriert. Wenn wir hier anhalten wollen, können wir, aber lassen Sie uns weiter vorwärts gehen.

4.

Der nächste Schritt besteht darin, Schritt 3 für alle Dateien im Projekt auszuführen. Wenn das Projekt, das Sie migrieren, ziemlich groß ist, empfehle ich Ihnen, diese mehrere Iterationen durchzuführen. Andernfalls können Sie sich erschöpfen.

In diesem Schritt müssen Sie möglicherweise zusätzliche Pakete gemäß der von Ihnen verwendeten Bibliothek von Drittanbietern hinzufügen. Zum Beispiel verwende ich den Moment, also muss ich Garn hinzufügen -d @typen/moment ausführen, um den Typ als DevDependency hinzuzufügen.

Wenn Sie dies tun, müssen Sie sich an die folgenden Punkte erinnern:

Unterdrückung von Typscript-Fehler durch Hinzufügen // @ts-ignore in der Zeile vor dem Fehler

• Wenn die Datei JSX verwendet (d. H.
• ), muss die Dateierweiterung .tsx anstelle von .ts sein Führen Sie das Projekt lokal aus, um sicherzustellen, dass alles funktioniert (sie sollten sein)
Nach Abschluss dieses Schritts sind die schwierigen Arbeiten abgeschlossen! Unser Projekt wird TypeScript verwenden, aber wir müssen unsere Genauigkeit erhöhen, um die Vorteile zu nutzen.

5.

Jetzt können wir die Stringenz verbessern, indem wir strengere Regeln in tsconfig.json aktivieren. Zum Glück benachrichtigt React-Scripts uns über irgendeine Art von Fehler, wenn wir unser Projekt lokal ausführen. Wir werden die folgenden Schritte folgen:

Regeln aktivieren

lokales Start -up -Projekt
Beheben Sie den Fehler
3. wir werden diesen Vorgang für die folgenden Regeln wiederholen:

"noimplicitany": True

"strictnullChecks": True
"noimPlicithis": True
"Immer strict": True
• Ich möchte einen Trick teilen. Wenn Sie etwas finden, das implizit Typen hat und Sie nicht sicher sind, wie Sie es an diesem Punkt beheben sollen, beheben Sie es nicht. Erstellen Sie dies und verwenden Sie es, um Fehler zu beseitigen:

Unser Ziel ist es, schnell voranzukommen und später zurückzukehren, um diese Probleme zu beheben.

Dies bringt unseren Projekten eine größere Sicherheit. Wenn Sie mehr über Compiler -Optionen erfahren möchten, können Sie den entsprechenden Inhalt im TypeScript -Handbuch lesen.

Danach können wir diese ersetzen:

• "noimplicitany": True
• "strictnullChecks": True
• "noimPlicithis": True
• "Immer strict": True

Verwenden Sie dies:

• "streng": True

Dies ermöglicht diese strengen Optionen auch:

• strictBindCallapply
• strictnullChecks
• strictFunctionTypes
• strictPropertyInitialisierung

Zu diesem Zeitpunkt haben wir das Standard -Strengniveau des Projekts erreicht. Wenn wir zusätzliche Schecks hinzufügen möchten, können wir folgende Regeln hinzufügen:

• "NounusedLocals": True
• "NounusedParameters": True
• "NoimPlicitreturns": True
• "nofallThroughCasesinswitch": True

Sobald wir das Maß an Strenge erreicht haben, mit dem wir zufrieden sind, können wir mit dem nächsten Schritt übergehen.

6.

Wenn Sie @ts-ignore hinzugefügt oder den FixMelater-Typ verwendet haben, ist es Zeit, zurück zu gehen und zu reparieren. Wir müssen das alles nicht auf einmal oder nie tun, aber dies ist der letzte Schritt, um die maximale Sicherheit im Projekt zu gewährleisten.

Manchmal ist die Anstrengung, diese zu beheben, die Zeit nicht wert, aber manchmal lohnt es sich. Sie müssen mit Ihrem Team besprechen und entscheiden, was Sinn macht.

7

wir haben es gemacht! Wir haben das Projekt offiziell auf Typenkript verschoben. Nehmen Sie sich etwas Zeit, um Ihre Arbeit zu feiern. Dies ist sicherlich keine triviale Angelegenheit. Vor allem, wenn Sie in einer großen Codebasis arbeiten.

Dinge, an die man sich erinnern sollte

Wenn wir unsere Arbeit überprüfen, finden Sie hier einige Dinge, die Sie bei der Migration unseres React -Projekts in TypeScript erinnern sollten.

Beginnen Sie von kleinen Dingen

Verwenden Sie die Fähigkeit, das Typenkript nach und nach zu übernehmen. Machen Sie es jeweils ein Dokument in Ihrem eigenen Tempo. Tun Sie, was Ihnen und Ihrem Team Sinn macht. Versuchen Sie nicht, alle Probleme gleichzeitig zu lösen.

Strenge im Laufe der Zeit

Sie müssen von Anfang an keine maximale Strenge sein. Dies ist eine Reise. Erhöhen Sie das Niveau im Laufe der Zeit. Schließlich erreichen Sie ein Niveau, das sich wohl fühlt. Fühlen Sie sich nicht traurig, wenn Sie keine 100% Strenge haben. Eine Art Sicherheit ist besser als keine Sicherheit.

verlassen sich auf Verknüpfungen

@TS-IGNORE- und FIXMELATER-Tipps können dazu beitragen, die Migrationslast zu erleichtern. Nicht alles muss gleichzeitig geändert werden. Verwenden Sie nach Bedarf Verknüpfungen, aber fühlen Sie sich nicht schlecht, wenn Sie sie verwenden. Auch hier ist der Punkt Migration, sollte aber nicht sehr schmerzhaft sein. Im Laufe der Zeit können Sie diese Priorität des Austauschs durch die richtige Sicherheitstyps priorisieren. Denken Sie jedoch daran, dass diese Tools für Sie verfügbar sind. Verwenden Sie sie also.

Dies ist nicht die einzige Möglichkeit, React -Projekte in Typenkript zu migrieren. Dies funktioniert jedoch für mich. Ich hoffe, es hilft dir genauso wie es mir hilft.

Weiteres Lesen

• reagieren Sie mit TypeScript: Best Practices
• Praktische Möglichkeiten zur Verbesserung der Typenkriptkenntnisse
• Wie TypeScript Sie zu einem besseren JavaScript -Entwickler
macht
JavaScript: Von Neuling nach Ninja, zweite Ausgabe
reagieren und reagieren native - zweite Ausgabe

React.FC Besonderer Dank an Karl Horky, der sich mit erklärte, dass der Typ nicht empfohlen wird, da er nur wenige Vorteile hat und einige Nachteile hat. Weitere Informationen finden Sie in dieser GitHub -Diskussion.

FAQs bei Migration von React -Anwendungen in TypeScript

Was ist TypeScript und warum sollte ich in Betracht ziehen, meine Reaktionsanwendung darauf zu migrieren? TypeScript ist ein statisch typisiertes Superset von JavaScript, das verbesserte Typprüfungen, Codequalität und Tool -Unterstützung bietet. Durch die Migration zu Typscript können Sie bei der Kompilierung der Kompilierungszeit Fehler aufnehmen, die Code -Wartbarkeit verbessern und die Entwicklererfahrung beim Umgang mit React -Anwendungen verbessern.

Wie kann ich meine React -Anwendung in TypeScript migrieren? Um zu beginnen, können Sie Ihr Projekt mit einem Tool wie React App mit TypeScript -Vorlagen zu Ihrem Projekt hinzufügen oder Ihr Projekt manuell für die Unterstützung von TypeScript konfigurieren. Sie müssen auch Ihre .js- und .jsx -Dateien in .ts bzw. .tsx umbenennen.

Was ist der Prozess, wenn ich meinen JavaScript -Code in TypeScript konvertiere? Dieser Prozess umfasst normalerweise: a. b. c. d.

Kann ich meine React -Anwendung Schritt für Schritt in TypeScript verschieben? Ja, Sie können Ihre Anwendung Schritt für Schritt migrieren. Sie können Komponenten oder Module nacheinander konvertieren und gleichzeitig eine vorhandene JavaScript -Codebasis beibehalten. Auf diese Weise können Sie Schritt für Schritt in TypeScript übergehen, ohne Ihren Entwicklungsworkflow zu unterbrechen.

Was sind die Vorteile der Verwendung von TypeScript und React? Einige Vorteile sind eine bessere Codequalität, eine verbesserte Produktivität der Entwickler, eine verbesserte Code -Autoperete, leistungsfähigere Refactoring -Tools und frühzeitige Erkennung häufiger Fehler. Es bietet auch klarere und mehr Selbstdokumentarcode durch Typanmerkungen.

Wie kann man mit Bibliotheken und Abhängigkeiten von Drittanbietern umgehen, wenn Sie zu Typenschriften migrieren? Sie können Definitionsdateien von TypeScript -Typen für viele beliebte Bibliotheken (normalerweise mit der Erweiterung .ds) auf definitiveded finden oder Tools wie @Types verwenden. Wenn die Typdefinition nicht verfügbar ist, können Sie Ihre eigene Typdefinition erstellen oder TypeScripts beliebige Typen verwenden, um Untyped -Bibliotheken zu verarbeiten.

Wie konfigurieren Sie meine Entwicklungstools und IDE so, dass TypeScript in React -Anwendung verwendet wird? Die beliebtesten Code -Editoren und -IDes wie Visual Studio Code unterstützen TypeScript hervorragend. Sie können TypeScript -Plugins und -Anweiterungen für Ihren Editor installieren, um von der erweiterten Integration von Typen, automatischen Vervollständigung und Fehlerprüfung zu profitieren.

Welche häufigen Herausforderungen habe ich bei der Migration zu Typscript? Zu den häufigen Herausforderungen gehören die Behandlung von Typ-Fehlern, die Bearbeitung von Bibliotheken von Drittanbietern, deren Typ-Definitionen fehlen, das Typ-Systeme von TypeScript zu verstehen und die Anpassung an strengere Typprüfungen, die das Typenkript durchsetzt.

Das obige ist der detaillierte Inhalt vonSo migrieren Sie eine React -App in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!