Angular se basa en TypeScript, un superconjunto de JavaScript que introduce seguridad de tipos, lo que permite a los desarrolladores detectar posibles errores durante el desarrollo en lugar de en tiempo de ejecución. Para los desarrolladores familiarizados con TypeScript, este será un panorama familiar, pero si es nuevo en TypeScript, revisemos algunas de sus características clave, que incluyen escritura estática, interfaces, propiedades de clase y niveles de accesibilidad (como público y privado). Estas características serán cruciales a lo largo de su viaje en el desarrollo de Angular.

1. Escritura estática

Una de las características principales de TypeScript es la escritura estática. A diferencia de JavaScript, donde las variables pueden contener valores de cualquier tipo, TypeScript le permite especificar explícitamente los tipos de variables, propiedades y parámetros.

En JavaScript simple, puedes declarar variables como esta:

let name = "Whiskers";
let age = 5;

En TypeScript, puede aplicar tipos de datos agregándolos a la declaración de variable:

let name: string = "Whiskers";
let age: number = 5;

Con esta configuración, TypeScript garantiza que el nombre sea siempre una cadena y la edad sea siempre un número. Si intenta asignar un valor no válido, como una cadena a la edad, el compilador de TypeScript arrojará un error y el código no se compilará.

Esto ayuda a prevenir posibles errores en su código al detectar errores durante el desarrollo, lo que le brinda más confianza en la corrección de su código.

2. Interfaces

En TypeScript, las interfaces le permiten definir la forma de un objeto. Esto significa que puede especificar las propiedades requeridas y sus tipos, y TypeScript se asegurará de que cualquier objeto asignado a esta interfaz se ajuste a la forma.

Por ejemplo, definamos una interfaz para un objeto Cat:

interface Cat {
    name: string;
    age: number;
    breed?: string; // optional property
}

Ahora, cuando creas un objeto gato, debe adherirse a esta interfaz:

const fluffy: Cat = {
    name: "Fluffy",
    age: 3
};

En este caso, el nombre y la edad son campos obligatorios, pero la raza es opcional debido a ?. Si intenta asignar un objeto Cat que no se ajusta a la interfaz, TypeScript marcará el problema:

const wrongCat: Cat = {
    name: "Whiskers",
    // missing 'age' property
};

También puedes hacer que las propiedades sean opcionales usando ? símbolo, lo que permite flexibilidad cuando sea necesario, pero aún mantiene la seguridad del tipo.

3. Propiedades de clase

Las clases de TypeScript son similares a las clases de JavaScript pero con características y seguridad de tipos adicionales. Por ejemplo, puede declarar explícitamente tipos para propiedades de clase:

class Cat {
    name: string;
    age: number;

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

Esto garantiza que el nombre sea siempre una cadena y la edad sea siempre un número. Además, puede definir propiedades sin inicializarlas en el constructor:

class Cat {
    name: string;
    breed?: string;
}

TypeScript garantizará que estas propiedades se ajusten a los tipos que has declarado, lo que hará que tu código sea más predecible y más fácil de depurar.

4. Accesibilidad pública y privada

Otra característica importante de TypeScript es la capacidad de controlar la accesibilidad a los miembros de la clase (propiedades y métodos) utilizando modificadores de acceso públicos y privados. De forma predeterminada, todos los miembros de la clase son públicos tanto en JavaScript como en TypeScript, lo que significa que se puede acceder a ellos desde cualquier lugar. Sin embargo, puedes marcar explícitamente a los miembros de la clase como privados para restringir su acceso dentro de la clase.

Por ejemplo:

class Cat {
    public name: string;
    private age: number;

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

    speak() {
        return `Meow! I am ${this.name}`;
    }
}

En este ejemplo, la propiedad de nombre es pública, por lo que se puede acceder a ella fuera de la clase, pero la propiedad de edad es privada, por lo que solo se puede acceder a ella dentro de la clase misma.

const whiskers = new Cat("Whiskers", 5);
console.log(whiskers.name); // Works fine
console.log(whiskers.age); // Error: 'age' is private

El uso de privado garantiza la encapsulación, evitando cambios accidentales o acceso a datos confidenciales de la clase desde fuera de la clase.

5. Taquigrafía del constructor

TypeScript proporciona una taquigrafía útil para declarar e inicializar propiedades a través del constructor. En lugar de declarar propiedades manualmente y asignarlas en el constructor, puede declararlas directamente en la lista de parámetros del constructor.

Aquí tienes un ejemplo básico:

class Cat {
    constructor(public name: string, private age: number) {}
}

Este código es funcionalmente equivalente al siguiente:

class Cat {
    public name: string;
    private age: number;

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

La abreviatura del constructor simplifica el código y reduce la repetición. TypeScript genera automáticamente las declaraciones y asignaciones de propiedades necesarias, lo que le evita tener que escribir código adicional.

Conclusión

En este artículo, cubrimos algunas de las características clave de TypeScript que encontrará con frecuencia en el desarrollo de Angular:

• La escritura estática garantiza que sus variables, propiedades y parámetros tengan tipos consistentes.
• Las interfaces le permiten definir la forma de los objetos, agregando más estructura a su código.
• Las propiedades de clase brindan a sus clases declaraciones explícitas y de tipo seguro para los campos.
• La accesibilidad pública y privada garantiza el acceso controlado a los miembros de la clase, mejorando la encapsulación del código.
• Taquigrafía del constructor simplifica el proceso de inicialización de propiedades dentro de las clases.

Estas características de TypeScript son fundamentales para escribir aplicaciones Angular sólidas y fáciles de mantener. Comprenderlos le ayudará a aprovechar todo el potencial de Angular a medida que crea aplicaciones escalables y con seguridad de tipos.

A continuación, profundicemos en preparar su entorno de desarrollo para Angular y configuremos las herramientas que necesitará para comenzar.