Atrapando bugs

4/24
Recursos

Código base de la clase:

(()=> {
  const myCart = [];
  const products = [];
  const limit = 2;

  async function getProducts() {
    const rta = await fetch('http://api.escuelajs.co/api/v1/products', {
      mehtod: 'GET'
    });
    const data = await rta.parseJson();
    products.concat(data);
  }
  function getTotal() {
    const total = 0;
    for (const i = 0; i < products.length(); i++) {
      total += products[i].prize;
    }
    return total;
  }
  function addProduct(index) {
    if (getTotal <= limit) {
      myCart.push(products[index]);
    }
  }

  await getProducts();
  addProducto(1);
  addProducto(2);
  const total = getTotal();
  console.log(total);
  const person = {
    name: 'Nicolas',
    lastName: 'Molina'
  }
  const rta = person +  limit;
  console.log(rta);
});

Aportes 19

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Hola, aquí puedes copiar el código base de la clase.

Dato: El @ts-ckech es de Viscual studio, una de las ventajas que nos da trabajar typescript con ese gran editor.

Fuente: Clic aquí.

En esta clase nos dimos cuenta de porque TS se esta volviendo tan usado en la industria

//@ts-check nos da feedback y an√°lisis de typescript.
‚Äúfeedback temprano‚ÄĚ.

‚Äúfeedback temprano‚ÄĚ ame esa frase

Creo que así quedaría el código arreglado:

Por cierto, les recomiendo muchísimo la extensión de Error Lens para tener también un feeback muy llamativo y detallado de los errores en código.

//@ts-check

(async ()=> {
  const myCart = [];
  const products = [];
  const limit = 2;

  async function getProducts() {
    const rta = await fetch('https://api.escuelajs.co/api/v1/products', {
      method: 'GET'
    });
    const data = await rta.json();
    products.concat(data);
  }
  function getTotal() {
    let total = 0;
    for (let i = 0; i < products.length; i++) {
      total += products[i].prize;
    }
    return total;
  }
  /**
   * @param {number} index
   */
  function addProduct(index) {
    if (getTotal() <= limit) {
      myCart.push(products[index]);
    }
  }

  await getProducts();
  addProduct(1);
  addProduct(2);
  const total = getTotal();
  console.log(total);
  const person = {
    name: 'Nicolas',
    lastName: 'Molina'
  }
  const rta = `${person} - ${limit}`
  console.log(rta);
});

Les dejo la solución, solo le agregan la URL de la Api, ya que platzi no me permite subirlo

//@ts-check

(async ()=> {
  const myCart = [];
  const products = [];
  const limit = 2;

  async function getProducts() {
    const rta = await fetch('', {
      method: 'GET'
    });
    const data = await rta.json();
    products.concat(data);
  }
  function getTotal() {
    let total = 0;
    for (let i = 0; i < products.length; i++) {
      total += products[i].prize;
    }
    return total;
  }
  function addProduct(index) {
    if (getTotal.length <= limit) {
      myCart.push(products[index]);
    }
  }

  await getProducts();
  addProduct(1);
  addProduct(2);
  const total = getTotal();
  console.log(total);
  const person = {
    name: 'Nicolas',
    lastName: 'Molina'
  }
  const rta = `${person.name} ${person.lastName} ${limit}`;
  console.log(rta);
});

My solution to the end part

await getProducts();
  addProduct(1);
  addProduct(2);
  const total = getTotal();
  console.log(total);
  const person = {
    name: 'Nicolas',
    lastName: 'Molina'
  }
  const rta = `${person.name} ${person.lastName} ${limit}`;
  console.log(rta);

Qué manera más gráfica de ver el porqué debemos utilizar TS.

Les recomiendo la extensión de VSCode Error Lens (bajen el que más descargas tenga), al combinarla con //ts-check les da esto:

Activando Typescript check en la primera linea del codigo:

//@ts-check

Para analizar errores en un archivo JS podemos colocar esto al inicio: //@ts-check

Los superpoderes de TypeScript

me: adding //@ts-check
my brain:

En vsc instalar: version lens, error lens y add en la primera linea el siguiente comentario:

//@ts-check

Analizador de TS en JS, lo podemos usar en archivos JS así:

//@ts-check

Me encantó esta clase!

ESLint, es la extensión de VS code que ayuda a marcar los errores con una linea roja debajo

Waaau, con razón Yo veía ese subrayado en el código de los profesores y pensaba, por qué será que les aparece? será una especie de corrector ortográfico? Ahora entiendo, qué emoción!