Um mergulho no TypeScript
Um mergulho no TypeScript
Sobre • Vitrine Dev • Tecnologias • Funcionalidades • Autor • Licença
💻 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
📺 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
⚙️ 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.
📝 Licença
Este projeto é MIT licensed.