TypeScript parte 2: avançando na linguagem

Elaborando uma solução de view - Apresentação

Olá, pessoal. Eu sou o Flávio Almeida e desejo as boas-vindas ao segundo curso de TypeScript na plataforma Alura. Neste curso, vamos avançar na linguagem TypeScript.

Mas, como vamos avançar? Primeiro, vamos concluir a nossa aplicação de negociação de bolsa de valores, permitindo incluir dados na nossa tabela.

Uma parte interessante é que vamos implementar essa solução de atualizar o DOM implementando um micro framework para atualizar a view. Algo que o React faz dentro do JSX.

É claro que não vamos implementar igual ao que o React faz, nem com o escopo que o React tem. Vamos implementar algo bem primitivo – mas que funciona, para motivar, de uma maneira estimulante e elegante, o aprendizado de vários recursos da linguagem TypeScript.

Por outro lado, eu também vou abordar o TypeScript sob o enfoque da orientação de objetos. Veremos recursos como herança, encapsulamento e mais cosias do mundo de orientação de objetos que o TypeScript, como linguagem, tem uma série de recursos que permite implementarmos isso de boa maneira.

Nós também vamos configurar o compilador do TypeScript, vamos fazer ajustes na aplicação, tornando, cada vez mais, mais apurada à nossa aplicação.

Aqui está um exemplo de código que vamos escrever durante o curso. Vamos criar, trabalhar com generics, com enumerations, entre outros. Uma coisa importante, para deixar claro, é que os mesmos requisitos de infraestrutura desse treinamento, são os mesmos requisitos do treinamento 1, do primeiro, de Fundamentos.

Então, o que você precisa? Ter o Chrome, Note, no mínimo a versão 10.21, e também o Visual Studio Code, porque ele se integra muito bem com o TypeScript. Então, se você quiser, você voltar para o curso de Fundamentos, que é um pré-requisito desse treinamento para ver os requisitos de infraestrutura.

Tudo bem? Já que vimos aqui, vamos começar os trabalhos.

Elaborando uma solução de view - Modelo para o usuário

Precisamos continuar a nossa aplicação. Nossa aplicação, no primeiro módulo, nós só chegamos até a parte que captura os dados do usuário, da negociação que o usuário imputa. Clico em incluir. Eu consigo ver no console.log, vou adicionar mais uma negociação.

É possível notar que há uma lista de negociações sendo exibidas no console. Se eu volto para o nosso código, no ato de adicionar uma negociação, o nosso Controller cria uma negociação baseada no input do usuário, nos elementos de UI, e temos esse modelo de negociações.

Esse modelo de negociações foi aquele modelo que nós criamos para garantir que uma negociação só pode adicionada nessa lista, ela não pode ser removida e nem modificada.

Então, atendemos essas regras de negócio no primeiro curso. Agora, precisamos resolver uma coisa: não faz sentido eu pedir para o usuário incluir uma negociação e pedir para ele ver no console o resultado. Eu quero exibir essa lista de negociações em uma tabela bonita aqui, onde eu tenho a coluna data, coluna valor, quantidade. Eu quero exibir isso aqui embaixo.

Então, com base nesse nosso modelo de negociações lá do nosso código, eu tenho que fazer isso toda vez que eu adicionar uma negociação lá dentro. O meu DOM, a minha página, tem que refletir os dados mais atualizados do meu modelo de negociações.

Como fazemos isso? Há duas manerias. A primeira, e que eu não vou utilizar, é a imperativa, em que, no nosso código, vamos ter que criar manualmente uma tabela, um elemento com document, create, element, table, criar cada tr na tabela, passar os dados para ela.

Ao programar de maneira imperativa, vou gastar bastante tempo escrevendo um código responsável pela mutação do DOM, dos elementos da tela, e eu ainda vou ter de me preocupar em toda vez que eu adicionar uma negociação, ter que ir lá na tela atualizar a minha página para refletir o meu modelo.

A abordagem que eu vou utilizar vai ser a abordagem declarativa. Isso significa que no lugar de eu ficar programando cada elemento do DOM, atribuir valor, o que eu vou fazer? Eu vou escrever um template HTML que vai buscar os dados do nosso modelo, e ele automaticamente vai renderizar esses dados no HTML toda vez que meu modelo mudar.

Você pode questionar: Flávio, então é por isso que você está com essa aba do React aberta do lado esquerdo?. É por isso. Porque o React usa essa maneira declarativa na hora de trabalhar. Não quer dizer que vamos criar um React, mas, sim, um micro framework, usando o TypeScript, que é bem parecido com o conceito do JSX do React, que eu vou relembrar.

Se você já viu, ou nunca viu, não precisa se preocupar. Só vou fazer um paralelo sobre algo bem legal. Eu tenho um projeto do React, onde estou exibindo uma lista de nomes com Flávio, Henrique e Almeida.

Se eu olho para o código desse projeto do React, você não precisa saber nada de React. Olha comigo. Eu tenho esse item aqui, que é uma classe, chamada component, e dentro dele tem uma propriedade state, onde eu tenho uma lista de nomes.

