Cristian Caballero
me: adding //@ts-check
my brain:
Rubén Ernesto Aragón Gil
x2
Daniel Carmona
Exactamente fue así
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
me: adding //@ts-check
my brain:
Rubén Ernesto Aragón Gil
x2
Daniel Carmona
Exactamente fue así
Miguel Angel Reyes Moreno
Juan David Reyes
Muy buena la extencion error lens. Gracias Bro
helmut martinez
Porqué no estás de primer comentario? XD
Pepe Sosa
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
No conocia esto, gracias.
Ricardo Aguilar
@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
Realmente es muy útil
Juan Fernando Yepes Muñoz
Si instalan la extension Error Lens les va a mostrar los errores mas bonito, el codigo jodido pero siempre facherito. .
Zaidibeth Ramos
Excelente jajaja
Cristian Camilo Alvarado Beltrán
//@ts-check nos da feedback y análisis de typescript. "feedback temprano".
Rodrigo Andrés Moreno Pertúz
Activando Typescript check en la primera linea del codigo:
//@ts-check
Alex hernandez mitre
Qué manera más gráfica de ver el porqué debemos utilizar TS.
Diana Carolina Moncada Bohórquez
Christian Barrionuevo
Se podría decir que un TesterQA puede ser un evangelizador de TypeScript?
Nicolas Molina
ProfesorHola, interesante reflexión, pero cualquier rol que aprecié tener menos bugs en producción puede ser evangelizador de TypeScript jaja
Sebastian Lomas
Marcos Alejandro Herrera Aguíñiga
Cristhian Espiritu Ñahui
sin hacer uso del dom pudiste solamente mostrarlo en consola con node pero buen aporte
Oscar Fuentes Esteves
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
No se ve.
Irving Acosta Hernández
VS Marketplace Link:
Julio Adrian Pinto Sillo
Con razón, sigo sin entender, necesito saber javascript, porque la franca no puedo avanzar
Facundo Peralta
Luego de ver este video. Mi cerebro:
Francisco Peñalo Feliz
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
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
Es una funcionalidad de Vscode
Teresa Plaz
Recomendado este plugin de VSCode: TypeScript Error Translator
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); });
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); });
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 : ""; })();