TypeScript vs. JavaScript: Comprender las diferencias

La world wide web básicamente se ejecuta en JavaScript, HTML y CSS. Desafortunadamente, JavaScript carece de varias características que ayudarían a los desarrolladores a usarlo para aplicaciones a gran escala. Introduzca TypeScript.

¿Qué es JavaScript?

JavaScript comenzó como un lenguaje de scripting para el navegador web Netscape Navigator; Brendan Eich escribió el prototipo durante un período de 10 días en 1995. El nombre JavaScript es un guiño al lenguaje Java de Sun Microsystem, aunque los dos lenguajes son bastante diferentes, y la similitud en los nombres ha llevado a una confusión significativa a lo largo de los años. JavaScript, que ha evolucionado significativamente, ahora es compatible con todos los navegadores web modernos.

Lenguaje JavaScript

JavaScript es un lenguaje multiparadigma. Tiene sintaxis de corchetes y punto y coma, como la familia de lenguajes C. Tiene tipado débil y dinámico y es interpretado o (más a menudo) compilado justo a tiempo. En general, JavaScript es de subproceso único, aunque hay una API de Web Workers que realiza subprocesos múltiples, y hay eventos, llamadas a funciones asíncronas y devoluciones de llamada.

JavaScript admite programación orientada a objetos utilizando prototipos en lugar de la herencia de clases utilizada en C++, Java y C#, aunque se agregó una sintaxis class a JavaScript ES6 en 2015. JavaScript también admite programación funcional, incluidos cierres, recursión y lambdas (funciones anónimas).

Antes de JavaScript ES6, el lenguaje no tenía optimización de llamadas de cola; ahora sí, aunque necesita activar el modo estricto ('use strict') para habilitarlo, y la implementación varía de un navegador a otro. El modo estricto también cambia la semántica de JavaScript, y cambia algunos errores normalmente silenciosos para generar errores.

¿Qué pasa con la designación «ES6»? El nombre para el lenguaje JavaScript estandarizado es ECMAScript (ES), por el cuerpo de estándares internacionales de ECMA; ES6 también se llama ECMAScript 2015 (ES2015). ES2020 es actualmente un proyecto de norma.

Como un ejemplo simple para darle el sabor del lenguaje JavaScript, aquí hay un código para decidir si es de día o de noche y colocar dinámicamente el saludo apropiado en un elemento web con nombre que se encuentra en el objeto de documento del navegador:

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

Ecosistema JavaScript

Hay numerosas API de JavaScript. Algunos son suministrados por el navegador, como la API document en el código que se muestra arriba, y algunos son suministrados por terceros. Algunas API se aplican al uso del lado del cliente, otras al uso del lado del servidor, otras al uso del escritorio y otras a más de un entorno.

Las API de navegador incluyen el modelo de objetos de documento (DOM) y el modelo de objetos de navegador (BOM), Geolocalización, Lienzo (gráficos), WebGL (gráficos acelerados por GPU), HTMLMediaElement (audio y vídeo) y WebRTC (comunicaciones en tiempo real).

Abundan las API de terceros. Algunas son interfaces para aplicaciones completas, como Google Maps. Otras son utilidades que facilitan la programación JavaScript HTML5 y CSS, como jQuery. Algunos, como Express, son marcos de aplicaciones para fines específicos; para Express, el propósito es construir servidores de aplicaciones web y móviles en el nodo.js. Se han construido varios otros marcos sobre Express. En 2016, discutí 22 marcos de JavaScript en un esfuerzo por dar sentido a lo que se estaba convirtiendo en una especie de zoológico; muchos de estos marcos aún existen de una forma u otra, pero varios han quedado en el camino.

Hay muchos más módulos JavaScript, más de 300.000. Para hacer frente a eso, usamos gestores de paquetes, como npm, el gestor de paquetes predeterminado para Node.js.

Una alternativa a npm es Yarn, que vino de Facebook, y afirma la ventaja de las instalaciones deterministas. Herramientas similares incluyen Bower (de Twitter), que administra componentes de front-end en lugar de módulos de nodos; Ender, que se llama a sí misma la hermana pequeña de npm; y jspm, que utiliza módulos ES (el estándar ECMA más reciente para módulos), en lugar de módulos CommonJS, el estándar de facto más antiguo soportado por npm.

Webpack agrupa módulos JavaScript en activos estáticos para el navegador. Browserify permite a los desarrolladores escribir Nodos.módulos de estilo js que se compilan para su uso en el navegador. Grunt es un ejecutor de tareas de JavaScript orientado a archivos, y gulp es un sistema de compilación de streaming y un ejecutor de tareas de JavaScript. La elección entre el gruñido y el trago no es decisiva. He instalado y uso el que se haya configurado para un proyecto determinado.

Para hacer que el código JavaScript sea más confiable en ausencia de compilación, usamos linters. El término proviene de la herramienta lint de lenguaje C, que era una utilidad estándar de Unix. Los linters de JavaScript incluyen JSLint, JSHint y ESLint. Puede automatizar la ejecución de linters después de los cambios de código mediante un ejecutor de tareas o su IDE. Una vez más, la elección entre los linters no está clara, y uso el que se haya configurado para un proyecto determinado.

Hablando de editores e IDE, he revisado 6 IDE de JavaScript y 10 editores de JavaScript, más recientemente en 2019. Mis principales opciones fueron Sublime Text (editor muy rápido), Visual Studio Code (editor/IDE configurable) y WebStorm (IDE).

