TypeScript e tsconfig.json

Este artigo explica TypeScript e tsconfig.json.

Começando pelo papel básico do TypeScript, explicaremos, com exemplos específicos, como o tsconfig.json funciona dentro de um projeto.

YouTube Video

TypeScript e tsconfig.json

TypeScript é 'JavaScript com tipos.'. No entanto, para utilizar o TypeScript de forma eficaz em projetos reais, é essencial entender corretamente o tsconfig.json e configurá-lo de forma intencional.

Por que precisamos do TypeScript?

Primeiramente, o principal motivo para usar TypeScript é 'a capacidade de encontrar erros antes da execução.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Este código não causaria um erro em JavaScript até o tempo de execução, mas em TypeScript resulta em um erro de tipo em tempo de compilação.

Esta 'detecção precoce' melhora muito a eficiência e a qualidade do desenvolvimento.

Como o TypeScript é executado?

Em princípio, o TypeScript não pode ser executado como está. É necessário convertê-lo para JavaScript usando o tsc (TypeScript Compiler)..

1npm install -D typescript
2npx tsc --init

• Ao realizar esta operação, o tsconfig.json é gerado, fornecendo o arquivo central que define o comportamento do projeto TypeScript.

Qual é o papel do tsconfig.json?

tsconfig.json é um arquivo de configuração que determina 'quais arquivos', 'com quais regras' e 'como convertê-los.'. Embora possa parecer complexo à primeira vista, apenas algumas configurações são realmente importantes.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Com apenas essas configurações, é possível um desenvolvimento moderno e seguro com TypeScript.

target: A versão do JavaScript a ser gerada

target determina o nível de especificação do JavaScript de saída.

1"target": "ES2020"

Com isso, o TypeScript irá gerar JavaScript equivalente ao ES2020. Para ambientes mais antigos, selecione ES5; para ambientes mais recentes, escolha ES2022, etc.

Ao especificar ESNext

1"target": "ESNext"

• ESNext indica para gerar a sintaxe JavaScript mais recente disponível como está. O TypeScript não transpila a sintaxe e, em vez disso, deixa para o ambiente de execução, como Node.js ou navegadores, lidar com isso.

• Portanto, ESNext é adequado quando se destina apenas ao Node.js mais recente ou quando se está usando Babel ou um bundler para transpilar separadamente. Por outro lado, se o ambiente de execução não suportar a sintaxe mais recente, isso pode resultar em erros em tempo de execução, então é necessário cautela.

module: Especificar o formato do módulo

module especifica o formato do módulo.

1"module": "ESNext"

• ESNext é o padrão em frontends e em ambientes modernos do Node.js.
• Escolha "CommonJS" apenas se você precisar de CommonJS.

strict: Maximizar a segurança de tipos

strict é um interruptor para maximizar a segurança do TypeScript.

1"strict": true

• Ativar esta opção irá detectar completamente tipos ambíguos e potenciais bugs.

strict mode e any implícito

Ao ativar strict, o TypeScript trata variáveis cujo tipo não pode ser inferido como um erro.

1function printValue(value) {
2	console.log(value);
3}

• Essa variável value não possui informação de tipo na declaração, então o TypeScript não pode determinar seu tipo. Como resultado, any é usado implicitamente, o que irá acionar um aviso (erro) no modo strict.

1function printValue(value: number) {
2	console.log(value);
3}

• Ao especificar explicitamente o tipo assim, o TypeScript entende que 'essa variável lida apenas com números.'. No TypeScript, é mais importante que o tipo possa ser determinado de forma única do que o tipo possa ser omitido.

include/exclude: Controlando quais arquivos compilar

No tsconfig.json, você pode especificar quais arquivos incluir e quais arquivos excluir da compilação.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Assim, apenas os arquivos sob src serão gerenciados pelo TypeScript.
• node_modules especificado em exclude será excluído da compilação mesmo que esteja em um caminho incluído por include.

outDir: Especificar o diretório de saída

Especifique outDir para gerenciar o local de saída do build.

1"outDir": "dist"

• Com isso, todos os resultados compilados serão enviados para a pasta dist. Na prática, separar o código-fonte dos artefatos de build é padrão.

rootDir: Especificar o diretório de origem

rootDir especifica o diretório que o TypeScript trata como raiz do código-fonte.

1"rootDir": "src"

• Esta configuração permite que o TypeScript preserve a estrutura de diretórios baseada em src ao gerar os arquivos. Por exemplo, src/index.ts será gerado como dist/index.js.

• A estrutura do diretório especificado em rootDir será replicada em outDir.

esModuleInterop: Conectando CommonJS e ES Modules

Em seguida, vejamos esModuleInterop.

1"esModuleInterop": true

• Se ativado, você pode usar módulos CommonJS com a sintaxe import com segurança.

1import fs from "fs";

• Esta configuração é quase essencial ao usar Node.js.

noImplicitAny: Proibir o uso implícito de tipos 'any'

Também é importante reforçar as verificações de tipo no tsconfig.json.

1"noImplicitAny": true

• Com isso, você pode proibir tipos any implícitos. Isso permite detectar de forma confiável locais onde você esqueceu de especificar um tipo.

Configuração para detectar código não utilizado

Configurações para detectar código não utilizado também são úteis para melhorar a manutenibilidade.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Com isso, variáveis e argumentos desnecessários são imediatamente sinalizados com avisos.

lib: Definir as APIs internas disponíveis para uso

lib é uma configuração que especifica as APIs padrão que o TypeScript assume que existem.

1"lib": ["ES2020", "DOM"]

• Com esta configuração, os seguintes tipos ficam disponíveis:. Com ES2020, recursos modernos como Promise, Map e Set ficam disponíveis. Com DOM, APIs do navegador como document, window e HTMLElement ficam disponíveis.

No frontend, inclua DOM; para projetos somente em Node.js, remova DOM para evitar que tipos globais desnecessários sejam incluídos.

moduleResolution: Regras de resolução de módulos

moduleResolution determina como os módulos especificados nas importações são resolvidos.

1"moduleResolution": "Node"

As duas principais opções são as seguintes:.

• Se você especificar Node, as regras de resolução de módulos do Node.js são utilizadas.
• Classic é o método antigo, específico do TypeScript, mas é raramente usado atualmente.

Em ambientes que usam Node.js ou um empacotador, é seguro especificar explicitamente Node.

Um tsconfig.json minimalista, pronto para produção

Com base no que vimos até agora, um tsconfig.json minimalista e pronto para produção seria assim:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Esta configuração fornece uma base segura tanto para projetos de frontend quanto de Node.js.

Resumo: tsconfig.json é um 'livro de regras'

tsconfig.json não é apenas um arquivo de configuração, mas sim um 'livro de regras' que se aplica a todo o projeto. Com tsconfig.json, políticas importantes como as que seguem são claramente definidas:.

• O nível de segurança de tipos.
• Convenções de codificação para sua equipe.
• Prevenção de bugs futuros.

Ao entender o tsconfig.json, você será capaz de não apenas escrever TypeScript, mas também projetar seus projetos para um uso seguro do TypeScript.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video