TypeScript für React-Entwickler: Ein praktischer Leitfaden

Überblick

React ist eine der beliebtesten JavaScript-Bibliotheken für die Erstellung von Benutzeroberflächen, aber mit zunehmender Komplexität der Projekte stehen Entwickler oft vor Problemen mit der Typsicherheit und dem Debugging. An dieser Stelle kommt TypeScript zur Hilfe. TypeScript ist eine stark typisierte Obermenge von JavaScript, die sich zu einfachem JavaScript kompilieren lässt und Funktionen wie statische Typisierung, Schnittstellen und bessere Tooling-Unterstützung bietet. Für React-Entwickler kann TypeScript die Anzahl der Bugs drastisch reduzieren, die Wartbarkeit des Codes verbessern und die Erfahrung der Entwickler erhöhen.

Warum TypeScript mit React verwenden?

1. Verbesserte Code-Qualität: TypeScript stellt sicher, dass die Datentypen in Ihrer gesamten Anwendung konsistent sind, wodurch Laufzeitfehler reduziert werden.
2. Verbessertes Entwicklererlebnis: IDEs bieten bessere Autovervollständigung, Refactoring und Debugging-Unterstützung mit TypeScript.
3. Skalierbarkeit: Große Codebasen sind einfacher zu verwalten, da TypeScript klare Verträge für Komponenten und Funktionen bietet.
4. Bessere Kollaboration: Dank expliziter Typdefinitionen können die Entwickler den Code der anderen leichter verstehen.

Wichtige TypeScript-Funktionen für React-Entwickler

1. Typisierung von Status und Props in funktionalen Komponenten

In React sind Props die wichtigste Methode, um Daten an untergeordnete Komponenten zu übergeben. Der Status kann mit dem useState-Hook von React typisiert werden. Hier erfahren Sie, wie Sie Props und Status mit TypeScript definieren können:

Typ ButtonProps = {
	Etikett: Zeichenfolge;
};
	
const Schalter: Reagieren.FC = ({ Etikett }) => {
	const [zählen, setCount] = Reagieren.useState<Nummer>(0);
	zurückkehren (
		<div>
			<P>Zählen: {zählen}</P>
			<Taste onClick={() => setCount(zählen + 1)}>
				{Etikett}
			</Taste>
		</div>
	);
};	  

2. Verwendung von Standardrequisiten und optionalen Requisiten

Sie können Requisiten mit einem Fragezeichen (?) als optional markieren.

type GreetingProps = {
	name?: string;
};
	
const Greeting: React.FC<GreetingProps> = ({ name = 'Guest' }) => (
	<h1>Hello, {name}!</h1>
);	  

Best Practices für die Verwendung von TypeScript in React

1. Vermeiden Sie jeden Typ: Es mag zwar einfacher erscheinen, aber die Verwendung eines beliebigen Typs macht den Zweck von TypeScript zunichte. Verwenden Sie stattdessen bestimmte Typen oder unbekannte Typen, wo dies möglich ist.
2. Verwenden Sie Interfaces für Requisiten und Zustände: Während sowohl Typ als auch Schnittstelle Objektformen definieren können, sind Schnittstellen aufgrund ihrer Erweiterbarkeit besser für Requisiten und Zustände geeignet.
3. Nutzen Sie Utility-Typen: TypeScript bietet mehrere Hilfstypen wie Partial, Pick und Omit, um Typdefinitionen zu vereinfachen.
4. Komponenten typisiert halten: Typisieren Sie Komponenten, Hooks und Funktionen zur besseren Übersichtlichkeit immer explizit.
5. Nutzen Sie Generics für wiederverwendbare Komponenten: Mit Generika können Sie flexible und wiederverwendbare Komponenten erstellen, die mit verschiedenen Datentypen arbeiten.
   Beispiel:

Typ ListProps<T> = {
	Artikel: T[];
	renderItem: (Artikel: T) => JSX.Element;
};
	
const Liste = <T,>({ Artikel, renderItem }: ListProps<T>):
JSX.Element => (
	<ul>
		{Artikel.Karte((Artikel, Index) => (
			<Das Schlüssel={Index}>{renderItem(Artikel)}</Das>
		))}
	</ul>
);
	
const App = () => {
	const Benutzer = [{ Ausweis: 1, Name: 'John' }, { Ausweis: 2, Name: „Jane“
}];
	zurückkehren (
		<Liste
			Artikel={Benutzer}
			renderItem={(Benutzer) => <Spanne>{Benutzer.Name}</Spanne>}
		/>
	);
}; 

6. Event-Handler richtig typisieren: React bietet Typdefinitionen für Event-Handler. Verwenden Sie diese anstelle von generischen Typen für Ereignisse. Die Typisierung von Ereignissen stellt sicher, dass Sie je nach Ereignistyp Zugriff auf die richtigen Eigenschaften haben.
   Beispiel:

const Eingang = () => {  
	const handleChange =
		(Ereignis:Reagieren.ChangeEvent<HTMLInputElement>) => {
			Konsole.Protokoll(Ereignis.Ziel.Wert);   
	};   
	zurückkehren <Eingang Typ="Text" onChange={handleChange} />;
};

7. Bevorzugen Sie spezifische Typen gegenüber allgemeinen Typen: Vermeiden Sie allzu generische Typen wie String oder Object, wenn Sie die genaue Form oder das Format Ihrer Daten kennen. Verwenden Sie literale Typen oder Enums, um sicherzustellen, dass Ihre Daten mit den erwarteten Werten übereinstimmen.
   Beispiel:

Typ ButtonVariant = 'primär' | 'sekundär' | 'Gefahr';

Typ ButtonProps = {
   Variante: ButtonVariant;
   onClick: () => Leere;
};

const Taste: Reagieren.FC<ButtonProps> = ({ Variante, onClick }) => (
   <Taste Klassenname={`btn-${Variante}`} onClick={onClick}>
       {Variante} Taste
   </Taste>
);

Fazit

Die Integration von TypeScript in React-Projekte kann zunächst abschreckend wirken, aber die Vorteile in Bezug auf Wartbarkeit, Skalierbarkeit und Entwicklererfahrung sind unbestreitbar. Durch die Eingabe von Props, Zuständen, Hooks und anderen React-Funktionen können Sie robuste und fehlerfreie Anwendungen erstellen.

Beginnen Sie klein, indem Sie TypeScript in neue Komponenten einführen und Ihre bestehende Codebasis schrittweise refaktorisieren. Wenn Sie sich mit den Funktionen und Best Practices von TypeScript vertraut machen, werden Sie feststellen, dass es ein unschätzbares Werkzeug für Ihre React-Entwicklung ist.

Machen Sie sich TypeScript zu eigen und heben Sie Ihre React-Fähigkeiten auf die nächste Stufe!