React: migrando para TypeScript

TypeScript - Apresentação

Vinicios Neves: Olá! Boas vindas ao curso de React em que nosso desafio será fazer a migração de um novo projeto em JavaScript para TypeScript.

Paulo Silveira: Olá! Sou CEO da Alura e, junto com o instrutor Vinny Neves que também é desenvolvedor front-end em React, trabalharemos com o projeto Organo que desenvolvemos no curso anterior neste link.

Ao invés de evoluirmos e aprofundarmos com JavaScript, focaremos no ponto inicial do Organo e o migraremos aos poucos para TypeScript, discutindo vantagens e desvantagens desta linguagem da Microsoft.

Com isso, entenderemos como o mercado está lidando com suas características e possibilidades.

Vinicios: Exatamente! Trabalharemos com um projeto real e passaremos pela experiência de evoluir mesmo que ele já possua certo tempo de construção, então não temos muita memória do que foi feito, mas iremos migrá-lo.

O ponto principal é desmistificar a ideia de que o TypeScript é difícil e improdutivo, passando pelos detalhes da linguagem até termos o projeto totalmente migrado e publicado.

Paulo: Este curso está tão bem elaborado que mostra a grande força de organização da Alura, pois conversaremos sobre os fundamentos de JavaScript, ferramentas, tipagem e computação, além de abordarmos o React em si.

Desta forma, ficará clara a necessidade de conhecermos com profundidade as ferramentas que utilizamos no cotidiano.

Portanto, convidamos a "mergulhar" no assunto e ainda ter mais um projeto publicado no ar.

Vamos lá?

TypeScript - Revisando o Organo

Vinicios Neves: Já abrimos o link do GitHub e vamos baixar o código para começarmos a trabalhar.

Feito o download, poderemos renomear a pasta "organo-aula-5" para apenas "organo" e abriremos o VSCode.

Paulo Silveira: Não fizemos o git clone, e sim clicamos no botão "Code" no GitHub e clicamos em "Download ZIP" para baixarmos o projeto zipado e depois só fazermos o push para um novo repositório.

Vinicios: Exatamente, desta forma não estará vinculado ao repositório, então podemos manipular o código como quisermos. Ao final, criaremos um novo repositório contendo as alterações para o TypeScript.

No VSCode, temos o menu superior e clicaremos em "File > Open Folder..." ou "Arquivo > Abrir Pasta...", se estiver em portugues. Selecionaremos a pasta "Organo" e clicaremos em "Open" ou "Abrir" para disponibilizarmos o código.

Para rodarmos o projeto, apertaremos as teclas "Command + J" ou "Ctrl + J" para abrirmos o Terminal. O primeiro passo será escrevermos npm install ou npm i e executarmos, e o segundo passo será executar o comando npm start.

Este último comando está vinculado ao create React App, que no início do projeto Organo, foi a forma que utilizamos para criarmos o projeto. Portanto, a maioria dos projetos criados desta forma iniciam com npm start.

Paulo: Assim já rodará e subirá o servidor na porta certa, com tudo já preparado.

Vinicios: Exatamente, será "fora da caixa" ou "out of the box". No Terminal, já exibirá que está disponível em localhost: na porta 3000.

Se abrirmos o navegador neste endereço, encontraremos a página do Organo, e repararemos que não há mais o card cadastrado, e está limpo.

Começaremos o trabalho instalando todos os recursos que precisaremos para trazer o TypeScript ao projeto no VSCode.

No Terminal, apertaremos as teclas "Ctrl + C" para parar o npm start e não teremos mais o projeto rodando.

Instalaremos as dependências com o comando npm install novamente e adicionaremos dois traços --save para salvarmos os pacotes no package.JSON que controlará as dependências do projeto.

A primeira será typescript que é a biblioteca para migrarmos o projeto neste curso. Há uma dica interessante, pois o TypeScript basicamente é sobre tipos, seja uma tipagem estática ou uma inferência de tipo, mas aprenderemos sobre isso mais adiante.

Quando estamos utilizando o projeto junto com as bibliotecas que já usamos, muito provavelmente precisaremos instalar uma ao lado para trazer os tipos necessários.

Por exemplo, além do typescript, faremos o @type/node para trazer a tipagem do que o Node JS nos fornece. Junto com ele, traremos @types/react para os tipos da biblioteca React que usamos na montagem da interface de usuário.

