Resumo da Aula de TypeScript

Olá pessoal, estamos de volta com mais uma aula de TypeScript. Nesta aula nós vamos aprender como separar essas classes aqui, indivíduos, estudantes e funcionários em arquivos separados para poder melhorar nossa organização de código. Também vamos aprender a fazer o arquivo virar um módulo do TypeScript, em vez de usar esse namespace da linha 1 sobre classes que temos aqui. Então vamos começar? Para melhorar a organização desse código, gostaríamos de fazer o seguinte, da linha 2 a 14 vamos deixar essa classe indivíduo nesse arquivo indivíduo.ts. Agora para estudantes, eu vou extrair para o arquivo estudantes.ts e o funcionário para o arquivo funcionário.ts. E essas implementações aqui de exemplos, a gente pode também extrair para outro arquivo. Mas como fazer isso? Bem, vamos fazer o seguinte aqui, vamos aqui na parte tssrc, eu vou criar dois arquivos, um para o estudante, estudante.ts e outro arquivo na parte rcrc para o funcionário.ts. Então é o seguinte, vamos aqui voltar no indivíduo. Sabe esse namespace aqui? Por que a gente adicionou o namespace? Porque anteriormente a classe indivíduo estava entrando e concluindo com a interface indivíduo que a gente tinha definido anteriormente. Se eu remover o namespace, olha aqui, vou remover o namespace, tá? Agora não está mais o namespace sobre classes. Se eu rodar o tssrc aqui no terminal, vai dar erro, como a gente já viu anteriormente, nesse arquivo propriedades de um objeto em função, nós temos aqui um interface indivíduo com o mesmo nome da classe e temos um conflito. Por que isso acontece? Porque se você tem um arquivo de TypeScript e dentro desse arquivo não há as palavras-chave import ou export, tá? Se não tiver essas palavras, ele não vai tratar o arquivo como um módulo. Em vez de fazer isso, ele vai pegar todas essas coisas declaradas no arquivo e pôr no escopo global. Então vai ser um script cujo escopo é global. Então outros arquivos também vão ver, vão ter isso como disponível. Mas isso normalmente não é legal ter as coisas no escopo global, né? Nós queremos compartimentalizar cada arquivo e se um script, se um arquivo quiser utilizar certa função ou classe de outro arquivo, nós vamos importar, tá? Nós não queremos que tudo seja disponível automaticamente. Nós só vamos requerer as coisas que nós precisamos no nosso arquivo através da palavra-chave import, importar. Agora nós usamos o export para quê? Para poder disponibilizar certas coisas de um arquivo para fora, certo? Para outros arquivos, exportar. Então vamos ver aqui. Então vamos primeiro fazer o seguinte. Vamos adicionar a palavra-chave export antes da classe indivíduo. O que vai acontecer? Então essa classe indivíduo você vai exportar, export. Isso vai disponibilizar a classe indivíduo para outros arquivos, somente se aquele arquivo fazer um comando de import, de importar. Se ele importar a classe indivíduo para poder utilizar naquele outro arquivo, tá? Agora como nós usamos a palavra-chave export, não importa onde foque seja, onde foque esteja neste arquivo, o TypeScript vai pegar este arquivo e vai torná-lo em um módulo. Com isso, as coisas definidas dentro deste arquivo não mais serão adicionadas ao escopo global. Vai ser compartimentalizado neste módulo chamado indivíduo, tá? .ts. Então com isso, vamos salvar. Vamos dar o testes de C novamente para ver o que acontece. Se lembra que tem um erro por causa do escopo global, se a gente der o testes de C agora, não há mais erro. Como a gente já falou anteriormente, só de você adicionar a palavra-chave export, dentro do arquivo indivíduo.ts, o TypeScript já trata este arquivo como um módulo, e ele não vai mais pegar o indivíduo, a classe indivíduo, e pôr no escopo global. Outros arquivos não irão ver que tem a classe indivíduo mais. Pronto. Vamos continuar então. Vamos primeiro pegar a classe estudante aqui, e recortar, e colar lá no arquivo estudante.ts. Como a gente quer que disponibilize a classe estudante para outros arquivos, eu vou dar o export, e o export também vai disponibilizar para fazer este arquivo ser um módulo. Salvei, mesma coisa para funcionário. Vamos fazer junto. O indivíduo recorta a classe funcionário, vai para o arquivo funcionário.ts, cola, para tornar este arquivo um módulo e disponibilizar a classe. A gente usa export, antes da declaração. Salva, voltando ao indivíduo para o test-c, só nos resta remover estas partes aqui de baixo, porque o que vai acontecer se a gente tem isso aqui? Bem, linha 17 se refere a estudante, mas não há estudante nesse arquivo. Então o escopo do arquivo não inclui a declaração de estudante. Vamos ver o que acontece se a gente rodar o compilador. O compilador só de curiosidade. Realmente, você vê aqui, se eu vou aqui no primeiro erro, estudante.ts, não podemos... Então deu vários erros, na verdade. O que é que aconteceu? Vamos ver aqui. O primeiro erro está dizendo que não pode estender a interface indivíduo. Ah, então o problema é em outro arquivo. Em outro arquivo nós temos a propriedade de um objeto, em função temos a interface indivíduo. Ele está pensando que a gente vai usar a interface indivíduo, mas na verdade nós estamos usando a classe. Então esse arquivo tem escopo global. Uma maneira de eu pegar isso e tirar o escopo global é através do name space, a gente já usou. Outra maneira é você usar o export interface desse arquivo. Tanto faz, mas como eu não estou trabalhando nesse arquivo, nem sei se eu quero exportar essa interface aqui para ninguém, então só vou dar o name space aqui de leve, bem rapidinho, sobre interfaces, só para não ter que fazer nada, não ter que pensar, tá? Mas é só para eu tirar esse conflito, vou pegar e arrastar tudo para dentro do corpo do name space. Então eu arrastei tudo para dentro da corpo do name space. Então com isso não vai ter mais esse conflito, porque ele estava no escopo global. Isso vai tirar aquele primeiro erro. E agora vamos ver os outros. Estamos aqui. Agora o erro é diferente, tá? Esse é o erro na verdade que eu queria te mostrar anteriormente. Vantando aqui na indivíduo.ts, na verdade estudante, estudante.ts. Então nós usamos a classe estudante extends indivíduo. Bom, é bem, esse arquivo é primeiramente o módulo, porque tem o export aqui, ou... Certo? Agora, estudante é uma classe, certo? Extende indivíduo. Agora, o que é que é indivíduo? Não tem indivíduo nesse arquivo em não lugar. Então, dá erro. Leiro na linha 1 coluna 32. Não encontrou o nome indivíduo. Isso porque nós temos que importar, tá? Toda vez que nós queremos utilizar algo que esteja fora do nosso arquivo, no nosso módulo, tá? No nosso módulo nós temos que importar. Através do comando import, tá? Então vou dar um import. Indivíduo. E eu colo a chave lá, from. Mas onde é que está? Está no arquivo indivíduo.ts, que está na mesma pasta, olha aqui. Então, se está na mesma pasta, vou dar o ponto barra, para dizer que está na mesma pasta. Indivíduo.ts, não precisa. Vamos testar agora se o erro se foi. Tinha 5 erros anteriormente, agora só tem 3. E vamos lá, sempre, para o primeiro erro. Resolver o primeiro erro. Certo, então deu problema ao... No funcionar agora, ponto.ts, linha 1, coluna 34. Então você já sabe o que fazer, que tal? Você tenta fazer ciproop? Como é que corrige esse erro no arquivo funcionário.ts? Ele não está reconhecendo o indivíduo por quê? Por que não é importante? Vamos ler funcionário.ts. Aqui antes, import. Chaves, abre as chaves, indivíduo. Pronto, barra, está na mesma pasta. Arquivo, indivíduo.ts, não é preciso. Então, as chaves é porque a maneira que a gente exportou lá do indivíduo.ts, export, já exportou a classe assim. Esse aqui é um export, e toda vez que você dá um import, tem que usar as chaves. A única maneira de não tiver que usar aquelas chaves é se tivesse o export default. O default é que é o export que não precisa adicionar chaves. Então, não esqueça das chaves, neste caso. Não com isso, vamos rodar o terrasse C de novo, ver se não tem mais nenhum problema. Pronto, agora o problema é no arquivo indivíduo. Não encontrou estudante, indivíduo.ts, linha 17. Não escutou, não encontrou o funcionário. Na linha 20, indivíduo.ts. Bem, voltando a indivíduo.ts, temos essas implementações aqui. Normalmente a gente não põe essas coisas dentro da mesma pasta que a declaração da classe, obviamente. E se você quiser dar um import aqui, vai estar meio esquisito, porque você dá um import do estudante aqui em cima e do funcionário, mas o estudante também dá um importo indivíduo e tem essa relação cíclica, então não é muito bom. Então, vamos recortar e fazer um novo arquivo para isso. Na CRC, vou criar sobreclasses.ts. Esse arquivo sobreclasses, eu vou colar aquelas linhas. Como a gente está usando o estudante e o funcionário, a gente precisa o quê? Importar. Agora, no momento que você usar import, esse arquivo se tornará um módulo, por isso todas as coisas que você fizer aqui não estarão disponíveis automaticamente no escopo global. Então, isso é bom. Então, vamos dar um import do quê? Primeiro, o estudante da onde? From.barra.estudante. O arquivo acontece. E o próximo import abre as chaves, o funcionário, que é o nome da classe. From.funcionário. Ah! Pronto. Com isso, o estudante vai estar reconhecido. O funcionário também estará reconhecido. Salvar sobreclasses.ts. Voltando ao endivido.ts, vou salvar. Só tenho a declaração da classe. Muito bem. Voltando ao terminal, vamos finalmente ver se não tem mais erro. TSC, vai lá, compre lá. É! Muito bem. Não tem mais erro. Finalmente, hein? Então, vamos aqui revisar, recapitular o que a gente fez. Tínhamos o arquivo individuo.ts com as declarações das classes individuo. Estudante, funcionário, tudo no mesmo arquivo. Não tínhamos nenhuma palavra-chave export, nem import. Por isso aquele arquivo, tudo que estava dentro dele, foi para o escopo global. A gente tinha um namespace, né? Em cubrir aquilo para não poder ter conflito com aquela interface do outro arquivo, propriedades de objetos, não sei o que. A gente tirou o namespace e a gente pôs o export-class no endivido. Mudamos, movemos, tiramos o estudante e o funcionário extraímos para os seus próprios arquivos, estudante.ts, funcionário.ts. Exportamos as classes para poder tornar esses arquivos módulos. Como os arquivos usam coisas de fora desse modo, temos que usar o import. Import, nesse caso, o endivido da, do módulo endivido, do arquivo lá que tinha classes portadas. Tínhamos também aqueles outros comandos aqui. A gente extraiu o próprio arquivo, usou import para poder usar o estudante e o funcionário e estava em outros módulos. Com isso esse arquivo também se torna o próprio módulo e não vai ter mais, não vai ter mais corpo global nessas variáveis aqui. Está certo? Então, por essa aula é só e até a próxima. Tchau!