Iniciando no Typescript

Semana passada, deu-se a primeira Next Level Week (NLW), evento organizado pela Rocketseat no qual programadores experientes ou nem tanto assim (como eu), aprendem em uma semana as bases para a criação de um projeto full-stack¹ usando JavaScript.

As tecnologias usadas seguem a mesma pilha ('stack') utilizada na Semana Omnistack, evento que a NLW veio a substituir: NodeJS, React, React Native (com Expo). Neste artigo, vou descrever minha experiência, assim como fiz com a última Semana Omnistack.

O projeto

Expo Tela inicial do site

Nesta primeira edição da NLW, o projeto foi o Ecoleta: um aplicativo para cadastro e localização de pontos de coleta de resíduos. Desta vez, a equipe se preocupou com quem está começando e fez no ato do cadastro, um pequeno teste de aptidão para que possa se acompanhar as aulas da semana de acordo com o seu nível.

Os menos experientes com JavaScript entravam no modo "Starter" e os demais no modo "Booster". No meu caso, entrei neste último, portanto minha descrição se refere a ele. Mas baixei as aulas do "Starter" para assistir depois.

TypeScript

O diferencial desta edição é que foi utilizado o TypeScript, uma adição ao JavaScript padrão que faz com que este possua tipagem estática e outros recursos. Tipagem estática, em poucas palavras, é escrever no código qual o tipo do valor que deve ser retornado ou recebido.

Imaginando isso em uma situação real, seria como receber um pacote com a descrição correta do que tem dentro, sem surpresa: "contém uma caixa de chocolates", e quando se abre, lá eles estão.

Isto é muito comum em linguagens de baixo nível², como C ou C++ para que o computador não precise "pensar" no formato do que recebe e desperdiçar recursos da máquina. Hoje pode até parecer besteira, mas imagine o quanto isso era essencial quando os computadores mais avançados não tinham sequer 1 megabyte de memória RAM.

No caso do TypeScript ele não visa economizar recursos da máquina diretamente, pois o código final será transformado em JavaScript, porém o resultado será mais previsível, pois no desenvolvimento você será alertado caso faça alguma besteira que envolva tipos, evitando erros que passariam despercebidos e poderiam, inclusive, afetar o desempenho.

Minha experiência com o TypeScript

Pensei que ia ser mais trabalhoso do que realmente foi. O interessante é o que os próprios erros ajudavam você a corrigi-los.

Alguns pacotes e configurações adicionais de tipos precisam ser instalados para o desenvolvimento, além de um pouco mais de linhas de código, mas no final a probabilidade menor de erros valerá a pena.

// Exemplo de um componente em TypeScript
import React from "react"

// Interface:
// Descreve o tipo de informação que virá nas propriedades do componente.
interface Props {
  title: string
  message: string
}

// React.FC: É o tipo que define o tipo da constant Message como um componente funcional em React.
// <Props>: Recebe argumentos conforme informado na interface Props.
const Message: React.FC<Props> = ({ title, message }) => {
  return (
    <div className>
      <h2>{title}</h2>
      <p>{message}</p>
    </div>
  )
}

export default Message

O código acaba ficando um pouco mais verboso, mas também mais descritivo. Isto ajuda a entender o que ocorre em cada parte.

Ah! O Expo...

Expo Tela do aplicativo para celular do projeto

Expo, por que me persegues? É a pergunta que veio não só na minha cabeça, como para outros que participaram da NLW. Alguns participantes da semana até chegaram a pensar em desistir de fazer o aplicativo móvel, tamanha a dificuldade em lidar com os erros aleatórios que apareciam. Fiz minha parte e incentivei a não desistirem, sei como é a sensação. Sofri na primeira vez que usei também. Espero ter contribuído de alguma forma.

Como já o usei outras vezes, acabei entendendo algumas coisas e evitando alguns problemas. Antes desta NLW tive o cuidado de formatar a minha máquina, pois alguma coisa no meu Node e NPM estavam muito erradas. Minhas instalações estavam muito mais lerdas do que o normal e provavelmente era alguma coisa com permissões, pois toda santa vez que instalava um pacote global, eu tinha de usar sudo para completar o processo.

Como estou em um Mac, desta vez instalei pelo Homebrew em vez dos pacotes que aparecem na tela inicial do site do Node JS. Com isso, tudo resolveu funcionar melhor para mim. Minha dica é que se possível, evite instalar o node com um pacote de instalação executável (".exe", ".pkg"). Faça a instalação pelo terminal usando um gerenciador de pacotes: "apt","dnf" ou "pacman" no Linux, "brew" no Mac e "chocolatey" no Windows.

Outra coisa que fiz, foi mudar a versão do SDK³, pois o meu celular não suportava a versão mais atual que vem com a instalação padrão do Expo. Era exibida uma tela azul escrita: "Something went wrong. XX.X.X is not a valid SDK version...". Para isso, editei duas linhas no meu package.json:

"dependencies": {
  "expo": "~35.0.0", // A versão que funcionou para mim
  "expo-constants": "~7.0.0",
  "expo-font": "~7.0.0",
  "expo-location": "~7.0.0",
  "expo-mail-composer": "~7.0.0",
  "react": "~16.9.0",
  "react-dom": "~16.9.0",
  // Abaixo, o pacote com a versão certa para a versão do Expo que mudei
  "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz"
}

Após isto, apague a pasta node_modules:

$ rm -rf ./node_modules

E finalmente reinstale as dependências usando o gerenciador de pacotes: npm install ou yarn install.

Conclusão

Olha, eu não sei o que esperar dessa consulta aí, fala para mim o que vai vir dela. Se você me falar eu te ajudo a escrever o código mais rápido também. TypeScript

O que esperava ser bastante difícil acabou não sendo. O TypeScript não é tão complicado assim. Exige um esforço a mais no começo, mas depois tudo fica mais previsível. Sem dúvida, a parte do aplicativo para celular foi a mais difícil, nem tanto pela dificuldade do código, mas pelos erros gerados. Confesso que não tive tantos erros assim, o que me atrasou foi mais o fato de o aplicativo do Expo no meu celular não querer rodar direito. É, preciso trocar o velho de guerra.

De resto deixo os meus parabéns à equipe da Rocketseat, tanto a didática como a preparação de todos os materiais foram muito boas.

dois:pontos