Como Melhorar Seu Código com Tipagem Avançada em TypeScript

Eleve a Qualidade do Seu Código com TypeScript

Se você já programa em TypeScript, sabe que a tipagem estática é uma das grandes vantagens da linguagem.

Mas será que você está realmente aproveitando todo o potencial da tipagem avançada?

Usar tipos básicos como string, number e boolean já melhora a segurança do código, mas TypeScript oferece muito mais!

Código com Tipagem Avançada em TypeScript, como Union Types, Intersection Types, Generics e Mapped Types, você pode escrever código mais seguro, reutilizável e fácil de manter.

Neste post, vamos explorar algumas dessas técnicas para ajudar você a escrever código TypeScript mais robusto e eficiente.

Por que se preocupar com tipagem avançada?

Código com Tipagem Avançada em TypeScript: Se você já enfrentou erros inesperados no seu código TypeScript, provavelmente sabe que nem sempre os tipos básicos são suficientes. A tipagem avançada resolve problemas como:

✔️ Melhor autocompletar no editor – Seu código fica mais previsível e fácil de navegar.
✔️ Menos bugs em tempo de execução – O TypeScript pode detectar erros antes mesmo de rodar o código.
✔️ Mais clareza no código – Você documenta melhor as intenções do seu código sem precisar de comentários extras.
✔️ Facilidade de manutenção – Equipes grandes entendem melhor o código com tipos bem definidos.

Agora, vamos ver como aplicar esses conceitos no dia a dia!

1. Union Types: Permita múltiplos tipos de valor o poder do Código com Tipagem Avançada em TypeScript

Os Union Types permitem que uma variável aceite mais de um tipo de dado.

Isso é útil quando uma função pode retornar diferentes tipos dependendo do contexto.

🔹 Exemplo prático:

function formatInput(input: string | number): string {
  return `Valor formatado: ${input}`;
}

console.log(formatInput(123)); // ✅ Valor formatado: 123
console.log(formatInput("Hello")); // ✅ Valor formatado: Hello

🛑 Se tentarmos passar um boolean, o TypeScript não permitirá:

console.log(formatInput(true)); // ❌ Erro: Argument of type 'boolean' is not assignable

Isso impede chamadas inesperadas e evita bugs.

2. Intersection Types: Combine múltiplos tipos

Já precisou criar um tipo que combina várias características? Com Intersection Types, você pode unir dois ou mais tipos.

🔹 Exemplo prático:

typescriptCopiarEditartype Pessoa = { nome: string };
type Funcionario = { cargo: string };

type FuncionarioCompleto = Pessoa & Funcionario;

const dev: FuncionarioCompleto = {
  nome: "Lucas",
  cargo: "Desenvolvedor"
};

Agora, qualquer objeto do tipo FuncionarioCompleto precisa ter nome e cargo, garantindo consistência.

3. Generics: Código com Tipagem Avançada em TypeScript a Tipagem dinâmica e reutilizável

Os Generics permitem criar componentes reutilizáveis, sem perder a segurança da tipagem.

🔹 Exemplo prático:

function wrapInArray<T>(value: T): T[] {
  return [value];
}

const numbers = wrapInArray(10); // ✅ TypeScript entende que numbers é do tipo number[]
const texts = wrapInArray("Hello"); // ✅ TypeScript entende que texts é string[]

💡 Dessa forma, wrapInArray funciona para qualquer tipo, sem precisar definir um tipo fixo.

4. Mapped Types: Código com Tipagem Avançada em TypeScript Transforme tipos dinamicamente

Os Mapped Types permitem modificar propriedades de um tipo existente.

🔹 Exemplo prático:

type Produto = {
  nome: string;
  preco: number;
};

type ProdutoOpcional = {
  [K in keyof Produto]?: Produto[K];
};

const item: ProdutoOpcional = { nome: "Teclado" }; // ✅ Preço é opcional agora

💡 Isso é útil para criar versões parciais de objetos, como em formulários onde nem todos os campos são obrigatórios.

5. Utility Types: Código com Tipagem Avançada em TypeScript sem esforço

TypeScript oferece tipos utilitários prontos que facilitam muito a vida dos devs.

Alguns dos mais úteis são:

🔹 Exemplo prático:

type Usuario = { nome: string; idade: number };

// Criamos um tipo onde idade é opcional
type UsuarioParcial = Partial<Usuario>;

const user: UsuarioParcial = { nome: "Ana" }; // ✅ OK, pois idade agora é opcional

Isso reduz código repetitivo e melhora a clareza do código.

6. Inferência de Tipo: Deixe o TypeScript trabalhar por você

Você não precisa sempre declarar explicitamente os tipos.

O TypeScript pode inferi-los automaticamente.

🔹 Exemplo prático:

const nome = "João"; // TypeScript entende que nome é string
const idade = 30; // TypeScript entende que idade é number

Evite anotações desnecessárias quando o TypeScript já puder inferir o tipo!

Conclusão: Como melhorar seu código TypeScript hoje

Se você quer levar suas habilidades com TypeScript para o próximo nível, experimente:

✅ Usar Union e Intersection Types para criar tipos mais flexíveis.
✅ Aproveitar Generics para reutilizar código de forma segura.
✅ Explorar Mapped e Utility Types para manipular tipos dinamicamente.
✅ Deixar o TypeScript inferir tipos automaticamente sempre que possível.

A tipagem avançada não só melhora a qualidade do código, mas também ajuda sua equipe a manter um código mais limpo, seguro e eficiente.

Comece a aplicar esses conceitos agora e veja a diferença no seu dia a dia como desenvolvedor!