Configurações de target, lib, module e JSX
Escolha target/lib adequados para o JS emitido e os globais disponíveis; configure module e JSX de acordo com seu ambiente de execução/empacotador.
Configurações de target, lib, module e JSX é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 3 aulas no total.
Introdução
Objetivo: escolha a estratégia adequada de destino (saída JS), biblioteca (globais ambientes), módulo (formato de importação/exportação) e JSX para seu aplicativo.
Opção de destino
destino define a versão do ECMAScript do JS gerado, por exemplo, ES2018 ou ES2020. Escolha a versão mais antiga compatível com seu ambiente de execução.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"target": "ES2020"
}
}
// TS may downlevel features based on target
const n = 10n; // BigInt requires ES2020+Opção de biblioteca
biblioteca controla quais declarações de tipos globais são incluídas, por exemplo, ES2020, DOM e WebWorker.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"lib": ["ES2020", "DOM"]
}
}
// Now Promise, fetch, and DOM globals are typed if includedOpção de módulo
módulo define o sistema de módulos (CommonJS, ESNext, NodeNext etc.). Alinhe-o às expectativas do Node ou do empacotador.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"module": "ESNext"
}
}
// ESM example
import { join } from "path";
export const p = join("a", "b");Opção de jsx
jsx escolhe como o TS transforma JSX (react, react-jsx, preserve). Escolha a opção esperada pela sua estrutura ou pelo empacotador.
// React 17+ recommended
// tsconfig.json (excerpt)
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
// JSX files compile to React 17 runtime helpers (no need for import React)Predefinições
Use predefinições compatíveis com sua pilha. Aplicativos web precisam de DOM; projetos Node geralmente o omitem e escolhem NodeNext para os módulos.
// Web app (Vite/React)
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020", "DOM"],
"module": "ESNext",
"jsx": "react-jsx"
}
}
// Node (ESM)
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020"],
"module": "NodeNext"
}
}Verificação da opção de biblioteca
Verificação rápida: o que a opção lib controla?
Recapitulação
Recapitulação: destino ⇒ nível do JS gerado; biblioteca ⇒ globais disponíveis; módulo ⇒ formato de importação/exportação; JSX ⇒ modo de transformação de JSX.
Perguntas Frequentes
A aula “Configurações de target, lib, module e JSX” é grátis?
Sim — o texto completo de “Configurações de target, lib, module e JSX” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 3 aulas no total.
O que vou aprender em “Configurações de target, lib, module e JSX”?
Escolha target/lib adequados para o JS emitido e os globais disponíveis; configure module e JSX de acordo com seu ambiente de execução/empacotador. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar TypeScript Academy?
Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.
Quanto tempo leva a aula “Configurações de target, lib, module e JSX”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de TypeScript Academy?
Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Opções de rigor
- Configurações de target, lib, module e JSX
- Referências de projetos (introdução)