TypeScript para el Nuevo Programador

¡Felicidades por elegir TypeScript como uno de tus primeros lenguajes — ya estás tomando buenas decisiones!

Probablemente ya hayas escuchado que TypeScript es un “sabor” o “variante” de JavaScript. La relación entre TypeScript (TS) y JavaScript (JS) es bastante única entre los lenguajes de programación modernos, por lo que aprender más sobre esta relación te ayudará a entender cómo TypeScript añade valor a JavaScript.

¿Qué es JavaScript? Una Breve Historia

JavaScript (también conocido como ECMAScript) comenzó su vida como un simple lenguaje de scripting para navegadores. En el momento en que fue inventado, se esperaba que se usara para fragmentos cortos de código incrustados en una página web — escribir más de unas pocas docenas de líneas de código habría sido algo inusual. Debido a esto, los primeros navegadores web ejecutaban dicho código bastante lentamente. Con el tiempo, sin embargo, JS se volvió más y más popular, y los desarrolladores web comenzaron a usarlo para crear experiencias interactivas.

Los desarrolladores de navegadores web respondieron a este aumento en el uso de JS optimizando sus motores de ejecución (compilación dinámica) y extendiendo lo que se podía hacer con él (añadiendo APIs), lo que a su vez hizo que los desarrolladores web lo usaran aún más. En los sitios web modernos, tu navegador frecuentemente está ejecutando aplicaciones que abarcan cientos de miles de líneas de código. Este es el largo y gradual crecimiento de “la web”, comenzando como una simple red de páginas estáticas, y evolucionando hacia una plataforma para aplicaciones ricas de todo tipo.

Más allá de esto, JS se ha vuelto lo suficientemente popular como para ser usado fuera del contexto de los navegadores, como en la implementación de servidores JS usando node.js. La naturaleza de “ejecutarse en cualquier lugar” de JS lo hace una opción atractiva para el desarrollo multiplataforma. ¡Hay muchos desarrolladores hoy en día que usan solo JavaScript para programar todo su stack!

Para resumir, tenemos un lenguaje que fue diseñado para usos rápidos, y luego creció hasta convertirse en una herramienta de pleno derecho para escribir aplicaciones con millones de líneas. Cada lenguaje tiene sus propias peculiaridades — rarezas y sorpresas, y el humilde comienzo de JavaScript hace que tenga muchas de estas. Algunos ejemplos:

• El operador de igualdad de JavaScript (==) convierte sus operandos, lo que lleva a comportamientos inesperados:

  js
  if ("" == 0) {
    // ¡Lo es! ¿Pero por qué??
  }
  if (1 < x < 3) {
    // ¡Verdadero para *cualquier* valor de x!
  }

• JavaScript también permite acceder a propiedades que no están presentes:

  js
  const obj = { width: 10, height: 15 };
  // ¿Por qué es esto NaN? ¡La ortografía es difícil!
  const area = obj.width * obj.heigth;

La mayoría de los lenguajes de programación arrojarían un error cuando ocurren este tipo de errores, algunos lo harían durante la compilación — antes de que cualquier código se ejecute. Al escribir programas pequeños, tales peculiaridades son molestas pero manejables; al escribir aplicaciones con cientos o miles de líneas de código, estas constantes sorpresas son un problema serio.

TypeScript: Un Comprobador de Tipos Estático

Dijimos anteriormente que algunos lenguajes no permitirían que esos programas con errores se ejecutaran en absoluto. Detectar errores en el código sin ejecutarlo se conoce como comprobación estática. Determinar qué es un error y qué no basado en los tipos de valores que se están operando se conoce como comprobación estática de tipos.

TypeScript verifica un programa en busca de errores antes de la ejecución, y lo hace basado en los tipos de valores, convirtiéndolo en un comprobador de tipos estático. Por ejemplo, el último ejemplo anterior tiene un error debido al tipo de obj. Aquí está el error que TypeScript encontró:

ts
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;
Property 'heigth' does not exist on type '{ width: number; height: number; }'. Did you mean 'height'?2551Property 'heigth' does not exist on type '{ width: number; height: number; }'. Did you mean 'height'?Try

Un Superconjunto Tipado de JavaScript

Sin embargo, ¿cómo se relaciona TypeScript con JavaScript?

Sintaxis

TypeScript es un lenguaje que es un superconjunto de JavaScript: por lo tanto, la sintaxis de JS es legal en TS. La sintaxis se refiere a la forma en que escribimos texto para formar un programa. Por ejemplo, este código tiene un error de sintaxis porque le falta un ):

