La programación frontend ha avanzado mucho más allá de JavaScript. Descubrimos qué es TypeScript y por qué es tan popular.

JavaScript se utiliza en las interfaces web de casi todos los sitios web. Sin embargo, no a todos les gusta, y casi no hay alternativas. El único competidor de JS es WebAssembly, pero en los pocos años que lleva en existencia, aún no ha logrado ganar suficiente popularidad.

Debido a esta situación, los desarrolladores tienen dos opciones:

  • Usar JS con todas sus desventajas.
  • Escribir código en otro lenguaje y compilarlo a JS.

Muchos optan por la segunda opción. Por eso, en los últimos años han surgido varios lenguajes que se superponen a JavaScript:

  • Dart;
  • CoffeeScript;
  • ClojureScript;
  • TypeScript.

Este artículo se centra en el último. En 2023, TypeScript se convirtió en el quinto de los lenguajes de programación más usados y entró en el top 10 de popularidad:

TypeScript entre los lenguajes más usados de 2023
TypeScript entre los lenguajes más usados de 2023

¿Qué es TypeScript?

TypeScript es un lenguaje de programación que soluciona muchas de las deficiencias de JavaScript. El código en TypeScript se ve casi igual que el código en JS, y si tienes experiencia en desarrollo frontend, aprender TypeScript es bastante fácil. Especialmente teniendo en cuenta que puedes escribir código JS directamente en scripts TS.

El código en TypeScript se compila a JS y es adecuado para el desarrollo de cualquier proyecto para cualquier navegador, sobre todo porque puedes elegir la versión de JS a la que se va a compilar el código.

TypeScript y JavaScript
TypeScript y JavaScript

TypeScript es un proyecto de código abierto, por lo que se desarrolla muy rápidamente. Muchas cosas que aparecen en TS luego pasan a JavaScript: por ejemplo, let y const, funciones flecha, etc.

Ventajas de TypeScript sobre JavaScript

Analicemos dos de las principales ventajas de TS sobre JS.

Tipado estricto

Muchos problemas en JavaScript surgen debido al tipado dinámico y al comportamiento general de los tipos de datos:

Meme de código JavaScript con problemas de tipado
Meme de código JavaScript con problemas de tipado

En TypeScript, el tipado es estático, lo que elimina muchos problemas. Existe un tipo numérico, de cadena, booleano y otros. Es posible describir tus propios tipos de datos, por ejemplo, usando enum:

//Creamos una enumeración Direction, que contiene direcciones (arriba, abajo, izquierda, derecha y ninguna)
enum Direction {
   Up,
   Down,
   Left,
   Right,
   None
}

//A la variable d se le puede indicar una dirección
let d : Direction = Direction.Up;

OOP mejorado

Tanto en JS como en TS hay soporte para la programación orientada a objetos: clases, objetos, herencia. Sin embargo, TypeScript ha ido un poco más allá y utiliza más funcionalidades de OOP. Entre ellas, por ejemplo, interfaces:

//Declaramos una interfaz
interface IPost {
   id: number;
   text: string;
}

//Creamos clases que implementan esta interfaz
class Message implements IPost {
   id: number;
   text: string;
   senderId: number;
   recieverId: number;
}

class ArticleComment implements IPost {
   id: number;
   text: string;
   senderId: number;
   articleId: number;
}

Otro gran beneficio son los modificadores de acceso. Hay tres en TypeScript: public, private y protected. Aquí tienes un ejemplo de su uso:

class User {
   //Miembros privados de la clase, que no son accesibles desde el exterior
   private id: number;
   private login: number;

   constructor(id: number, login: number) {
       this.id = id;
       this.login = login;
   }

   //Accesor al estilo Java
   public GetId(): number {
       return this.id;
   }

   //Accesor al estilo C#
   public get Login(): number {
       return this.login;
   }
}

También hay otras funcionalidades:

  • Definición de campos en el constructor;
  • Conversión de tipos;
  • Clases abstractas;
  • Generalización, etc.

En el futuro, todo esto puede aparecer en JavaScript, pero los navegadores empezarán a soportar estas funcionalidades mucho más tarde.

Desventajas de TypeScript

A los desarrolladores les gusta este lenguaje, y algunos proyectos grandes ya están migrando a él. Por ejemplo, el popular framework Angular.JS. Sin embargo, esto todavía no es suficiente para que sea tan popular como JavaScript. Esto se debe a que el desarrollo de una aplicación web en TypeScript es más caro y lleva más tiempo.

