Atrapando bugs

Resumen

El análisis de código estático nos ayudará a detectar fallas en nuestro programa durante su desarrollo.

En la carpeta src del proyecto de curso, vamos a crear un archivo JavaScript llamado demo.js. El código base es el siguiente:

(()=> {
  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);
});

Al analizarlo nos damos cuenta de que tiene unos errores que podrían pasar desapercibidos al no ver advertencias. Es hasta que lo ejecutamos en un navegador web o entornos como NodeJS que los bugs saldrán a relucir. Por lo que, nosotros como desarrolladores, esto no es conveniente, pues queremos feedback lo más pronto posible.

Activando poderes de TypeScript en JavaScript 🧐

Si estás en Visual Studio Code, puedes activar el analizador de código estático de TypeScript sobre un archivo JavaScript. Para esto, en la primera línea del archivo debe ir lo siguiente:

//@ts-check

Contribución creada por: Martín Álvarez.

Cristian Caballero

student•

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

Rubén Ernesto Aragón Gil

student•

Daniel Carmona

student•

Exactamente fue así

Wiliams Ixcoy

student•

Miguel Angel Reyes Moreno

student•

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

Juan David Reyes

student•

Muy buena la extencion error lens. Gracias Bro

helmut martinez

student•

Porqué no estás de primer comentario? XD

Pepe Sosa

student•

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

Fuente: Clic aquí.

Jesus Abel Jimenez Bracho

student•

No conocia esto, gracias.

Ricardo Aguilar

student•

@ts-ckech No es exclusivo de VsCode, aunque no te puedo dar la diferencia entre JavaScript Language Service (que usa vsCode) y TypeScript Language Server, este ultimo permite utilizar .TS con otro cualquier feature, de hecho, de está manera, mediante los Language Server Protocol (LSP), es que en otros editores tenemos autocorrectores, completado, etc. Yo por ejemplo utilizo Neovim.

Wilmer Garzon Cabezas

Team Platzi•

"feedback temprano" ame esa frase

Alvaro Eduardo Garzón Pira

student•

Realmente es muy útil

Juan Fernando Yepes Muñoz

student•

Si instalan la extension Error Lens les va a mostrar los errores mas bonito, el codigo jodido pero siempre facherito. .

Zaidibeth Ramos

student•

Excelente jajaja

Irving Juárez

student•

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

Cristian Camilo Alvarado Beltrán

student•

//@ts-check nos da feedback y análisis de typescript. "feedback temprano".

Rodrigo Andrés Moreno Pertúz

student•

Activando Typescript check en la primera linea del codigo:

//@ts-check

Alex hernandez mitre

student•

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

Diana Carolina Moncada Bohórquez

student•

Christian Barrionuevo

student•

Se podría decir que un TesterQA puede ser un evangelizador de TypeScript?

Nicolas Molina

teacher•

Hola, interesante reflexión, pero cualquier rol que aprecié tener menos bugs en producción puede ser evangelizador de TypeScript jaja

Sebastian Lomas

student•

Resuelto:

(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;
  }
  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: limit
  }
  console.log(rta);
});

Marcos Alejandro Herrera Aguíñiga

student•

Aquí esta mi codigo, incluye manipulación del DOM para agregar a div la constante rta.

(async ()=> {
  const myCart = [];
  const products = [];
  const limit = 2246934;
  const url = ''

  async function getProducts() {
    const rta = await fetch(url, {
      method: 'GET'
    });
    const data = await rta.json();
    data.forEach(element => {
        products.push(element)
    });
  }
  function getTotal() {
    let total = 0;
    for (let i = 0; i < products.length; i++) {
      total += products[i].price;
    }
    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 = `Hey ${person.name} ${person.lastName}!, you have ${myCart.length} items in your cart`;
  console.log(rta);

//Para renderizar en HTML datos de Nicolas

const el = document.getElementById('content');
el ? el.textContent = rta : "";

})();

Cristhian Espiritu Ñahui

student•

sin hacer uso del dom pudiste solamente mostrarlo en consola con node pero buen aporte

Oscar Fuentes Esteves

student•

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

William Camilo Guzmán Espitia

student•

No se ve.

Irving Acosta Hernández

student•

VS Marketplace Link:

Facundo Peralta

student•

Luego de ver este video. Mi cerebro:

Francisco Peñalo Feliz

student•

En Visual Studio Code pueden instalar la extensión llamada Error Lens usernamehw.errorlens que les muestra mensaje de error en el editor sin necesidad colocar el cursor del mouse encima del codigo con el error.

SANDRO SIMON

student•

Es extraña la forma de activar el ANALIZADOR DE CODIGO ESTATICO de TS:

//@ts-check

Es decir, como si se tratara de un comentario.

Jossie Steeven Quintero Giron

student•

Es una funcionalidad de Vscode

Teresa Plaz

student•

Recomendado este plugin de VSCode: TypeScript Error Translator

Gustavo Pú

student•

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

Atrapando bugs

Introducción a TypeScript

Por qué usar TypeScript

TypeScript vs. JavaScript

Configurado nuestro proyecto

Atrapando bugs

El compilador de TypeScript

Veamos el TSConfig.json

Tipos de datos primitivos

Qué es el tipado en TypeScript

Tipos inferidos

Numbers

Booleans

Strings

Arrays

Tipos de datos especiales

Any

Union Types

Alias y tipos literales

Null y Undefined

Funciones

Retorno de funciones

Objetos en funciones

Objetos como tipos

Módulos: import y export

Usando librerías que soportan TypeScript

Usando librerías que NO soportan TypeScript

Próximos pasos

Toma el Curso de Tipos Avanzados y Funciones en TypeScript

Activando poderes de TypeScript en JavaScript 🧐