State con tipos primitivos

'use client';
import { useState } from 'react'

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

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 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.

1. 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>
     )
   }
   

2. 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’

Agregando Tipos al Hook, useState de React.

Implicito vacio

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[]>>

Implicito numeros

En este ejemplo TS infiere Array de tipo números

const [images, setImages] = useState([3,4,5,6])

Multiple Implicit types inferred

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'
])

Ejercicio de la clase, implicit types inferred by TypeScript**

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

Type Explicito

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