O básico do typescript que você precisa saber

O básico do typescript que você precisa saber

No universo do desenvolvimento web, o JavaScript reina supremo, mas muitas vezes apresenta desafios em projetos maiores devido à sua natureza dinâmica. É aqui que o TypeScript entra em cena, oferecendo uma solução poderosa para aprimorar a robustez e a manutenibilidade do seu código. Se você está começando ou procurando solidificar seu conhecimento, este artigo cobrirá o básico do typescript que você precisa saber para começar a usá-lo com confiança.

TypeScript é um superset tipado de JavaScript que compila para JavaScript simples. Ele adiciona tipagem estática opcional, interfaces e outras ferramentas de desenvolvimento que facilitam a criação de aplicações escaláveis e com menos bugs. Vamos mergulhar nos conceitos fundamentais.

1. O Que É TypeScript e Por Que Usá-lo?

Em essência, TypeScript é JavaScript com esteroides. Ele permite que você defina os tipos de suas variáveis, parâmetros de função e retornos, objetos e muito mais. Isso traz uma série de benefícios:

• Detecção de Erros Precoce: Muitos erros comuns de tempo de execução podem ser pegos durante o tempo de compilação.
• Melhor Autocompletar e Refatoração: Editores de código como VS Code oferecem uma experiência de desenvolvimento muito mais rica com TypeScript.
• Código Mais Legível: As tipagens servem como documentação, facilitando a compreensão do código por outros desenvolvedores (e por você mesmo no futuro).
• Escalabilidade: Ideal para grandes bases de código e equipes maiores.

2. Tipos Primitivos

Assim como em outras linguagens tipadas, TypeScript oferece tipos para os valores mais básicos:

• number: Para números inteiros e de ponto flutuante.
• string: Para texto.
• boolean: Para verdadeiro/falso.

let idade: number = 30;
let nome: string = "Alice";
let estaAtivo: boolean = true;

Inferência de Tipo

Na maioria das vezes, o TypeScript pode inferir o tipo de uma variável com base no valor que você atribui a ela. Isso significa que você nem sempre precisa declarar explicitamente o tipo.

let cidade = "São Paulo"; // TypeScript infere 'string'
let populacao = 12_000_000; // TypeScript infere 'number'

O Tipo any (Cuidado!)

O tipo any permite que você use variáveis de forma similar ao JavaScript puro, ou seja, sem tipagem. Embora seja útil para migrar códigos legados ou interagir com bibliotecas sem tipos, usá-lo excessivamente anula os benefícios do TypeScript.

let dados: any = "qualquer coisa";
dados = 123; // Isso é permitido com 'any'
dados.propriedadeInexistente(); // Nenhuma verificação de erro em tempo de compilação

3. Tipos de União (Union Types)

Às vezes, uma variável pode ter mais de um tipo possível. Os tipos de união permitem que você declare isso usando o operador |.

let id: string | number;
id = "abc-123";
id = 456;
// id = true; // Erro! Tipo 'boolean' não é atribuível a 'string | number'

4. Funções

Tipar funções é crucial para garantir que os parâmetros corretos sejam passados e que o valor de retorno seja o esperado.

function saudacao(nome: string): string {
    return `Olá, ${nome}!`;
}

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

// Exemplos de uso
console.log(saudacao("Carlos")); // Saída: Olá, Carlos!
console.log(soma(5, 3));        // Saída: 8

5. Type Aliases e Interfaces

Para tipos mais complexos, como objetos, você pode definir seus próprios tipos para torná-los reutilizáveis e mais legíveis. Esta é uma parte fundamental de o básico do typescript que você precisa saber para organizar seu código.

Type Aliases

Usados para dar um novo nome a qualquer tipo existente (primitivo, união, objeto, etc.).

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

let pontoA: Ponto = { x: 10, y: 20 };
// let pontoB: Ponto = { x: 10, y: "vinte" }; // Erro! 'string' não é atribuível a 'number'

Interfaces

Semelhante aos Type Aliases para objetos, mas com algumas diferenças sutis (interfaces podem ser implementadas por classes e estendidas). Geralmente, interfaces são preferidas para definir formas de objetos.

interface Usuario {
    nome: string;
    idade: number;
    email?: string; // O '?' indica que a propriedade é opcional
}

let usuario1: Usuario = {
    nome: "Ana",
    idade: 28
};

let usuario2: Usuario = {
    nome: "Bruno",
    idade: 35,
    email: "bruno@example.com"
};

6. Classes

TypeScript oferece suporte completo a classes, com recursos adicionais de tipagem e modificadores de acesso (public, private, protected).

class Livro {
    titulo: string;
    autor: string;
    private anoPublicacao: number; // Apenas acessível dentro da classe

    constructor(titulo: string, autor: string, anoPublicacao: number) {
        this.titulo = titulo;
        this.autor = autor;
        this.anoPublicacao = anoPublicacao;
    }

    descrever(): string {
        return `${this.titulo} por ${this.autor}, publicado em ${this.anoPublicacao}.`;
    }
}

let meuLivro = new Livro("Dom Casmurro", "Machado de Assis", 1899);
console.log(meuLivro.descrever()); // Saída: Dom Casmurro por Machado de Assis, publicado em 1899.
// console.log(meuLivro.anoPublicacao); // Erro! 'anoPublicacao' é privado.

7. Enums

Enums são uma maneira de definir um conjunto de constantes nomeadas, tornando o código mais legível e menos propenso a erros quando se lida com um conjunto específico de valores.

enum StatusPedido {
    Pendente,      // 0
    Processando,   // 1
    Enviado,       // 2
    Entregue       // 3
}

let statusAtual: StatusPedido = StatusPedido.Processando;
console.log(statusAtual); // Saída: 1 (o valor numérico associado)

enum Cores {
    Vermelho = "#FF0000",
    Verde = "#00FF00",
    Azul = "#0000FF"
}

let corPrincipal: Cores = Cores.Vermelho;
console.log(corPrincipal); // Saída: #FF0000

8. Generics

Generics permitem que você escreva componentes que podem trabalhar com qualquer tipo, em vez de um único tipo específico. Isso aumenta a flexibilidade e a reutilização do código, mantendo a segurança de tipo. Embora um pouco mais avançado, é útil conhecer o básico do typescript que você precisa saber sobre eles.

function identidade<T>(arg: T): T {
    return arg;
}

let saidaNumero = identidade(10); // saidaNumero é do tipo number
let saidaString = identidade("olá mundo"); // saidaString é do tipo string

console.log(saidaNumero);   // Saída: 10
console.log(saidaString); // Saída: olá mundo

Conclusão

Compreender o básico do typescript que você precisa saber é o primeiro passo para escrever código JavaScript mais robusto, escalável e fácil de manter. A tipagem estática, as interfaces, as classes e os enums oferecem ferramentas poderosas para construir aplicações mais confiáveis. Ao adotar o TypeScript, você não apenas melhora a qualidade do seu código, mas também otimiza sua experiência de desenvolvimento com ferramentas aprimoradas.

Continue explorando e praticando esses conceitos. Quanto mais você usa o TypeScript, mais naturais eles se tornam, e mais você apreciará os benefícios que ele traz para seus projetos.