Especialmente si necesitas usar alguna biblioteca o framework que no esté portado a TS. En este caso, los desarrolladores tendrán que describir las firmas (indicar los tipos de datos) de todas las funciones y métodos por sí mismos, lo que es un proceso bastante largo, teniendo en cuenta el tamaño de las bibliotecas modernas.

Además, el umbral de entrada a TypeScript es más alto, ya que para aprovechar sus ventajas es importante conocer los tipos de datos y la programación orientada a objetos.

Instalación de TypeScript

Para usar TypeScript, primero instala Node.JS. Puedes leer cómo hacerlo en nuestro artículo. Después, escribe el siguiente comando en la consola:

npm install -g typescript

Ahora, crea un archivo con la extensión .ts en la carpeta con los scripts, en él escribiremos el código. Para compilar el código, será útil el comando tsc. Para compilar el archivo app.ts, escribe el comando:

tsc app.ts

Si todo va bien, aparecerá un archivo app.js en la carpeta, que conectaremos a la página.

También puedes crear un archivo de configuración en tsconfig.json para simplificar al máximo la compilación.

{
   "compilerOptions": {
       "target": "es5",
       "removeComments": true,
       "outFile": "app.js"
   }
}

En compilerOptions se almacenan todos los parámetros para el compilador:

  • target: estándar de JS al que se compila el código. Aquí se indica ECMAScript 5, ya que es compatible con todos los navegadores modernos;
  • removeComments: este parámetro determina si es necesario eliminar los comentarios;
  • outFile: archivo en el que se guarda el código JS.

Ahora, basta con escribir el comando tsc sin parámetros para compilar nuestro TypeScript. Ten en cuenta que el compilador afectará a todos los archivos con la extensión .ts en el directorio actual.

Escribimos una Aplicación en TypeScript

Ahora, crearemos una simple calculadora y veremos cómo se diferencia el código para ella en JS y en TS. Primero, creamos el formulario:

<input type="number" id="num1" value="0"/> + <input type="number" id="num2" value="0"/> <br />
<button id="btn">=</button>
<div id="result"></div>

Aquí hay dos campos para introducir números, un botón que inicia el script y un elemento para mostrar el resultado:

Ejemplo de formulario suma
Ejemplo de formulario suma

El código de TypeScript se ve así:

//Al obtener un elemento, podemos indicar su tipo
//En este caso, un campo de entrada
//Esto indica que el elemento obtenido contiene con seguridad las propiedades value y valueAsNumber, que necesitamos
//Si no especificamos el tipo HTMLInputElement, el compilador no entenderá que este elemento tiene la propiedad value y se negará a compilar
const num1 = <HTMLInputElement>document.getElementById("num1");
const num2 = <HTMLInputElement>document.getElementById("num2");

//Podemos no especificar el tipo del elemento si no necesitas ninguna propiedad específica
const result = document.getElementById("result");
const btn = document.getElementById("btn");

//Aunque no todos los navegadores modernos aún soportan las funciones flecha, el compilador TypeScript las reemplazará por una función anónima normal
//Con la condición de que en la configuración se especifique la especificación es5
btn.addEventListener("click", (e) => { Sum(); });

function Sum() {
   //En esta variable solo se puede añadir un valor numérico
   //Sin embargo, la entrada todavía debe comprobarse, ya que el usuario puede introducir cualquier cosa en lugar de un número
   let sum : number = num1.valueAsNumber + num2.valueAsNumber;

   //El tipo de la propiedad innerHTML es string, por lo que debemos convertir la variable sum a cadena
   result.innerHTML = sum.toString();
}

Y el código JS compilado para esta calculadora se ve así:

var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var result = document.getElementById("result");
var btn = document.getElementById("btn");
btn.addEventListener("click", function (e) { Sum(); });
function Sum() {
   var sum = num1.valueAsNumber + num2.valueAsNumber;
   result.innerHTML = sum.toString();
}

Conclusión

Aunque TypeScript tiene una sintaxis muy decente, JavaScript seguirá dominando el desarrollo frontend durante mucho tiempo. Por lo tanto, es necesario conocerlo de todos modos, incluso si no te gusta.

Categorizado en:

Javascript,