Muy buena explicación sobre los genericos!!
Introducción
El presente del Frontend es TypeScript
Tipado implícito vs. tipado explícito
Creando una app con React y TypeScript
Tipado en React
Diferentes formas de definir un componente
El objeto props y children
State con tipos primitivos
State con otros tipos
React y el DOM
Tipos para eventos y callbacks de escuchadores
Tipos para referencias y observadores
Lazy loading con observadores
Componentes que extienden elementos DOM
Reto: sigamos extiendo el DOM
Configuraciones avanzadas
Creando tipos propios para la aplicación
Trabajando con librerías no-tipadas
Trabajando con librerías que extienden el objeto window
Próximos pasos
¿Quieres más cursos de React con TypeScript?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
State con tipos primitivos
6/16Recursos
Aportes 3
Preguntas 1
Ordenar por:
Dentro de un genérico se pueden ingresar cualquier tipo de dato, no solamente arrays. Algunos ejemplos de tipos de datos que se pueden utilizar dentro de un genérico en TypeScript incluyen:
Números
Booleanos
Cadena de caracteres (strings)
Objetos
Funciones
Clases
Interfaces
Esto proporciona flexibilidad y reutilización de código en diversos contextos.
Los Genéricos son una herramienta muy poderosa en TypeScript que permiten la creación de código más flexible y reutilizable, permitiendo definir funciones, clases e interfaces que pueden trabajar con distintos tipos de datos de manera más abstracta y genérica.
State con tipos primitivos
Los estados pueden recibir tipos de datos primitivos como un string, number, boolean.
Para esta oportunidad vamos a ver que el hook de react useState, tiene un generador (generator) que permite saber qué va a inferir su motor de interpretación.
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
// convenience overload when first argument is omitted
/**
* Returns a stateful value, and a function to update it.
*
* @version 16.8.0
* @see https://reactjs.org/docs/hooks-reference.html#usestate
*/
La <S> quiere referirse a la inicial del state (estado). En pocas palabras: es una variable que recibe y asigna.
En nuestro proyecto, vamos a hacer este ejemplo con varias imágenes que vamos a recibir.
Necesitamos hacer importación del hook de react: useState
import { useState } from "react";
Después creamos el array que va a recibir:
const [images, setImages] = useState<Array<string>>([
`https://randomfox.ca/images/${randomNumber()}.jpg`,
`https://randomfox.ca/images/${randomNumber()}.jpg`,
`https://randomfox.ca/images/${randomNumber()}.jpg`,
`https://randomfox.ca/images/${randomNumber()}.jpg`,
]);
Y por último en el componente principal, como TypeScript ya sabe que el valor del estado y conoce que es un array; podemos utilizar todos los métodos del array:
return(
...
<main>
<h1 className="text-3xl font-bold underline">Hello world!</h1>
{images.map((image, index) => (
<div key={index} className="p-4">
<RandomFox image={image} />
</div>
))}
</main>
)
¡Increíble forma de explicar de Jonathan Alvarez! El mejor
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.