TypeScript: o paradigma funcional no front-end

Elevando seu JS com TypeScript - Apresentação

Olá, sou Vinicios Neves, seu desenvolvedor careca e barbudo favorito. Estou aqui para apresentar um pouco mais sobre o TypeScript.

Audiodescrição: Vinicios Neves é um homem de pele clara. Tem olhos castanho-escuros e é careca. Usa barba e um bigode, óculos de grau com armação quadrada preta. Está com uma camisa vermelha. Ao fundo, uma parede com iluminação azul e uma estante à direita com decorações.

Portanto, se você já possui o conhecimento básico e entende como essa ferramenta de tipagem funciona em cima do JavaScript, vamos continuar e ver o que faremos juntos ao longo deste curso.

O que vamos aprender?

A aplicação Fokus é uma ferramenta que ajuda a gerenciar o tempo utilizando a técnica Pomodoro. É uma técnica de concentração que envolve a alternância entre momentos de foco e momentos de intervalo.

Vamos receber a base dessa aplicação já criada, sem nada de TypeScript, e faremos a refatoração.

O aspecto no qual iremos trabalhar será focado na parte de tarefas. Nas listas de tarefas, poderemos selecionar, editar e adicionar novas tarefas. Essa é o core (essência) da funcionalidade que iremos refatorar.

Este curso está incrível e estamos bastante animados, pois abrange muitos conceitos profundos que, às vezes, não recebem a devida atenção. Portanto, esperamos que esteja animado(a) para embarcar nesta jornada conosco, utilizando TypeScript e, como bônus, publicando no final esta ferramenta Pomodoro, chamada Fokus.

Vamos lá? Venha conosco!

Elevando seu JS com TypeScript - Bem começado, metade feito

Bom, vamos logo colocar começar a evoluir essa aplicação para maximizar nossa produtividade utilizando TypeScript.

Lembre-se de baixar o projeto que está na atividade de "Preparando o ambiente"!

No VS Code, vamos observar o arquivo chamado script-crud.js na raiz do projeto. Este script é responsável pela manipulação da criação de novas tarefas, onde conseguimos adicionar, editar e remover tarefas na lista do foco.

Portanto, esse script é o que vamos transformar e migrar para TypeScript.

Interface de Tarefa

Como começar essa migração? Vamos criar um novo arquivo na raiz do projeto chamado script-crud com a extensão ts de TypeScript. Esse arquivo conterá todo o código desenvolvido para o Fokus durante o curso.

Podemos começar com a parte primordial do TypeScript que é configurar nossos tipos. Quais os tipos que representam nossa aplicação do Fokus?

Voltando no script-crud.js onde está o código original, podemos observar, nas linhas 17, 18 e 19, que existe um conceito de tarefas.

script-crud.js:

