Introducción

1. Transpilación

TypeScript le permite utilizar el JavaScript del mañana y ofrece transpilar el código. Pero ¿qué es la transpilación?

Este término designa un modo específico de compilación. En la mayoría de los casos, la compilación consiste en transformar el código fuente escrito con un lenguaje de programación en un programa ejecutable. La transpilación es diferente y más específica. Permite traducir el código fuente de un programa escrito en un primer lenguaje a un programa equivalente escrito en un segundo lenguaje que tenga el mismo nivel de abstracción. Por lo tanto, el compilador TypeScript compilará el código fuente de un proyecto en JavaScript. Además, puede hacer esto apuntando a versiones anteriores de JavaScript.

Uno de los beneficios de la transpilación es que facilita seguir la evolución de nuevas versiones de ECMAScript sin preocuparse por la versión del navegador que se utilizará para ejecutar el programa.

TypeScript, a través de su compilador, puede convertir el código a una versión inferior de JavaScript que será compatible con navegadores más antiguos o con aquellos que aún no han implementado el último estándar ECMAScript (esto se denomina downgrade). Esta es una ventaja interesante para las empresas que no siempre tienen la capacidad de mantenerse al día con las actualizaciones (algunos activos de TI son muy grandes y su migración es costosa). Esto también es una ventaja para los sitios dirigidos al público en general. Todavía hay muchos usuarios que navegan por la web con navegadores obsoletos. Por último, las nuevas funciones especificadas por el estándar ECMAScript pueden tardar varios meses en estar disponibles en los navegadores. En consecuencia, cuanto más reciente sea la versión de ECMAScript utilizada, más limitada resultará la compatibilidad. Sin embargo, muchos desarrolladores quieren utilizar las últimas novedades en lenguajes para poder tener un código actualizado y lo más optimizado posible. En definitiva, los transpiladores nacieron para superar estos problemas. Además, TypeScript no es el único transpilador disponible; cabe destacar Babel en particular, que es muy popular en la comunidad de JavaScript.

TypeScript se puede configurar para que apunte a una versión de ECMAScript al traducir. Para hacer esto, debe especificar esta versión a través de la opción de compilación: target.

Ejemplo:

class Employee {  
  firstName: string;  
  age: number;  
  constructor(firstName: string, age: number) {  
    this.firstName = firstName;  
    this.age = age;  
  }  
}  
  
const employee1 = new Employee("Evelyn", 34); 

En este primer ejemplo, se define una clase Employee y se asigna una instancia de la clase a una variable declarada con la palabra clave const. Los conceptos de class y const solo existen desde ECMAScript 2015.

Este código se puede transpilar a ECMAScript 5 mediante TypeScript. Para hacer esto, será necesario utilizar la opción de compilación target con el valor es5.

Ejemplo:

