Um momento
Aula 40
Cursos / Aprenda TypeScript - Tutorial Básico Vindo do JavaScript
Como Escolher Quais Arquivos .ts para compilar (files)

Summary

# Aula de TypeScript: Controle de Transpilação de Arquivos

Olá pessoal, nesta aula de TypeScript, vamos aprender a como configurar o compilador para incluir arquivos específicos na transpilação usando o `tsconfig.json`. Vamos abordar as propriedades `files`, `include` e `exclude`.

## O que iremos aprender

1. **Configuração do `tsconfig.json`**
   - O `tsconfig.json` define como o compilador deve se comportar.
   - A atual versão do TypeScript utilizada será a **3.7.2**.

2. **Estrutura de Diretórios**
   - A estrutura inclui:
     - `src/`: onde estão os arquivos `.ts`.
     - `dist/`: onde os arquivos transpilados são armazenados.

## Propriedades do `tsconfig.json`

### 1. `files`

- Permite especificar quais arquivos devem ser incluídos na transpilação.
- Exemplo de configuração:
  ```json
  {
    "files": [
      "src/indivíduo.ts",
      "src/geometria/figuraGeometrica.ts"
    ]
  }
  • Apenas os arquivos listados serão transpilados para a pasta dist.

2. include

  • Permite incluir arquivos usando padrões globais.
  • Exemplo de uso:
    {
      "include": [
        "src/geometria/*.ts"
      ]
    }
    
  • Note que, se você quiser incluir arquivos em subdiretórios, deve usar **:
    {
      "include": [
        "src/geometria/**/*.ts"
      ]
    }
    
  • Isso incluirá todos os arquivos .ts dentro da pasta geometria e de qualquer um de seus subdiretórios.

3. exclude

  • Usado para excluir arquivos ou diretórios da transpilação, mas não foi detalhado nesta aula.

Considerações Finais

  • Usar files é bom para incluir arquivos específicos.
  • Usar include com padrões é útil para incluir múltiplos arquivos sem listar todos manualmente.
  • Dica: Você pode usar *.ts ou *.tsx para pegar arquivos TypeScript corretamente, dependendo do seu projeto.

E é isso! Agora você já sabe como controlar a transpilação de arquivos em seu projeto TypeScript.

Video Transcript

Olá pessoal, estamos de volta com mais uma aula de TypeScript. Nessa aula nós vamos aprender a como dizer ao compilador do TypeScript, através do test consegue .json que arquivos queremos incluir na transpilação. Nós vamos aprender sobre files include e exclude são propriedades do test com fake .json, para dizer o compilador que arquivos queremos compilar especificamente. Antes de continuar, acabei de atualizar a versão do test e c no meu ambiente local para a versão 3.7.2. Agora vamos continuar. Temos o test com fake .json, tem a própria compiler options, tem a parte do lado esquerdo dentro de TypeScript, src onde nós temos nosso código fonte, arquivos .ts normalmente. E tem essa parte também chamada dist, que são os arquivos transpilados. Você pega os arquivos .ts da parte src e transpila para arquivos em formato .js e deixa aqui na parte dist. Mas note que sempre o test está pegando todos os arquivos e transpilando todos eles. Mas será que tem um jeito de a gente controlar e escolher quais arquivos nós queremos transpilar e ignorar certos outros arquivos? Tem três maneiras, tem o files, tem o exclude, tem o include no test.conf.json. Vamos começar com o files. Primeiro de tudo vou deletar a pasta dist para ver que funciona direito. Dletar o dist lá, agora vai no test.conf.json na pasta raiz. Aqui fora do compiler options está certo, não é dentro com propriedade diferente. Vamos transformar propriedade files e vamos usar uma lista. Põe aí os cocheios. Então files para você pode especificar caminhos relativos ou absolutos. Exatamente você quer que seja incluído, seja transpilado. Por exemplo, se eu quiser que o indivíduo .ts seja transpilado, eu posso fazer src indivíduo.ts e o que vai acontecer? Vamos digitar tsc no terminal. Pronto, a pasta dist apareceu o indivíduo.ts lá. Então a pasta src, a barra indivíduo.ts apareceu o indivíduo.ts aqui. Note que outros arquivos não apareceram, quando você usa files, somente esses arquivos aqui que foram especificados que vão aparecer lá. Por exemplo, podemos adicionar também src, geometria, barra, fígura geométrica, fígura geométrica.ts. Vamos ver no que dá. Tsc. Pronto, então também apareceu agora geometria, barra, fígura geométrica, dentro da pasta dist. Então você pode continuar adicionando os arquivos específicos. Mas é muito conveniente quando você quer usar certos, não quer digitar todos os arquivos que você quer incluir. Então para isso eu tenho o include. Então vamos ver como é que faz o include. Vamos aqui. Em vez de faz, vou só tirar esse files aqui e vou dar include. E uma lista da mesma maneira. Agora o include é uma lista de várias strings, cadeia de caracteres que você pode usar certos negócios de globe, que é a estrela, sinal de, pode ser estrela, pode ser, pode ser pergunta, pode ser duas estrelas com barra. Estrela significa zero mais caracteres. Esse segundo aqui significa que vai corresponder a qualquer caracter, um específico caracter, não é específico, qualquer um caracter. E esse outro aqui, a duas estrelas com barra, significa que vai pegar todos os subdiretórios. Todos os subdiretórios. Então vamos aqui. Por exemplo, se eu quiser pegar os arquivos aqui do geometria, como é que a gente faz? A gente faz o seguinte, vamos incluir, o seguinte, deixa eu dar o desce aqui antes de tudo. Pronto, derrotamos o desce. Então no include aqui, essa lista vou digitar, src, barra, geometria. Agora eu quero incluir aqui todos os arquivos.ts aqui. Então vou dizer a estrela.ts. Vamos ver no que dá isso. Tá então da figura geométrica, fotes.js, index, quadrado, de um. Mas note que tem um negócio aqui que aconteceu, que ele pega todos os arquivos.ts, estão dentro de geometria e põe lá no desce e não tem a pasta de geometria. Então tem esse detalhe quando você usa dessa maneira aqui. Então vamos ver aqui outra maneira. Eu quero só te mostrar também, se você põe o diretor aqui dentro de geometria. Por exemplo, exemplo, dois arquivos, um.t.s. Não tem nada mesmo. Então temos o arquivo aqui, põe o teste dentro da pasta de exemplo, que está dentro da pasta de geometria. Que será que acontece? Será que vai ser incluído? Vamos ver. Da testa, sei lá no terminal. Então não foi incluído porque os arquivos.tsc só vão... Isso é incluído se está dentro da geometria. Os subdiretórios de geometria não serão incluídos. Para você poder incluir o subdiretório, tem que usar o estrela, estrela, barra. Isso significa que vai pegar também qualquer subdiretório de geometria os arquivos.ts, .ts dentro dele. Por exemplo, nesse caso, o arquivo.ts da pasta de exemplo também será incluído. Vamos lá no testa c. Certo? Com isso, esse estrela, estrela, barra, vai pegar todos os subdiretórios de geometria e o sinote que no dist, aparecer o exemplo lá com o arquivo .ts. Tá, legal. Agora vamos deletar isso aqui. Deletar. E vamos terminar o incluído aqui, só dizendo normalmente que você usa no incluído, por exemplo, mais básico, em vez de ter isso você que pegar todos os arquivos.ts da pasta src, que é o código de ponte, você pode usar o src, estrela, estrela, barra, estrela. Nesse caso aqui ele vai pegar o seguinte, ele vai pegar todos os arquivos aqui dentro de qualquer subdiretório de src ou não, de qualquer nome do arquivo. Se você quiser especificar mais para ser type script.ts, pode ser de sua maneira. Normalmente você também tem arquivos.tsx, se você usar o jsx como no react, você pode botar um x aqui, mas ele só vai pegar os testes x. E é isso aí.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: