REACT TYPESCRIPT
Tipos básicos de Props
type Props = {
mensaje: string;
conteo?: number; // Propiedad opcional
};
const Componente: React.FC<Props> = ({ mensaje, conteo = 0 })
=> {
return <div>{mensaje} - {conteo}</div>;
};
Hooks con TypeScript
useState
const [estado, setEstado] = useState<string>("inicial");
setEstado("nuevo valor");
useEffect
useEffect(() => {
// Efecto ejecutado al montar o actualizar el componente
}, [estado]); // Dependencias
Tipado de eventos
Eventos de entrada
const manejarCambio = (e: React.ChangeEvent<HTMLInputElement>)
=> {
console.log(e.target.value);
};
Eventos de formulario
const manejarEnvio = (e: React.FormEvent<HTMLFormElement>) =>
{
e.preventDefault();
};
Eventos de clic
const manejarClick = (e: React.MouseEvent<HTMLButtonElement>)
=> {
console.log("Botón clicado");
};
Componentes con Children
type PropsConChildren = {
children: React.ReactNode;
};
const ComponenteConChildren: React.FC<PropsConChildren> = ({
children }) => {
return <div>{children}</div>;
};
Tipado de Funciones
type FuncionEjemplo = (param: string) => void;
const miFuncion: FuncionEjemplo = (texto) => {
console.log(texto);
};
useRef con TypeScript
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
Context API con TypeScript
Define el contexto y sus valores:
type MiContextoTipo = {
valor: string;
actualizarValor: (nuevoValor: string) => void;
};
const MiContexto = createContext<MiContextoTipo |
undefined>(undefined);
1. Provider:
const MiProveedor: React.FC = ({ children }) => {
const [valor, setValor] = useState("inicial");
const actualizarValor = (nuevoValor: string) =>
setValor(nuevoValor);
return (
<MiContexto.Provider value={{ valor, actualizarValor }}>
{children}
</MiContexto.Provider>
);
};
2. useContext:
const contexto = useContext(MiContexto);
if (!contexto) {
throw new Error("useMiContexto debe estar dentro de
MiProveedor");
}
contexto.actualizarValor("nuevo valor");
3. Tipado de Props en Componentes Funcionales
Si tienes una función que recibe un componente como prop:
type ComponenteConComponente = {
Componente: React.ComponentType<Props>;
};
const MiComponentePadre:
React.FC<ComponenteConComponente> = ({ Componente }) => {
return <Componente mensaje="Hola" />;
};
Enumerados en TypeScript
enum Colores {
Rojo = "rojo",
Verde = "verde",
Azul = "azul"
}
const [color, setColor] = useState<Colores>(Colores.Rojo);
Tipado de props para componentes genéricos
type Props<T> = {
items: T[];
renderItem: (item: T) => React.ReactNode;
};
const ListaGenerica = <T,>({ items, renderItem }: Props<T>) =>
{
return <div>{items.map(renderItem)}</div>;
};
