TypeScript para Iniciantes: por que largar o JavaScript puro

Se você já trabalha com JavaScript há algum tempo, provavelmente já se deparou com o clássico erro Cannot read properties of undefined em produção. Esse tipo de bug é exatamente o que o TypeScript foi criado para prevenir — antes que o código chegue ao usuário.

O que é TypeScript?

TypeScript é um superset do JavaScript criado pela Microsoft. Isso significa que todo código JavaScript válido também é TypeScript válido. A grande adição é um sistema de tipagem estática opcional: você declara os tipos das suas variáveis, parâmetros e retornos de função, e o compilador verifica se tudo bate antes de gerar o JavaScript final.

Por que usar TypeScript?

Considere esta função em JavaScript puro:

// JavaScript — sem garantias
function calcularDesconto(preco, percentual) {{'{'}}
return preco - (preco * percentual / 100);
{{'}'}}

Nada impede alguém de chamar calcularDesconto("barato", null). Com TypeScript:

// TypeScript — erros detectados na compilação
function calcularDesconto(preco: number, percentual: number): number {{'{'}}
return preco - (preco * percentual / 100);
{{'}'}}

Agora, se alguém passar uma string, o compilador avisa antes do código rodar.

Como começar em 3 passos

Instale o TypeScript globalmente: npm install -g typescript
Crie um arquivo tsconfig.json na raiz do projeto com tsc --init
Renomeie seus arquivos .js para .ts e comece a adicionar tipos gradualmente

Tipos mais usados no dia a dia

let nome: string = "Rinaldo";
let idade: number = 25;
let ativo: boolean = true;
let tags: string[] = ["ts", "js"];

// Interface para objetos
interface Usuario {{'{'}}
  id: number;
  nome: string;
  email?: string; // opcional
{{'}'}}

Generics: reutilizando código com segurança de tipos

Os Generics permitem criar funções e classes que funcionam com qualquer tipo, mantendo a tipagem. É como um molde que aceita qualquer tipo, mas garante consistência dentro do uso:

// Sem generic: perde tipagem
function primeiro(arr: any[]): any {{'{'}} return arr[0]; {{'}'}}

// Com generic: mantém tipagem
function primeiro<T>(arr: T[]): T {{'{'}} return arr[0]; {{'}'}}

const num = primeiro([1, 2, 3]); // T = number
const str = primeiro(["a", "b"]); // T = string

TypeScript com React

TypeScript e React formam uma combinação poderosa. Ao tipar os props de um componente, você elimina toda uma classe de bugs e ganha autocomplete perfeito na IDE:

interface CardProps {{'{'}}
  titulo: string;
  descricao: string;
  onClick?: () => void; // opcional
{{'}'}}

function Card({{'{'}} titulo, descricao, onClick {{'}'}}: CardProps) {{'{'}}
  return <div onClick={{'{'}}{{'}'}}onClick{{'}'}}>{{'{'}}titulo{{'}'}}</div>;
{{'}'}}

Utility Types mais usados

TypeScript vem com tipos utilitários prontos que economizam muito trabalho:

Partial<T> — todos os campos ficam opcionais (útil para updates)
Required<T> — todos os campos ficam obrigatórios
Pick<T, K> — seleciona apenas os campos K de T
Omit<T, K> — remove os campos K de T
Record<K, V> — cria um objeto com chaves K e valores V

Vale a pena aprender?

Absolutamente. Pesquisas do Stack Overflow consistentemente mostram TypeScript entre as linguagens mais amadas pelos desenvolvedores. Vagas que exigem TypeScript pagam em média 15-20% mais que as que pedem apenas JavaScript. O investimento de algumas semanas de aprendizado retorna rapidamente em produtividade e qualidade de código.

Conclusão

TypeScript não é um substituto do JavaScript — é uma camada de segurança por cima dele. A curva de aprendizado é suave, especialmente se você já conhece JS. Para projetos com mais de um desenvolvedor ou que crescem ao longo do tempo, a tipagem estática se paga rapidamente em bugs evitados.