Além dessas, usaremos o @types/react-dom da biblioteca React DOM que usaremos junto com o React para manipularmos o Virtual DOM.

Por fim, para não deixarmos nada "quebrado", adicionaremos o @types/jest, que é a biblioteca de testes.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Paulo: Como iremos trabalhar com tipos, nem tudo será simplesmente var, e podemos até escrevê-lo, mas sabemos que tem nome, endereço, telefone sem precisarmos adivinhar ou combinar com as pessoas sobre o que possui este grande objeto JavaScript, pois teremos uma tipagem mais estática.

Estamos declarando de alguma forma, porque já tem alguns tipos usados no React, como por exemplo um hook que já recebe qual é o listener, variável de estado e etc., sem "adivinharmos" do que se trata.

Então é como uma biblioteca que, para quem conhece linguagens orientadas a objetos, nos permite baixar onde estão definidas as classes e tipos. Já estamos selecionando algumas que provavelmente usaremos, mas se não soubéssemos, poderíamos instalar algumas outras no futuro.

Vinicios: É exatamente isso, e para entendermos de onde vieram esses nomes, nos baseamos em nosso package.json que possui as dependências deste projeto.

{
  "name": "organo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"

//código omitido

Vinicios: Neste arquivo, teremos o "react":, o "react-dom": que é pelo V8, ou seja, é o Node em si com os tipos que usamos do próprio JavaScript, enquanto o /jest-dom é a biblioteca relacionada a testes.

Por isso que, logo de início, já trouxemos todos os tipos que certamente usaremos no curso.

Depois de instalarmos tudo isso, executaremos o comando no Terminal e aguardaremos o npm baixar e instalar as dependências.

Agora precisaremos fazer algo "a mais", pois há um detalhe importante: normalmente, quando trabalhamos em front-end, instalamos um pacote e já podemos usá-lo em seguida, mas com TypeScript é diferente.

Falaremos sobre isso a seguir.

TypeScript - Instalando as dependências

Vinicios Neves: Agora que já clonamos o projeto, instalamos o TypeScript e os tipos que utilizaremos, criaremos um arquivo de configuração para indicar como será o comportamento esperado do TypeScript dentro do projeto.

Ou seja, por exemplo, configuraremos como nossa IDE, que neste caso é o VSCode, vai se comportar e quais regras irá validar. Podemos criar um arquivo mais rigoroso ou mais flexível, de acordo com nossa necessidade.

Poderíamos criar manualmente um novo tsconfig.json, mas como é um processo comum, o próprio TypeScript fornece uma forma de gerarmos este arquivo.

No Terminal, rodaremos o comando npx tsc relativo a um script no NPX e a um "TypScript Config", passando o parâmetro --init.

npx tsc --init

Paulo Silveira: Este tipo de comando provavelmente arrumará o arquivo de configuração e dependências também, certo?

Vinicios: Exatamente, Paulo. Ao executarmos o comando, notaremos que, ao rodarmos o npx, iremos rodar um script remoto, e existe para que não precisemos baixar bibliotecas ou scripts que rodamos com pouca frequência.

A segunda palavra tsc é o nome do script que queremos rodar remotamente no NPM. Em seguida, o --init é o parâmetro para o tsc.

Deletaremos e geraremos novamente para ter certeza de que funcionou. Ao executarmos de novo, veremos que não passamos nada a mais além da configuração padrão.

Então abriremos o tsconfig.json para navegarmos e entendermos pelo menos o que iremos precisar neste momento, pois é bastante amplo e executa muitas coisas.

A princípio, notaremos que é um arquivo JSON com um objeto dentro. No início, encontraremos as opções do compilador "compilerOptions": dizendo qual é o target, a versão mais nova do ECMAScript, que por padrão está pegando "es2016" de 2016, além de diversas funcionalidades comentadas que por enquanto não usaremos.

A parte de módulo está definida em "module": como "commonjs", a interoperabilidade entre módulos "esModuleInterop": e o script "strict": que força a validação de tipos. Então começaremos desta forma.

Agora que clonamos o projeto, instalamos as dependências e geramos o tsconfig.json, poderemos fazer a primeira migração a seguir.

Sobre o curso React: migrando para TypeScript

O curso React: migrando para TypeScript possui 147 minutos de vídeos, em um total de 43 atividades. Gostou? Conheça nossos outros cursos de React 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:

• TypeScript
• Migração controlada
• Tipos complexos
• Avançando nas tipagens
• Mergulhos mais fundos