TypeScript + React en la práctica
TypeScript proporciona soporte completo de tipos para el desarrollo de React, mejorando la fiabilidad del código.
Usar TypeScript permite que los componentes de React, Props, State, etc., tengan una verificación de tipos completa, reduciendo los errores en tiempo de ejecución.
Ver tutorial de React:https://www.example.com/vue3/react-tutorial.html
Diagrama SVG: flujo de desarrollo de React + TypeScript
¿Por qué usar TypeScript en React?
El desarrollo de componentes en React genera una gran cantidad de flujos de datos como Props, State, Context, etc.
Sin definiciones de tipos, es difícil rastrear el origen y la estructura de los datos, y es fácil que aparezcan errores en tiempo de ejecución.
TypeScript proporciona un sistema de tipos completo para React: los Props de los componentes tienen verificación de tipos, useState tiene inferencia de tipos y el manejo de eventos tiene sugerencias de tipos.
Flujo de datos:Los flujos de datos en React (Props, State, Context) necesitan definiciones de tipos; TypeScript puede garantizar la seguridad de tipos del flujo de datos.
Crear proyecto
Usa un scaffolding moderno para crear un proyecto de React compatible con TypeScript.
Inicialización
npx create-react-app my-app --template typescript
# O usar Vite (recomendado, más rápido)
npm create vite@latest my-app -- --template react-ts
Recomendación:Vite es actualmente la herramienta de compilación más recomendada para React: es rápida y ofrece una buena experiencia de desarrollo.
Tipos de componentes
Usa el tipo React.FC para definir componentes de función.
src/components/Button.tsx
// Definir el tipo de Props del componente botón
interface ButtonProps {
text: string; // Texto del botón (obligatorio)
onClick: () => void; // Callback de clic (obligatorio)
disabled?: boolean; // Si está deshabilitado (opcional, por defecto false)
variant?: "primary" | "secondary"; // Variante del botón (opcional)
}
// Usar React.FC para definir el tipo del componente de función
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;
Resultado de ejecución:
Button 组件渲染成功
React.FC：Este es el tipo de componente de función de React, que incluye tipos integrados como children, propTypes, etc.
Tipos de Props
Define la interfaz de Props del componente para pasar datos a los componentes hijos.
src/components/UserCard.tsx
// Definir el tipo de usuario
interface User {
id: number; // ID de usuario
name: string; // Nombre de usuario
email: string; // Correo electrónico
avatar?: string; // Avatar (opcional)
}
// Definir las Props del componente de tarjeta de usuario
interface UserCardProps {
user: User; // Objeto de usuario (obligatorio)
onEdit: (user: User) => void; // Callback de edición
onDelete: (id: number) => void; // Callback de eliminación
}
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)}>Editar</button>
<button onClick={() => onDelete(user.id)}>Eliminar</button>
</div>
);
};
export default UserCard;
Transmisión de tipos:Pasa los tipos a través de las Props, asegurando que los tipos de datos de todo el árbol de componentes sean consistentes.
Tipos de useState
Proporciona parámetros de tipo a useState para garantizar que el tipo de estado sea correcto.
src/components/Counter.tsx
const Counter: React.FC = () => {
// Tipo básico: especificar explícitamente el tipo number
const [count, setCount] = useState<number>(0);
// Tipo objeto: especificar el tipo de objeto
const [user, setUser] = useState<{ name: string; age: number }>({
name: "Alice",
age: 25
});
return (
<div>
<p>Contador: {count}</p>
<button onClick={() => setCount(c => c + 1)}>+1</button>
<button onClick={() => setCount(c => c - 1)}>-1</button>
<p>Usuario: {user.name}, {user.age}</p>
<button onClick={() => setUser({ ...user, age: user.age + 1 })}>
Edad+1
</button>
</div>
);
};
export default Counter;
Resultado de ejecución:
Counter 组件渲染成功
Parámetros genéricos:La T en useState<T> es el tipo del estado; si se proporciona un valor inicial, TypeScript puede inferirlo automáticamente.
Tipos de useEffect
useEffect también tiene soporte completo de tipos.
src/components/DataFetcher.tsx
// Definir el tipo de usuario
interface User {
id: number;
name: string;
}
const DataFetcher: React.FC = () => {
// Estado de la lista de usuarios
const [users, setUsers] = useState<User[]>([]);
// Estado de carga
const [loading, setLoading] = useState<boolean>(true);
// Estado de error
const [error, setError] = useState<string | null>(null);
useEffect(() => {
// Simular la obtención de datos
fetch("/api/users")
.then(res => res.json())
.then(data => {
setUsers(data);
setLoading(false);
})
.catch(err => {
setError(err.message);
setLoading(false);
});
}, []); // Array de dependencias vacío: se ejecuta solo una vez al montar el componente
if (loading) return <div>Cargando...</div>;
if (error) return <div>Error: {error}</div>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};
export default DataFetcher;
Array de dependencias:El segundo parámetro de useEffect es el array de dependencias; TypeScript verifica que todas las variables usadas en el callback estén declaradas en el array.
Manejo de eventos
Los eventos de React tienen definiciones de tipos específicas.
src/components/Form.tsx
const Form: React.FC = () => {
// Estado de tipo string
const [name, setName] = useState<string>("");
// Manejo del evento de envío del formulario
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); // Evitar el envío predeterminado del formulario
console.log("Enviar:", name);
};
// Manejo del evento de cambio del campo de entrada
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setName(e.target.value);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={handleChange}
placeholder="Escribe un nombre"
/>
<button type="submit">Enviar</button>
</form>
);
};
export default Form;
Resultado de ejecución:
Form 组件渲染成功
Tipos de eventos:React proporciona tipos para cada evento DOM, como FormEvent, ChangeEvent, MouseEvent, etc.
Consideraciones
- React.FC：Se recomienda usarlo; se obtiene soporte completo de tipos
- Interfaz de Props:Definir el tipo de Props para cada componente
- Genéricos de useState:Los tipos complejos deben especificarse explícitamente
- Tipos de eventos:Usar los tipos de eventos proporcionados por React
Buenas prácticas:Coloca las definiciones de tipos y los componentes en el mismo archivo, o adminístralas de forma centralizada en el directorio types.
Resumen
TypeScript mejora enormemente la experiencia de desarrollo de React.
- React.FC：Tipo estándar de los componentes de función de React
- Props：Usar interface para definir las propiedades del componente
- useState：Usar parámetros genéricos para especificar el tipo de estado
- useEffect：Soporte completo de tipos
- Eventos:Usar los tipos de eventos de React para evitar any
Otras extensionesSugerencia:Usar TypeScript directamente en proyectos nuevos puede reducir significativamente los errores en tiempo de ejecución.