node typescript tutorial
1.0.0
Vindo do github? Uma melhor experiência de visualização deste tutorial pode ser realizada no site abaixo: https://pokedpeter.dev
Este tutorial mostrará como construir um projeto de nó BareBones (JavaScript) do zero com os seguintes guloseimas:
Pré-requisitos:
Vamos configurar um projeto de nó barebones
Crie nosso projeto de nó. Pode pular todas as opções de prompt.
mkdir project
cd project
npm init Um arquivo chamado package.json será configurado com as opções que você escolheu. Você pode pular as opções de interface e ir com os padrões executando npm init -y
{
"name" : " project " ,
"version" : " 1.0.0 " ,
"description" : " " ,
"main" : " index.js " ,
"scripts" : {
"test" : " echo " Error: no test specified " && exit 1 "
},
"author" : " " ,
"license" : " ISC "
}O principal script executável não é criado automaticamente. Crie -o.
touch index.js Coloque algo básico no index.js para fins de teste.
console . log ( 'Hello World' ) ;Teste da CLI:
node index.js
O que fornece alguma saída de console:
Hello World
O JavaScript não vem com nenhuma biblioteca padrão embutida. A abordagem recomendada é instalar pacotes NPM. Vamos tentar um exemplo. Instalaremos o Lodash, uma biblioteca popular de utilitários úteis.
npm install lodash
Aqui está a saída:
added 1 package, and audited 4 packages in 987ms
found 0 vulnerabilities
Agora que nos intimamos o Lodash, agora podemos usá -lo em nosso aplicativo. Abra index.js novamente e atualize para corresponder:
const _ = require('lodash);
console.log(_.snakeCase('Hello World'));
Execute -o e você verá a seguinte saída:
hello_world
Veja o arquivo package.json novamente e observe a seção de novas dependencies com a entrada do Lodash:
"dependencies" : {
"lodash" : " ^4.17.21 "
}Dica
Para visualizar rapidamente o conteúdo do arquivo da CLI, tipo: cat package.json
Veja os arquivos do seu projeto e observe uma pasta node_modules foi criada:
$ ls -l
index.js
node_modules
package-lock.json
package.jsonEsta pasta é onde suas dependências são armazenadas. Vamos conferi -los:
$ ls node_modules
@types lodash typescriptVamos adicionar o TypeScript ao nosso projeto de nó BareBones.
Instale a dependência do TypeScript, como uma dependência de dev. Todas as dependências do TypeScript são necessárias apenas durante o desenvolvimento, então fazemos --save-dev
npm install --save-dev typescriptInstale as definições do tipo TypeScript para o nó:
npm install --save-dev @types/nodeDica
npm install --save-dev typescript @types/node vários pacotes de uma só
Dê uma olhada nas dependências no package.json . Aqui está a parte relevante:
{
"devDependencies" : {
"@types/node" : " ^20.4.9 " ,
"typescript" : " ^5.1.6 "
}
}Inicialize o TypeScript executando o seguinte comando em qualquer lugar do seu projeto.
npx tsc --init Isso criará um arquivo tsconfig.json com configurações padrão:
Created a new tsconfig.json with:
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
Usamos npx , que executa binários instalados localmente que foram instalados via package.json .
Aviso
Alguns guias de instalação recomendam a instalação do TypeScript Globalmente sudo npm install -g typescript . Eu recomendo instalar uma versão local (por exemplo, dentro da pasta do projeto)
A versão global pode acabar diferindo da versão local instalada para o seu projeto. A execução tsc usa diretamente a versão global. Quando tsc é executado como parte do NPM em seu projeto, ele usa a versão local.
Existem várias opções definidas por padrão em tsconfig.json . Há muitas opções comentadas - não mostradas abaixo.
{
"compilerOptions" : {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Basic Options */
"target" : " es5 " , /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module" : " commonjs " , /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
/* Strict Type-Checking Options */
"strict" : true , /* Enable all strict type-checking options. */
/* Module Resolution Options */
"esModuleInterop" : true , /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
/* Advanced Options */
"skipLibCheck" : true , /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames" : true /* Disallow inconsistently-cased references to the same file. */
}
}Alguns ajustes recomendados para os padrões:
"target" : " es2015 " , // I'd recommend es2015 at a minimum. es5 is ancient.
"outDir" : " build " , // Keep our compiled javascript in the build directory
"rootDir" : " src " , // Keep our source code in a separate directory
"noImplicitAny" : true , // We're using Typescript yeah? And not adding Typescript to an existing project. Enforce good habits from the start.
"lib" : [ " es2020 " ], // Setting this excludes DOM typings as we are using Node. Otherwise you'll run into errors declaring variables like 'name' Em relação ao target . Geralmente, as versões mais recentes do Node suportarão os recursos mais recentes da ECMA. O site abaixo é um ótimo recurso para ver quais recursos da ECMA estão disponíveis para cada versão do nó:
https://node.green/
Não há mais necessidade de index.js:
rm index.jsConfigure nosso código -fonte do projeto:
mkdir src
cd src
touch index.ts Adicione algo básico ao index.ts para testá -lo:
console . log ( 'Hello typescript!' ) ;Compile nosso projeto BareBones.
npx tsc A saída compilada, como JavaScript, pode ser encontrada no diretório /build . Ele conterá index.js espelhando nosso src/index.ts
Conteúdo de index.js:
"use strict" ;
console . log ( 'Hello World!' ) ;Agora você está pronto para criar projetos JavaScript com o TypeScript!
Até recentemente, o TSLINT era o linhador de código de texto digital, mas agora está preso, pois o projeto foi consolidado no ESLint. Aqui está a página inicial oficial:
Site:
https://eslint.org
O site do GitHub:
https://github.com/typescript-eslint/typescript-eslint
Instale o Eslint (como uma dependência de desenvolvimento, é claro)
npm install --save-dev eslintVamos configurar nossa configuração de fiapos usando o comando init da ESLint:
npx eslint --initSiga os prompts. Estamos usando o nó, portanto, não é necessário suporte ao navegador. Ele perguntará se você deseja instalar os plugins de dependentes do TypeScript. Vá em frente e faça isso.
✔ How would you like to use ESLint ? · problems
✔ What type of modules does your project use ? · esm
✔ Which framework does your project use ? · none
✔ Does your project use TypeScript ? · No / Yes
✔ Where does your code run ? · node
✔ What format do you want your config file to be in ? · JSON
The config that you ' ve selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
Successfully created .eslintrc.json file in /your/projectMais informações sobre a configuração de fiapos abaixo:
https://eslint.org/docs/user-guide/configuring
Usando as opções selecionadas acima, nosso arquivo .eslinTrc.json se parece com o seguinte:
{
"env" : {
"es2020" : true ,
"node" : true
},
"extends" : [
" eslint:recommended " ,
" plugin:@typescript-eslint/recommended "
],
"parser" : " @typescript-eslint/parser " ,
"parserOptions" : {
"ecmaVersion" : 11 ,
"sourceType" : " module "
},
"plugins" : [
" @typescript-eslint "
],
"rules" : {
}
}Você deve ter notado uma das perguntas durante o processo ESLint Init foi o seguinte:
? How would you like to use ESLint ? …
To check syntax only
▸ To check syntax and find problems
To check syntax, find problems, and enforce code styleA última opção também aplica um estilo de código. Se você selecionar essa opção, uma pergunta de acompanhamento será:
? How would you like to define a style for your project ? …
▸ Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)Se você optar por usar um guia de estilo popular, você terá uma escolha do seguinte:
? Which style guide do you want to follow ? …
▸ Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xoEu recomendo pesquisar os guias de estilo acima e seguir um que se alinha com suas preferências.
Em seguida, criaremos outro arquivo de configuração no texto de queixas para nos permitir excluir arquivos e diretórios do Lining:
touch .eslintignoreE adicione o seguinte conteúdo ao arquivo:
node_modules
build
Não queremos o linhagem em nosso código JavaScript compilado.
Por padrão, as regras padrão estão ativadas. Veja os itens marcados na lista em:
https://eslint.org/docs/rules/
Por exemplo, vamos tentar quebrar a regra no-extra-semi .
Tente adicionar um semi-colon ao final da linha em index.ts e faça a verificação de fiapos para ver um erro:
console . log ( 'Hello typescript' ) ; ;E então:
npx eslint srcQue resulta em:
1:34 error Unnecessary semicolon @typescript-eslint/no-extra-semi
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
Aviso
Ao instalar a opção Airbnb, notei que a Eslint precisa ter a extensão de arquivo .ts aprovada:
npx eslint src --ext .ts Crie um script para isso no package.json para que possamos chamá -lo convenientemente:
"scripts" : {
...
"lint" : " eslint src --ext .ts "
},Aplicável somente quando estiver no NPM <V7, mas observe que, se você executar o script e os problemas do NPM, você verá a seguinte mensagem de erro do NPM anexada abaixo da saída ESLint:
> eslint src --ext .ts
/home/user/dev/test/src/index.ts
1:1 warning Unexpected console statement no-console
1:21 error Missing whitespace after semicolon semi-spacing
1:22 error Unnecessary semicolon no-extra-semi
✖ 3 problems (2 errors, 1 warning)
2 errors and 0 warnings potentially fixable with the ` --fix ` option.
npm ERR ! code ELIFECYCLE
npm ERR ! errno 1
npm ERR ! [email protected] lint: ` eslint src --ext .ts `
npm ERR ! Exit status 1
npm ERR !
npm ERR ! Failed at the [email protected] lint script.
npm ERR ! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR ! A complete log of this run can be found in:
npm ERR ! /home/user/.npm/_logs/2021-08-18T15_27_55_318Z-debug.logNão vejo o erro da NPM quando no NPM V7 (por exemplo, ao usar o nó 16.6.2)
Cada regra pode ser um dos três estados:
| Modo de regra | Descrição |
|---|---|
| 0 ou "Off" | Desativa a regra |
| 1 ou "aviso" | Aviso, Linter não falhará |
| 2 ou "erro" | Erro, Linter falhará |
As regras podem ser adicionadas como chaves a um objeto de regras no arquivo de configuração de fins .eslinTrc.json:
{
"root" : true ,
"parser" : " @typescript-eslint/parser " ,
"plugins" : [ ... ],
"extends" : [ ... ],
"rules" : {
..your rules go here..
}
}Encontre regras em eslint.org:
https://eslint.org/docs/rules/
Vamos testar a regra estilística chamada 'vírgula-dangle'. Queremos avisar o usuário se uma matriz com várias linhas estiver faltando uma vírgula no último item.
Adicione a regra:
"rules" : {
"comma-dangle" : [
" warn " , {
"arrays" : " always-multiline "
}
]
}Leia os detalhes da regra no site. Há um pouco de personalização permitida para muitas regras. Queremos cobrar as vírgulas penduradas em todos os cenários neste exemplo.
Alterar índice.ts com o seguinte código:
const movies = [
'Lord of the Flies' ,
'Battle Royale'
] ;
movies . pop ( ) ;Execute o linhador:
npx eslint srcAgora devemos ver o seguinte aviso:
3:18 warning Missing trailing comma comma-dangle
✖ 1 problem (0 errors, 1 warning)
0 errors and 1 warning potentially fixable with the ` --fix ` option. Nota Na saída, há uma opção para corrigir o problema. Tente executar o linter com a opção --fix :
npx eslint --fix src Desta vez, não há saída do linhador e, se verificarmos index.ts veremos que a vírgula pendurada foi adicionada automaticamente:
const movies = [
'Lord of the Flies' ,
'Battle Royale' , // <-- dangling comma added
] ;
movies . pop ( ) ; Usaremos mais bonito para formatar o código. É um formatador de código opinativo que suporta muitos idiomas, incluindo TypeScript, JavaScript e outros formatos que você pode usar para configurações como JSON e YAML.
https://prettier.io
Como alternativa, você pode seguir o ESLint para formatar seu código estilisticamente. O mais bonito difere, pois não modifica seu código, a menos que você defina um dos pequenos punhados de opções.
Instale o módulo:
npm install --save-dev prettierCrie o arquivo de configuração. Isso permite que os editores e outras ferramentas saibam que você está usando mais bonito:
echo {} > .prettierrc.jsonVocê provavelmente não precisará adicionar nenhuma opção ao arquivo de configuração, pois a maioria envolverá a transformação do seu código. Melhor deixar isso para Eslint e apenas deixe lidar com a formatação mais bonita.
Crie um arquivo ignorado. Isso permite que a CLI e os editores mais bonitos saibam quais arquivos excluir da formatação.
touch .prettierignore Adicione as seguintes linhas a .prettierignore :
node_modules
buildTeste mais bonito com o seguinte comando. Não vai angariar nada, basta produzir o código formatado:
npx prettier srcCom base em nossa última alteração no index.ts, a saída será:
const movies = [ "Lord of the Flies" , "Battle Royale" ] ;
movies . pop ( ) ;Podemos ver que a matriz de várias linhas foi formatada em uma única linha.
Escreva as alterações no arquivo repetindo o comando com a opção --write :
npx prettier --write srcIsso listará os arquivos que foram formatados:
src/index.ts 279msDado que Eslint e mais bonito podem formatar o código, você pode esperar que alguns conflitos ocorram. O Questtier criou regras especificamente para Eslint que basicamente desativa qualquer regras desnecessárias ou conflitantes quando combinadas com mais bonita.
O primeiro é eslint-config-prettier :
https://github.com/prettier/eslint-config-prettier
Esta configuração desligar todas as regras desnecessárias ou conflitam com mais bonita. Instale -o com o seguinte comando:
npm install --save-dev eslint-config-prettier Em seguida, adicione -o à última linha da sua seção extends na configuração de Eslint, .eslintrc.json :
{
"extends" : [
"eslint:recommended" ,
"plugin:@typescript-eslint/recommended" ,
"plugin:@typescript-eslint/eslint-recommended" ,
"prettier" // <-- Add this
] ,
}Você pode executar o seguinte comando em qualquer arquivo para verificar se não há conflito entre Eslint e Prettier:
npx eslint-config-prettier src/index.tsSe tudo correr bem, você deve obter o seguinte respone:
No rules that are unnecessary or conflict with Prettier were found. O próximo a ser instalado é eslint-plugin-prettier :
https://github.com/prettier/eslint-plugin-prettier
Opera mais bonito como uma regra de ESLint e relata diferenças como problemas individuais de ESLint. Instale -o com o seguinte comando:
npm install --save-dev eslint-plugin-prettier Em seguida, atualize seu arquivo .eslintrc.json da seguinte forma:
{
"plugins" : [ " prettier " ],
"rules" : {
"prettier/prettier" : " error "
}
}Procure o plugin abaixo:
ESLint - de Dirk Baeumer
Procure o plugin abaixo:
Prettier - Code formatter - por mais bonito
Pressione Ctrl + Shift + I para o código do formato. Você será solicitado a selecionar o formatador padrão. Selecione mais bonito como seu padrão.
Procure o plugin abaixo:
Prettier ESLint - por Rebecca Vest
Esses scripts são adaptados ao nosso projeto TypeScript. Estamos apenas verificando os arquivos .ts.
Adicione os comandos abaixo à seção scripts do seu package.json .
"start:dev" : " nodemon " "lint" : " eslint --ext .ts src "
"lint-fix" : " eslint --fix --ext .ts src " "pretty" : " prettier --write 'src/**/*.ts' " O Curveball é uma estrutura micro para a construção de APIs no nó. Ele é construído desde o início com o suporte ao TypeScript, em oposição ao seu antecessor mais popular Koa.
https://curveballjs.org/
Instale:
npm install @curveball/core Copie o exemplo do site para index.ts . A única coisa que mudaremos é o número da porta. Por dois motivos. Um, a porta 80 pode ser bloqueada. Dois. A execução em portas diferentes nos permite ter vários projetos de nós em execução simultaneamente.
import { Application } from '@curveball/core' ;
const app = new Application ( ) ;
app . use ( async ctx => {
ctx . response . type = 'text/plain' ;
ctx . response . body = 'hello world' ;
} ) ;
app . listen ( 9000 ) ;Inicie o servidor no modo dev com o script que criamos anteriormente:
npm run start:devVocê obterá a seguinte saída enquanto Nodemon ouve para alterações de arquivo:
> [email protected] start:dev /home/your_name/project
> nodemon
[nodemon] 2.0.4
[nodemon] to restart at any time, enter ` rs `
[nodemon] watching path(s): src/ ** / *
[nodemon] watching extensions: ts,jsDepois de fazer uma alteração de código, assista à saída do console do servidor para ser Nodemon no trabalho. Atualize também a página da web para ver as atualizações.
Configure recarga automática após as alterações do código para desenvolvimento. Instale nodemon para monitorar alterações de arquivo e ts-node para executar o código TypeScript diretamente, em vez de precisar compilar e depois passe para node .
npm install --save-dev ts-node nodemon Adicione uma configuração nodemon.json . Isso configurará o Nodemon para observar alterações nos arquivos .ts e .js dentro do seu diretório de código -fonte e, em seguida, executará o comando EXEC após as alterações.
{
"watch" : [ " src " ],
"ext" : " .ts,.js " ,
"ignore" : [],
"exec" : " ts-node ./src/index.ts "
} Adicione um script npm dentro do package.json para iniciar nodemon para desenvolvimento:
"start:dev" : " nodemon " Execute npm run start:dev para iniciar o processo de recarga.
Instruções de instalação do docker e pesquisa sobre como executar o Docker sem sudo - instruções omitidas aqui, pois são específicas do OS / Distro.
Crie um arquivo docker-compose.yml com um único contêiner de nó como um serviço:
O nome do nosso projeto é "Projeto", como é o nome do serviço e do contêiner. Temos um mapeamento de volume nosso diretório de projeto para /projeto dentro do contêiner do nó. Por fim, verifique se as portas correspondem às portas expostas em seu aplicativo.
Mais detalhes abaixo:
https://docs.docker.com/compost/compose-file/
version : ' 3 '
services :
project :
build : .
container_name : project
volumes :
- .:/project
ports :
- " 9000 " Em seguida, crie Dockerfile com o seguinte conteúdo.
FROM node:12
WORKDIR /project
COPY package.json .
RUN npm install
COPY . .
CMD [ "npm" , "run" , "start:dev" ]Isso configura nosso diretório de projetos dentro do contêiner, instala nossos pacotes de nó, cópias sobre o conteúdo do nosso sistema de arquivos nativo e inicia nosso servidor curveball no modo dev.
Agora traga o contêiner:
docker-compose upVocê verá a seguinte saída:
Creating network "project_default" with the default driver
Building project
Step 1/7 : FROM node:12
---> dfbb88cfffc8
Step 2/7 : WORKDIR /project
---> Running in 86fff3a3c90b
Removing intermediate container 86fff3a3c90b
---> 5912fd119492
Step 3/7 : COPY package.json .
---> 4fa4df04cc6b
Step 4/7 : RUN npm install
---> Running in 8b814e4d75d2
...
(Node package installation happens here)
...
Removing intermediate container 8b814e4d75d2
---> 3bfd2b1a83e4
Step 5/7 : COPY . .
---> f6971fdf7fb5
Step 6/7 : EXPOSE 9000
---> Running in 2ab0a152b0a6
Removing intermediate container 2ab0a152b0a6
---> 0e883b79c1b3
Step 7/7 : CMD ["npm", "run", "start:dev"]
---> Running in f64884ae2643
Removing intermediate container f64884ae2643
---> 1abb8edf6373
Successfully built 1abb8edf6373
Successfully tagged project_project:latest
WARNING: Image for service project was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Creating project ...
Creating project ... done
Attaching to project
project |
project | > [email protected] start:dev /project
project | > nodemon
project |
project | [nodemon] 2.0.4
project | [nodemon] to restart at any time, enter `rs`
project | [nodemon] watching path(s): src/**/*
project | [nodemon] watching extensions: ts,js
project | [nodemon] starting `ts-node ./src/index.ts`
Você pode usar CTRL-C para interromper o contêiner.
Use docker-compose up -d para trazer o contêiner no modo desapegado -ele é criado no Brackground e você está livre para continuar usando a linha de comando.
Estamos criando um contêiner com base no nó v12. Nosso diretório de trabalho dentro do contêiner é definido como /project (onde nosso código do projeto será mapeado)
A versão do nó instalada dependerá do sistema operacional instalado e como estão atualizados seus pacotes.
Se você usar o nó fora dos recipientes do Docker e trabalhar em vários projetos de nós, cada um exigindo versões diferentes do nó, instale o NVM:
https://github.com/nvm-h/nvm
Um grande agradecimento ao seguinte por me ajudar a criar este tutorial.