Los transpilers le permiten traducir algunos otros idiomas, como CoffeeScript o TypeScript a JavaScript, y traducir JavaScript moderno (como el código ES2015) a un JavaScript básico que se ejecuta en (casi) cualquier navegador. (Todas las apuestas están canceladas para las primeras versiones de Internet Explorer.) El transpilador más común para JavaScript moderno es Babel.

¿Qué es TypeScript?

TypeScript es un superconjunto de JavaScript escrito que se compila en JavaScript plano (ES3 o superior; es configurable). El compilador de línea de comandos de código abierto TypeScript se puede instalar como un nodo.paquete js. La compatibilidad con TypeScript viene con Visual Studio 2017 y Visual Studio 2019, Visual Studio Code y WebStorm, y se puede agregar a Sublime Text, Atom, Eclipse, Emacs y Vim. El compilador/transpilador de TypeScript tsc está escrito en TypeScript.

TypeScript agrega tipos, clases y módulos opcionales a JavaScript y admite herramientas para aplicaciones JavaScript a gran escala para cualquier navegador, host y sistema operativo. Entre muchas otras ventajas para TypeScript, el popular framework Angular se ha renovado en TypeScript.Los tipos

permiten a los desarrolladores de JavaScript utilizar herramientas y prácticas de desarrollo altamente productivas, como la comprobación estática y la refactorización de código, al desarrollar aplicaciones JavaScript.Los tipos

son opcionales, y la inferencia de tipos permite algunas anotaciones de tipo para marcar una gran diferencia en la verificación estática de su código. Los tipos le permiten definir interfaces entre componentes de software y obtener información sobre el comportamiento de las bibliotecas JavaScript existentes.

TypeScript ofrece soporte para las funciones de JavaScript más recientes y en evolución, incluidas las de ECMAScript 2015 y propuestas futuras, como funciones asincrónicas y decoradores, para ayudar a crear componentes robustos.

Lenguaje TypeScript

El lenguaje TypeScript acepta JavaScript como válido, pero ofrece las opciones adicionales de anotaciones de tipo, comprobación de tipos en tiempo de compilación, clases y módulos. Todos estos son tremendamente útiles cuando está tratando de producir software robusto. JavaScript simple genera errores solo en tiempo de ejecución, y solo si su programa llega a una ruta con errores.

El tutorial TypeScript en 5 minutos deja claros los beneficios. El punto de partida es JavaScript puro con a .extensión ts:

function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

Si compila esto con tsc, producirá un archivo idéntico con a .extensión js.

El tutorial tiene que cambiar este código de forma gradual, agregar una anotación de tipo person:string en la definición de la función, compilar, probar la comprobación de tipos por el compilador, agregar una interfaz para un tipo person y finalmente agregar una clase para Student. El código final es:

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

Cuando compile esto y mire el JavaScript emitido, verá que las clases en TypeScript son solo una abreviatura de la misma herencia basada en prototipos que se usa en JavaScript ES3 plano. Tenga en cuenta que las propiedades person.firstName y person.lastName son generadas automáticamente por el compilador cuando ve sus atributos public en el constructor de clase Student, y también se transfieren a la interfaz Person. Una de las mejores ventajas de las anotaciones de tipo en TypeScript es que son reconocidas por las herramientas, como Visual Studio Code:

IDG

Si hay errores en el código mientras edita en VS Code, verá los mensajes de error en la pestaña Problemas, por ejemplo, si elimina el final de la línea con la creación de instancias de Student:

IDG

El tutorial Migrar desde JavaScript explica en detalle cómo actualizar un proyecto JavaScript existente. Omitiendo los pasos de configuración, el quid del método es cambiar el nombre de su .archivos js para .ts uno a la vez. (Si tu archivo utiliza JSX, una extensión utilizada por React, tendrás que cambiarle el nombre a .tsx en lugar de .ts.) A continuación, ajuste la comprobación de errores y corrija los errores.

Entre otras cosas, deberá cambiar las instrucciones require() o define() basadas en módulos por instrucciones de importación de TypeScript y agregar archivos de declaración para cualquier módulo de biblioteca que utilice. También debe reescribir las exportaciones de sus módulos utilizando la instrucción TypeScript export. TypeScript soporta módulos CommonJS, como Node.js no.

Si obtiene errores sobre el número incorrecto de argumentos, puede escribir firmas de sobrecarga de funciones TypeScript. Esa es una característica importante que carece de JavaScript. Finalmente, debe agregar tipos a sus propias funciones y, cuando corresponda, usar interfaces o clases.

Normalmente no necesita escribir sus propios archivos de declaración para bibliotecas JavaScript de dominio público. DefinitelyTyped es un repositorio de archivos de declaración, a todos los cuales se puede acceder mediante npm. Puede encontrar las declaraciones en la página de búsqueda de tipos.

Una vez que haya convertido todos sus archivos JavaScript a TypeScript, reforzado los tipos y eliminado los errores, tendrá una base de código mucho más sólida. En lugar de corregir constantemente los errores de tiempo de ejecución reportados por los probadores o los usuarios, podrá detectar los errores más comunes de forma estática.

Vale la pena ver a Anders Hejlsberg discutir TypeScript. Como escuchará de él, TypeScript es JavaScript que se escala.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.