TypeScript frente a JavaScript: comprenda las diferencias

La World Wide Web se ejecuta básicamente 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. Ingrese TypeScript.

¿Qué es JavaScript?

JavaScript comenzó como un lenguaje de programación 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.

La introducción de JavaScript del lado del cliente en Netscape Navigator fue seguida rápidamente por la introducción de JavaScript del lado del servidor en los servidores web Netscape Enterprise Server y Microsoft IIS. Unos 13 años después, Ryan Dahl presentó Node.js como un entorno de tiempo de ejecución de JavaScript de código abierto, multiplataforma, independiente de cualquier navegador o servidor web.

Lenguaje JavaScript

JavaScript es un lenguaje de paradigmas múltiples. Tiene sintaxis entre corchetes y punto y coma, como la familia de lenguajes C. Tiene una escritura débil y dinámica y se interpreta o (más a menudo) se compila justo a tiempo. En general, JavaScript es de un solo subproceso, aunque hay una API de Web Workers que realiza múltiples subprocesos, y hay eventos, llamadas a funciones asincrónicas y devoluciones de llamada.

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

Antes de JavaScript ES6, el lenguaje no tenía optimización de llamadas de cola; ahora lo hace, aunque debe 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 del lenguaje JavaScript estandarizado es ECMAScript (ES), en honor al organismo de estándares ECMA International; ES6 también se llama ECMAScript 2015 (ES2015). ES2020 es actualmente un borrador de estándar.

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 hora = nueva fecha (). getHours ();

var saludo;

if (hora <18) {

  saludo = "Buen día";

} más {

  saludo = "Buenas noches";

}

document.getElementById ("demostración"). innerHTML = saludo;

Ecosistema de JavaScript

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

Las API del navegador incluyen el modelo de objetos del documento (DOM) y el modelo de objetos del navegador (BOM), geolocalización, Canvas (gráficos), WebGL (gráficos acelerados por GPU), HTMLMediaElement (audio y video) 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 de JavaScript, HTML5 y CSS, como jQuery. Algunos, como Express, son marcos de aplicación para propósitos específicos; para Express, el propósito es construir servidores de aplicaciones móviles y web en Node.js. Se han construido varios otros marcos sobre Express. En 2016, hablé de 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 todavía existen de una forma u otra, pero varios se han quedado en el camino.

Hay muchos más módulos de JavaScript, más de 300.000. Para lidiar con eso, usamos administradores de paquetes , como npm, el administrador de paquetes predeterminado para Node.js.

Una alternativa a npm es Yarn, que proviene 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 nodo; Ender, que se hace llamar la hermana pequeña de npm; y jspm, que usa módulos ES (el estándar ECMA más nuevo para módulos), en lugar de módulos CommonJS, el estándar de facto más antiguo compatible con npm.

Webpack agrupa módulos JavaScript en activos estáticos para el navegador. Browserify permite a los desarrolladores escribir módulos de estilo Node.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 construcción de transmisión y un ejecutor de tareas de JavaScript. La elección entre gruñir y tragar no es decisiva. He instalado y utilizado el que se configuró 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 en 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 utilizando un ejecutor de tareas o su IDE. Una vez más, la elección entre los linters no es clara y yo uso el que se configuró 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 configurable / IDE) y WebStorm (IDE).

Los transpilers le permiten traducir algunos otros lenguajes 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 escrito de JavaScript que se compila en JavaScript simple (ES3 o superior; es configurable). El compilador de línea de comandos de TypeScript de código abierto se puede instalar como un paquete Node.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, para cualquier host y en cualquier sistema operativo. Entre muchas otras victorias para TypeScript, el popular marco 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 verificación estática y la refactorización de código al desarrollar aplicaciones de JavaScript.

Los tipos son opcionales, y la inferencia de tipos permite algunas anotaciones de tipos 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 de JavaScript existentes.

TypeScript ofrece compatibilidad con las funciones de JavaScript más recientes y en evolución, incluidas las de ECMAScript 2015 y propuestas futuras, como decoradores y funciones asíncronas, para ayudar a crear componentes sólidos.

Lenguaje TypeScript

El lenguaje TypeScript acepta JavaScript como válido, pero ofrece las opciones adicionales de anotaciones de tipo, verificación de tipo en tiempo de compilación, clases y módulos. Todos estos son tremendamente útiles cuando intenta 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 de TypeScript en 5 minutos aclara los beneficios. El punto de partida es JavaScript puro con una extensión .ts:

función saludador (persona) {

  return "Hola" + persona;

}

let user = "Jane User";

document.body.textContent = saludador (usuario);

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

El tutorial le pide que cambie este código paso a paso, agregando una anotación de tipo person:stringen la definición de la función, compilando, probando la verificación de tipos por parte del compilador, agregando una interfaz para un persontipo y finalmente agregando una clase para Student. El código final es:

clase Student {

    fullName: cadena;

    constructor (public firstName: string, public middleInitial: string,

        apellido público: cadena) {

            this.fullName = firstName + "" + middleInitial + "" + lastName;

    }

}

Persona de interfaz {

    nombre: cadena;

    apellido: cadena;

}

saludo de función (persona: Persona) {

    return "Hola," + person.firstName + "" + person.lastName;

}

let user = new Student ("Jane", "M.", "Usuario");

document.body.textContent = saludador (usuario);

Cuando compile esto y observe 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 simple ES3. Tenga en cuenta que el compilador genera automáticamente las propiedades person.firstNamey person.lastNamecuando ve sus publicatributos en el Studentconstructor de la clase, y también se transfieren a la Personinterfaz. Uno de los mejores beneficios de las anotaciones de tipo en TypeScript es que son reconocidas por las herramientas, como Visual Studio Code:

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

El tutorial Migración 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 sus archivos .js a .ts uno a la vez. (Si su archivo usa JSX, una extensión utilizada por React, deberá cambiarle el nombre a .tsx en lugar de .ts). Luego, refuerce la verificación de errores y corrija los errores.

Entre otras cosas, deberá cambiar las declaraciones require()o basadas en módulos a define()declaraciones 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 exportdeclaración de TypeScript . TypeScript admite módulos CommonJS, como lo hace Node.js.

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

Por lo general, no es necesario que escriba sus propios archivos de declaración para las bibliotecas JavaScript de dominio público. DefinitelyTyped es un repositorio de archivos de declaración, todos los cuales son accesibles usando npm. Puede encontrar las declaraciones utilizando la página TypeSearch.

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 informados por probadores o usuarios, podrá detectar los errores más comunes de forma estática.

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