Melhores Práticas de TypeScript: Segurança de Tipos e Qualidade de Código

Por que usar TypeScript?

TypeScript é um superconjunto de JavaScript. Todo código JavaScript é código TypeScript válido. Adiciona verificação de tipos estática.

Segurança de tipos: Detecta erros de tipo em tempo de compilação. Reduz erros em tempo de execução (undefined is not a function).

Experiência do desenvolvedor: As funcionalidades de autocompletar de IDE, refactoring e go-to-definition funcionam com informações de tipo.

Projetos grandes: À medida que a base de código cresce, a verificação de tipos facilita a manutenção e o refactoring. Melhora a colaboração em equipe.

Melhores Práticas de Definição de Tipos

interface vs type: Use interface para formas de objetos. Use type para tipos union/intersection. interface pode ser estendida com extends.

Evite any: any desativa a verificação de tipos. Use unknown e realize verificação de tipos: if (typeof x === 'string') { ... }.

Modo strict: Defina strict: true no tsconfig.json. Isso habilita controles como noImplicitAny, strictNullChecks, strictFunctionTypes.

Inferência de tipos: Use a inferência de tipos do TypeScript em vez de anotação de tipo explícita. const name = 'John' (inferido como string).

Tipos literais: Use valores específicos em vez de string ou number: type Status = 'active' | 'inactive' | 'pending'.

Técnicas Avançadas de Tipos

Tipos genéricos: Crie funções e classes reutilizáveis e seguras em tipos: function identity<T>(arg: T): T { return arg; }.

Tipos condicionais: Retorne diferentes tipos baseados em condições de tipo: type IsString<T> = T extends string ? true : false.

Tipos mapeados: Transforme tipos existentes: type Readonly<T> = { readonly [P in keyof T]: T[P]; }.

Tipos de utilidade: Use os tipos de utilidade integrados do TypeScript: Partial, Required, Pick, Omit, Record, Exclude, Extract.

Tipos de template literal: Crie strings seguros em tipos com manipulação de strings: type EventName = `on${Capitalize<string>}`.

TypeScript com React

Definição de props: interface Props { name: string; age?: number; onClick: () => void; }. Use ? para props opcionais.

useState: const [count, setCount] = useState<number>(0);. A inferência de tipos geralmente é suficiente: useState(0) (inferido como number).

useRef: const inputRef = useRef<HTMLInputElement>(null);. Use o tipo correto para referências de elementos DOM.

Manipuladores de eventos: Use tipos de eventos do React como React.ChangeEvent<HTMLInputElement>, React.FormEvent<HTMLFormElement>.

Children: Use React.ReactNode (geral) ou React.ReactElement (apenas elemento). Adicione prop children com PropsWithChildren.

Tratamento de Erros e Depuração

Asserções de tipo: Converta tipos com a palavra-chave as: const value = input as string. Prefira type guards quando possível.

Type guards: Realize verificação de tipo em tempo de execução com typeof, instanceof, operador in e funções de type guard personalizadas.

Non-null assertion: Especifique que o valor não é null/undefined com o operador !: element!.value. Use apenas quando tiver certeza.

tsconfig strictNullChecks: Lide com null e undefined explicitamente. Use optional chaining (?.) e nullish coalescing (??).

ESLint + TypeScript: Adicione regras adicionais com o plugin @typescript-eslint. Habilite regras como no-unused-vars, no-explicit-any.

Configuração do Projeto

tsconfig.json: Defina strict: true, target: 'ES2020', module: 'ESNext', moduleResolution: 'bundler', esModuleInterop: true.

Path aliases: Encurte os caminhos de importação com baseUrl e paths: "@/*": ["src/*"]. import { Button } from '@/components/Button'.

Project references: Use project references para builds incrementais em projetos grandes. Use o array references no tsconfig.json.

Monorepo: Configure monorepo de TypeScript com Turborepo ou Nx. Crie pacotes compartilhados para tipos e utilitários.

Declaration files: Adicione definições de tipo a bibliotecas JavaScript com arquivos .d.ts. Use pacotes @types/*.