¿Qué es TypeScript? JavaScript fuertemente tipado

¿Qué es TypeScript? TypeScript definido

TypeScript es una variación del popular lenguaje de programación JavaScript que agrega algunas características clave que son importantes para el desarrollo empresarial. En particular, TypeScript está fuertemente tipado , es decir, el programador puede declarar las variables y otras estructuras de datos como de un tipo específico, como una cadena o un booleano, y TypeScript verificará la validez de sus valores. Esto no es posible en JavaScript, que está escrito de manera flexible .

La escritura fuerte de TypeScript hace posible una serie de características que ayudan a que los desarrolladores sean más eficientes, especialmente cuando se trata de bases de código grandes a escala empresarial. TypeScript se compila, en lugar de interpretarse como JavaScript, lo que significa que los errores se pueden detectar antes de la ejecución; Los IDE que realizan una compilación incremental en segundo plano pueden detectar estos errores durante el proceso de codificación.

A pesar de esta diferencia clave con JavaScript, TypeScript aún se puede ejecutar en cualquier lugar donde se pueda ejecutar JavaScript. Eso es porque TypeScript no se compila en un ejecutable binario, sino en JavaScript estándar. Vamos a sumergirnos para descubrir más.

TypeScript frente a JavaScript 

TypeScript es un superconjunto de JavaScript. Si bien cualquier código JavaScript correcto también es código TypeScript correcto, TypeScript también tiene características de lenguaje que no forman parte de JavaScript. La característica más destacada exclusiva de TypeScript, la que le dio su nombre a TypeScript, es, como se señaló, la escritura segura: una variable de TypeScript está asociada con un tipo, como una cadena, un número o un booleano, que le dice al compilador qué tipo de datos puede aguantar. Además, TypeScript admite la inferencia de tipos e incluye un tipo general para cualquier tipo, lo que significa que las variables no tienen que tener sus tipos asignados explícitamente por el programador; Más sobre esto en un momento. 

TypeScript también está diseñado para programación orientada a objetos; JavaScript, no tanto. Conceptos como la herencia y el control de acceso que no son intuitivos en JavaScript son fáciles de implementar en TypeScript. Además, TypeScript le permite implementar interfaces, un concepto en gran parte sin sentido en el mundo de JavaScript.

Dicho esto, no hay funcionalidad que pueda codificar en TypeScript que no pueda codificar también en JavaScript. Esto se debe a que TypeScript no se compila en un sentido convencional: la forma en que, por ejemplo, C ++ se compila en un ejecutable binario que se puede ejecutar en un hardware específico. En su lugar, el compilador de TypeScript transcodifica el código de TypeScript en JavaScript funcionalmente equivalente. Este artículo de Sean Maxwell en GitConnected tiene algunos ejemplos excelentes de fragmentos de código TypeScript orientados a objetos y sus equivalentes de JavaScript. El JavaScript resultante se puede ejecutar en cualquier lugar donde se pueda ejecutar cualquier código JavaScript, desde un navegador web hasta un servidor equipado con Node.js.

Entonces, si TypeScript es, al final, solo una forma elegante de generar código JavaScript, ¿por qué molestarse con él? Para responder a esa pregunta, necesitamos ver de dónde vino TypeScript y para qué se usa.

¿Para qué se utiliza TypeScript?

TypeScript se lanzó como código abierto en 2012 después de haber sido desarrollado dentro de Microsoft. (El gigante del software sigue siendo el administrador del proyecto y el desarrollador principal). Este artículo de ZDNet de la época ofrece una mirada intrigante sobre por qué sucedió eso: “Resulta que una de las grandes motivaciones fue la experiencia de otros equipos de Microsoft que intentaban desarrollar y mantener los productos de Microsoft en JavaScript ".

En ese momento, Microsoft intentaba escalar Bing Maps como competidor de Google Maps, así como ofrecer versiones web de su suite Office, y JavaScript era el lenguaje de desarrollo principal para las tareas. Pero los desarrolladores, en esencia, encontraron difícil escribir aplicaciones en la escala de las ofertas insignia de Microsoft usando JavaScript. Así que desarrollaron TypeScript para facilitar la creación de aplicaciones de nivel empresarial para que se ejecuten en entornos JavaScript. Este es el espíritu detrás del eslogan del lenguaje en el sitio oficial del proyecto TypeScript: "JavaScript que escala".

