Menu Close

mergulho-no-typescript


Um mergulho no TypeScript

Sobre
Vitrine Dev
Tecnologias
Funcionalidades
Autor
Licença

 

Capa

 

💻 Sobre o projeto

🚀 Com objetivo de aprofundar em desenvolvimento Front-end, um dos passos importantes é aprender TypeScript. Esse superconjunto baseado em JavaScript permite que você tenha uma experiência mais fluida ao lidar com tipos e orientações a objetos, e pode ser combinado com diferentes frameworks para atingir um resultado super-poderoso.

Este repositório lida de como configurar seu ambiente utilizando TypeScript e quais as vantagens de utilizar a tipagem estática, verá como configurar o seu compilador TS e as melhores práticas para utilizar os recursos do TS. Por fim, vamos organizar e adicionar tipo em seu código ao consumir uma API REST, além de outros conceitos mais avançados de uma das linguagens mais amadas pelos desenvolvedores nos últimos anos.

Vamos criar processos básicos de um banco para dar contexto as implementações em TS.

Optei por não usar nenhuma ferramente de inicialização de projeto como Vitejs, pois o proposito aqui é construir na mão uma compilação de Ts para Js. Também não me preocupei em usar Tailwindcss para abstrair o css, utilizei o bootstrap, para focar totalmente no TypeScript.

# Com concurrently rodamos dois scripts ao mesmo tempo no Nodejs
npm install concurrently --save-dev

# Com o lite-server criamos um servidor para subirmos no aplicação
npm install lite-server --save-dev

# Instalando o TypeScript
npm install typescript --save-dev

Github concurrently

Github lite-server

 


issue site alurabooks
total amount of programming languages used in the project
most used language in the projects
repository size


 

📺 Vitrine Dev

🪧 Vitrine.Dev
Nome Um mergulho no TypeScript
🏷️ Tecnologias typescript, javascript, html5, css3, nodejs, bootstrap
🚀 URL https://mergulho-no-typescript-livio-alvarenga.vercel.app/

 

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto

 

html 5 badge
CSS 3 badge
Bootstrap CSS badge
JavaScript badge
TypeScript badge
Node.js badge
vscode download
code formatter prettier


 

⚙️ Funcionalidades

tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist/js", // diretório que irá transformar .ts em .js
    "target": "ES6", // informa a versão do javascript que o compilador irá transformar .ts em .js
    "noEmitOnError": true, // Somente compila ts p js se não tiver erros.
    "noImplicitAny": true, // Não adiciona tipos como any se não informarmos a tipagem
    "removeComments":true, // Remove os comentários em js apos compilação
    "strictNullChecks": true, // Diz para o compilador TSC que pare de assumir implicitamente o tipo null para todos os tipos da aplicação. Caso null faça sentido, o desenvolvedor deve deixar isso explícito em seu código. Inclusive o StrictNullChecks obrigará o desenvolvedor a tratar todos os pontos de acesso a valores null em sua aplicação, forçando que o desenvolvedor pondere com cuidado cada cenário.
  },
  "include": ["app/**/*"], // onde irei ler os arquivos para fazer a transformação (tudo que estiver dentro de app)
}

Script server

# Configurando script para lite-server
"server": "lite-server --baseDir=dist",
# --baseDir=dist Apontando a pasta para lite-server
# Inicializando lite-server em http://localhost:3000/
npm run server

Script compile

# Configurando script para compilar ts em js
"compile": "tsc",
# Inicializando copilação
npm run compile

Script watch

# Configurando script para compilar ts em js em hot reload
"watch": "tsc -w"
# Inicializando copilação
npm run watch

Script start

# Configurando script para compilar ts em js em hot reload e lite-server com concurrently
"start": "concurrently \"npm run watch\" \"npm run server\"",
# Inicializando start
npm run start

 

🧭 Rodando a aplicação web (Modo desenvolvimento)

# Clone este repositório
$ git clone https://github.com/livioalvarenga/mergulho-no-typescript.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd mergulho-no-typescript
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run start
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000/

# Entre na pasta servidor-api para rodar a API
$ cd servidor-api
# Execute o servidor-api
$ npm run start
# Servidor escutando na porta: 8080
# Vá no navegador http://localhost:8080/dados e veja o retorno da API

 

🦸 Autor

Olá, eu sou Livio Alvarenga, Engenheiro de Produção | Dev Back-end e Front-end. Sou aficcionado por tecnologia, programação, processos e planejamento. Uni todas essas paixões em uma só profissão. Dúvidas, sugestões e críticas são super bem vindas. Seguem meus contatos.

 

portifólio livio alvarenga
perfil linkedin livio alvarenga
perfil twitter livio alvarenga
perfil instagram livio alvarenga
perfil facebook livio alvarenga
perfil youtube livio alvarenga

perfil vitrinedev livio alvarenga


 

📝 Licença

Este projeto é MIT licensed.

#CompartilheConhecimento
View Source Code
Posted in Development