Felicitaciones por elegir TypeScript como uno de sus primeros idiomas; ¡ya está tomando buenas decisiones!

Probablemente ya haya 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 lo ayudará a comprender cómo se agrega TypeScript a JavaScript.

¿Qué es JavaScript? Una breve historia

JavaScript (también conocido como ECMAScript) comenzó su vida como un lenguaje de programación simple para navegadores. En el momento en que se inventó, se esperaba que se usara para pequeños fragmentos 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 con bastante lentitud. Sin embargo, con el tiempo, JS se hizo cada vez más popular y los desarrolladores web comenzaron a usarlo para crear experiencias interactivas.

Los desarrolladores de navegadores web respondieron a este mayor uso de JS optimizando sus motores de ejecución (compilación dinámica) y ampliando lo que se podía hacer con ellos (agregando API), lo que a su vez hizo que los desarrolladores web lo usaran aún más. En los sitios web modernos, su navegador ejecuta con frecuencia aplicaciones que abarcan cientos de miles de líneas de código. Se trata de un crecimiento prolongado y gradual de “la web”, que comienza como una simple red de static páginas y evolucionando hacia una plataforma para ricos aplicaciones De todo tipo.

Más que esto, JS se ha vuelto lo suficientemente popular como para usarse fuera del contexto de los navegadores, como la implementación de servidores JS usando node.js. La naturaleza de “ejecutar en cualquier lugar” de JS lo convierte en una opción atractiva para el desarrollo multiplataforma. Hay muchos desarrolladores en estos días que usan solamente ¡JavaScript para programar toda su pila!

En resumen, tenemos un lenguaje que fue diseñado para usos rápidos y luego se convirtió en una herramienta completa para escribir aplicaciones con millones de líneas. Cada idioma tiene el suyo peculiaridades – rarezas y sorpresas, y el humilde comienzo de JavaScript hace que tenga muchos de estos. Algunos ejemplos:

  • Operador de igualdad de JavaScript (==) coacciona sus argumentos, lo que lleva a un comportamiento inesperado:

    if(""==0)// It is! But why??if(1< x <3)// True for *any* value of x!

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

    const obj = width:10, height:15;// Why is this NaN? Spelling is hard!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 se ejecute cualquier código. Al escribir programas pequeños, estas 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 verificador de tipo 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 static comprobación. Determinar qué es un error y qué no en función de los tipos de valores sobre los que se opera se conoce como static escribe comprobación.

TypeScript comprueba un programa en busca de errores antes de la ejecución, y lo hace basándose en la tipos de valores, es un static verificador de tipo. Por ejemplo, el último ejemplo anterior tiene un error debido a la escribe de obj. Aquí está el error que encontró TypeScript:

const obj = width:10, height:15;const area = obj.width * obj.heigth;

Un superconjunto escrito de JavaScript

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

Sintaxis

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

let a =(4

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

Tipos

Sin embargo, TypeScript es un mecanografiado superconjunto, lo que significa que agrega reglas sobre cómo se pueden usar diferentes tipos de valores. El error anterior sobre obj.heigth no era un sintaxis error: es un error de usar algún tipo de valor (un escribe) de forma incorrecta.

Como otro ejemplo, este es un código JavaScript que puede ejecutar en su navegador, y voluntad registrar un valor:

console.log(4/[]);

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

console.log(4/[]);

Es posible que tu realmente hizo tiene la intención de dividir un número por un array, quizás 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 el paso de programas correctos sin dejar de detectar tantos errores comunes como sea posible. (Más adelante, aprenderemos acerca de las configuraciones que puede usar para configurar qué tan estrictamente TypeScript verifica su código).

Si mueve algún código de un archivo JavaScript a un archivo TypeScript, es posible que vea errores de tipo dependiendo de cómo esté escrito el código. Estos pueden ser problemas legítimos con el código o que TypeScript sea demasiado conservador. A lo largo de esta guía, demostraremos cómo agregar varias sintaxis de TypeScript para eliminar tales errores.

Comportamiento en tiempo de ejecución

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

Esto significa que si mueve el código de JavaScript a TypeScript, es garantizado para ejecutarse 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 puede realizar una transición fácil entre los dos lenguajes sin preocuparse por las diferencias sutiles que podrían hacer que su programa deje de funcionar.

Tipos borrados

En términos generales, una vez que el compilador de TypeScript haya terminado de verificar su código, borra los tipos para producir el código “compilado” resultante. Esto significa que una vez que se compila su código, el código JS simple resultante no tiene información de tipo.

Esto también significa que TypeScript nunca cambia el comportamiento de su programa en función de los tipos que infirió. La conclusión es que, si bien es posible que vea errores de tipo durante la compilación, el sistema de tipos en sí no influye en cómo funciona su programa cuando se ejecuta.

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

Aprendiendo JavaScript y TypeScript

Con frecuencia vemos la pregunta “¿Debo aprender JavaScript o TypeScript?”.

¡La respuesta es que no se puede aprender TypeScript sin aprender JavaScript! TypeScript comparte la sintaxis y el comportamiento en tiempo de ejecución con JavaScript, por lo que todo lo que aprenda sobre JavaScript lo ayudará a aprender TypeScript al mismo tiempo.

Hay muchos, muchos recursos disponibles para que los programadores aprendan JavaScript; debería no ignore estos recursos si está escribiendo TypeScript. Por ejemplo, hay aproximadamente 20 veces más preguntas de StackOverflow etiquetadas javascript que typescript, pero todos de El javascript Las preguntas también se aplican a TypeScript.

Si se encuentra buscando algo como “cómo ordenar una lista en TypeScript”, recuerde: TypeScript es el tiempo de ejecución de JavaScript con un verificador de tipo en tiempo de compilación. La forma en que ordena una lista en TypeScript es la misma que en JavaScript. Si encuentra un recurso que usa TypeScript directamente, eso también es genial, pero no se limite a pensar que necesita respuestas específicas de TypeScript para las preguntas cotidianas sobre cómo realizar tareas en tiempo de ejecución.

Próximos pasos

Esta fue una breve descripción general de la sintaxis y las herramientas que se utilizan en TypeScript todos los días. Desde aquí puedes: