TypeScript zu einem React-Projekt hinzufügen

Wir werden vorstellen, wie man TypeScript mit einfachen Befehlen zu neuen und alten React-Projekten hinzufügt.

TypeScript zu einem React-Projekt hinzufügen

Viele Entwickler ziehen es vor, TypeScript sowohl in React- als auch in Angular-Projekten zu verwenden. Manchmal erhalten wir Anwendungen oder Projekte, die in JavaScript erstellt wurden, und möchten diesen Projekten TypeScript hinzufügen.

In diesem Tutorial gehen wir beide Szenarien durch, in denen wir eine neue React-Anwendung erstellen oder einem bereits erstellten Projekt ein TypeScript hinzufügen. Beginnen wir zunächst mit der Neuinstallation der React-Anwendung.

Es gibt zwei Möglichkeiten, die React-Anwendung mithilfe der TypeScript-Vorlage zu installieren. Eine ist die Verwendung von npx.

Mit dem folgenden Befehl können wir ganz einfach eine neue React-Anwendung mit der TypeScript-Vorlage installieren.

# NPX
npx create-react-app New-app --template typescript

Dieser Befehl installiert eine neue Reaktionsanwendung mit der neuesten Version. Wenn wir nun die Reaktionsanwendung mit dem Garn installieren möchten, können wir den folgenden Befehl ausführen.

# YARN
yarn create-react-app New-app --template typescript

Lassen Sie uns nun unser zweites Szenario durchgehen, in dem wir bereits ein Projekt haben, das mit der JavaScript-Vorlage erstellt wurde, und es in ein TypeScript-Framework konvertieren möchten.

Zuerst müssen wir den folgenden Befehl ausführen, um TypeScript mit npm in unserem Projekt zu installieren, wie unten gezeigt.

# NPM
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Wenn wir unser Projekt mit yarn installiert haben, müssen wir den folgenden Befehl ausführen.

# YARN
yarn add typescript @types/node @types/react @types/react-dom @types/jest

Nachdem wir das TypeScript und seine Abhängigkeiten installiert haben, können wir die JavaScript-Dateien von .js in .ts umbenennen. Nachdem wir alle Dateien in TypeScript geändert haben, werden wir unseren Entwicklungsserver neu starten.

Es werden einige Fehler in Bezug auf Typen auftreten. Wir müssen diese Fehler gemäß den Anforderungen des Projekts beheben, bevor wir neue Funktionen entwickeln.