Por qué TypeScript, tu primer archivo tipado

Descubre qué es TypeScript, el problema que resuelve y escribe tu primer archivo tipado.

6 min · 3 preguntas

Ya conoces JavaScript, el lenguaje que hace interactivas las páginas web. TypeScript es una extensión de JavaScript: cualquier código JavaScript válido es también código TypeScript. Su gran aportación son los tipos. Un tipo describe la naturaleza de un valor: un texto, un número, un verdadero o falso... Al indicar el tipo de tus variables, permites que el ordenador revise tu código antes de ejecutarlo.

¿Por qué es útil? En JavaScript, nada te impide pasar un texto donde se esperaba un número. El programa se ejecuta igualmente... y produce un resultado absurdo, a menudo descubierto mucho más tarde. Mira este ejemplo: la función espera un precio como número, pero recibe un texto.

function addTax(price) {
  return price + price * 0.2;
}

const total = addTax("100");
console.log(total); // "10020" instead of 120!

Con TypeScript, añades una anotación de tipo: dos puntos seguidos del tipo, justo después del nombre de un parámetro o de una variable. El código TypeScript se compila después, es decir, se traduce a JavaScript puro mediante una herramienta llamada compilador (tsc). Es durante esta etapa cuando se detectan y se informan los errores de tipo.

function addTax(price: number): number {
  return price + price * 0.2;
}

const total = addTax(100);
console.log(total); // 120

Ahora vamos a escribir tu primer archivo tipado. Un archivo TypeScript usa la extensión .ts en lugar de .js. Dentro escribes JavaScript normal, enriquecido con anotaciones de tipo.

let firstName: string = "Sarah";
let age: number = 28;

console.log(firstName + " is " + age + " years old.");

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué es TypeScript en relación con JavaScript?
   • Un lenguaje completamente distinto de JavaScript
   • Una extensión de JavaScript que añade tipos
   • Una herramienta para hacer JavaScript más rápido
   • Un navegador web
2. ¿Qué ocurre cuando compilas un archivo .ts?
   • Se transforma en un archivo JavaScript puro
   • Se ejecuta directamente en el navegador
   • Se convierte en una página HTML
3. ¿Qué significa la anotación en let age: number?
   • La variable age siempre vale cero
   • La variable age solo puede contener números
   • La variable age es un texto
   • La variable age es opcional