Guia essencial de TypeScript em português para iniciantes. Conceitos fundamentais com exemplos práticos de tipagem em JavaScript.
1// Booleano 2let isDone: boolean = false; 3let isActive: boolean = true; 4
1// TypeScript infere o tipo automaticamente 2let numero = 42; // tipo number inferido 3let texto = "Hello"; // tipo string inferido 4let ativo = true; // tipo boolean inferido 5 6// Constantes com const 7const PI = 3.14159; 8const MAX_USUARIOS = 100; 9 10// let vs const 11let contador = 0; 12contador = 5; // permitido (let pode ser reatribuído) 13 14const nome = "Maria"; 15// nome = "Ana"; // erro! const não pode ser reatribuído 16 17// Union types (múltiplos tipos possíveis) 18let resultado: string | number; 19resultado = "sucesso"; // ok 20resultado = 200; // ok 21 22// Literal types (valores específicos) 23let status: "ativo" | "inativo" | "pendente"; 24status = "ativo"; // ok 25// status = "cancelado"; // erro!
1// Função com tipos de parâmetro e retorno 2function somar(a: number, b: number): number { 3 return a + b; 4} 5 6somar(5, 3); // => 8 7// somar("5", 3) // erro: tipos incorretos 8 9// Funções com valores padrão 10function saudar(nome: string, greeting: string = "Olá"): string { 11 return `${greeting}, ${nome}!`; 12} 13 14saudar("Pedro"); // => "Olá, Pedro!" 15saudar("Ana", "Bem-vindo"); // => "Bem-vindo, Ana!" 16 17// Arrow functions com tipos 18const multiplicar = (x: number, y: number): number => x * y; 19multiplicar(4, 5); // => 20 20 21// Funções com parâmetros opcionais 22function descrever(pessoa: string, idade?: number): string { 23 if (idade !== undefined) { 24 return `${pessoa} tem ${idade} anos`; 25 } 26 return `${pessoa} é uma pessoa`; 27} 28 29descrever("Carlos"); // => "Carlos é uma pessoa" 30descrever("Ana", 28); // => "Ana tem 28 anos" 31 32// Rest parameters (parâmetros variáveis) 33function somarMultiplos(...numeros: number[]): number { 34 return numeros.reduce((sum, n) => sum + n, 0); 35} 36 37somarMultiplos(1, 2, 3); // => 6 38somarMultiplos(10, 20, 30); // => 60
1// Tipagem de objetos simples 2let pessoa: { nome: string; idade: number; ativo: boolean } = { 3 nome: "João", 4 idade: 30, 5 ativo: true 6}; 7 8// Interfaces (melhor forma para definir estruturas) 9interface Produto { 10 id: number; 11 nome: string; 12 preco: number; 13 desconto?: number; // propriedade opcional 14} 15 16const notebook: Produto = { 17 id: 1, 18 nome: "Notebook Dell", 19 preco: 3000 20}; 21 22const mouse: Produto = { 23 id: 2, 24 nome: "Mouse Logitech", 25 preco: 150, 26 desconto: 20 27}; 28 29// Interfaces com métodos 30interface Automovel { 31 marca: string; 32 modelo: string; 33 acelerar(): void; 34 frear(): void; 35} 36 37const moto: Automovel = { 38 marca: "Honda", 39 modelo: "CB 500", 40 acelerar() { 41 console.log("Acelerando!"); 42 }, 43 frear() { 44 console.log("Freando!"); 45 } 46}; 47 48moto.acelerar(); // => "Acelerando!"
1// Arrays com tipos 2let numeros: number[] = [1, 2, 3, 4, 5]; 3let nomes: string[] = ["João", "Maria", "Pedro"]; 4 5// Acessar elementos 6console.log(numeros[0]); // => 1 7console.log(nomes[nomes.length - 1]); // => "Pedro" 8 9// Métodos de array 10numeros.push(6); // adiciona ao final 11numeros.pop(); // remove do final 12numeros.shift(); // remove do início 13numeros.unshift(0); // adiciona no início 14 15// Transformar arrays 16const pares = numeros.filter(n => n % 2 === 0); 17const dobrados = numeros.map(n => n * 2); 18const soma = numeros.reduce((acc, n) => acc + n, 0); 19 20// Tuplas (arrays com tipos específicos em cada posição) 21let tupla: [string, number, boolean] = ["texto", 42, true]; 22tupla[0]; // string 23tupla[1]; // number 24tupla[2]; // boolean 25 26// Enumerações 27enum Cor { 28 Vermelho = "vermelho", 29 Verde = "verde", 30 Azul = "azul" 31} 32 33let minhaCorFavorita: Cor = Cor.Azul; 34console.log(minhaCorFavorita); // => "azul"
1// Definição de classe 2class Animal { 3 // Propriedades com tipos 4 nome: string; 5 idade: number; 6 7 // Construtor 8 constructor(nome: string, idade: number) { 9 this.nome = nome; 10 this.idade = idade; 11 } 12 13 // Método 14 fazerSom(): void { 15 console.log(`${this.nome} faz um som`); 16 } 17 18 // Método com retorno 19 apresentar(): string { 20 return `${this.nome} tem ${this.idade} anos`; 21 } 22} 23 24// Usar a classe 25const gato = new Animal("Mimi", 3); 26console.log(gato.apresentar()); // => "Mimi tem 3 anos" 27 28// Herança 29class Cachorro extends Animal { 30 raca: string; 31 32 constructor(nome: string, idade: number, raca: string) { 33 super(nome, idade); // chama construtor da classe pai 34 this.raca = raca; 35 } 36 37 // Sobrescrever método 38 fazerSom(): void { 39 console.log(`${this.nome} faz: Au au!`); 40 } 41 42 buscar(): void { 43 console.log(`${this.nome} buscou a bolinha!`); 44 } 45} 46 47const rex = new Cachorro("Rex", 5, "Labrador"); 48rex.fazerSom(); // => "Rex faz: Au au!" 49rex.buscar(); // => "Rex buscou a bolinha!" 50 51// Modificadores de acesso 52class Pessoa { 53 nome: string; // público por padrão 54 private email: string; // apenas na classe 55 protected cpf: string; // classe + subclasses 56 readonly id: number; // não pode mudar após criação 57 58 constructor(nome: string, email: string, cpf: string, id: number) { 59 this.nome = nome; 60 this.email = email; 61 this.cpf = cpf; 62 this.id = id; 63 } 64}
1// Funções genéricas 2function primeiro<T>(arr: T[]): T { 3 return arr[0]; 4} 5 6primeiro([1, 2, 3]); // tipo number inferido 7primeiro(["a", "b", "c"]); // tipo string inferido 8 9// Classes genéricas 10class Caixa<T> { 11 conteudo: T; 12 13 constructor(valor: T) { 14 this.conteudo = valor; 15 } 16 17 obter(): T { 18 return this.conteudo; 19 } 20} 21 22const caixaNumero = new Caixa<number>(42); 23const caixaTexto = new Caixa<string>("Hello"); 24 25console.log(caixaNumero.obter()); // => 42 26console.log(caixaTexto.obter()); // => "Hello" 27 28// Constraints (restrições de tipo) 29function obterComprimento<T extends { length: number }>(obj: T): number { 30 return obj.length; 31} 32 33obterComprimento("teste"); // => 5 (string tem length) 34obterComprimento([1, 2, 3]); // => 3 (array tem length) 35// obterComprimento(42); // erro! number não tem length
1// Type Alias (usando type) 2type Coordenada = { 3 x: number; 4 y: number; 5}; 6 7type ModoTema = "claro" | "escuro"; 8 9const ponto: Coordenada = { x: 10, y: 20 }; 10let tema: ModoTema = "claro"; 11 12// Interface (usando interface) 13interface Usuario { 14 id: number; 15 nome: string; 16 email: string; 17} 18 19interface Desenvolvedor extends Usuario { 20 linguagens: string[]; 21} 22 23const dev: Desenvolvedor = { 24 id: 1, 25 nome: "João", 26 email: "joao@email.com", 27 linguagens: ["TypeScript", "React"] 28}; 29 30// Diferença principal: interfaces podem ser estendidas, types não (facilmente) 31// Interfaces são melhores para estruturas, types para tipos mais complexos
1// Try-catch com tipos 2try { 3 const resultado = JSON.parse('inválido'); 4} catch (erro) { 5 if (erro instanceof SyntaxError) { 6 console.log("Erro de sintaxe JSON:", erro.message); 7 } else { 8 console.log("Erro desconhecido:", erro); 9 } 10} 11 12// Type guard 13function processar(valor: string | number): void { 14 if (typeof valor === "string") { 15 console.log(valor.toUpperCase()); // métodos de string 16 } else { 17 console.log(valor * 2); // operações numéricas 18 } 19} 20 21processar("hello"); // => "HELLO" 22processar(21); // => 42 23 24// Optional chaining (?.) 25interface Config { 26 database?: { 27 host?: string; 28 port?: number; 29 }; 30} 31 32const config: Config = {}; 33console.log(config.database?.host); // => undefined (sem erro) 34 35// Nullish coalescing (??) 36const valorPadrao = null; 37const resultado = valorPadrao ?? "padrão"; // => "padrão"
1// Arquivo: matematica.ts 2export function somar(a: number, b: number): number { 3 return a + b; 4} 5 6export function subtrair(a: number, b: number): number { 7 return a - b; 8} 9 10export const PI = 3.14159; 11 12// Arquivo: main.ts 13import { somar, subtrair, PI } from "./matematica"; 14 15console.log(somar(5, 3)); // => 8 16console.log(subtrair(10, 4)); // => 6 17console.log(PI); // => 3.14159 18 19// Importar com alias 20import { somar as adicionar } from "./matematica"; 21console.log(adicionar(2, 3)); // => 5 22 23// Exportação padrão 24// Arquivo: utilitarios.ts 25export default function saudacao(nome: string): string { 26 return `Olá, ${nome}!`; 27} 28 29// Arquivo: app.ts 30import saudacao from "./utilitarios"; 31console.log(saudacao("Maria")); // => "Olá, Maria!"