Resumo da Aula de TypeScript: Configuração do TSconfig.json

Estamos de volta com mais uma aula de TypeScript. Nesta aula nós vamos aprender sobre o arquivo TS config.json de alta samba para poder adicionar configuração ao nosso configurador de TypeScript, TSC. Voltando aqui aos nossos arquivos, temos o exemplo.ts aqui no lado esquerdo da tela, e o arrays.ts. Mas note que os arquivos gerados, os arquivos de JTS, extensão JTS, estão no mesmo local, mesmo diretório, que o arquivo de código fonte.ts. Mas isso nos confundi muito, se lembra que eu falei antes que às vezes você pode se confundir e terminar editando o arquivo JTS em vez do arquivo TS. Então vamos isolar esses arquivos gerados em outra pasta. Vamos fazer o seguinte, eu vou criar uma pasta aqui chamada src, vai ser a pasta onde a gente vai pôr o nosso código TS, de TypeScript. Eu vou mover exemplo para essa pasta src, arrays.ts para a pasta src. Legal. Agora, a pasta dos arquivos JTS será a pasta, pode ser qualquer build ou lib, qualquer coisa que você quiser. Eu vou usar dist, qualquer nome que você quiser, mas saiba que essa vai ser a pasta onde os arquivos JTS serão gerados, arquivo de build. Então a gente vai mover esse arquivo para lá. Legal. Mas o que acontece aqui? Se a gente for de volta a terminar e falar TS.src.arrays.js, para o ponto TS, me desculpa, ponto TS, você vê que já estou confundindo os arquivos. Então o que é que acontece? Então ele vai gerar o arquivo na mesma pasta que o arrays.ts. Isso não é legal, a gente não quer combinar os arquivos gerados com os arquivos de código fonte ntypescript. Então para a gente poder modificar os configurações do compilador, para ele poder gerar os arquivos e por dentro da pasta dist, em vez da pasta src, a gente vai ter que criar um arquivo de configuração chamado TS.config.json. Então na pasta do seu projeto a gente vai criar TS.config.json. Esse arquivo vai ser um arquivo de formato J.t. Json. A gente vai abrir a chave dentro do arquivo e dentro da chave vamos definir uma propriedade chamada compiler options. Note que o walk aqui é capitalizado em letra maiúscula. Essa opção compiler options vai ser um objeto, abre a chave de novo depois dos dois pontos. Aí tem uma propriedade chamada outdir, que é o diretório de saída, Output Directory. Então a gente vai dizer que a gente quer que gere os arquivos dentro da pasta dist. Então em vez de gerar os arquivos js no mesmo local que os arquivos de TS, nós vamos dizer que o nosso compilador, por favor, os arquivos gerados devem ser movidos para pasta dist. Então deixa eu remover a dist para você ver o que vai acontecer. Eu vou remover dist e eu vou remover esse arrays.js que está dentro do src que a gente não quer nenhum js aqui dentro. Só queremos TS dentro do src. Eu vou salvar esse arquivo. Outdoor options, Outdir e o dmaiúsculo. E aqui é o diretório que eu quero que os arquivos sejam movidos depois de compilar. Então com esse salvo a gente vai de volta e tentar compilar novamente. TSc src barra arrays. Vamos ver. Então ainda não deu certo, né? Mas por que será? Deixa eu remover src barra arrays. Agora deu certo, tá? Então vamos aqui. Dist, você note que gerou os arquivos array, exemplo. Deixe o array para depois, vamos só focar o que aconteceu. Anteriormente eu tentei usar TSc num arquivo específico que ele gerou na mesma pasta. Mas aí a gente não quer isso. Então é porque ele não observou as configurações do TSconfig. Naquele caso eu li. A gente vai ver já já como definir. Mas se você só rodar TSc por si próprio, ele vai procurar pelo arquivo TSconfig.json que a gente definiu. E ele vai pegar todos os arquivos que encontraram de TS e vai compilar para pasta dist, que é definida nessa propriedade Outdoor. Tá certo? Agora se você quiser fazer como eu fiz antes que não funcionou, deixa eu demonstrar de novo. Vou remover dist. Tentar isso aqui com o nome específico do arquivo. Aí ele vai na própria pasta. Se você quiser que ele vá para dist, você tem que dizer aqui no...