Resolver Erros Comuns do TypeScript 2026

// ❌ ERRO: Type 'string' is not assignable to type 'number'
let idade: number = "vinte";

// ✅ SOLUÇÃO 1: Corrigir o valor
let idade: number = 20;

// ✅ SOLUÇÃO 2: Corrigir o tipo
let idade: string = "vinte";

// ❌ ERRO em objetos
interface Usuario {
  nome: string;
  ativo: boolean;
}

const user: Usuario = {
  nome: "Maria",
  ativo: "sim",  // Type 'string' is not assignable to type 'boolean'
};

// ✅ SOLUÇÃO: Corrigir o valor pra boolean
const user: Usuario = {
  nome: "Maria",
  ativo: true,
};

// ❌ ERRO com union types
type Status = "ativo" | "inativo" | "pendente";
let estado: Status = "bloqueado"; // não existe na union

// ✅ SOLUÇÃO: Adicionar à union ou usar valor válido
type Status = "ativo" | "inativo" | "pendente" | "bloqueado";
let estado: Status = "bloqueado";

// ❌ ERRO: Argument of type 'string' is not assignable
//         to parameter of type 'number'
function dobrar(valor: number): number {
  return valor * 2;
}

dobrar("10"); // string não é number

// ✅ SOLUÇÃO 1: Converter o valor
dobrar(Number("10"));
dobrar(parseInt("10", 10));

// ✅ SOLUÇÃO 2: Aceitar mais tipos na função
function dobrar(valor: number | string): number {
  const num = typeof valor === "string" ? Number(valor) : valor;
  return num * 2;
}

// ❌ ERRO com objetos parciais
interface Config {
  host: string;
  port: number;
  ssl: boolean;
}

function conectar(config: Config) { /* ... */ }

conectar({ host: "localhost", port: 3000 });
// Falta a propriedade 'ssl'

// ✅ SOLUÇÃO: Tornar opcional ou passar completo
interface Config {
  host: string;
  port: number;
  ssl?: boolean;  // agora é opcional
}

// Ou usar Partial<Config> se tudo pode ser opcional
function conectar(config: Partial<Config>) { /* ... */ }

// ❌ ERRO: Property 'telefone' does not exist on type 'Usuario'
interface Usuario {
  nome: string;
  email: string;
}

const user: Usuario = { nome: "João", email: "joao@email.com" };
console.log(user.telefone); // não existe na interface

// ✅ SOLUÇÃO 1: Adicionar à interface
interface Usuario {
  nome: string;
  email: string;
  telefone?: string;  // opcional
}

// ✅ SOLUÇÃO 2: Estender a interface
interface UsuarioCompleto extends Usuario {
  telefone: string;
  endereco: string;
}

// ❌ ERRO com dados de API sem tipagem
const response = await fetch("/api/data");
const data = await response.json(); // tipo: any
// Funciona mas sem segurança. Se a API mudar, nenhum erro.

// ✅ SOLUÇÃO: Tipar o retorno
interface ApiResponse {
  users: Usuario[];
  total: number;
}

const data: ApiResponse = await response.json();
console.log(data.users); // tipado corretamente
console.log(data.total); // autocomplete funciona

// ❌ ERRO: Parameter 'item' implicitly has an 'any' type
function processar(item) {
  return item.nome;
}

// ✅ SOLUÇÃO: Declarar o tipo do parâmetro
function processar(item: { nome: string }): string {
  return item.nome;
}

// ❌ ERRO em callbacks de array
const numeros = [1, 2, 3];
numeros.forEach(function(n) {  // n é implicitamente any
  console.log(n * 2);
});

// ✅ SOLUÇÃO 1: Arrow function (inferência funciona melhor)
numeros.forEach((n) => console.log(n * 2));

// ✅ SOLUÇÃO 2: Tipo explícito
numeros.forEach((n: number) => console.log(n * 2));

// ❌ ERRO em event handlers
document.addEventListener("click", function(e) {
  console.log(e.target); // e é implicitamente any
});

// ✅ SOLUÇÃO: Tipar o evento
document.addEventListener("click", (e: MouseEvent) => {
  console.log(e.target);
  console.log(e.clientX); // autocomplete de MouseEvent
});

// ❌ ERRO: Cannot find name 'Usuario'
function criar(dados: Usuario) { // Usuario não foi importado
  // ...
}

// ✅ SOLUÇÃO: Importar o tipo
import { Usuario } from "./types";

function criar(dados: Usuario) {
  // ...
}

// ❌ ERRO: Cannot find name 'process'
console.log(process.env.NODE_ENV);

// ✅ SOLUÇÃO: Instalar types do Node
// npm install --save-dev @types/node
// E adicionar no tsconfig.json:
// "types": ["node"]

// ❌ ERRO: Cannot find name 'describe' (em testes)
describe("Meu teste", () => {
  it("deve funcionar", () => { /* ... */ });
});

// ✅ SOLUÇÃO: Instalar types do framework de teste
// npm install --save-dev @types/jest
// ou @types/mocha

// ❌ ERRO: Cannot find name 'HTMLElement'
const el: HTMLElement = document.getElementById("app")!;

// ✅ SOLUÇÃO: Verificar lib no tsconfig.json
// "lib": ["ES2020", "DOM", "DOM.Iterable"]