No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

State con tipos primitivos

6/16
Recursos

Aportes 8

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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

Muy buena explicación sobre los genericos!!

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

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