Por qué Debería Elegir TypeScript en lugar de JavaScript
TypeScript ha ido en aumento en su popularidad durante los últimos dos años. Se menciona entre los cinco idiomas más prometedores en 2020. Angular, uno de los marcos de interfaz más grandes, utiliza TypeScript. Alrededor del 60% de los programadores de JS ya usan TypeScript, y el 22% desea intentarlo. ¿Por qué?
Históricamente, JavaScript ha terminado siendo el lenguaje principal para crear scripts de páginas web y aplicaciones en Internet. Ahora es posible usar JavaScript tanto en el frontend como en el backend con frameworks como Node.js y Deno.
Pero, ¿se creó JavaScript para crear sistemas grandes y complejos como los de la web moderna? No.
En este artículo, le presentaremos una solución para eso, TypeScript, y le ayudaremos a comenzar a agregar tipos a su código JavaScript.
Estos son algunos de los puntos que cubriremos:
- ¿Qué es TypeScript?
- ¿Qué son los tipos y cómo funcionan en TS?
- JavaScript vs Manuscrito: cuál elegir?
- Cómo empezar a usar TypeScript.
- Más recursos para estudiar TypeScript.
¿Qué es TypeScript?
En resumen, el Manuscrito es un superconjunto de JavaScript que ha opcional escribir y compila sin JavaScript.
En palabras más simples, TypeScript técnicamente es JavaScript con escritura estática, siempre que lo desee.
Ahora, ¿cuáles serían las razones para agregar escritura estática a JavaScript?
Puedo enumerar al menos tres:
- Puede evitar errores de ninja magistralmente ocultos como el clásico
'undefined' is not a function. - Es más fácil refactorizar el código sin romperlo significativamente.
- Orientarse en sistemas complejos a gran escala ya no es una pesadilla.
En realidad, un estudio muestra que el 15% de todos los errores de JavaScript se pueden detectar mediante TypeScript.
La libertad de mecanografía dinámica a menudo conduce a errores que no solo disminuyen la eficiencia del trabajo del programador, sino que también pueden detener el desarrollo debido al aumento de los costos de agregar nuevas líneas de código.
Por lo tanto, el fracaso de JavaScript para incorporar cosas como tipos y comprobaciones de errores en tiempo de compilación lo convierte en una mala elección para el código del lado del servidor en empresas y bases de código grandes. Como dice su eslogan, TypeScript es JavaScript que se escala.
¿Qué necesito aprender a usar TypeScript?
el Manuscrito es esencialmente un JS desfibradora. O, JS con documentación que el compilador puede entender.
Por lo tanto, a diferencia de otros lenguajes como CoffeeScript (que agrega azúcar sintáctico) o PureScript (que no se parece en absoluto a JavaScript), no necesita aprender mucho para comenzar a escribir código TypeScript.Los tipos
en TS son opcionales, y cada archivo JS es un archivo TypeScript válido. Si bien el compilador se quejará si tiene errores de tipo en sus archivos iniciales, le devuelve un archivo JavaScript que funciona como lo hacía antes. Donde quiera que estés, TypeScript te encontrará allí, y es fácil desarrollar tus habilidades gradualmente.
¿Se usa TypeScript en el frontend o el backend?
el Manuscrito se compila a JavaScript. Por lo tanto, TS se puede usar en cualquier lugar donde se pueda usar JS: tanto el frontend como el backend.
JavaScript es el lenguaje más popular para implementar scripts para la interfaz de aplicaciones y páginas web. Por lo tanto, TypeScript se puede usar para el mismo propósito, pero brilla en proyectos empresariales complejos en el lado del servidor.
En Serokell, la mayor parte de nuestra interfaz web está implementada en TypeScript.
¿Qué son los tipos y cómo funcionan en TS?
Breve introducción a los tipos
Los tipos son una forma de distinguir los programas correctos de los incorrectos antes de ejecutarlos describiendo en nuestro código cómo planeamos usar nuestros datos. Pueden variar desde tipos simples como Números y cadenas hasta estructuras complejas perfectamente modeladas para nuestro dominio de problemas.
Los lenguajes de programación se dividen en dos categorías: tipeados estáticamente o tipeados dinámicamente.
En lenguajes con escritura estática, el tipo de la variable debe conocerse en tiempo de compilación. Si declaramos una variable, el compilador debería saber (o inferir) si será un número, una cadena o un booleano. Piensa en Java.
En idiomas con escritura dinámica, esto no es necesariamente así. El tipo de variable solo se conoce cuando se ejecuta el programa. Piensa en Python.
Manuscrito puede apoyar estáticos, mientras que JavaScript no.
Debido a la escritura estática de la Máquina, tendrá que esforzarse más para:
- introducir variables indefinidas (ayuda de advertencias en tiempo de compilación)
- sumar dos cadenas que tengan números en ellas (como «4» + «20» = «420»)
- realiza operaciones en cosas que no lo permiten, como recortar un número.
Con los sistemas de tipo estático, puede crear sus propios tipos compuestos. Esto permite a los ingenieros expresar sus intenciones con más detalle.
Los tipos explícitos también hacen que su código se documente automáticamente: se aseguran de que sus variables y funciones coincidan con lo que se pretende y permiten que el equipo se encargue de recordar el contexto circundante.
Tipos de Texto
el Manuscrito tiene una variedad de tipos básicos, como Boolean, Number, String, Array, Tupla, etc. Algunos de estos no existen en JS; puede obtener más información sobre ellos en la documentación de TypeScript.
Además de estos, aquí hay algunos otros tipos que queremos presentar para mostrar la expresividad de TS:
Cualquiera & Desconocido
Mientras que cualquier tipo puede cubrir, bueno, cualquier cosa que desee, desconocido es su contraparte segura de tipo.
Siempre que desee escapar del sistema de tipos, any le permite asignarle cualquier variable JavaScript. Se utiliza con frecuencia para modelar variables entrantes (por ejemplo, de API de terceros) que aún no se han comprobado y cuyo tipo se desconoce.
Desconocido se parece mucho a cualquiera, pero no le permitirá realizar ninguna operación en la variable antes de que se verifique explícitamente el tipo.
Nulo
Void se usa cuando no se devuelve ningún valor, por ejemplo, como el tipo de retorno de funciones que no devuelven nada.
Nunca
Nunca es el tipo de retorno para algo que nunca debería ocurrir, como una función que lanzará una excepción.
Intersección & tipos de Unión
Estos permiten crear tipos personalizados para ajustarse mejor a su lógica.
Los tipos de intersección le permiten reunir varios tipos básicos en un solo tipo. Por ejemplo, puede crear una persona de tipo personalizado que tenga un name: string y un phone_number: number. Es equivalente a decir: Quiero que mi tipo sea esto y aquello.
Los tipos de unión permiten que su tipo tome uno de los múltiples tipos básicos. Por ejemplo, puede tener una consulta que devuelva result: string o undefined. Es equivalente a decir: Quiero que mi tipo sea esto o aquello.
Si piensa en los tipos como espacios, todos estos tipos tienen sentido rápidamente.
Los tipos en TypeScript pueden ser tanto implícitos como explícitos. Si no escribe explícitamente sus tipos, el compilador utilizará la inferencia de tipos para inferir los tipos que está utilizando.
Escribirlos explícitamente, sin embargo, ofrece beneficios como ayudar a otros desarrolladores que leen su código y asegurarse de que lo que ve es lo que ve el compilador.
Manuscrito vs JavaScript
vale la pena ser pragmático. Echa un vistazo a este gráfico:
De ninguna parte, TypeScript se encuentra ahora en la 7ª posición en las solicitudes de extracción de GitHub para Q1 2020, por encima de PHP y C. (Fuente)
Aunque una causa considerable de esto es el soporte de TypeScript por empresas como Microsoft (que lo creó) y Google, es compatible por una buena razón.
3 razones para elegir Manuscrito sobre JavaScript
1. El manuscrito es más fiable
En contraste con JavaScript, Mecanografiado código es más fiable y más fácil para refactorizar. Esto permite a los desarrolladores evadir errores y reescribir mucho más fácilmente.Los tipos
invalidan la mayoría de los errores tontos que pueden colarse en las bases de código JavaScript, y crean un bucle de retroalimentación rápida para corregir todos los pequeños errores al escribir código nuevo y refactorizar.
2. TypeScript es más explícito
Hacer explícitos los tipos enfoca nuestra atención en cómo se construye exactamente nuestro sistema y cómo interactúan las diferentes partes del mismo entre sí. En los sistemas a gran escala, es importante ser capaz de abstraer el resto del sistema, manteniendo el contexto en mente. Los tipos nos permiten hacer eso.
3. TypeScript y JavaScript son prácticamente intercambiables, ¿por qué no?
Ya que JavaScript es un subconjunto de Texto, puede utilizar todas las bibliotecas de JavaScript y el código que desee en su Manuscrito de código.
Las bibliotecas JavaScript más populares tienen tipos en 2020, definitivamente Typed es un repositorio con tipos para muchas bibliotecas JavaScript diferentes que puede usar para hacer que sus interacciones con ellas sean más seguras.
Esto significa que puede adoptar gradualmente TypeScript en su base de código JavaScript, primero agregando tipos a módulos individuales y luego expandiéndose para consume consumir el universo conocido, supongo.
Inconvenientes de TypeScript
No puedes simplemente tomar un equipo de JavaScript o un repositorio de JavaScript y cambiarlos instantáneamente a TypeScript idiomático. Hay compensaciones y sacrificios de tiempo iniciales que tienes que hacer.
Si bien podemos discutir sobre los ahorros que se obtienen al ser explícitos sobre los tipos a largo plazo, a corto plazo, se necesita más tiempo para agregarlos. Podría decirse que esto no es un gran problema, pero es un argumento a favor de JavaScript.
Por lo tanto, es posible que no elija TypeScript para proyectos pequeños y prototipos para su propio uso.
Pruebas vs. Tipos
Para tocar brevemente la discusión de pruebas vs. tipos: ambas cosas detectan diferentes clases de errores, por lo que tiene sentido hacer ambas de una manera no partidista.
Puede seguir utilizando tanto pruebas unitarias como técnicas más avanzadas, como pruebas basadas en propiedades con TS, a la vez que mantiene los beneficios de un sistema de tipo estático.
Para resumirlo, aquí hay una comparación rápida de ambos idiomas:
| TypeScript | JavaScript |
|---|---|
| TS es un lenguaje de scripting orientado a objetos | JS es un lenguaje de scripting orientado a objetos |
| Lenguaje dependiente (se compila a JavaScript) | Lenguaje independiente (se puede interpretar y ejecutar) |
| Idioma compilado, no se puede ejecutar directamente en un navegador | Idioma interpretado, ejecutado directamente en un navegador web |
| Puede ser tipado estáticamente | Tipeado dinámicamente |
| Mejor estructurado y conciso | Más flexible ya que no está limitado por el sistema de tipos |
| Tiene una .la extensión ts | Tiene un .extensión js |
| Creado en Microsoft por Anders Hejlsberg (diseñador de C#) y mantenido por Microsoft | Creado por Brendan Eich (Netscape) y mantenido por ECMA (Asociación Europea de Fabricantes de Computadoras). |
| Una opción justa para proyectos complejos | Buena para trabajar con proyectos pequeños y simples |
Guía de inicio rápido de TypeScript
Compilador de TypeScript
Para compilar su código TS, necesita instalar tsc (abreviatura de compilador de TypeScript). La forma más fácil de hacerlo es a través de la terminal. Esto se puede hacer fácilmente a través de npm mediante el siguiente comando:
npm install -g typescriptSi desea utilizar TypeScript con código de Visual Studio, hay una guía práctica en su sitio web.
Una vez instalado tsc, puede compilar sus archivos con tsc filename.ts.
Migrar sus archivos de JavaScript a Máquina
supongamos que queremos cambiar el siguiente archivo JavaScript a Máquina debido a un comportamiento extraño:
function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);Buena noticia. Cualquier archivo JS es técnicamente un archivo TypeScript válido, por lo que está listo para un gran comienzo, simplemente cambie la extensión de archivo a .ts de .js.
TypeScript tiene inferencia de tipos, lo que significa que puede inferir automáticamente algunos de los tipos que usa sin agregarlos. En este caso, se supone que la función suma dos variables de tipo any, lo cual es cierto pero no es de gran utilidad en este momento.
Si queremos sumar solo números, podemos agregar una firma de tipo a my_sum para que acepte solo números.
function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);Ahora, TypeScript nos proporciona un error.
Argument of type 'string' is not assignable to parameter of type 'number'.
Menos mal que encontramos dónde está el error. 🙂 Para evitar errores como estos, también puede agregar definiciones de tipo a las variables.
let b: number = "5" // Type '"5"' is not assignable to type 'number'.let b: number = 5 // Everything ok. TypeScript es bastante flexible en lo que puede hacer y en cómo puede ayudarlo. Para obtener un ejemplo menos trivial sobre cómo mover su base de código JavaScript existente a TypeScript o usar TypeScript para mejorar su código JS, lea esta guía.
¿Cómo usar TypeScript en un navegador?
Para ejecutar TypeScript en un navegador, debe transplantarse a JavaScript con el compilador de TypeScript (tsc). En este caso, tsc crea un nuevo .archivo js basado en el .código ts, que puede usar de cualquier manera que pueda usar un archivo JavaScript.
Recursos para seguir aprendiendo
TypeScript Inmersión Profunda
Este recurso web gratuito tiene todo lo que necesita para comenzar con TypeScript, incluidas explicaciones más detalladas de las secciones que ya hemos cubierto aquí.
¡Aprende TypeScript Desde Cero!
Un curso práctico de 3 horas que pasa por todas las funciones básicas de TypeScript, cómo usarlo para interactuar con algunos frameworks JS y cómo usar el poder de TypeScript al escribir JavaScript.
Exercism
Exercism es el mejor recurso para practicar la escritura de código en un nuevo lenguaje de programación. Mentores que te guiarán hacia el código idiomático, muchas tareas prácticas divertidas, no hay nada que no ame de este sitio web.
Conclusiones
En general, TypeScript es una gran herramienta para tener en su conjunto de herramientas, incluso si no la usa a su plena capacidad. Es fácil comenzar de a poco y crecer lentamente, aprendiendo y agregando nuevas características a medida que avanza. TypeScript es pragmático y acogedor para los principiantes, por lo que no hay necesidad de tener miedo.
Espero que este artículo sea útil en su viaje de escritura a máquina. Si quieres ayuda o tienes alguna pregunta, asegúrate de preguntarla en nuestras redes sociales como Twitter o Facebook.