Comenzando con TypeScript: Las Bases Explicadas

TypeScript es una extensión de JavaScript que agrega tipado estático a tu código. Esto ayuda a detectar errores en tiempo de compilación, haciendo que tu código sea más robusto y mantenible. En este artículo, exploraremos las bases de TypeScript con ejemplos claros y concisos para ayudarte a comenzar.

¿Por qué usar TypeScript?

Antes de sumergirnos en el código, aquí tienes algunas ventajas clave de TypeScript:

1. Tipado estático: Ayuda a detectar errores antes de la ejecución.
2. Autocompletado y documentación: Herramientas como VS Code ofrecen autocompletado y documentación mejorados gracias a TypeScript.
3. Interoperabilidad: TypeScript funciona perfectamente con proyectos existentes de JavaScript.
4. Código mantenible: Los tipos facilitan la colaboración en equipo y la gestión de proyectos complejos.

Instalando TypeScript

Para empezar con TypeScript, instálalo globalmente a través de npm:

npm install -g typescript

Para verificar que TypeScript está instalado:

tsc --version

Tu Primer Archivo TypeScript

Crea un archivo llamado app.ts:

function greet(name: string): string {
    return `¡Hola, ${name}!`;
}

const message = greet("Alice");
console.log(message);

Compila este archivo con el siguiente comando:

tsc app.ts

Esto generará un archivo app.js que puedes ejecutar con Node.js.

Tipos Básicos

1. Tipo string

const firstName: string = "John";

2. Tipo number

const age: number = 25;

3. Tipo boolean

const isDeveloper: boolean = true;

4. Arreglos

const skills: string[] = ["TypeScript", "JavaScript", "React"];

5. Objetos

const user: { name: string; age: number } = {
    name: "Alice",
    age: 30,
};

6. Tipo any

El tipo any desactiva la verificación de tipos. Sin embargo, su uso debe evitarse siempre que sea posible.

let randomValue: any = "Hola";
randomValue = 42; // No hay problemas aquí.

Funciones en TypeScript

TypeScript permite definir tipos para los parámetros y valores de retorno de una función.

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

const sum = add(10, 20);
console.log(sum);

Los parámetros también pueden ser opcionales:

function greetUser(name: string, age?: number): string {
    return age ? `Hola, ${name}. Tienes ${age} años.` : `Hola, ${name}.`;
}

console.log(greetUser("Alice"));
console.log(greetUser("Bob", 25));

Interfaces y Tipos

Las interfaces definen estructuras para los objetos.

interface User {
    name: string;
    age: number;
    isAdmin: boolean;
}

const newUser: User = {
    name: "Charlie",
    age: 28,
    isAdmin: false,
};

Los tipos también pueden usarse para crear alias:

type Point = {
    x: number;
    y: number;
};

const origin: Point = { x: 0, y: 0 };

Enumeraciones (Enums)

Los enums se usan para definir un conjunto de valores constantes.

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

const move = Direction.Up;
console.log(move); // Imprime 0 (índice del valor)

Clases

TypeScript admite programación orientada a objetos con clases e interfaces.

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet(): string {
        return `Hola, me llamo ${this.name} y tengo ${this.age} años.`;
    }
}

const person = new Person("Alice", 30);
console.log(person.greet());

Configurando tsconfig.json

Para configurar tu proyecto TypeScript, inicializa un archivo tsconfig.json:

tsc --init

Un archivo de configuración típico puede verse así:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

Conclusión

TypeScript es una herramienta poderosa para escribir código JavaScript más seguro y mantenible. Al comprender lo básico, como tipos, interfaces y clases, estarás bien equipado para construir aplicaciones robustas.

No dudes en explorar más y aplicar TypeScript a tus proyectos existentes para experimentar todos sus beneficios.