Angular é baseado em TypeScript, um superconjunto de JavaScript que introduz segurança de tipo, permitindo que os desenvolvedores detectem possíveis erros durante o desenvolvimento, e não em tempo de execução. Para desenvolvedores familiarizados com TypeScript, este será um cenário familiar, mas se você é novo no TypeScript, vamos revisar alguns de seus principais recursos, que incluem digitação estática, interfaces, propriedades de classe e níveis de acessibilidade (como público e privado). Esses recursos serão cruciais ao longo de sua jornada no desenvolvimento Angular.

1. Digitação estática

Um dos principais recursos do TypeScript é a digitação estática. Ao contrário do JavaScript, onde as variáveis ​​podem conter valores de qualquer tipo, o TypeScript permite que você especifique explicitamente os tipos de variáveis, propriedades e parâmetros.

Em JavaScript simples, você pode declarar variáveis ​​como esta:

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

No TypeScript, você pode impor tipos de dados adicionando-os à declaração de variável:

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

Com esta configuração, TypeScript garante que name seja sempre uma string e age seja sempre um número. Se você tentar atribuir um valor inválido, como uma string para idade, o compilador TypeScript gerará um erro e o código não será compilado.

Isso ajuda a evitar possíveis bugs em seu código, detectando erros durante o desenvolvimento, dando a você mais confiança na correção de seu código.

2. Interfaces

No TypeScript, interfaces permitem definir a forma de um objeto. Isso significa que você pode especificar as propriedades necessárias e seus tipos, e o TypeScript garantirá que qualquer objeto atribuído a esta interface esteja em conformidade com a forma.

Por exemplo, vamos definir uma interface para um objeto Cat:

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

Agora, quando você cria um objeto gato, ele deve aderir a esta interface:

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

Neste caso, nome e idade são campos obrigatórios, mas raça é opcional devido ao ?. Se você tentar atribuir um objeto Cat que não esteja em conformidade com a interface, o TypeScript sinalizará o problema:

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

Você também pode tornar as propriedades opcionais usando o ? símbolo, permitindo flexibilidade quando necessário, mas ainda mantendo a segurança do tipo.

3. Propriedades da classe

As classes TypeScript são semelhantes às classes JavaScript, mas com segurança de tipo e recursos adicionais. Por exemplo, você pode declarar explicitamente tipos para propriedades de classe:

class Cat {
    name: string;
    age: number;

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

Isso garante que name seja sempre uma string e age seja sempre um número. Além disso, você pode definir propriedades sem inicializá-las no construtor:

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

TypeScript garantirá que essas propriedades estejam em conformidade com os tipos que você declarou, tornando seu código mais previsível e mais fácil de depurar.

4. Acessibilidade Pública e Privada

Outro recurso importante no TypeScript é a capacidade de controlar a acessibilidade aos membros da classe (propriedades e métodos) usando modificadores de acesso público e privado. Por padrão, todos os membros da classe são públicos tanto em JavaScript quanto em TypeScript, o que significa que podem ser acessados ​​de qualquer lugar. No entanto, você pode marcar explicitamente os membros da classe como privados para restringir sua acessibilidade dentro da classe.

Por exemplo:

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}`;
    }
}

Neste exemplo, a propriedade name é pública, portanto pode ser acessada fora da classe, mas a propriedade age é privada, portanto só pode ser acessada dentro da própria classe.

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

O uso de private garante o encapsulamento, evitando alterações acidentais ou acesso a dados confidenciais da classe de fora da classe.

5. Abreviação do Construtor

TypeScript fornece uma abreviação útil para declarar e inicializar propriedades por meio do construtor. Em vez de declarar propriedades manualmente e atribuí-las no construtor, você pode declará-las diretamente na lista de parâmetros do construtor.

Aqui está um exemplo básico:

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

Este código é funcionalmente equivalente ao seguinte:

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

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

A abreviatura do construtor simplifica o código e reduz a repetição. O TypeScript gera automaticamente as declarações e atribuições de propriedades necessárias, evitando que você escreva código extra.

Conclusão

Neste artigo, abordamos alguns dos principais recursos do TypeScript que você encontrará frequentemente no desenvolvimento Angular:

• Digitação estática garante que suas variáveis, propriedades e parâmetros tenham tipos consistentes.
• Interfaces permitem que você defina a forma dos objetos, adicionando mais estrutura ao seu código.
• Propriedades de classe fornecem às suas classes declarações explícitas e de tipo seguro para campos.
• Acessibilidade pública e privada garante acesso controlado aos alunos, melhorando o encapsulamento do código.
• Abreviação do construtor simplifica o processo de inicialização de propriedades dentro das classes.

Esses recursos do TypeScript são fundamentais para escrever aplicativos Angular robustos e de fácil manutenção. Compreendê-los ajudará você a aproveitar todo o potencial do Angular à medida que cria aplicativos escalonáveis ​​e com segurança de tipo.

A seguir, vamos mergulhar na preparação do seu ambiente de desenvolvimento para Angular e configurar as ferramentas necessárias para começar!