¿Por qué TypeScript es mejor para este tipo de trabajo que JavaScript vanilla? Bueno, podemos discutir eternamente sobre los méritos de la programación orientada a objetos, pero la realidad es que muchos desarrolladores de software que trabajan en grandes proyectos empresariales están acostumbrados y ayuda con la reutilización del código a medida que los proyectos aumentan de tamaño. Tampoco debe descuidar la medida en que las herramientas pueden aumentar la productividad del desarrollador. Como se señaló, la mayoría de los IDE empresariales admiten la compilación incremental en segundo plano, que puede detectar errores mientras trabaja. (Siempre que su código sea sintácticamente correcto, aún se transpilará, pero es posible que el JavaScript resultante no funcione correctamente; piense en la verificación de errores como el equivalente a la revisión ortográfica). Estos IDE también pueden ayudarlo a refactorizar el código a medida que profundiza en su proyecto.

En resumen, TypeScript se usa cuando desea las funciones y herramientas empresariales de un lenguaje como Java, pero necesita que su código se ejecute en un entorno JavaScript. En teoría, podría escribir el JavaScript estándar que el compilador de TypeScript genera usted mismo, pero le llevaría mucho más tiempo y el código base sería más difícil de comprender y depurar colectivamente para un equipo grande.

Ah, y TypeScript tiene otro buen truco bajo la manga: puede configurar el compilador para que apunte a un entorno de ejecución de JavaScript específico, un navegador o incluso una versión de idioma. Dado que cualquier código JavaScript bien formado también es código TypeScript, podría, por ejemplo, llevar el código escrito a la especificación ECMAScript 2015, que incluía una serie de nuevas características sintácticas, y compilarlo en código JavaScript que cumpliera con las versiones heredadas de el idioma.

Instalar TypeScript

¿Listo para empezar a jugar con TypeScript? Instalar el idioma es fácil. Si ya usa Node.js en su máquina de desarrollo, puede usar NPM, el administrador de paquetes de Node.js, para instalarlo. El tutorial oficial de TypeScript en 5 minutos lo guiará a través del proceso.

TypeScript también se puede instalar como un complemento en el IDE de su elección, lo que le brindará las ventajas de las herramientas de las que hablamos anteriormente y también se encargará del proceso de compilación de TypeScript en JavaScript. Dado que TypeScript fue desarrollado por Microsoft, no es sorprendente que haya complementos de alta calidad disponibles para Visual Studio y Visual Studio Code. Pero como proyecto de código abierto, TypeScript se ha adaptado en todas partes, desde IDE de código abierto como Eclipse hasta venerables editores de texto como Vim. Y todo el proyecto se puede navegar y descargar desde GitHub.

Sintaxis de TypeScript

Una vez que se haya instalado TypeScript, estará listo para comenzar a explorar, y eso significa comprender los conceptos básicos de la sintaxis de TypeScript. Dado que JavaScript es la base de TypeScript, debe estar familiarizado con JavaScript antes de comenzar. Sin duda, sus principales puntos de interés serán las características específicas de TypeScript que hacen que el lenguaje sea único; tocaremos los puntos altos aquí.

Tipos de TypeScript

