Introducción
El lenguaje de programación TypeScript ofrece muchas ventajas sobre JavaScript para los desarrolladores. TypeScript proporciona capacidades adicionales que permiten crear aplicaciones y sitios web interactivos más complejos con menos errores.
TypeScript también tiene un amplio ecosistema de herramientas para desarrolladores que ofrecen documentación en línea y revisión de código en vivo, lo que facilita la detección de errores de codificación mientras trabajas.
Este artículo explica qué es TypeScript y cómo se relaciona con JavaScript, y proporciona recursos para ayudarlo a comenzar a crear aplicaciones frontend y backend.
¿Qué es TypeScript?
TypeScript es un lenguaje de programación que agrega funcionalidad adicional a JavaScript.
JavaScript nunca fue diseñado para ejecutar aplicaciones front-end y back-end complejas. Originalmente, se diseñó para añadir interactividad simple a los sitios web. Por ejemplo, para crear botones clicables y animar menús desplegables.
Sin embargo, JavaScript se popularizó entre los desarrolladores que encontraron maneras de usarlo más allá de esto, lo que generó algunos problemas: el lenguaje era demasiado indulgente. Era muy fácil cometer errores de programación o usar incorrectamente funciones que posteriormente dañarían una aplicación, y JavaScript carecía de muchas de las características de otros lenguajes. TypeScript se desarrolló para abordar estos problemas, a la vez que era compatible con los entornos JavaScript existentes.
TypeScript es un lenguaje de tipado estático y un superconjunto de JavaScript que se basa en la sintaxis y la funcionalidad de JavaScript. Esto significa que puedes usar JavaScript en tu código TypeScript, pero no TypeScript en tu código JavaScript, ya que el código escrito en TypeScript utiliza características y sintaxis que no están disponibles en JavaScript.
TypeScript debe compilarse a JavaScript para funcionar en navegadores web y entornos como Node.js (otro término es "transpired" porque no se traduce a un lenguaje de bajo nivel). Cuando el código TypeScript se compila a JavaScript, el código JavaScript resultante no está diseñado para editarse directamente.
El flujo de trabajo para crear aplicaciones TypeScript consiste en escribirlas en TypeScript, compilarlas a JavaScript y, finalmente, implementarlas. Si bien este paso adicional puede parecer una complejidad innecesaria, existe por una muy buena razón: si TypeScript fuera un lenguaje completamente nuevo, no valdría la pena considerarlo, pero como compila JavaScript para que pueda ejecutarse en sistemas existentes, ha ganado una amplia aceptación.
La extensión de archivo para TypeScript es .ts. A continuación, se muestra un archivo de ejemplo llamado index.ts con código básico de TypeScript:
let message: string = "Hello, World!";
function greeting () {
console.log(message);
}
greeting();Tenga en cuenta que si bien la sintaxis es muy similar a JavaScript, en este ejemplo se ve algo diferente: la variable message va seguida de dos puntos (:) y su tipo (en este caso TypeScript) nos permite especificar que el mensaje debe ser una cadena y no puede tomar un valor de un tipo diferente.
Principales características y beneficios de TypeScript para desarrolladores
TypeScript se llama así porque su característica principal es la introducción de la seguridad de tipos en JavaScript. En el ejemplo anterior, se aplica un tipo de cadena a la variable de mensaje, por lo que no se puede usar un valor numérico ni ningún otro tipo. Esto puede parecer restrictivo, pero en realidad es una ventaja para los desarrolladores.
La seguridad de tipos y las comprobaciones en tiempo de compilación reducen los errores de programación
Considere este escenario: toma valores de dos entradas de texto HTML y desea agregarlos. JavaScript lee estos valores como cadenas (¡es un cuadro de texto!). El resultado final es el siguiente:
let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"Este código se ejecuta sin advertencias ni errores, y los valores en los cuadros de texto se tratan como cadenas, lo que significa que, en lugar de sumarse mediante operaciones aritméticas, se concatenan, lo que resulta en el resultado no deseado de "25" en lugar de 7. Si estás creando una herramienta comercial y quieres sumar valor monetario, esto puede ser muy perjudicial: ¡le estás cobrando de más a tu cliente!
Esto demuestra la importancia de la seguridad de tipos. A continuación, se aplica el tipo de las variables añadidas añadiéndoles un tipo:
let a: number = "2";
let b: number = "2";
console.log(a + b);Si intenta compilar y ejecutar este código, no funcionará; en su lugar, obtendrá un error:
El tipo 'cadena' no se puede asignar al tipo 'número'.
Esto indica que intentaste asignar por error un valor de cadena a una variable numérica, por lo que puedes corregirlo, por ejemplo, convirtiendo explícitamente la cadena en un número. TypeScript facilita la depuración de tu programa y la hace más fiable para tus usuarios, impidiendo que tu código se compile y ejecute si contiene errores tipográficos.
Al trabajar con TypeScript, no es necesario especificar el tipo de una variable (aunque normalmente debería): la inferencia de tipos permite declarar y usar variables sin especificar un tipo, y TypeScript infiere el tipo basándose en el valor y el uso. Esto resulta útil al importar código JavaScript sin tipo para su uso en proyectos de TypeScript.
Si quieres jugar con esto por ti mismo, TypeScript Playground te permite escribir y probar código TypeScript directamente en tu navegador sin necesidad de compilar.
Los tipos, clases e interfaces personalizados mantienen la coherencia de sus datos.
TypeScript amplía el soporte de JavaScript para la programación orientada a objetos con soporte para sus propios tipos personalizados, así como mejoras en clases, interfaces y herencia.
La creación de sus propios tipos de objetos e interfaces le permite modelar sus datos en TypeScript para garantizar que sus datos se procesen y almacenen correctamente.
Las clases y la herencia permiten un código limpio y los principios DRY, manteniendo su base de código mucho más organizada que el JavaScript tradicional.
Las enumeraciones y los tipos literales hacen que su código sea más fácil de entender
Las enumeraciones hacen que su código sea más legible y conveniente al nombrar valores que de otro modo podrían ser ambiguos.
Por ejemplo, supongamos que almacena el estado de un pedido en su base de datos como un valor numérico para ahorrar espacio y agilizar la búsqueda. En lugar de "pendiente", "pagado" y "enviado", podría almacenar estos valores como los números 0, 1 y 2, respectivamente.
El efecto secundario es que el código se vuelve confuso porque los números en sí mismos no describen mucho. Podrías olvidar qué número corresponde a qué condición y usar el incorrecto. Las enumeraciones ofrecen una solución práctica:
enum OrderStatus {
pending,
paid,
shipped,
}En la lista anterior, "pendiente" tiene el valor 0 (las enumeraciones, al igual que otros índices en programación, comienzan a contar la posición de los elementos desde cero), "pagado" tiene el valor 1 y "enviado" tiene el valor 2. Al usar una enumeración, se hace referencia a sus valores por su nombre y se devuelve el valor del índice:
console.log(EstadoDelPedido.pagado); // Salida 1
Los tipos literales y las uniones asignan valores específicos a las variables. Por ejemplo, podría tener una función que solo espera recibir el valor "gato" o "perro":
function myFunction(pet: "cat" | "dog") {
console.log(pet);
}Si su código pasa valores distintos de "cat" o "dog" a esta función, se generará un error. Esto ayuda a garantizar que se detecten más problemas durante el desarrollo: puede escribir funciones que esperan una entrada específica, sabiendo que si se introduce un error que les envíe un valor inesperado, su programa no compilará.
Cómo instalar TypeScript y utilizar el compilador de TypeScript
El código TypeScript debe compilarse en JavaScript para que pueda ejecutarse en navegadores web y Node.js, y para eso es necesario instalar el compilador TypeScript.
Puede instalar TypeScript globalmente usando el siguiente comando npm.
npm install -g typescript
Una vez instalado, puedes ejecutar el comando de compilación tsc TypeScript desde cualquier lugar de tu terminal usando npx:
índice tsc.ts
El comando anterior compila el archivo TypeScript index.ts y genera un archivo JavaScript compilado llamado index.js.
Cómo escribir un programa en TypeScript
TypeScript destaca en la creación de aplicaciones y sitios web complejos de varias páginas. La mayoría de los desarrolladores no lo utilizan para tareas básicas como añadir interactividad a páginas web individuales, pero sí lo utilizan para crear aplicaciones grandes con React o Angular.
Muchos desarrolladores utilizan editores de código que admiten la integración de TypeScript para poder aprovechar la finalización de código, la documentación en línea y el resaltado de errores para agilizar sus procesos de desarrollo y depuración.
¿Puedo utilizar mi código JavaScript existente?
¡Sí! TypeScript es compatible con JavaScript. Puedes importar tu código JavaScript antiguo y seguir usándolo en tus proyectos TypeScript, además de modificarlo con el tiempo para aprovechar las nuevas funciones de TypeScript.
Terminar de construir con TypeScript para el navegador
React es una biblioteca que te ayuda a crear interfaces de usuario para tus aplicaciones front-end. Te proporciona la base para crear componentes reutilizables, simplificando y modularizando el desarrollo de tus aplicaciones. También te permite crear páginas dinámicas con las que el usuario puede interactuar mostrando, ocultando, moviendo y modificando la apariencia del contenido. Las aplicaciones React se pueden escribir en TypeScript: esta combinación es una herramienta popular y potente para los desarrolladores front-end.
Angular es un framework completo que utiliza TypeScript para crear sus componentes. Va más allá de React: además de proporcionar herramientas para crear interfaces de usuario, también proporciona un framework para una aplicación completa. El enfoque conceptual de Angular permite a los desarrolladores crear más rápido, siempre que el concepto de su aplicación se ajuste a la arquitectura Angular.
Tanto React como Angular permiten crear aplicaciones TypeScript para Ionic y Electron. Ionic permite crear aplicaciones móviles para iOS y Android con TypeScript, y Electron permite integrar aplicaciones web en aplicaciones de escritorio para Windows, Linux y macOS.
Implementación de backends de TypeScript en el servidor
TypeScript no se limita a la creación de aplicaciones front-end. También se puede usar con Node.js para desarrollar servicios back-end y aplicaciones de línea de comandos.
También puedes usar TypeScript con el marco web Fastify o usar un marco específico de TypeScript como Nest para crear API de tipos seguros.
TypeScript y GraphQL
GraphQL es un lenguaje de consulta para buscar y recuperar datos de las API. Al igual que TypeScript, está tipificado, por lo que proporciona datos estructurados y consistentes. Al usar servicios compatibles con GraphQL para implementarlo en sus backends y adaptar sus tipos a su código TypeScript, puede mejorar significativamente la calidad de sus aplicaciones, garantizando que todos los datos modelados en sus servicios backend se reflejen correctamente en sus frontends y que todos los datos recopilados en estos se almacenen correctamente al cargarlos.
Si usa Contentful para administrar su contenido componible, los miembros de nuestra comunidad han creado aplicaciones y herramientas que ayudan a generar declaraciones de tipo para sus tipos de contenido y sincronizar TypeScript con su modelo de contenido.
