Otimização de desempenho de aplicações TypeScript: na prática

Introdução: Por que o TypeScript pode ser lento?

TypeScript é uma ferramenta poderosa que adiciona tipagem estática ao JavaScript. No entanto, os desenvolvedores frequentemente enfrentam o fato de que, "de fábrica", as aplicações TypeScript funcionam mais lentamente do que JS puro. As principais razões são a transpilação excessiva, a configuração incorreta do compilador e padrões de código não otimizados. Neste artigo, abordaremos métodos práticos de otimização que ajudarão a acelerar tanto o processo de build quanto o runtime da sua aplicação.

1. Profiling e identificação de gargalos

Antes de otimizar qualquer coisa, é preciso entender o que está causando lentidão. Use as ferramentas integradas do navegador e do Node.js.

1.1. Chrome DevTools Performance

Grave um perfil de execução da aplicação. Preste atenção em tarefas longas (Long Tasks) e chamadas frequentes do garbage collector (GC). O código TypeScript após a compilação é JavaScript comum, portanto, todos os métodos padrão de profiling funcionam.

1.2. Análise do tempo de compilação (tsc --generateTrace)

Se a própria compilação estiver lenta, use a flag --generateTrace:

tsc --generateTrace trace_output

Em seguida, abra o arquivo trace_output/trace.json no Chrome em chrome://tracing. Você verá quais arquivos estão demorando mais para compilar. Frequentemente, são grandes bibliotecas ou arquivos com imports excessivos.

2. Configuração do tsconfig.json para máxima velocidade

Configuração incorreta é a principal inimiga do desempenho. Vamos analisar as opções principais.

2.1. strict: true — não tenha pressa

O modo strict ativa todas as verificações de tipo rigorosas. Isso retarda a compilação. Para builds de produção, use:

{  "compilerOptions": {    "strict": false,    "noImplicitAny": true,    "strictNullChecks": true  }}

Essas duas opções cobrem 90% dos erros, mas funcionam mais rápido do que o strict completo.

2.2. Opções para acelerar o build

• incremental: true — ativa a compilação incremental. O TypeScript salva informações sobre o build anterior e recompila apenas os arquivos alterados.
• skipLibCheck: true — desativa a verificação de tipos em arquivos de declaração (.d.ts). Isso proporciona um ganho significativo de velocidade, especialmente se muitas bibliotecas de terceiros forem usadas.
• isolatedModules: true — permite o uso de transpiladores mais rápidos (por exemplo, esbuild) em vez do tsc.

Exemplo de configuração otimizada para desenvolvimento:

{  "compilerOptions": {    "target": "ES2020",    "module": "ESNext",    "moduleResolution": "node",    "incremental": true,    "skipLibCheck": true,    "strict": false,    "noImplicitAny": true,    "strictNullChecks": true,    "outDir": "./dist"  },  "include": ["src/**/*"],  "exclude": ["node_modules", "**/*.test.ts"]}

3. Otimização de runtime: tipos e estruturas de dados

Os tipos do TypeScript desaparecem após a compilação, mas sua "impressão digital" permanece na forma de código gerado pelo compilador.

3.1. Evite tipos condicionais complexos em runtime

Tipos condicionais (conditional types) complexos podem gerar muito código. Em vez disso, use union-types simples:

// Ruim: tipo condicional complexotype ResponseType<T> = T extends string ? { data: string } : { data: number };function handleResponse<T>(value: T): ResponseType<T> { ... }

// Bom: union simplestype ResponseType = { data: string } | { data: number };function handleResponse(value: string | number): ResponseType { ... }

3.2. Use as const para constantes

Isso ajuda o TypeScript a inferir tipos mais precisos, o que reduz o número de verificações:

const COLORS = ['red', 'green',