DEV Community: Wesley Araújo

ts-node, lendo arquivos TypeScript com Node.js

Wesley Araújo — Mon, 18 Apr 2022 23:17:43 +0000

Toda linguagem de programação necessita de alguma ferramenta que leia o que está sendo pedido em seus comandos e assim como qualquer linguagem, o JavaScript tem seu próprio interpretador, o Node.js.

Porém, para usuários mais avançados em JavaScript, muitas vezes eles preferem migrar para a utilização de seu superset, o TypeScript, que por sua vez não é interpretado diretamente pelo Node.js. Apesar de atualmente ter o seu próprio interpretador, o Deno, muitas vezes é preferivel usar o Node.js.

Com essa necessidade de interpretar os códigos escritos em TypeScript pelo próprio Node.js, foi desenvolvido um pacote chamado ts-node, que faz o papel de compilar os arquivos em TypeScript para JavaScript e interpretar esses arquivos.

Instalação

Primeiramente é importante criar um arquivo de package.json em seu projeto:

npm init -y

Em seus projetos instale o pacote do ts-node:

npm install ts-node
# ou
yarn add ts-node

Após a instalação do ts-node, vamos ver esse projeto teste para exemplificar como utilizar

Com isso você já tem o ts-node pronto para ser executado em seu projeto digitando o seguinte comando no terminal:

ts-node index.ts

E o resultado será

Agora basta criar um script em seu package.json para que ele seja executado no terminal de forma mais rápida.

Para isso será necessário mais alguns pacotes, como o typescript e o @types/node, instale eles:

npm install @types/node -D
npm install typescript
# ou
yarn add @types/node --save-dev
yarn add typescript

Seu package.json vai ficar mais ou menos assim:

{

  "name": "ts-node-test",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "start": "ts-node index.ts"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "ts-node": "^10.7.0",

    "typescript": "^4.6.3"

  },

  "devDependencies": {

    "@types/node": "^17.0.25"

  }

}

Agora basta executar o seguinte comando em seu terminal:

npm start

E o resultado será

Após feito esses processos, qualquer aplicação em TypeScript poderá ser lida a partir do Node.js, sem necessitar a instalação do Deno ou qualquer outro programa, o que facilita bastante na hora de fazer seus setups de aplicações que necessitam do ts-node.

Configurando o ambiente JavaScript no Linux

Wesley Araújo — Wed, 13 Apr 2022 19:45:12 +0000

Como todos nós sabemos, uma das maiores dificuldades do Linux é o fato de que quem é usuário do Windows está acostumado a dar alguns “next” durante a instalação de um pacote que o programa estará instalado, mas no Linux isso tudo é feito com base em linhas de comando, portanto nesse artigo será descrito a forma correta de configurar o ambiente JavaScript para você sair digitando seus scripts.

As distros do Linux que serão abordadas nesse artigo são a Mint, Ubuntu e Pop!_OS.

Basta seguir os passos que serão descritos que ao final de tudo, estará com o seu linux todo configurado e preparado para a utilização.

Este passo a passo foi testado recentemente e está 100% funcional.

Instalando o Visual Studio Code

# Baixando o arquivo .deb
$ https://code.visualstudio.com/

Instalando o zsh e git

# Atualizando o apt
$ sudo apt update

# Começando as instalações
$ sudo apt install zsh git

# Conectando a sua conta
$ git config --global user.name "exemplo"
$ git config --global user.email "exemplo@seuemail.com.br"

Instalando o oh-my-zsh

# Instalando as fontes necessárias
$ sudo apt-get install fonts-powerline

$ wget https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh

$ sh install.sh

# Definindo o zsh como padrão
$ code /etc/passwd
# Altere a linha que está assim: wesley:x:1000:1000:Wesley,,,:/home/wesley:/usr/bin/bash
# para wesley:x:1000:1000:Wesley,,,:/home/wesley:/usr/bin/zsh

# Invés de wesley, no seu computador, procure pela linha identica, porém com o seu nome de usuário.

Personalizando o oh-my-zsh

# Abrindo o arquivo .zshrc
$ code ~/.zshrc

# Alterando a linha que define o tema
$ ZSH_THEME="agnoster"

Instalando o Node.js e NPM

$ sudo apt install nodejs npm

# Atualizando o Node.js
$ sudo npm cache clean -f

$ sudo npm install -g n

$ sudo n stable

# Atualizando o NPM
$ sudo npm install npm@latest -g

Instalando o Yarn

$ sudo npm install -g yarn

Instalando o Docker

$ curl -fsSL https://get.docker.com -o get-docker.sh

$ sh get-docker.sh

