'use client';
import { useState } from 'react'
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 tipos personalizados
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 extendiendo 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
Jonathan Alvarez
Aportes 9
Preguntas 1
'use client';
import { useState } from 'react'
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
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.
Los estados pueden recibir tipos de datos como son: string, numbers, boolean, arrays, objects, functions, clases, intefaces.
La implementación el uso puede variar según el proyecto y como se recomienda en su documentación.
Primera forma:
import { useState } from "react";
// components
import { RandomFox } from "@/components/RandomFox"
// generate a random function between 1 to 123
const random = (): number => Math.floor(Math.random() * 123) + 1;
export default function Home() {
const [images, setImages] = useState<string[]>([
`https://randomfox.ca/images/${random()}.jpg`,
`https://randomfox.ca/images/${random()}.jpg`,
`https://randomfox.ca/images/${random()}.jpg`,
`https://randomfox.ca/images/${random()}.jpg`,
])
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1>Hello, world!!!</h1>
{images.map((image, index) => (
<RandomFox key={index} image={image} />
))}
</main>
)
}
Segunda forma:
import { useState } from "react";
// components
import { RandomFox } from "@/components/RandomFox"
// generate a random function between 1 to 123
const random = (): number => Math.floor(Math.random() * 123) + 1;
export default function Home() {
const [images, setImages] = useState<Array<string>>([
`https://randomfox.ca/images/${random()}.jpg`,
`https://randomfox.ca/images/${random()}.jpg`,
`https://randomfox.ca/images/${random()}.jpg`,
`https://randomfox.ca/images/${random()}.jpg`,
])
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1>Hello, world!!!</h1>
{images.map((image, index) => (
<RandomFox key={index} image={image} />
))}
</main>
)
}
Muy buena explicación sobre los genericos!!
15/04/2024…NO SE OLVIDEN DE AGREGAR EN LA 1RA LINEA DEL ARCHIVO -> page.tsx
‘use client’;
import { useState } from ‘react’
TS infiere un tipo never[]
para images, porque el arreglo esta vacÃo y no puede saber que tipo de datos ingresaremos al array.
const [images, setImages] = useState([])
De igual forma para setImages y useState, infiere un tipo never[]
con las funciones que se usan para crear el hook internamente en el core de React.
const images : never[]
const setImages : Dispatch<SetStateAction<never[]>>
En este ejemplo TS infiere Array de tipo números
const [images, setImages] = useState([3,4,5,6])
TS infiere para useState <(string | number) []>
, para el images, setImages, useState e Initial State infiere lo mismo.
const [images, setImages] = useState([
`https://randomfox.ca/images/${random()}.jpg`,
2,
3,
'another string'
])
useState with an Array of Strings
const [images, setImages] = useState([
`https://randomfox.ca/images/${random()}.jpg`,
`https://randomfox.ca/images/${random()}.jpg`,
`https://randomfox.ca/images/${random()}.jpg`,
`https://randomfox.ca/images/${random()}.jpg`
])
Inferred for images
Inferred for setImages
Inferred for useState
and Initial State
Para poder asignar tipos al hook useState, usaremos tipos abstractos -los genéricos <T>
.
Definiendo un Array de strings para useState.
const [images,setImages] = useState<string[]>([
'string1',
'string2'
])
// Alternativo, no hay diferencias.
const [images,setImages] = useState<Array<string>> ([
'string1',
'string2'
])
De esta forma si queremos agregar valores que no sean strings nos dará advertencias que no pueden ser usados otros tipos de datos ( other primitives or objects )
Tipado nativo para los estados de React
Excelente explicación y como el profe dijo: ¡Hay que practicar! y mucho =D
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?