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!