let tarefas = [
    {
        descricao: 'Tarefa concluída',
        concluida: true
    },

// código omitido…

Uma tarefa é composta por uma descrição, que é o texto que representa a tarefa, e um booleano que indica se ela foi concluída ou não com true ou false.

Podemos começar montando esse tipo. Portanto, no arquito de extensão ts, vamos criar uma interface chamada Tarefa.

Essa interface vai conter as nossas duas propriedades: descricao que é uma string e concluida, que é um boolean.

script-crud.ts:

interface Tarefa {
    descricao: string
    concluida: boolean
}

Essa é o conceito menor, ou seja, a menor porção do nosso código, que representa a tarefa.

Interface de Estado da Aplicação

Conferindo para a aplicação no navegador, vamos focar na parte de lista de tarefas, que está logo abaixo do cronômetro. Essa lista consiste em múltiplas tarefas e também podemos selecionar uma tarefa.

Portanto, o estado da aplicação atualmente consiste em uma lista de tarefas ou a tarefa selecionada. O detalhe é que podemos selecionar uma tarefa para executar ou editar seu texto.

Esse conceito de estado é o que vamos manipular agora.

No script-crud.ts, vamos criar uma nova interface chamada EstadoAplicacao que se caracteriza pela nossa lista de tarefas que é um array de Tarefa, ou seja, todas as tarefas concluídas ou não.

Na linha de baixo, podemos criar um estado para a tarefa que está selecionada. Isto é, tarefaSelecionada que será do tipo Tarefa. Assim, selecionamos uma tarefa seja para editar ou executar.

interface EstadoAplicacao {
    tarefas: Tarefa[]
    tarefaSelecionada: Tarefa
}

Já estamos prontos para começar a modelar nossa aplicação. Agora, precisamos fornecer os insumos necessários para que esse script do tipo TypeScript se transforme, seja compilado, em .js. Isso é o que faremos no próximo vídeo.

Elevando seu JS com TypeScript - Imutabilidade e estado inicial

Agora estamos prontos(as) para criar o estado concreto do Fokus.

Já temos um primeiro ponto que gostaria de destacar. Vamos tomar alguns cuidados durante toda a escrita desta aplicação com a programação funcional.

Vamos trazer alguns conceitos dela para o nosso código. Um deles é que as funções deveriam ser puras. O que isso significa? Uma função não deveria gerar efeitos colaterais. Dada uma quantidade de parâmetros e os parâmetros recebidos, o retorno é sempre o mesmo.

Então, não vamos manipular esses estados dentro da função. Cada função recebe o estado como parâmetro e retorna um novo estado. Esse é o conceito que devemos ter em mente durante a execução deste código.

Criação do estado inicial

Vamos começar criando nosso estado com let estado que é o estado da aplicação. Ele vai receber um objeto.

Podemos dizer para o TypeScript qual é esse tipo do estado. Logo depois de declarar let estado, vamos acrescentar dois-pontos e tipá-lo como EstadoAplicacao.

script-crud.ts:

let estado: EstadoAplicacao = {

}

O próprio VS Code, já indica um ponto de atenção. Ele sublinhou de vermelho a palavra estado, informando que esse estado está faltando tarefas e tarefasSelecionadas. Vamos adicionar essas propriedades que estão faltando.

Neste ponto, podemos pegar as tarefas do script-crud.js. Há um exemplo entre as linhas 16 e 29. Vamos copiar só o array de tarefas e colá-lo após escrever tarefas:.

E a tarefaSelecionada? Se pressionamos "Ctrl + Espaço", o VS Code já até sugere a propriedade tarefaSelecionada. No entanto, no momento inicial da aplicação, não temos tarefa selecionada.

Então, neste primeiro instante, tarefaSelecionada é null.

let estado: EstadoAplicacao = {
    tarefas: [
        {
            descricao: 'Tarefa concluída',
            concluida: true
        },
        {
            descricao: 'Tarefa pendente 1',
            concluida: false
        },
        {
            descricao: 'Tarefa pendente 2',
            concluida: false
        }
    ],
    tarefaSelecionada: null
}

Mas o VS Code já reclama que nulo não combina com o tipo desse estado, pois espera-se uma Tarefa. Vamos ter que ser um pouco mais flexíveis. Na definição do EstadoAplicacao, vamos dizer que a tarefaSelecionada pode ser uma Tarefa ou null.

interface EstadoAplicacao {
    tarefas: Tarefa[]
    tarefaSelecionada: Tarefa | null
}

Agora estamos um pouco mais flexíveis, até porque isso faz sentido. A tarefa pode existir, pois podemos ter selecionado uma tarefa. Mas também podemos não ter nenhuma tarefa selecionada.

Funções puras

Agora que temos a base pronta, podemos escalar e começar a escrever as funções. Um detalhe sobre as funções: elas serão puras, ou seja, dados os mesmos parâmetros recebidos, o retorno será sempre o mesmo - tomando cuidado para não gerar efeito colateral.

Se você está se perguntando: "O que é esse efeito colateral? Do que vocês estão falando?" Parece nome de filme, não é?

Vamos no script-crud.js para procurar uma função. Na linha 48, temos uma função chamada removerTarefas. Ela recebe o parâmetro somenteConcluidas, que talvez seja um booleano, mas, como é JavaScript, não temos certeza.

script-crud.js:

const removerTarefas = (somenteConcluidas) => {
    const seletor = somenteConcluidas ? '.app__section-task-list-item-complete' : '.app__section-task-list-item'
    document.querySelectorAll(seletor).forEach((element) => {
        element.remove();
    });

    tarefas = somenteConcluidas ? tarefas.filter(t => !t.concluida) : []
}

E o que ela faz? Ela tem uma lógica que define qual seletor ela vai aplicar. Pega esse seletor, deleta todos os elementos e, depois, aplica um filtro. Vamos fazer um "Ctrl + B" para colapsar o painel do explorador e deixar o código bem evidente.

Em seguida, ele verifica: se é somenteConcluidas, ele aplica um filtro na variável tarefas e a modifica. Caso contrário, ele coloca um array vazio.

A variável tarefas da linha 54, que está recebendo esse valor, é a mesma que foi definida anteriormente na linha 16 em let tarefas. Isso é um efeito colateral.

Temos uma variável definida na linha 16 que está sendo manipulada na linha 54 e, muito provavelmente, outros lugares diferentes da aplicação vão gerar efeitos colaterais nessas tarefas. Nós não queremos isso.

O que desejamos é que a função receba essas tarefas por parâmetro e retorne um novo estado.

Esse conceito é chamado de função pura: dada a entrada que ela recebe, ela sempre retorna a mesma coisa. Se esses parâmetros são os mesmos, ela vai retornar sempre os mesmos valores.

Agora que temos o estado iniciado, podemos começar a construir essas funções puras, dando pequenos passos de maneira gradual. Até a próxima.

Sobre o curso TypeScript: o paradigma funcional no front-end

O curso TypeScript: o paradigma funcional no front-end possui 67 minutos de vídeos, em um total de 33 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:

• Elevando seu JS com TypeScript
• Dominando a UI
• Gerenciando suas tarefas
• Dominando a UI