TypeScript para Oposiciones TAI: Guía Completa

¿Qué es TypeScript?

TypeScript es un lenguaje de programación desarrollado por Microsoft que amplía JavaScript añadiendo un sistema de tipado estático, comprobación de errores en tiempo de compilación y características avanzadas para desarrollar aplicaciones de gran tamaño.

El código TypeScript no se ejecuta directamente en el navegador, sino que debe compilarse (transpilarse) a JavaScript.

Conceptos fundamentales

Para comprender TypeScript es imprescindible conocer los siguientes conceptos:

• Tipado estático: los tipos se comprueban antes de ejecutar el programa.
• Compilación (Transpilación): conversión de TypeScript a JavaScript.
• Interfaces: definen la estructura que debe cumplir un objeto.
• Tipos: describen el tipo de dato que puede almacenar una variable.
• Inferencia de tipos: TypeScript deduce automáticamente muchos tipos.

Funcionamiento de TypeScript

El flujo de trabajo habitual es el siguiente:

Código TypeScript (.ts)

↓

Compilador (tsc)

↓

Código JavaScript (.js)

↓

Navegador o Node.js

Durante la compilación se detectan errores de tipo antes de ejecutar la aplicación.

Características de TypeScript

TypeScript presenta las siguientes características:

• Tipado estático opcional.
• Compatible con JavaScript.
• Compilación a JavaScript.
• Inferencia automática de tipos.
• Soporte para programación orientada a objetos.
• Excelente integración con IDEs.

Tipado estático

En TypeScript es posible indicar el tipo de cada variable.

let nombre: string = "Rubén";
let edad: number = 30;
let activo: boolean = true;

Si se intenta asignar un valor incompatible, el compilador mostrará un error.

let edad: number = "treinta"; // Error

Tipos de datos

Los tipos más utilizados son:

Interfaces

Las interfaces permiten definir la estructura que debe cumplir un objeto.

interface Usuario {
    nombre: string;
    edad: number;
}

Posteriormente pueden utilizarse para crear objetos.

const usuario: Usuario = {
    nombre: "Ana",
    edad: 25
};

Clases

TypeScript amplía las capacidades orientadas a objetos de JavaScript.

class Persona {

    constructor(
        public nombre: string,
        public edad: number
    ) {}

    saludar() {
        console.log("Hola");
    }

}

Las clases admiten:

• Herencia.
• Encapsulación.
• Interfaces.
• Modificadores de acceso (public, private, protected).

Genéricos (Generics)

Los genéricos permiten crear funciones y clases reutilizables para distintos tipos.

function identidad<T>(valor: T): T {
    return valor;
}

Puede utilizarse con cualquier tipo.

identidad<string>("Hola");
identidad<number>(10);

Comparación JavaScript vs TypeScript

Caso práctico

Situación

Un desarrollador crea una función que recibe la edad de un usuario.

function calcularEdad(edad: number) {
    return edad + 1;
}

Posteriormente intenta llamarla así:

calcularEdad("25");

El compilador detectará un error porque la función espera un valor de tipo number.

Ventajas e inconvenientes

Ventajas

• Mayor seguridad del código.
• Detección temprana de errores.
• Mejor autocompletado en los IDE.
• Facilita el mantenimiento de proyectos grandes.
• Excelente integración con frameworks modernos.
• Compatible con JavaScript.

Inconvenientes

• Requiere un proceso de compilación.
• Curva de aprendizaje superior a JavaScript.
• Puede resultar innecesario en proyectos muy pequeños.
• Añade cierta complejidad inicial.

Errores habituales

• Pensar que sustituye completamente a JavaScript.
• Creer que los tipos existen durante la ejecución.
• Abusar del tipo any.
• Confundir interfaces con clases.
• Pensar que el navegador ejecuta archivos .ts directamente.
• Olvidar que es necesario compilar el código.

Cómo evitarlos

• Recordar que TypeScript transpila a JavaScript.
• Utilizar tipos específicos siempre que sea posible.
• Emplear interfaces para definir estructuras de datos.
• Reservar any únicamente para casos excepcionales.
• Comprender el proceso de compilación.

Relaciones con otros temas

TypeScript está directamente relacionado con:

• JavaScript.
• ECMAScript.
• Node.js.
• Angular.
• React.
• Vue.
• Programación orientada a objetos.
• Compiladores.
• Desarrollo web.

Conceptos clave para recordar

[!NOTE]

• TypeScript es un superset de JavaScript desarrollado por Microsoft.
• Todo código JavaScript válido también es código TypeScript válido.
• Añade tipado estático y comprobación de errores durante la compilación.
• El código TypeScript debe transpilarse a JavaScript antes de ejecutarse.
• Las interfaces definen la estructura que deben cumplir los objetos.
• Los genéricos permiten reutilizar código manteniendo la seguridad de tipos.
• El tipo any elimina la comprobación de tipos y debe utilizarse con moderación.
• TypeScript mejora la mantenibilidad, la escalabilidad y la productividad en proyectos de desarrollo web.