DEV Community

Yuri Peixinho
Yuri Peixinho

Posted on

Introdução ao Typescript

Introdução

Typescript é um superset do Javascript, significa que qualquer código JS válido é um TS válido. A ideia central é a adição de um sistema de tipos estáticos, que detecta erros antes de o código rodar.

Por que usar Typescript?

Em JS puro, o interpretador só descobre erros em runtime (tempo de execução). Typescript move essa detecção para o momento do desenvolvimento: se você passar uma string onde um number é esperada, o editor sublinha o erro. Em projetos grandes isso significa menos bugs silenciosos e refatorações muito mais seguras.

Além disso:

  1. Documentação viva: Os tipos são documentação que o compilador verifica. Não fica desatualizada.
  2. IntelliSense: Autocompletar preciso no VS Code, navegação por definição, refatoração segura.
  3. Escalabilidade: Em projetos grandes (monorepo, times distribuídos), tipagem é essencial para manutenção.
  4. Adoção gradual: Pode adicionar TS num projeto JS existente arquivo a arquivo, sem reescrever tudo.

Outra diferença relevante: os tipos do TypeScript somem em runtime. Em C#, por exemplo,o sistema de tipos existe em tempo de execução (você pode fazer reflection, por exemplo). No TS, após compilar para JS, não sobra nenhum vestígio dos tipos, eles existem só para te ajudar durante o desenvolvimento.

Os pilares principais

!image.png

Tipagem estática

Você declara o tipo das variáveis, parâmetros e retornos de função.

let nome: string = "Ana";
let idade: number = 30;
let ativo: boolean = true;
let qualquerCoisa: any = "sem restrição"; // foge da checagem

________________________________________________________________
// Sem tipagem — erro só em runtime
function soma(a, b) {
  return a + b;
}
soma("5", 3); // Retorna "53" 😱

// Tipagem — erro em compilação
function somar(a: number, b: number) {
    return a + b;
}
soma("5", 3); // ❌ Erro
Enter fullscreen mode Exit fullscreen mode

Interfaces e Types

Definem a estrutura esperada de um objeto. Funciona como um contrato:

interface Usuario {
  id: number;
  nome: string;
  email?: string; // ? = campo opcional
}

function exibir(user: Usuario) {
  console.log(user.nome);
}
Enter fullscreen mode Exit fullscreen mode

Generics

Permite escrever código que funciona com qualquer tipo, mas ainda com segurança:

function primeiro<T>(lista: T[]): T {
  return lista[0];
}

primeiro([1, 2, 3]);       // retorna number
primeiro(["a", "b"]);      // retorna string
Enter fullscreen mode Exit fullscreen mode

O T é um placeholder — o TypeScript descobre o tipo real quando você chama a função.

Enums

Representam um conjunto fixo de valores nomeados:

enum Status {
  Pendente,
  Ativo,
  Inativo,
}

let s: Status = Status.Ativo;
Enter fullscreen mode Exit fullscreen mode

Unions Types

Quando uma variável pode ter mais de um tipo:

let resultado: string | number;
resultado = "ok";
resultado = 42;
resultado = true; // ERRO
Enter fullscreen mode Exit fullscreen mode

Top comments (0)