Características de TypeScript

Empezamos el curso viendo algunas de las ventajas características más importantes de TypeScript, que lo han hecho convertirse en un lenguaje popular y en rápido crecimiento.

Tipado estático

Sin duda uno de los rasgos distintivos de TypeScript es el tipado estático. A diferencia de JavaScript, donde los tipos se determinan en tiempo de ejecución, TypeScript nos permite definir los tipos de variables, parámetros y retornos de funciones en tiempo de desarrollo.

Esto ayuda a detectar errores antes de ejecutar el código, mejorando la calidad y seguridad del mismo.

Por ejemplo, supongamos que tenemos esta función,

function suma(a: number, b: number): number {
    return a + b;
}

Aquí hemos definido que suma es una función que acepta dos parámetros de tipo number y retorna un number.

Si intentamos pasar un string como argumento, TypeScript lanzará un error en tiempo de compilación.

suma("1", "2");  // esto te dara un error antes de compilar

Mientras que en JavaScript, no hubieras tenido ningún aviso o error de que algo no estaba yendo bien. (Lo que, seguramente, en algún momento te habría dado algún problema 😉)

Además, gracias al sistema de tipos, TypeScript ofrece un autocompletado más inteligente y una mejor ayuda en el desarrollo en comparación con JavaScript.

Programación orientada a objetos

TypeScript introduce conceptos de la programación orientada a objetos (POO) como clases, interfaces y herencia, que no son nativos en JavaScript (aunque algunos están presentes).

Estas características nos ayudan a organizar y estructurar del código, especialmente en proyectos grandes.

class Animal {
    constructor(public nombre: string) {}
    
    hacerSonido(): void {
        console.log(`${this.nombre} hace un sonido.`);
    }
}

class Perro extends Animal {
    ladrar(): void {
        console.log(`${this.nombre} ladra.`);
    }
}

const miPerro = new Perro('Firulais');
miPerro.hacerSonido(); // Firulais hace un sonido.
miPerro.ladrar(); // Firulais ladra.

Compatibilidad con JavaScript

Como he dicho, TypeScript es un superconjunto de JavaScript. Es decir, es una capa puesta por encima de JavaScript.

Por tanto, todo código JavaScript válido es también código TypeScript válido. Esto nos permite migrar gradualmente un proyecto JavaScript existente a TypeScript (sin tener que reescribir todo el código desde cero).

// Código JavaScript válido
function saludar(nombre) {
    return `Hola, ${nombre}`;
}

// Lo podemos ir convirtiendo gradualmente a TypeScript
function saludar(nombre: string): string {
    return `Hola, ${nombre}`;
}

Integración con herramientas y Frameworks

TypeScript se integra perfectamente con numerosos frameworks y bibliotecas populares, como Angular, React, y Vue.js. De hecho, Angular está escrito en TypeScript, lo que ha contribuido a su adopción.

La integración con herramientas de desarrollo modernas, como editores de código y sistemas de construcción, también es excelente. Por ejemplo, Visual Studio Code, desarrollado por Microsoft, ofrece soporte nativo para TypeScript, incluyendo autocompletado y refactorización.