TypeScript + React praktisch
TypeScript bietet vollständige Typunterstützung für die React-Entwicklung und verbessert die Zuverlässigkeit des Codes.
Die Verwendung von TypeScript stellt sicher, dass React-Komponenten, Props, State usw. alle über eine vollständige Typprüfung verfügen, wodurch Laufzeitfehler reduziert werden.
React-Tutorial ansehen:https://www.example.com/vue3/react-tutorial.html
SVG-Diagramm: React + TypeScript-Entwicklungsworkflow
Warum sollte man TypeScript in React verwenden?
Die komponentenbasierte Entwicklung mit React erzeugt eine große Menge an Datenfluss wie Props, State, Context usw.
Ohne Typdefinitionen ist es schwierig, die Quelle und Struktur der Daten nachzuvollziehen, und es kommt leicht zu Laufzeitfehlern.
TypeScript bietet ein vollständiges Typsystem für React: Komponenten-Props verfügen über Typprüfung, useState über Typinferenz und die Ereignisbehandlung über Typhinweise.
Datenfluss:Der Datenfluss in React (Props, State, Context) benötigt Typdefinitionen, und TypeScript kann die Typsicherheit des Datenflusses gewährleisten.
Ein Projekt erstellen
Verwende ein modernes Scaffolding-Tool, um ein React-Projekt zu erstellen, das TypeScript unterstützt.
Initialisieren
npx create-react-app my-app --template typescript
# Oder verwende Vite (empfohlen, schneller)
npm create vite@latest my-app -- --template react-ts
Empfehlung:Vite ist derzeit das am meisten empfohlene React-Build-Tool, mit hoher Geschwindigkeit und guter Entwicklungserfahrung.
Komponententypen
Verwende den Typ React.FC, um Funktionskomponenten zu definieren.
src/components/Button.tsx
// Definiere den Props-Typ für die Button-Komponente
interface ButtonProps {
text: string; // Button-Text (erforderlich)
onClick: () => void; // Klick-Callback (erforderlich)
disabled?: boolean; // Ob deaktiviert (optional, Standardwert false)
variant?: "primary" | "secondary"; // Button-Variante (optional)
}
// Definiere den Typ der Funktionskomponente mit React.FC
const Button: React.FC<ButtonProps> = ({
text,
onClick,
disabled = false,
variant = "primary"
}) => {
return (
<button
className={`btn btn-${variant}`}
onClick={onClick}
disabled={disabled}
>
{text}
</button>
);
};
export default Button;
Ausführungsergebnis:
Button 组件渲染成功
React.FC：Dies ist der Typ einer React-Funktionskomponente, einschließlich integrierter Typen wie children, propTypes usw.
Props-Typen
Definiere die Props-Schnittstelle einer Komponente, um Daten an untergeordnete Komponenten zu übergeben.
src/components/UserCard.tsx
// Definiere den Benutzertyp
interface User {
id: number; // Benutzer-ID
name: string; // Benutzername
email: string; // E-Mail
avatar?: string; // Avatar (optional)
}
// Definiere die Props für die UserCard-Komponente
interface UserCardProps {
user: User; // User-Objekt (erforderlich)
onEdit: (user: User) => void; // Bearbeiten-Callback
onDelete: (id: number) => void; // Lösch-Callback
}
const UserCard: React.FC<UserCardProps> = ({ user, onEdit, onDelete }) => {
return (
<div className="user-card">
{user.avatar && <img src={user.avatar} alt={user.name} />}
<h3>{user.name}</h3>
<p>{user.email}</p>
<button onClick={() => onEdit(user)}>Bearbeiten</button>
<button onClick={() => onDelete(user.id)}>Löschen</button>
</div>
);
};
export default UserCard;
Typweitergabe:Typen durch Props weitergeben, um konsistente Datentypen im gesamten Komponentenbaum sicherzustellen.
useState Typen
Geben Sie Typparameter für useState an, um den korrekten Zustandstyp sicherzustellen.
src/components/Counter.tsx
const Counter: React.FC = () => {
// Basistyp: den number-Typ explizit angeben
const [count, setCount] = useState<number>(0);
// Objekttyp: den Objekttyp angeben
const [user, setUser] = useState<{ name: string; age: number }>({
name: "Alice",
age: 25
});
return (
<div>
<p>Anzahl: {count}</p>
<button onClick={() => setCount(c => c + 1)}>+1</button>
<button onClick={() => setCount(c => c - 1)}>-1</button>
<p>User: {user.name}, {user.age}</p>
<button onClick={() => setUser({ ...user, age: user.age + 1 })}>
Alter+1
</button>
</div>
);
};
export default Counter;
Ausführungsergebnis:
Counter 组件渲染成功
Generische Parameter:Das T in useState<T> ist der Typ des Zustands. Wenn ein Anfangswert angegeben wird, kann TypeScript ihn automatisch ableiten.
useEffect-Typen
useEffect bietet außerdem vollständige Typunterstützung.
src/components/DataFetcher.tsx
// Definiere den Benutzertyp
interface User {
id: number;
name: string;
}
const DataFetcher: React.FC = () => {
// Zustand der Benutzerliste
const [users, setUsers] = useState<User[]>([]);
// Ladezustand
const [loading, setLoading] = useState<boolean>(wahr);
// Fehlerzustand
const [error, setError] = useState<string | null>(null);
useEffect(() => {
// Datenabruf simulieren
fetch("/api/users")
.then(res => res.json())
.then(data => {
setUsers(data);
setLoading(false);
})
.catch(err => {
setError(err.message);
setLoading(false);
});
}, []); // Leeres Abhängigkeitsarray: wird nur einmal ausgeführt, wenn die Komponente gemountet wird
if (loading) return <div>Wird geladen...</div>;
if (error) return <div>Error: {error}</div>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};
export default DataFetcher;
Abhängigkeitsarray:Der zweite Parameter von useEffect ist das Abhängigkeitsarray. TypeScript prüft, ob alle im Callback verwendeten Variablen im Array deklariert wurden.
Ereignisbehandlung
React-Ereignisse haben dedizierte Typdefinitionen.
src/components/Form.tsx
const Form: React.FC = () => {
// Zustand vom Typ string
const [name, setName] = useState<string>("");
// Ereignisbehandlung für Formularübermittlung
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); // Standardübermittlung des Formulars verhindern
console.log("Absenden:", name);
};
// Ereignisbehandlung für Eingabeänderungen
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setName(e.target.value);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={handleChange}
placeholder="Name eingeben"
/>
<button type="submit">Absenden</button>
</Form>
);
};
export default Form;
Ausführungsergebnis:
Form 组件渲染成功
Event-Typen:React stellt Typen für jedes DOM-Ereignis bereit, wie FormEvent, ChangeEvent, MouseEvent usw.
Hinweise
- React.FC：Empfohlen zu verwenden, um vollständige Typunterstützung zu erhalten
- Props-Schnittstelle:Props-Typen für jede Komponente definieren
- useState-Generics:Komplexe Typen müssen explizit angegeben werden
- Event-Typen:Die von React bereitgestellten Event-Typen verwenden
Best Practices:Typdefinitionen und Komponenten in derselben Datei ablegen oder sie zentral in einem types-Verzeichnis verwalten.
Zusammenfassung
TypeScript verbessert die React-Entwicklungserfahrung erheblich.
- React.FC：Standardtyp für React-Funktionskomponenten
- Props：Interface verwenden, um Komponenten-Props zu definieren
- useState：Generische Parameter verwenden, um den State-Typ anzugeben
- useEffect：Vollständige Typunterstützung
- Ereignisse:React-Event-Typen verwenden, um any zu vermeiden
Andere ErweiterungenVorschlag:Verwende TypeScript direkt in neuen Projekten, was Laufzeitfehler deutlich reduzieren kann.