Padrões de Modo Estrito

Receita

Escreva código React que prospere sob as configurações mais rigorosas do TypeScript. Domine padrões para strictNullChecks, noUncheckedIndexedAccess e exactOptionalPropertyTypes para capturar bugs que configurações mais flexíveis não pegam.

Exemplo de Trabalho

// strictNullChecks: tratamento seguro de valores anuláveis
type User = {
  id: string;
  name: string;
  address?: {
    street: string;
    city: string;
  };
};
 
function UserAddress({ user }: { user: User }) {
  // Sem strictNullChecks, isso retorna undefined silenciosamente
  // Com strictNullChecks, o TypeScript força você a lidar com o caso
  if (!user.address) {
    return <p>Nenhum endereço registrado</p>;
  }
 
  return (
    <p>
      {user.address.street}, {user.address.city}
    </p>
  );
}

// noUncheckedIndexedAccess: acesso seguro a arrays e objetos
const colors = ["red", "green", "blue"];
 
// Sem noUncheckedIndexedAccess: colors[5] é string
// Com noUncheckedIndexedAccess: colors[5] é string | undefined
 
function getColor(index: number): string {
  const color = colors[index];
  if (!color) {
    return "default";
  }
  return color; // TypeScript agora sabe que isso é string, não string | undefined
}

// Acesso seguro a registros
type FeatureFlags = Record<string, boolean>;
 
function isFeatureEnabled(flags: FeatureFlags, key: string): boolean {
  const value = flags[key];
  // Com noUncheckedIndexedAccess, value é boolean | undefined
  return value ?? false;
}

Mergulho Profundo

Como Funciona

• strict: true habilita uma família de verificações rigorosas. As mais impactantes para React são strictNullChecks, strictFunctionTypes e noImplicitAny.
• strictNullChecks torna null e undefined tipos distintos que devem ser tratados explicitamente. Uma variável tipada como string não pode ser null a menos que você a tipifique como string | null.
• noUncheckedIndexedAccess adiciona | undefined a qualquer acesso de índice em arrays e registros. Isso captura o bug comum de acessar um índice de array que pode estar fora dos limites.
• exactOptionalPropertyTypes distingue entre uma propriedade que está ausente e uma que é explicitamente undefined. { name?: string } significa "o nome pode estar ausente", mas não { name: undefined }.
• strictFunctionTypes impõe verificação contravariante de parâmetros em tipos de função. Isso captura bugs sutis com tipos de manipuladores de eventos e props de callback.

Variações

Pesquisas seguras em mapas/objetos:

const userMap = new Map<string, User>();
 
function getUser(id: string): User {
  const user = userMap.get(id); // User | undefined
  if (!user) {
    throw new Error(`Usuário ${id} não encontrado`);
  }
  return user; // Restrito para User
}

Asserção non-null como saída de emergência:

// Use com moderação e apenas quando tiver certeza de que o valor existe
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d")!; // Asserção non-null
// Melhor: usar guarda e lançar exceção
const ctx2 = canvas.getContext("2d");
if (!ctx2) throw new Error("Contexto 2D do canvas não disponível");

Tratando encadeamento opcional com nulls estritos:

type Config = {
  api?: {
    baseUrl?: string;
    timeout?: number;
  };
};
 
function getApiUrl(config: Config): string {
  return config.api?.baseUrl ?? "https://api.example.com";
}

exactOptionalPropertyTypes em ação:

// Com exactOptionalPropertyTypes habilitado:
type Settings = {
  theme?: "light" | "dark";
};
 
// Permitido
const a: Settings = {};
const b: Settings = { theme: "light" };
 
// Erro: undefined não é atribuível a "light" | "dark"
// const c: Settings = { theme: undefined };

Notas do TypeScript

• Habilite-os incrementalmente se estiver migrando: primeiro strict: true, depois noUncheckedIndexedAccess, depois exactOptionalPropertyTypes.
• Os operadores ?? (coalescência nula) e ?. (encadeamento opcional) são suas melhores ferramentas sob configurações estritas. Eles lidam com null | undefined de forma limpa.
• Array.prototype.find() retorna T | undefined mesmo sem noUncheckedIndexedAccess. A configuração afeta principalmente o acesso por colchetes arr[i].

Armadilhas

• noUncheckedIndexedAccess adiciona | undefined ao acesso de tuplas também. Para tuplas com comprimento conhecido, isso pode parecer excessivamente cauteloso. Use desestruturação em vez disso: const [first, second] = tuple.
• exactOptionalPropertyTypes quebra o código que passa explicitamente undefined para limpar campos opcionais. Você pode precisar usar delete obj.field em vez disso.
• Asserções non-null (!) ignoram as verificações estritas completamente. Cada ! é um potencial crash em tempo de execução. Prefira guards e narrowing.
• Tipos de bibliotecas de terceiros podem não ser compatíveis com suas configurações estritas. skipLibCheck: true ajuda, mas esconde problemas em seus próprios arquivos .d.ts.

Alternativas

FAQs

type Settings = { theme?: "light" | "dark" };
 
const a: Settings = {};            // OK: propriedade ausente
const b: Settings = { theme: "light" }; // OK
// const c: Settings = { theme: undefined }; // ERRO

const colors = ["red", "green", "blue"];
 
function getColor(index: number): string {
  const color = colors[index]; // string | undefined
  if (!color) return "default";
  return color; // restrito para string
}

Relacionado

• Noções Básicas de TypeScript
• Type Narrowing
• Tipando Respostas de API
• Arquivos de Declaração