Essa lista de nomes é modelo para o React. E se eu olho no método hanger, vamos ter um HTML com uma UL, um HTML escrito, e dessa lista, com o meu modelo, eu vou interagir nessa lista de modelo e vou gerar o novo HTML com os dados desse modelo.

Então, isso significa que se eu voltar para cá, está escrito Flávio. Se eu troco para Camila e salvo, volto no meu navegador, o “Camila” mudou. Por quê? Porque toda vez que eu mudar o meu modelo, eu quero que minha view seja atualizada. Então, a maneira de trabalhar com o JSX é interessante porque é uma forma declarativa.

Eu tenho o meu modelo de um lado, tenho o meu template do outro, e peço para o React fazer o seguinte: “React, toma esses dados e gera esse HTML para mim”. Vamos fazer algo bem parecido no nosso projeto.

Vamos criar uma solução de view, uma solução para eu pegar uma view, passar o modelo para ela e falar: “View, se vira. Renderize esse item para mim”.

Então, isso vai tornar o nosso projeto mais interessante, vai nos instigar a entender um pouco como o React funciona. Mas, o mais importante, é que vai demandar da gente um conhecimento maior de TypeScript.

Então é isso o que eu quero colocar para vocês. Eu posso fechar a aba desse projeto do React, porque eu não vou trabalhar mais, e vamos lá começar a nossa solução de view.

Elaborando uma solução de view - Criando nossa primeira view

Vamos partir para a nossa implementação da view de negociações. A primeira coisa, lá dentro da nossa pasta do projeto, nós temos a pasta “models”, temos a pasta “controllers”, e agora temos a pasta “views”.

Dentro de “views”, eu vou criar o arquivo negociações-view.ts. Vou criar esse arquivo lá dentro. Como estamos usando página de orientação objeto, eu vou fazer o export class negociaçõesView. É uma class negociaçõesView que faz parte do módulo negociações-view, que eu vou precisar importar em outros lugares da aplicação, por isso que tem aqui o export.

Essa classe vai começar, agora, só para compreendermos o mecanismo, com um único método, que é template. Esse é o único método template que vai sempre retornar uma string. Método template retornando uma string.

Está dando erro porque eu preciso retornar alguma coisa, e o TypeScript é inteligente o suficiente para detectar, e nós vimos isso no módulo anterior, que se eu estou dizendo que eu estou retornando uma string, eu preciso retornar.

Qual é a razão de existir deste template? Ele vai me retornar uma string HTML, no futuro, com a HTML que eu quero mais os dados que eu quero, fundidos nesse HTML. Mas, por enquanto, eu só vou retornar o HTML da tabela com o seu cabeçalho.

Como eu vou fazer? Eu vou dar um return de uma template(): string. Sobre JavaScript, estudamos nos outros cursos que existe uma string e a template string. Uma das vantagens do template string é que ele permite quebrar a linha sem precisar ficar concatenando, colocando mais.

Isso significa que tudo o que eu escrevi aqui dentro vai ser parte da string. E isso é perfeito, porque podemos inventar o nosso código. Então, o que eu vou retornar?

Para não ficar quebrando muito a questão de orientação, eu vou escrever logo embaixo. Eu vou escrever uma <table class=’’table. Se você passar o mouse em cima, em cada uma das TRs, eu quero que faça um hover. Então, eu vou usar o table-hover, e eu quero ter uma borda. table-bordered.

Então, estou criando uma table. Você pode dizer: “Flávio, você está escrevendo uma HTML”. É isso. Lembra daquela ideia da forma declarativa? Estou declarando como deve ser a minha tabela. Vai ser uma table com a classe table, table-hover, table-bordered. Tudo isso vem do boostrap, que já é importado automaticamente pela aplicação.

Vou ter um thead, que é o cabeçalho da tabela. Dentro do cabeçalho da tabela eu vou ter uma tr, que é a linha que representa os meus dados, o cabeçalho. E aqui eu vou colocar um th, porque como é cabeçalho, não se usa td, usa th.

O th, que é o table header. Primeiro vai ser data, fecha aqui o th. Vou ter o quantidade th. Vou ter o valor th. Então, faz sentido? Se você escreve HTML, você sabe que esse HTML é uma tabela onde eu tenho o cabeçalho dela. A primeira linha no cabeçalho dela tem uma coluna data, uma coluna quantidade e uma coluna valor.

Agora eu preciso definir o table body dela, que vai ser o tbody. Só que o tbody, ainda não vamos trabalhar com ele. Mas você já vai encaixando na sua cabeça que esse template, quando eu chamar, ele tem que gerar essa tabela aqui com os dados da minha negociações.model. Faz sentido?

Então, vamos fazer um pequeno teste, só para saber se as coisas estão se encaixando.

Sobre o curso TypeScript parte 2: avançando na linguagem

O curso TypeScript parte 2: avançando na linguagem possui 174 minutos de vídeos, em um total de 63 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Elaborando uma solução de view
• Herança e reaproveitamento de código
• Visibilidade de métodos e Enumeration
• Lapidando nosso código
• TSC e StrictNullChecks