Pronto, com isso você já pode começar a escrever seus scripts, todo ambiente estará funcionando perfeitamente. Vale ressaltar que algumas configurações dentro do Visual Studio Code podem ajudar na hora de trabalhar com o JavaScript, em breve estarei trazendo algumas dicas para isso. Até mais!

Github Copilot, voe no código com o seu copiloto

Wesley Araújo — Wed, 23 Mar 2022 17:57:17 +0000

Acabei de ser aceito na white list do Github Copilot e nada mais justo do que escrever um artigo sobre essa IA incrível para digitar código.

Descrição:

O Github Copilot é uma ferramenta de inteligência artificial desenvolvida pelo GitHub e OpenAI para auxiliar os usuários de IDEs Visual Studio Code, Visual Studio, Neovim e JetBrains por autocompletar código. Foi anunciado pela primeira vez pelo GitHub em 29 de junho de 2021. Wikipedia(Inglês)

Funcionamento

O Copilot utiliza de um grande código Open Source para dar a suas sugestões, utilizando os padrões de milhares de repositórios pelo Github, então ele basicamente ver o que você está digitando, tentando criar e ai te sugere algumas linhas de código para te auxiliar. Como por exemplo ao criar um componente Header para a minha página:

Ele deu toda a estrutura do componente após eu ter escrito somente uma linha de código, ao apertar a tecla tab, tudo vira código como a seguir:

Ao lhe auxiliar com o código, o Copilot te poupa bastante tempo enquanto você está trabalhando em seu projeto, é claro que algumas vezes as sugestões não irão fazer sentido com o que você deseja, mas basta apenas ignora-las e continuar a escrever seu código.

Minha impressão

O Github Copilot com certeza é uma ótima IA para te auxiliar com projetos grandes, onde boa parte do código é reutilizada, pois ele consegue dar umas sugestões muito boas para te adiantar um bom tempo de código, mas enquanto o projeto é pequeno, algumas das sugestões vão ajudar sim, porém outras serão de se ignorar.

Ao meu ver vale muito a pena está com seu Github Copilot ativado para digitar seus códigos, pois com certeza você terá uma ótima experiência utilizando a IA. Além do fato de que se uma sugestão não faz sentido para a sua aplicação, basta ignora-la e continuar de onde parou, com o tempo a IA tende a se adaptar melhor e contribuir ainda mais com suas sugestões.

Por fim, vamos voar com nosso copiloto e nos adaptar as novas tecnologias que estão surgindo, quem sabe ela não vira uma aliada poderosa na hora de codar?

Processos para a criação de um React App

Wesley Araújo — Sat, 19 Mar 2022 19:28:06 +0000

Como é comum entre todos programadores do ecossistema JavaScript com foco no front-end, uma hora ou outra teremos que nos deparar com libs que facilitam nosso processo na hora de escrever código.

Hoje venho falar sobre a lib que mais utilizo atualmente, o React, mas mais especificamente sobre como é dado o processo de criação de um react app.

Atualmente tem duas formas de criar uma aplicação em react que eu mais utilizo, o famos Create React App, desenvolvido pelo Facebook que cria para nós um boilerplate pronto para colocarmos a mão na massa e codar. A segunda opção que eu utilizo para criação de um react app é o Vite, que também tem a mesma função do CRA.

Aqui quero apresentar algumas das diferenças entre esses dois tipos de criadores de boilerplate, mas antes, vamos a como criar cada um dos tipos de projeto.

Instalação:

Create React App
npx create-react-app my-app
Vite
npm create vite@latest my-app -- --template react

Diferenças:

No processo de criação e instalação de dependências:

O Vite em comparação ao CRA cria e instala todas dependências necessárias para uso em questão de segundos, tendo uma grande diferença em relação ao CRA, que demora certa de 1~2 minutos.

Ao iniciar a aplicação:

Enquanto o Vite inicia sua aplicação em menos de 1 segundo, o CRA costuma demorar de 3~15 para executar a mesma ação.

No tamanho da pasta do projeto (peso em memória):

Abaixo segue a comparação entre os dois.

Equanto o CRA ocupa 233.4 MB, o Vite ocupa 32.1MB.

Server Side Rendering:

O Vite ainda não possui um bom suporte mais estável ao SSR, o CRA possui.

Conclusão

Depois de muita comparação entre os dois métodos de criar uma aplicação react, pela velocidade nos processos, pelo tamanho de uma pasta base e outros fatores, atualmente eu prefiro utilizar o Vite em detrimento do CRA. Porém, isso de forma alguma quer dizer que o Vite é melhor, é apenas a minha opinião com base na experiência que tive utilizando os dois.

Espero que tenham gostado, esse é meu primeiro post na comunidade. Abraço e até a próxima.