Obviamente, la característica sintáctica más importante de TypeScript es el sistema de tipos. El idioma admite varios tipos básicos:

  • Booleano: un valor simple verdadero / falso.
  • Número: en TypeScript, como en JavaScript, todos los números son valores de punto flotante, no hay un entero separado. TypeScript admite literales decimales, hexadecimales, binarios y octales.
  • Cadena: una cadena de datos textuales. Puede usar comillas simples o dobles para rodear su cadena al configurar los datos. También puede usar comillas invertidas ( `) para rodear cadenas con varias líneas, y puede incrustar expresiones en una cadena con la sintaxis ${ expr }.
  • Matrices y tuplas: estos tipos le permiten almacenar varios valores en una secuencia específica. En una matriz, los valores individuales son todos del mismo tipo de datos, mientras que en una tupla pueden ser heterogéneos. El forEach()método TypeScript se utiliza para llamar a una función en cada elemento de una matriz.
  • Enum: como el tipo del mismo nombre en C #, una enumeración de TypeScript le permite asignar nombres legibles por humanos a una secuencia de valores numéricos.
  • Cualquiera: este es un tipo para una variable en la que no necesariamente sabe con qué valor terminará de antemano; puede tomar sus valores de la entrada del usuario o de una biblioteca de terceros, por ejemplo.
  • Objeto: este es el tipo que representa cualquier cosa que no sea un tipo primitivo; es esencial para la naturaleza orientada a objetos de TypeScript.

Hay dos formas diferentes de asignar explícitamente un tipo a una variable. La primera es la sintaxis de corchetes angulares:

let someValue: any;

let strLength: number = (someValue) .length;

Y el segundo es la assintaxis:

let someValue: any = "esto es una cadena";

let strLength: number = (someValue como cadena) .length;

Estos fragmentos de código, que se toman de la documentación de TypeScript, son funcionalmente equivalentes. Ambos definen someValuecomo una variable de tipo anyy asignan "this is a string"como su valor, luego definen strLengthcomo un número y asignan como su valor la longitud del contenido de someValue.

Los tipos de TypeScript también se pueden establecer por inferencia. Es decir, si establece un valor de x en 7 sin establecer qué tipo de x es, el compilador asumirá que x debería ser un número. En algunas circunstancias, el compilador puede inferir un anytipo, aunque puede usar indicadores de compilación para asegurarse de que no lo haga.

El sistema de tipos de TypeScript es bastante rico y va más allá del alcance de este artículo. Hay varios tipos avanzados y de utilidad; Estos incluyen tipos de unión, que le permiten establecer que una variable será uno de varios tipos especificados, y tipos mapeados, que son tipos que puede crear en función de un tipo existente, en los que transforma cada propiedad en el tipo existente en el mismo camino. Por ejemplo, puede crear un tipo de unión para una variable que desee que sea un número o un booleano, pero no una cadena ni ninguna otra cosa; o puede crear un tipo mapeado que establezca todos los elementos de una matriz en solo lectura.

Interfaz TypeScript

Como la mayoría de los lenguajes orientados a objetos, TypeScript tiene interfaces que permiten a los usuarios definir sus propios tipos. Las interfaces establecen las propiedades que tiene un objeto, junto con los tipos asociados con esas propiedades. Las interfaces TypeScript pueden tener propiedades opcionales. Para obtener más información sobre la sintaxis, consulte la documentación de TypeScript.  

Genéricos de TypeScript

TypeScript también comparte el concepto de genéricos con lenguajes orientados a objetos como Java y C #. (La función equivalente en C ++ se llama plantilla). En TypeScript, los componentes genéricos pueden funcionar sobre una variedad de tipos, en lugar de solo uno, dependiendo de en qué parte del código se llamen esos componentes. Aquí hay un ejemplo muy simple de la documentación de TypeScript. Primero, considere esta función, que toma un argumento y luego lo devuelve inmediatamente:

identidad de la función (arg: any): any {

    return arg;

}

Debido a que la función está definida con el anytipo, aceptará un argumento de cualquier tipo que elija lanzarle. Sin embargo, lo que devuelve será del anytipo. Aquí hay una versión de la función que usa genéricos:

identidad de función (arg: T): T {

    return arg;

}

Este código incluye la variable de tipoT , que captura el tipo del argumento entrante y lo almacena para nuestro uso posterior.

Los genéricos son mucho más, que son clave para hacer posible la reutilización del código en proyectos de grandes empresas. Consulte la documentación de TypeScript para obtener más detalles.

Clase TypeScript 

En la programación orientada a objetos, las clases heredan la funcionalidad y, a su vez, sirven como bloques de construcción de objetos. JavaScript tradicionalmente no hacía uso de clases, sino que dependía de las funciones y la herencia basada en prototipos, pero el concepto se agregó al lenguaje como parte de la versión ECMAScript 2015 del estándar. Las clases ya formaban parte de TypeScript, y ahora TypeScript usa la misma sintaxis que JavaScript. Uno de los beneficios del compilador de TypeScript es que puede transformar código con clases de JavaScript en código JavaScript heredado que cumple con los estándares anteriores a 2015.

Fecha de TypeScript

Hay varios métodos y objetos disponibles para obtener y configurar la fecha y la hora en TypeScript, en su mayoría heredados de JavaScript. JavaTPoint tiene un buen resumen de cómo funciona esto.

Tutorial de TypeScript 

¿Listo para profundizar? Ponte al día con estos tutoriales de TypeScript:

  • TypeScript en 5 minutos lo guiará a través del proceso de instalación de TypeScript si aún no lo ha hecho.
  • Este tutorial de Visual Studio Code demuestra cómo los IDE realmente aumentan la productividad de desarrollo de TypeScript.
  • Tutorial de TypeScript para principiantes: The Missing Guide es una introducción muy completa que será útil incluso si tiene una experiencia de JavaScript bastante limitada.

Si está buscando aprender a usar TypeScript con React, la biblioteca de JavaScript para crear UI desarrollada por Facebook, consulte Cómo usar TypeScript con React y Redux de Ross Bulat y la sección sobre React y paquete web en la documentación de TypeScript. ¡Feliz aprendizaje!