JavaScript ist eine schwach typisierte Programmiersprache. Aus diesem Grund ist es sehr nachsichtig, und Programmierfehler werden während der Entwicklung wahrscheinlich unbemerkt bleiben. TypeScript, eine Bibliothek zur Überprüfung von JavaScript-Typen, löst dieses Problem, indem Typen für Werte erzwungen werden. In diesem Artikel erfahren Sie, wie Sie mit TypeScript ein React-Projekt erstellen.
Erstellen eines React-Projekts mit TypeScript
Mit dem Befehl create-react-app können Sie Typescript-Projekte mit dem erstellen --Schablone Möglichkeit.
Zu Erstellen Sie ein neues React-Projekt Führen Sie mit TypeScript den folgenden Befehl aus:
npx schaffen-react-app app-Name--template Typoskript
Dieser Befehl erstellt ein neues React- und TypeScript-Projekt von Grund auf neu. Sie können TypeScript auch zu einer bestehenden React-Anwendung hinzufügen.
Navigieren Sie dazu zu dem Projekt, dem Sie TypeScript hinzufügen möchten, und führen Sie den folgenden Code aus:
npm install --save Typoskript @Typen/node @Typen/react @Typen/react-dom @Typen/jest
Tauschen Sie dann die Dateierweiterung .js mit .tsx für Dateien aus, die Sie in TypeScript konvertieren möchten. Sobald Sie dies getan haben, erhalten Sie die „React bezieht sich auf eine UMD global, aber die aktuelle Datei ist ein Modul.“ Error. Sie können es lösen, indem Sie React in jede Typoskript-Datei wie folgt importieren:
importieren Reagieren aus "reagieren"
Erstellen Sie als einfachere Lösung eine tsconfig.json und setzen Sie jsx auf „react-jsx“.
{
"CompilerOptionen": {
"jsx": "reagieren-jsx",
"Ziel": "es6",
"Modul": "esweiter",
},
}
Alle Konfigurationseinstellungen finden Sie in der TypeScript-Dokumente.
Erstellen einer React-Funktionskomponente in TypeScript
Sie definieren eine React-Funktionskomponente auf die gleiche Weise wie eine JavaScript-Funktion.
Unten sehen Sie ein Beispiel für eine Funktionskomponente namens Greetings.
ExportUrsprünglichFunktionGrüße() {
Rückkehr (
<div>Hallo Welt</div>
)
}
Diese Komponente gibt einen „Hello world“-String zurück, und TypeScript leitet seinen Rückgabetyp ab. Sie können jedoch den Rückgabetyp kommentieren:
ExportUrsprünglichFunktionGrüße(): JSX.Element{
Rückkehr (
<div>Hallo Welt</div>
)
}
TypeScript gibt einen Fehler aus, wenn die Greetings-Komponente einen Wert zurückgibt, der kein JSX.element ist.
Verwendung von React Props mit TypeScript
Mit React können Sie wiederverwendbare Komponenten durch Requisiten erstellen. Beispielsweise kann die Greetings-Komponente einen Namensprop erhalten, sodass der Rückgabewert darauf basierend angepasst wird.
Unten ist die bearbeitete Komponente mit einem Namen als Requisite. Beachten Sie die Inline-Typdeklaration.
FunktionGrüße({Name}: {Name: Zeichenkette}) {
Rückkehr (
<div>Hallo {Name}</div>
)
}
Wenn Sie den Namen „Jane“ übergeben, gibt die Komponente die Nachricht „Hello Jane“ zurück.
Anstatt die Typdeklaration in die Funktion zu schreiben, können Sie sie extern wie folgt definieren:
Typ GrüßeRequisiten = {
Name: Zeichenkette;
};
Übergeben Sie dann den definierten Typ wie folgt an die Komponente:
FunktionGrüße({name}: GreetingsRequisiten) {
Rückkehr (
<div>Hallo {Name}</div>
)
}
Verwenden Sie das Interface-Schlüsselwort, wenn Sie diesen Typ exportieren und erweitern möchten:
Export SchnittstelleGrüßeRequisiten{
Name: Zeichenkette;
};
Beachten Sie den Syntaxunterschied zwischen Typ und Schnittstelle – Schnittstelle hat kein Gleichheitszeichen.
Sie können eine Schnittstelle mit dem folgenden Code erweitern:
importieren { GrußRequisiten } aus './Grüße'
SchnittstelleWillkommenRequisitenerweitertGrüßeRequisiten{
Zeit: "Schnur"
}
Sie können die erweiterte Schnittstelle dann in einer anderen Komponente verwenden.
FunktionHerzlich willkommen({Name, Uhrzeit}: WelcomeProps) {
Rückkehr (
<div>
Gute {Zeit}, {Name}!
</div>
)
}
Verwenden Sie das „?“ Symbol mit Ihrer Requisiten-Schnittstelle, um optionale Requisiten zu definieren. Hier ist ein Beispiel für eine Schnittstelle mit einem optionalen Namensprop.
SchnittstelleGrüßeRequisiten{
Name?: Zeichenkette;
};
Wenn Sie keine Namensstütze übergeben, gibt TypeScript keinen Fehler aus.
React State mit TypeScript verwenden
In einfachem JavaScript definieren Sie der useState()-Hook folgendermaßen:
const [Kundenname, setKundenname] = useState("");
In diesem Beispiel kann TypeScript den Typ von firstName problemlos als Zeichenfolge ableiten, da der Standardwert eine Zeichenfolge ist.
Manchmal können Sie den Status jedoch nicht auf einen definierten Wert initialisieren. In diesen Fällen müssen Sie einen Zustandswerttyp angeben.
Hier sind einige Beispiele, wie Typen im useState()-Hook definiert werden.
const [Kundenname, setKundenname] = useState<Schnur>("");
const [Alter, SetAge] = useState<Nummer>(0);
konst [isSubscribed, setIsSubscribed] = useState<boolesch>(FALSCH);
Sie können auch eine Schnittstelle im useState()-Hook verwenden. Beispielsweise können Sie das obige Beispiel umschreiben, um eine unten gezeigte Schnittstelle zu verwenden.
SchnittstelleIKunde{
Kundenname: Zeichenfolge ;
Alter: Zahl ;
ist Abonniert: boolesch ;
}
Verwenden Sie die benutzerdefinierte Schnittstelle im Hook wie folgt:
const [Kunde, SetKunde] = useState<IKunde>({
Kundenname: "Jane",
Alter: 10,
ist Abonniert: FALSCH
});
Verwenden von Ereignissen mit TypeScript
Ereignisse sind unerlässlich, da sie Benutzern die Interaktion mit einer Webseite ermöglichen. In TypeScript können Sie entweder Ereignisse oder die Ereignishandler eingeben.
Betrachten Sie zur Veranschaulichung die folgende Login-Komponente, die die Ereignisse onClick() und onChange() verwendet.
importieren { useState } aus 'reagieren';
ExportUrsprünglichFunktionAnmeldung() {
const [E-Mail, setE-Mail] = useState('');konst handleChange = (Ereignis) => {
setE-Mail(Veranstaltung.Ziel.Wert);
};konst handleClick = (Ereignis) => {
Konsole.log ('Eingereicht!');
};
Rückkehr (
<div>
<Eingabetyp="Email" value={email} onChange={handleChange} />
<Schaltfläche onClick={() => handleClick}>Einreichen</button>
</div>
);
}
So würden Sie Ereignisse in einfachem JavaScript behandeln. TypeScript erwartet jedoch, dass Sie den Ereignisparametertyp in den Ereignishandlerfunktionen definieren. Glücklicherweise bietet React mehrere Ereignistypen.
Verwenden Sie beispielsweise den Typ changeEvent für die Ereignisbehandlungsroutine handleChange().
importieren { ChangeEvent, useState } aus 'reagieren';
const handleChange = (Ereignis: ChangeEvent<HTMLInputElement>) => {
setE-Mail(Veranstaltung.Ziel.Wert);
};
Der changeEvent-Typ wird zum Ändern der Werte von input-, select- und textarea-Elementen verwendet. Es ist ein generischer Typ, was bedeutet, dass Sie das DOM-Element übergeben müssen, dessen Wert sich ändert. In diesem Beispiel haben Sie das Eingabeelement übergeben.
Das obige Beispiel zeigt, wie das Ereignis eingegeben wird. Der folgende Code zeigt, wie Sie stattdessen den Ereignishandler eingeben können.
importieren {ChangeEventHandler, useState} aus 'reagieren';
const handleChange: ChangeEventHandler<HTMLInputElement> = (Ereignis) => {
setE-Mail(Veranstaltung.Ziel.Wert);
};
Verwenden Sie für das Ereignis handleClick() das MouseEvent().
importieren { useState, MouseEvent } aus 'reagieren';
konst handleClick = (Ereignis: MouseEvent) => {
Konsole.log ('Eingereicht!');
};
Auch hier können Sie den Typ an den Ereignishandler selbst anhängen.
importieren {useState, MouseEventHandler} aus 'reagieren';
konst handleClick: MouseEventHandler = (Ereignis) => {
Konsole.log ('Eingereicht!');
};
Informationen zu anderen Ereignistypen finden Sie unter TypeScript-Spickzettel reagieren.
Wenn Sie große Formulare erstellen, ist es besser Verwenden Sie eine Formularbibliothek wie Formik, da es mit TypeScript erstellt wurde.
Warum sollten Sie TypeScript verwenden?
Sie können ein neues React-Projekt anweisen, TypeScript zu verwenden oder ein vorhandenes zu konvertieren. Sie können TypeScript auch mit React-Funktionskomponenten, Status und React-Ereignissen verwenden.
Das Eingeben von React-Komponenten kann sich manchmal anfühlen, als würde man unnötigen Boilerplate-Code schreiben. Je häufiger Sie es jedoch verwenden, desto mehr werden Sie seine Fähigkeit zu schätzen wissen, Fehler abzufangen, bevor Sie Ihren Code bereitstellen.