var Employee = /** @class */ (function () {  
    function Employee(firstName, age) {  
        this.firstName = firstName;  
        this.age = age;  
    }  ...

1. Archivos de definición

TypeScript aplica un tipado estático a todo el código. Pero ¿qué pasa si queremos utilizar una biblioteca externa escrita en JavaScript y que, por tanto, no contiene tipado? Los archivos de definición están ahí para satisfacer esta necesidad.

Estos archivos (con la extensión .d.ts)describen los tipos correspondientes al código JavaScript que se utilizará. Para usar una biblioteca externa escrita en JavaScript en un proyecto que emplea TypeScript, debe recuperar el archivo de definición asociado con esta biblioteca. Una vez recuperada, la biblioteca se vuelve utilizable como si estuviera escrita en TypeScript y permite tener todas las funcionalidades integradas en el IDE (autocompletado, informe de errores, documentación en el editor...).

Queda una pregunta: ¿cómo proporciona TypeScript el tipado en las funciones nativas de JavaScript?

Ejemplo (Visual Studio Code):

El ejemplo anterior utiliza el objeto Math, que está definido de forma nativa en JavaScript. TypeScript interpreta correctamente este objeto y los tipos esperados. Además, Visual Studio Code ofrece autocompletado y documentación relacionada con este objeto, incluso si no se ha instalado ninguna definición para tipar el objeto. En realidad, TypeScript utiliza un archivo de definición que se incluye con el compilador. Llamado lib.d.ts, este archivo, en realidad, está compuesto por varios archivos de definición, cada uno con un alcance bien definido (ejemplo: lib.es5.d.ts para interoperabilidad con ECMAScript 5, lib.dom.d.ts para API relacionadas con la manipulación del DOM…). La opción de compilación lib le permite seleccionar los archivos de definición que compondrán los lib.d.ts utilizados por el compilador.

2. Tipado estructural

Para comprender el sistema de tipos de TypeScript, es necesario entender la diferencia entre un sistema de tipos estructural (Structural Typing), un sistema de tipos nominal (Nominal Typing) y el Duck Typing. Estos sistemas permiten determinar la equivalencia y compatibilidad entre dos tipos.

En los sistemas de tipos nominal, los nombres de las declaraciones (interfaz, clases, etc.) tienen un impacto directo en la compatibilidad entre dos tipos. Un objeto de una clase denominada A no se puede asignar a un objeto de una clase denominada B incluso si estas dos clases tienen exactamente las mismas propiedades/métodos. Cuando se crean objetos de tipos anónimos, el compilador nombra estos tipos anónimos según las propiedades que poseen. Luego, utiliza estos nombres para comprobar la compatibilidad entre objetos. Lenguajes como C#, Java, PHP y C++ utilizan este sistema de tipos.

Ejemplo (C#):

public class Person  
{  
  public string Name { get; set; }  
  public int Age { get; set; }  
   
  public string GetInformation()  
  {  
    return this.Name + " - " + this.Age;  
  }  
}  
  
public class Employee  
{  
  public string Name { get; set; }  
  public int Age { get; set; }  
  
  public string GetInformation()  ...

1. Core TypeScript Compiler

El Core TypeScript Compiler es el ladrillo que representa el compilador TypeScript. Es la pieza central de su arquitectura y su función es controlar y transpilar el código fuente. El compilador TypeScript se compone de elementos que se encuentran en la mayoría de los compiladores y cada uno de los cuales tiene un uso (Scanner, Parser, Binder, Emitter...).

Dos archivos son particularmente importantes:

Para poder activar la compilación, el Core TypeScript Compiler necesita saber qué archivos compilar y las opciones de compilación. En la arquitectura TypeScript, esta información la proporciona el Languaje Service (servicio de lenguaje) o el Standalone TypeScript Compiler (compilador independiente de TypeScript).

2. Standalone TS Compiler

El Standalone TypeScript Compiler es una herramienta disponible en la línea de comandos (Command Line Interface), que le permite proporcionar al compilador una ruta a los archivos para compilar, así como opciones de compilación.

Esta herramienta está disponible después de instalar TypeScript en su entorno de desarrollo a través del alias tsc (consulte la sección Entorno de desarrollo).

3. Language Service

El Language Service se dedica a integrar TypeScript en los entornos de desarrollo. Este servicio está disponible después de instalar TypeScript y proporciona un conjunto de funciones que luego pueden ser utilizadas por los IDE (autocompletado, navegación de código, refactorización...). El servicio también ofrece asistencia para el desarrollo en forma de Quick Fixes.

Estos últimos ayudan a enriquecer la experiencia del desarrollador al ofrecer tareas automatizadas que resuelven un problema detectado en el código escrito en TypeScript (ejemplo: eliminar una variable no utilizada que fue detectada por el Language Service).

Este servicio es extensible y también permite agregar nuevas capacidades de análisis (ciertos plug-ins lo amplían, como Angular, Vue.js, GraphQL...).

4. Opciones de compilación

Como se indicó anteriormente, el compilador de TypeScript utiliza opciones de compilación. Estas influyen en cómo el compilador analiza y compila el código.

Se pueden proporcionar de diferentes formas:

Se prefiere la segunda solución porque TypeScript tiene alrededor de cien opciones de compilación. Este archivo puede ser inicializado...

1. Node.js

Node.js proporciona todas las herramientas necesarias para desarrollar una aplicación con TypeScript; por lo tanto, lo primero es instalarlo.

Node.js se puede descargar desde el sitio web oficial del proyecto: http://nodejs.org. Hay dos categorías de versiones disponibles:

Cualquiera que sea la versión que elija, no afectará la instalación de TypeScript. Una vez instalado Node.js, el comando npm estará disponible desde la terminal para administrar los paquetes de Node.js.

Antes de continuar, es necesario verificar que Node.js y NPM sean accesibles desde la terminal. Para hacer esto, simplemente introduzca los siguientes comandos: 

node -v  
npm -v  

El resultado de ejecutar estos comandos debería mostrar el número de versión de ambas herramientas.

2. Visual Studio Code

Visual Studio Code (también llamado VSCode) es un editor de código lanzado en abril de 2015 y desarrollado por Microsoft. Este editor multiplataforma y de código abierto (su código está disponible en GitHub: https://github.com/topics/visual-studio-code) se ha convertido en pocos años en uno de los entornos de desarrollo más populares entre los desarrolladores. Visual Studio Code es fácil de usar, altamente personalizable y desarrollado con TypeScript. Por lo tanto, tiene un muy buen soporte para el lenguaje (también se incluye una versión de TypeScript en el editor). Visual Studio Code es el editor al que se ha dado preferencia al escribir este libro, por lo que es necesario instalarlo antes de continuar. Se puede descargar desde el sitio web oficial del proyecto: https://code.visualstudio.com/

De entrada, Visual Studio Code ofrece relativamente pocos menús. Además de la barra de menú, tiene seis partes bien diferenciadas:

Además de estas diferentes partes, Visual Studio Code contiene un conjunto de comandos que le permiten ejecutar tareas dentro del editor (ejemplo: formatear el código fuente, iniciar el depurador, hacer zoom en el editor...).

Se puede acceder a la interfaz de inicio de comandos a través del botón Configuración (el marcado con el número 6 en la imagen anterior) o mediante un atajo de teclado:

Antes de comenzar a desarrollar con TypeScript, es necesario tener algunos conocimientos básicos sobre cómo funcionan el explorador y el depurador.

El explorador se divide en varias partes:

La interfaz dedicada al depurador contiene tres partes importantes: