Resumo da Aula sobre Classes em TypeScript

Olá pessoal, estamos de volta com mais uma aula de TypeScript. Vamos falar agora de classes. Essas classes aqui. Então, antigamente no JavaScript não havia classes, né? Mas com desde o Acrimascript 2015, também chamado de S6, a palavra chave class foi introduzida. Agora o TypeScript também tem suporte a classes. Então, vamos olhar aqui como é que faz o negócio. Agora, primeiro de tudo, você já deve ter um conhecimento básico de classes, porque eu não vou muito em detalhes de qualquer class, como é que faz objetos, essas coisas assim. Então, vamos começar aqui. Eu criei um novo arquivo na parte de src aqui, chamado individual.ts. Então, eu vou criar uma classe aqui para apresentar um indivíduo, seja uma pessoa, tá? Então, vamos aqui ver. TypeScript faz a mesma coisa que JavaScript, só falar class, falar a palavra chave, vou chamar indivíduo e abre as chaves. Pronto, fiz a classe, precisa ter nada agora. Como é que faz um objeto, uma instância do indivíduo? Simples, só falar newIndivíduo com abre, fecha, parênteses. Então, isso vai chamar o que? Construtor da classe e vai criar uma instância de indivíduo. Você pode atribuir uma variável, vou chamar Maria, essa maneira aqui. E eu tenho o meu alceio aqui de desenvolvimento habilitado, o TypeScript Atom, o meu adito Atom, para poder indizir o que é que esses negócios aqui, se eu for custou do mouse. Fazer Maria do tipo indivíduo, indivíduo é aqui, está sendo usado no construtor, certo? Então, pronto, criamos uma classe, vou falar o chave class, o nome da classe indivíduo, abre uma chave, não tem nada ainda lá, mas dá para fazer instância assim, fala o chave newIndivíduo, a mesma coisa que já vou escrever. Agora, vamos fazer o seguinte, vamos adicionar o nome a esse indivíduo, então tem uma classe indivíduo que tem como atributo o nome, o nome da pessoa, o nome vai ser uma string, com o dívito de caracteres. Então, como a gente faz isso aqui no TypeScript? Vem, vamos ver aqui, vamos supor que quando você está criando aqui o indivíduo, você pode dar o nome, então vou falar aqui, Maria, o nome do indivíduo. Agora, ele já reclamou aqui o meu editor de texto, eu tenho extensão, porque ele espera que não tenha nenhum argumento, 0, mas tem 1, porque ainda não definimos o atributo da classe, nome. Então, vamos fazer o seguinte aqui, vamos dizer que dentro da classe, do corpo da classe, eu vou dizer nome, que é o nome do atributo, 2 pontos, string, tá? E isso é como você define que está certo, essa classe vai ter um atributo o nome. Agora, nós passamos no Maria, mas não fez nada, não atribuiu o nome, a Maria, porque não tem construtor, então vamos ter que fazer o constructor aqui dentro da classe. E esse constructor vai ser chamado quando você fizer newIndivíduo, Maria vai ser passada como argumento a função do constructor aqui na linha 4, então precisamos adicionar o parâmetro. Então, vou falar o nome, 2 pontos, string. Então, Maria vai ser passada como argumento ao constructor e vai estar armazenado nessa variável que eu chamei de um nome, pode ser qualquer coisa que você quiser. Agora, esse valor, Maria, eu quero atribuir ao nome do indivíduo. Então, vou falar o quê? Des para se referir à instância do indivíduo, des ponto o quê? Já tem que ir no autocompletar, certo? Mas des ponto o nome, tá? Porque esse nome se refere a esse aqui, tá? Agora, eu tenho que atribuir o nome a isso, né? Desqueci disso. Pronto, então o nome, Maria vai ser atribuído a des ponto o nome, que é o valor do nome da instância, Maria aqui, que está armazenado, Maria. Tá bom? Sem problemas aí. Legal, então criamos a classe, como atribui o teu nome, criamos um constructor para poder atribuir o valor recebido na chamada aqui do new indivíduo ao próprio nome da instância. Tá? Então, uma coisa nova no TypeScript é essa parte aqui da linha 2, que o resto é tendo JavaScript mesmo. Na linha 2 que você define o tipo, né? Do atributo. Note que isso aqui é só para o compilador do TypeScript check out, na verdade, no JavaScript não faz nada. Na verdade, isso aqui é até removido. Se você deixa eu te mostrar aqui, eu vou salvar isso. Vou aqui, na verdade, vou copiar e vou usar o playground aqui. Eu estou no navegador no playground do TypeScript, vou colar aqui. E olhe no lado direito da tela aqui, nós temos o código que é transpilado ao JavaScript. Note que o que é que aconteceu. A linha 2, nome string, se foi. Mas o resto é a mesma coisa. Isso porque a linha 2 é só para o TypeScript poder checar o atributo nome, o atributo nome tem que ser o one string. Mas na verdade, no JavaScript não precisa, né? Tá bom? Então, isso é o detalhe que vem do TypeScript. Eu volto aqui o nosso editor de texto. Então, vamos aqui dar uma pausa e continuar a próxima aula. Que tal? Então, até lá.