TypeScript: una introducción a la extensión de JavaScript

TypeScript ofrece una serie de funciones que mejoran de manera fundamental el desarrollo de aplicaciones web. Este tutorial de TypeScript brinda una introducción al lenguaje de programación con explicaciones de las características, usos, ventajas y desventajas más importantes.

¿Qué es TypeScript?

TypeScript fue desarrollado por Microsoft y es una extensión de JavaScript muy utilizada en el desarrollo web. Una de sus características principales es la tipificación estática. A diferencia de JavaScript, que tiene tipado dinámico, en TypeScript puedes declarar tipos de datos para variables, funciones y parámetros, lo que ayuda a detectar errores por anticipado, incluso antes de ejecutar el código. Esto mejora significativamente la calidad del código y, al mismo tiempo, aumenta su legibilidad.

La sintaxis de TypeScript se parece mucho a la de JavaScript, lo que facilita la integración en proyectos de JavaScript existentes. De hecho, TypeScript es un superconjunto de JavaScript, por lo que cualquier código JavaScript correcto es también código TypeScript válido. Esto te permite migrar gradualmente a TypeScript y beneficiarte de las ventajas de la tipificación estática y otras características sin tener que reescribir completamente tu base de código.

Este es un ejemplo sencillo de JavaScript:

function greet(name) {
    return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"

En este código JavaScript, la función greet no está limitada a un tipo de datos específico para el parámetro name, por lo que la función puede llamarse sin errores incluso si se pasa un número como argumento.

En TypeScript, el código tiene la siguiente sintaxis:

function greet(name: string): string {
    return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScript

Aquí hemos declarado explícitamente el parámetro name como una cadena. Si ahora se llama a la función con un número, TypeScript mostrará un error, pues el tipo de datos que se ha pasado no coincide con el tipo de datos esperado.

Este ejemplo muestra cómo TypeScript ayuda a detectar errores por anticipado y a aumentar la calidad del código evitando usar tipos de datos incorrectos. No obstante, es importante tener en cuenta que TypeScript se compila en última instancia a JavaScript y puede ejecutarse en cualquier entorno de JavaScript, por lo que los beneficios de la seguridad de tipos solo se utilizan mientras se está desarrollando.

Las aplicaciones de TypeScript

TypeScript desempeña un papel fundamental en varias aplicaciones de desarrollo de software, especialmente en situaciones donde la seguridad de tipos y la calidad del código son decisivas.

Un ámbito importante de aplicación de TypeScript es el desarrollo web. En él garantiza que el código JavaScript escrito sea más seguro y fácil de mantener, lo que supone una ventaja en proyectos de frontend extensos en los que la base de código es compleja. Sin embargo, TypeScript también se puede implementar en el lado del servidor (backend) en aplicaciones Node.js para proporcionar una capa adicional de seguridad. En arquitecturas sin servidor como AWS Lambda y Azure Functions, TypeScript ayuda a minimizar los errores y garantizar una buena ejecución.

TypeScript también aporta muchos beneficios en el ámbito del desarrollo multiplataforma, ya que puede optimizar de manera significativa el desarrollo de aplicaciones multiplataforma y apps móviles. Frameworks como NativeScript y React Native ofrecen soporte para TypeScript en la programación de apps móviles para diversas plataformas. En el desarrollo de juegos, TypeScript se emplea en proyectos que utilizan WebGL o motores de juego como Phaser o Babylon.js. Su seguridad tipográfica ayuda a mejorar la calidad y facilidad de mantenimiento de los juegos.

También se recurre a TypeScript para proyectos de visualización y análisis de datos. Bibliotecas como D3.js ofrecen soporte para TypeScript, lo que permite crear de paneles y visualizaciones sofisticadas.

¿Cómo se instala TypeScript?

Instalar TypeScript es muy fácil y solo hay que seguir unos pasos. Si tienes Node.js instalado en tu ordenador, puedes instalar TypeScript utilizando npm (Node Package Manager).

Paso 1. Descargar Node.js

Comprueba si tienes instalado Node.js en el ordenador. Si aún no lo tienes, puedes descargarlo e instalarlo desde la página web oficial.

Paso 2. Instalar TypeScript en la terminal

Abre la ventana de comandos de tu sistema operativo (por ejemplo, el sistema de comandos de Windows, la Terminal en macOS o Linux) e introduce el siguiente comando para instalar TypeScript de forma global.

npm install -g typescript

La opción -g (global) indica que TypeScript se instalará en todo tu sistema, por lo que podrás usarlo desde cualquier lugar.

Paso 3. Mostrar la versión instalada

Ejecuta este comando para comprobar si la instalación se ha realizado correctamente:

tsc -v

Este comando muestra la versión instalada de TypeScript. Si ves el número de versión, significa que la instalación se habrá realizado correctamente.

Después de la instalación, puedes crear archivos TypeScript (con la extensión .ts) y compilarlos con el compilador TypeScript tsc para generar archivos JavaScript.

Paso 4. Crear archivos TypeScript

Crea un archivo TypeScript, por ejemplo app.ts, e inserta tu código TypeScript.

type Person = { name: string, age: number };
const alice: Person = { name: "Alice", age: 30 };
console.log(`Hello, I am ${alice.name} and I am ${alice.age} years old.`);

Paso 5. Compilar archivos

Compila el archivo TypeScript introduciendo el siguiente comando:

tsc app.ts

De esta forma, compilas app.ts en un archivo JavaScript con el nombre app.js. Después puedes ejecutar el archivo JavaScript.

Características de TypeScript

El desarrollo web ha experimentado un gran avance en los últimos años y TypeScript ha surgido como una potente alternativa a JavaScript. A continuación, te resumimos sus características más importantes.

Tipificación estática

La tipificación estática es un aspecto esencial de TypeScript y se refiere a la definición de tipos de datos para variables, parámetros, funciones y otros elementos de tu código. A diferencia del tipado dinámico en JavaScript, donde los tipos de datos se determinan en tiempo de ejecución, en TypeScript los tipos de datos se declaran durante el desarrollo antes de que se ejecute el código. Por tanto, los tipos ayudan a reconocer errores y problemas lógicos por anticipado.

function add(a: number, b: number): number {
    return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type Error

En este ejemplo, se utiliza la tipificación estática para la función add. Los dos parámetros a y b están declarados como números (number), y la función devuelve un valor del tipo number. Es decir, si se intenta llamar a esta función con otros tipos de datos, TypeScript detectará estos intentos como errores.

Tipificación opcional

Con la tipificación opcional es posible asignar tipos a determinadas variables y parámetros, mientras que otros permanecen sin tipificación explícita.

function sayHello(name: string, age: any): string {
    if (age) {
        return `Hello, ${name}, you are ${age} years old.`;
    } else {
        return `Hello, ${name}.`;
    }
}

La función sayHello está definida con los parámetros name y age. El tipo any indica que el parámetro age puede aceptar cualquier tipo de dato.

Funciones ES6+

TypeScript es compatible con las funciones modernas de JavaScript, incluidas ES6 y otras más recientes como funciones flecha y cadenas de plantilla.

const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;

Las funciones flecha (arrow functions en inglés) permiten una sintaxis más corta y concisa.

Organización del código

Gracias a los módulos y espacios de nombres, TypeScript ofrece una mejor organización del código y garantiza que este se divida en partes reutilizables.

// Math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);

En el anterior ejemplo, la organización del código se ilustra con la ayuda de módulos y el uso de import y export. La función add se define en un módulo separado Math.ts y se importa e instala en otro módulo Main.ts.

Programación orientada a objetos (POO)

TypeScript simplifica la programación orientada a objetos al permitir el uso de clases TypeScript, interfaces y herencia.

class Person {
    constructor(public name: string, public age: number) {}
    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
const person = new Person("Alice", 30);
person.greet();

Este ejemplo muestra cómo usar clases y programación orientada a objetos (OOP) en TypeScript. La clase Person tiene las propiedades name, age y un método greet para presentarse y dar información sobre sí misma.

Sistema de tipos ampliado

El sistema de tipos de TypeScript es flexible y extenso. Se pueden crear tipos e interfaces definidos por el usuario e incluso ampliar tipos existentes.

interface Animal {
    name: string;
}
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };

La interfaz Animal define una propiedad name, mientras que la interfaz Dog (perro) hereda de Animal y añade una propiedad adicional breed (raza). El objeto myDog (mi perro) tiene las características de ambas interfaces.

Compatibilidad con JavaScript

TypeScript es compatible con JavaScript y puede ejecutarse en cualquier entorno JavaScript, lo que facilita su integración gradual en los proyectos JavaScript existentes.

// JavaScript-Code
function greet(name) {
    return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
    return "Hello, " + name;
}

El código JavaScript (sin tipado) puede utilizarse en un código TypeScript (con tipado) sin ningún problema.

Ventajas y desventajas de TypeScript

TypeScript ofrece una serie de ventajas, pero también tiene algunas desventajas. A continuación, se expone un resumen de los argumentos a favor y en contra del superconjunto.

Ventajas

TypeScript cuenta con un amplio ecosistema de definiciones de tipos para muchas bibliotecas y frameworks JavaScript. Esto facilita la integración de código de terceros en proyectos de TypeScript, lo que resulta muy útil en el mundo actual de las aplicaciones web, que a menudo dependen de múltiples bibliotecas y frameworks.

Además de la tipificación estática, TypeScript proporciona una variedad de características de desarrollo, incluidas interfaces, clases, módulos y soporte para los estándares actuales de ECMAScript. Estas características mejoran la estructura del código, facilitan el mantenimiento y la escalabilidad de los proyectos, y aumentan la productividad durante el desarrollo. TypeScript también es compatible con muchos entornos de desarrollo integrado (IDE), como Visual Studio Code.

Desventajas

TypeScript requiere un periodo de aprendizaje inicial, sobre todo para los desarrolladores que solo han trabajado con JavaScript. Su código debe compilarse a JavaScript antes de ejecutarse en navegadores o entornos Node.js, lo que añade un paso más al proceso de desarrollo.

En proyectos más pequeños, TypeScript puede parecer excesivamente complejo, pues los beneficios de la seguridad de tipos pueden no ser tan evidentes. Debido a la información de tipos adicional y al paso de compilación, los proyectos de TypeScript pueden requerir más recursos.

Alternativas a TypeScript

Existen varios lenguajes de programación web como alternativa a TypeScript cuyo uso dependerá de las exigencias del proyecto y las preferencias de los desarrolladores.

• Flow: es un tipado estático para JavaScript desarrollado por Facebook. Permite añadir tipos al código JavaScript sin tener que hacer un cambio completo a TypeScript y es una buena opción si quieres integrar gradualmente la tipificación en tus proyectos JavaScript.
• Dart: es un lenguaje de programación desarrollado por Google con el que se pueden crear aplicaciones web y apps móviles. Ofrece seguridad tipográfica y un buen rendimiento y suele emplearse en combinación con el framework Flutter para desarrollar aplicaciones móviles.
• PureScript: es un lenguaje de programación funcional estrictamente tipado que incluye una fuerte seguridad de tipos. Permite incorporar bibliotecas JavaScript.
• Elm: es un lenguaje funcional estrictamente tipado para desarrollar aplicaciones web. Promueve el patrón de la arquitectura de Elm y dispone de un alto nivel de seguridad de tipos.
• ReasonML (BuckleScript): se trata de un lenguaje desarrollado por Facebook y basado en Ocaml que compila a JavaScript. Además, proporciona seguridad de tipos y una fuerte integración con React para el desarrollo frontend.