ts
let a = (4
')' expected.1005')' expected.Try

TypeScript no considera ningún código JavaScript como un error debido a su sintaxis. Esto significa que puedes tomar cualquier código JavaScript funcional y colocarlo en un archivo TypeScript sin preocuparte exactamente por cómo está escrito.

Tipos

Sin embargo, TypeScript es un superconjunto tipado, lo que significa que añade reglas sobre cómo se pueden usar diferentes tipos de valores. El error anterior sobre obj.heigth no fue un error de sintaxis: es un error de usar algún tipo de valor (un tipo) de manera incorrecta.

Como otro ejemplo, este es código JavaScript que puedes ejecutar en tu navegador, y sí registrará un valor:

js
console.log(4 / []);

Este programa, legal sintácticamente, registra Infinity. TypeScript, sin embargo, considera la división de un número por un arreglo como una operación sin sentido, y emitirá un error:

ts
console.log(4 / []);
The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.2363The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.Try

Es posible que realmente quisieras dividir un número por un arreglo, tal vez solo para ver qué pasa, pero la mayoría de las veces, esto es un error de programación. El comprobador de tipos de TypeScript está diseñado para permitir que los programas correctos pasen mientras atrapa tantos errores comunes como sea posible. (Más adelante, aprenderemos sobre configuraciones que puedes usar para ajustar cuán estrictamente TypeScript verifica tu código.)

Si mueves algo de código de un archivo JavaScript a un archivo TypeScript, podrías ver errores de tipo dependiendo de cómo esté escrito el código. Estos pueden ser problemas legítimos con el código, o TypeScript siendo demasiado conservador. A lo largo de esta guía demostraremos cómo agregar varias sintaxis de TypeScript para eliminar dichos errores.

Comportamiento en Tiempo de Ejecución

TypeScript también es un lenguaje de programación que preserva el comportamiento en tiempo de ejecución de JavaScript. Por ejemplo, dividir por cero en JavaScript produce Infinity en lugar de lanzar una excepción en tiempo de ejecución. Como principio, TypeScript nunca cambia el comportamiento en tiempo de ejecución del código JavaScript.

Esto significa que si mueves código de JavaScript a TypeScript, está garantizado que se ejecute de la misma manera, incluso si TypeScript piensa que el código tiene errores de tipo.

Mantener el mismo comportamiento en tiempo de ejecución que JavaScript es una promesa fundamental de TypeScript porque significa que puedes transicionar fácilmente entre los dos lenguajes sin preocuparte por diferencias sutiles que podrían hacer que tu programa deje de funcionar.

Tipos Eliminados

Hablando grosso modo, una vez que el compilador de TypeScript termina de verificar tu código, elimina los tipos para producir el código “compilado” resultante. Esto significa que una vez que tu código está compilado, el código JS simple resultante no tiene información de tipos.

Esto también significa que TypeScript nunca cambia el comportamiento de tu programa basado en los tipos que infirió. La conclusión es que, aunque podrías ver errores de tipo durante la compilación, el sistema de tipos en sí no tiene impacto en cómo funciona tu programa cuando se ejecuta.

Finalmente, TypeScript no proporciona bibliotecas adicionales en tiempo de ejecución. Tus programas usarán la misma biblioteca estándar (o bibliotecas externas) que los programas JavaScript, por lo que no hay un marco específico de TypeScript adicional para aprender.

Aprendiendo JavaScript y TypeScript

Frecuentemente vemos la pregunta “¿Debería aprender JavaScript o TypeScript?“.

¡La respuesta es que no puedes aprender TypeScript sin aprender JavaScript! TypeScript comparte sintaxis y comportamiento en tiempo de ejecución con JavaScript, por lo que todo lo que aprendas sobre JavaScript te está ayudando a aprender TypeScript al mismo tiempo.

Hay muchos, muchos recursos disponibles para que los programadores aprendan JavaScript; no deberías ignorar estos recursos si estás escribiendo TypeScript. Por ejemplo, hay unas 20 veces más preguntas en StackOverflow etiquetadas como javascript que como typescript, pero todas las preguntas de javascript también aplican a TypeScript.

Si te encuentras buscando algo como “cómo ordenar una lista en TypeScript”, recuerda: TypeScript es el tiempo de ejecución de JavaScript con un comprobador de tipos en tiempo de compilación. La forma en que ordenas una lista en TypeScript es la misma que lo haces en JavaScript. Si encuentras un recurso que usa TypeScript directamente, eso también es genial, pero no te limites a pensar que necesitas respuestas específicas de TypeScript para preguntas cotidianas sobre cómo realizar tareas en tiempo de ejecución.

Próximos Pasos

Esta fue una breve visión general de la sintaxis y las herramientas usadas en TypeScript cotidiano. Desde aquí, puedes:

• Aprender algunos de los fundamentos de JavaScript, recomendamos:

  • Recursos de JavaScript de Microsoft o
  • Guía de JavaScript en Mozilla Web Docs

• Continuar a TypeScript para Programadores de JavaScript

• Leer el Manual completo de principio a fin

• Explorar los ejemplos del Playground