State con tipos personalizados

Intenté instalar Github Coplilot, pero me encontré con lo siguiente:
Actualmente, GitHub Copilot se encuentra en versión temprana (Early Access) y no está disponible de manera gratuita. Es un servicio desarrollado por GitHub en colaboración con OpenAI, y para acceder a él es necesario solicitar una invitación y luego registrarse para el acceso pagado.

Sin embargo, existen otras alternativas gratuitas que pueden ofrecer funcionalidades similares a las que ofrece GitHub Copilot. Algunas buenas opciones son:

TabNine: Es un complemento de autocompletado inteligente y predictor de código que puede ofrecer sugerencias relevantes y basadas en el contexto mientras escribes.
Kite: Es un complemento de autocompletado de código que utiliza el aprendizaje automático para sugerir código relevante y personalizado.
Codota: Es una plataforma de aprendizaje automático que utiliza algoritmos de análisis del código para ofrecer sugerencias de codificación basadas en el contexto.

No saben cuanto estoy amando TypeScript 💙

STATE CON OTROS TIPOS
Generalmente como respuesta de un api no es un Array, si no mas bien son objetos JSON.
.
Vamos a simular que recibimos un objeto con un id y un url con la imagen zorros. Para generar una id única vamos a utilizar el siguiente código.

// generate simple unique id
const generateId = (): string => {
  return (
    Math.random().toString(36).substring(2, 15) +
    Math.random().toString(36).substring(2, 15)
  );
};

Ahora debemos cambiar el generator de useState de tipo Array al tipo ImageItems( un Array de objetos con un id: string y ulr:string)

type ImageItems =Array<{id:string, url:string}>

const Home: NextPage = () => {

  const [images, setImages] = useState<ImageItems>([
    {id:generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg` },
    {id:generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg` },
    {id:generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg` },
    {id:generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg` },
  ]);

  return (

También podríamos generar el tipo ImageItem (sin el plural), que seria la mínima representación del objeto que queremos tipar. un objeto singular con id: string y url: string

type ImageItem = {id:string, url:string}

const Home: NextPage = () => {

  const [images, setImages] = useState<Array<ImageItem>>([
    {id:generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg` },
    {id:generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg` },
    {id:generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg` },
    {id:generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg` },
  ]);

  return (

Hacerlo de esta manera nos da la ventaja al momento de utilizar el metodo map. TypeScript sabrá que la unidad es de tipo ImageItem.
.
OJO: Recuerda que ahora nuestro estado este compuesto de 2 valores. Entonces debes declarar el valor de image.url y el image. id para los pasar las props al componente RamdomFox o desestructurar los valores para obtener la url y el id

      <main >
        {images.map(({id, url}) => (
          <div key={id} className="p-4">
            <RandomFox image={url} alt={`fox`}/>
          </div>
        ))}
      </main>

Como substr() en este momento esta deprecado decidí investigar y usar la alternativa de substring() que viene siendo lo mismo. aquí debajo también les dejo el array de objetos creado

const [images, setImages] = useState<Array <ImageItems>>([
    {id: generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg`},
    {id: generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg`},
    {id: generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg`},
    {id: generateId(), url:`https://randomfox.ca/images/${randomNumber()}.jpg`},
  ]);

const generateId = () => Math.random().toString(36).substring(2,9)

type ImageItem = {
  id: string,
  url: string,
}

otra manera de hacer un poco más ordenado el código es la siguiente, usamos useEffect para cargar las imagenes en el setImages y así dejamos el estado un poco más vacío, me parece más ordenado

//function to generate a random number
const random = (): number => Math.floor(Math.random() * 123) + 1;

//generate unique id
const uuid = (): string =>
  Math.random().toString(36).substring(2) + Date.now().toString(36);

//create an Interface for the props
type ImageType = Array<{ url: string; id: string }>;

useEffect(() => {
    const images: ImageType = [];
    for (let i = 0; i < 4; i++) {
      const id = uuid();
      const url = `https://randomfox.ca/images/${random()}.jpg`;
      images.push({ id, url });
    }
    setImages(images);
 
}, []);

const [images, setImages] = useState<ImageType>([]);

Puedes usar substring() en vez de substr()

Hola, bueno yo preferí instalar un paquete que se encargara de generar el id https://www.uuidgenerator.net/dev-corner/typescript

TypeScript es increíble, considero que simplemente requiere acostumbrarse a trabajar con el tipado. Sin embargo, los beneficios que aporta al desarrollo son tantos que definitivamente vale la pena invertir el esfuerzo necesario. 💚💚

Estas dos últimas clases estan densas, pero son geniales. Y TypeScript es una de las mejores cosas que he aprendido estos últimos días

Me estoy sintiendo poderoso 😄

Continuaré el curso dentro de una semana, por ahora solo pondre lo visto en práctica.

Que buen curso, Jonathan la verdad se explica de manera increible

excelente typescript

Eso de usar copilot no me parece el mejor camino, ademas ya no es gratis