node typescript tutorial
1.0.0
Venant de Github? Une meilleure expérience de visualisation de ce tutoriel peut être exercée sur le site ci-dessous: https://pokedpeter.dev
Ce tutoriel vous montrera comment construire un projet de nœud Barebones (JavaScript) à partir de zéro avec les goodies suivants:
Pré-requis:
Installons un projet de nœud Barebones
Créez notre projet de nœud. Peut sauter toutes les options invites.
mkdir project
cd project
npm init Un fichier appelé package.json sera configuré avec les options que vous avez choisies. Vous pouvez ignorer les options d'interface et accompagner les valeurs par défaut en exécutant 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 "
}Le script exécutable principal n'est pas créé automatiquement. Créez-le.
touch index.js Mettez quelque chose de basique dans index.js à des fins de test.
console . log ( 'Hello World' ) ;Testez-le à partir de la CLI:
node index.js
Ce qui vous donne une sortie de console:
Hello World
JavaScript ne vient pas avec des bibliothèques standard intégrées. L'approche recommandée consiste à installer des packages NPM. Essayons un exemple. Nous installerons Lodash, une bibliothèque populaire de services publics pratiques.
npm install lodash
Voici la sortie:
added 1 package, and audited 4 packages in 987ms
found 0 vulnerabilities
Maintenant que nous avons intallé Lodash, nous pouvons maintenant l'utiliser dans notre application. Ouvrez index.js à nouveau et mettez à jour pour correspondre:
const _ = require('lodash);
console.log(_.snakeCase('Hello World'));
Exécutez-le et vous verrez la sortie suivante:
hello_world
Affichez à nouveau le fichier package.json et remarquez la section des nouvelles dependencies avec l'entrée Lodash:
"dependencies" : {
"lodash" : " ^4.17.21 "
}Conseil
Pour afficher rapidement le contenu du fichier à partir de la CLI, Type: cat package.json
Affichez vos fichiers de projet et remarquez qu'un dossier node_modules a été créé:
$ ls -l
index.js
node_modules
package-lock.json
package.jsonCe dossier est l'endroit où vos dépendances sont stockées. Vérifions-les:
$ ls node_modules
@types lodash typescriptAjoutons TypeScript à notre projet de nœud Barebones.
Installez la dépendance à dactylographie, en tant que dépèdre Dev. Toutes les dépendances de dactylographie ne sont nécessaires que pendant le développement, donc nous le faisons --save-dev
npm install --save-dev typescriptInstallez les définitions de types de typeScript pour le nœud:
npm install --save-dev @types/nodeConseil
Installez plusieurs packages en une seule fois en les combinant sur une seule ligne: npm install --save-dev typescript @types/node
Jetez un œil aux dépendances dans package.json . Voici la partie pertinente:
{
"devDependencies" : {
"@types/node" : " ^20.4.9 " ,
"typescript" : " ^5.1.6 "
}
}Initialiser TypeScript en exécutant la commande suivante n'importe où dans votre projet.
npx tsc --init Cela créera un fichier tsconfig.json avec les paramètres par défaut:
Created a new tsconfig.json with:
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
Nous utilisons npx qui exécute des binaires installés localement qui ont été installés via package.json .
Avertissement
Certains guides d'installation recommanderont d'installer TypeScript Globally sudo npm install -g typescript . Je recommanderais d'installer une version locale (c'est-à-dire à l'intérieur de votre dossier de projet)
La version globale peut finir par différer de la version locale installée pour votre projet. L'exécution tsc utilise directement la version globale. Lorsque tsc est exécuté dans le cadre de NPM dans votre projet, il utilise la version locale.
Il existe plusieurs options définies par défaut dans tsconfig.json . Il y a beaucoup d'options commentées - non illustrées ci-dessous.
{
"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. */
}
}Quelques ajustements recommandés aux valeurs par défaut:
"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' En ce qui concerne target . Généralement, les versions plus récentes du nœud prendront en charge les nouvelles fonctionnalités ECMA. Le site Web ci-dessous est une excellente ressource pour voir quelles fonctionnalités ECMA sont disponibles pour chaque version de Node:
https://node.green/
Plus besoin d'index.js:
rm index.jsConfigurez notre code source de projet:
mkdir src
cd src
touch index.ts Ajoutez quelque chose de basique à index.ts pour le tester:
console . log ( 'Hello typescript!' ) ;Compilez notre projet Barebones.
npx tsc La sortie compilée, comme JavaScript, peut être trouvée dans le répertoire /build . Il contiendra index.js reflétant notre src/index.ts
Contenu de l'index.js:
"use strict" ;
console . log ( 'Hello World!' ) ;Vous êtes maintenant prêt à créer des projets JavaScript avec TypeScript!
Jusqu'à récemment, Tslint était le linter de code TypeScript à incontournable, mais il est désormais obsolète car le projet a été consolidé dans Eslint. Voici la page d'accueil officielle:
Site web:
https://eslint.org
Le site GitHub:
https://github.com/typescript-eslint/typescript-eslint
Installer Eslint (en tant que dépendance de développement bien sûr)
npm install --save-dev eslintConfiguration de notre configuration de peluche à l'aide de la commande init d'Eslint:
npx eslint --initSuivez les invites. Nous utilisons le nœud, donc aucune prise en charge du navigateur n'est requise. Il vous demandera si vous souhaitez installer les plugins TypeScript dépendants. Allez-y et faites cela.
✔ 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/projectPlus d'informations sur la configuration des peluches ci-dessous:
https://eslint.org/docs/user-guide/configuring
En utilisant les options sélectionnées ci-dessus, notre fichier .eslintrc.json ressemble à ceci:
{
"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" : {
}
}Vous avez peut-être remarqué l'une des questions pendant le processus d'initiation d'Eslint était la suivante:
? 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 styleLa dernière option applique en outre un style de code. Si vous sélectionnez cette option, une question de suivi sera:
? 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)Si vous choisissez d'utiliser un guide de style populaire, vous aurez alors le choix de ce qui suit:
? 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-xoJe recommanderais de rechercher les guides de style ci-dessus et de suivre un avec celui qui s'aligne avec vos préférences.
Ensuite, nous allons créer un autre fichier de configuration dans le texte de la plainte pour nous permettre d'exclure des fichiers et des répertoires à partir de liaison:
touch .eslintignoreEt ajouter le contenu suivant au fichier:
node_modules
build
Nous ne voulons pas liner sur notre code JavaScript compilé.
Par défaut, les règles standard sont activées. Voir les articles cochés dans la liste à:
https://eslint.org/docs/rules/
Par exemple, essayons de enfreindre la règle de no-extra-semi .
Essayez d'ajouter un demi-colon à la fin de la ligne dans index.ts et effectuez la vérification des peluches pour voir une erreur:
console . log ( 'Hello typescript' ) ; ;Et puis:
npx eslint srcCe qui se traduit:
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.
Avertissement
Lors de l'installation de l'option Airbnb, j'ai remarqué que Eslint devait faire passer l'extension de fichier .ts:
npx eslint src --ext .ts Créez un script pour cela dans le package.json afin que nous puissions l'appeler commodément:
"scripts" : {
...
"lint" : " eslint src --ext .ts "
},Applicable uniquement lorsque NPM <V7, mais notez que si vous exécutez le script NPM et que les problèmes sont trouvés, vous verrez le message d'erreur NPM suivant ci-dessous la sortie 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.logJe ne vois pas l'erreur NPM en cas de NPM V7 (par exemple lors de l'utilisation du nœud 16.6.2)
Chaque règle peut être l'un des trois états:
| Mode de règle | Description |
|---|---|
| 0 ou "off" | Désactive la règle |
| 1 ou "avertir" | AVERTISSEMENT, Linter n'échouera pas |
| 2 ou "erreur" | Erreur, Linter échouera |
Des règles peuvent être ajoutées sous forme de clés à un objet de règles dans le fichier de configuration de Lint .eslintrc.json:
{
"root" : true ,
"parser" : " @typescript-eslint/parser " ,
"plugins" : [ ... ],
"extends" : [ ... ],
"rules" : {
..your rules go here..
}
}Trouver des règles sur Eslint.org:
https://eslint.org/docs/rules/
Testons la règle stylistique nommée «Comma-Dangle». Nous voulons avertir l'utilisateur si un tableau avec plusieurs lignes manque une virgule sur le dernier élément.
Ajouter la règle:
"rules" : {
"comma-dangle" : [
" warn " , {
"arrays" : " always-multiline "
}
]
}Lisez les détails de la règle sur le site Web. Il y a pas mal de personnalisation autorisée pour de nombreuses règles. Nous voulons recouvrir l'application des virgules pendantes dans tous les scénarios de cet exemple.
Modifier index.ts avec le code suivant:
const movies = [
'Lord of the Flies' ,
'Battle Royale'
] ;
movies . pop ( ) ;Exécutez le linter:
npx eslint srcMaintenant, nous devrions voir l'avertissement suivant:
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. Remarque Dans la sortie, il existe une option pour résoudre le problème. Essayez d'exécuter le linter avec l'option --fix :
npx eslint --fix src Il n'y a pas de sortie du linter cette fois et si nous vérifions index.ts nous verrons que la virgule ballante a été ajoutée automatiquement:
const movies = [
'Lord of the Flies' ,
'Battle Royale' , // <-- dangling comma added
] ;
movies . pop ( ) ; Nous utiliserons plus joli pour formater le code. Il s'agit d'un formateur de code d'opinion qui prend en charge de nombreux langages, notamment TypeScript, JavaScript et d'autres formats que vous pouvez utiliser pour des configurations comme JSON et YAML.
https://prettier.io
Alternativement, vous pouvez vous en tenir à Eslint pour formater stylistiquement votre code. Plus joli diffère en ce qu'il ne modifie pas votre code, sauf si vous définissez l'une des petites options.
Installez le module:
npm install --save-dev prettierCréez le fichier de configuration. Cela permet aux éditeurs et à d'autres outils de savoir que vous utilisez plus joli:
echo {} > .prettierrc.jsonVous n'aurez probablement pas besoin d'ajouter aucune option au fichier de configuration, car la plupart impliqueront la transformation de votre code. Mieux vaut laisser cela à Eslint et laisser les plus jolis gérer la mise en forme.
Créez un fichier ignoré. Cela permet aux CLI et éditeurs plus jolis de savoir quels fichiers exclure de la mise en forme.
touch .prettierignore Ajoutez les lignes suivantes à .prettierignore :
node_modules
buildTestez plus joli avec la commande suivante. Il ne rejetera rien de la sortie du code formaté:
npx prettier srcSur la base de notre dernier changement à index.ts, la sortie sera:
const movies = [ "Lord of the Flies" , "Battle Royale" ] ;
movies . pop ( ) ;Nous pouvons voir que le tableau multi-lignes a été formaté en une seule ligne.
Écrivez les modifications dans le fichier en répétant la commande avec l'option --write :
npx prettier --write srcCela répertorie les fichiers qui ont été formatés:
src/index.ts 279msÉtant donné que Eslint et plus jolis peuvent formater le code, vous pouvez vous attendre à ce que certains conflits se produisent. Pittier a créé des règles spécifiquement pour Eslint qui désactive essentiellement toutes les règles qui sont inutiles ou contradictoires lorsqu'elles sont combinées avec plus jolies.
Le premier est eslint-config-prettier :
https://github.com/prettier/eslint-config-prettier
Cette configuration désactive toutes les règles qui sont inutiles ou en conflit avec plus jolies. Installez-le avec la commande suivante:
npm install --save-dev eslint-config-prettier Ensuite, ajoutez-le à la dernière ligne de votre section extends dans la configuration Eslint, .eslintrc.json :
{
"extends" : [
"eslint:recommended" ,
"plugin:@typescript-eslint/recommended" ,
"plugin:@typescript-eslint/eslint-recommended" ,
"prettier" // <-- Add this
] ,
}Vous pouvez exécuter la commande suivante sur n'importe quel fichier pour vérifier qu'il n'y a pas de conflit entre Eslint et plus joli:
npx eslint-config-prettier src/index.tsSi tout se passe bien, vous devriez obtenir le respect suivant:
No rules that are unnecessary or conflict with Prettier were found. Le prochain à installer est eslint-plugin-prettier :
https://github.com/prettier/eslint-plugin-prettier
Exécute plus joli en tant que règle Eslint et rapporte les différences en tant que problèmes individuels d'Eslint. Installez-le avec la commande suivante:
npm install --save-dev eslint-plugin-prettier Ensuite, mettez à jour votre fichier .eslintrc.json comme suit:
{
"plugins" : [ " prettier " ],
"rules" : {
"prettier/prettier" : " error "
}
}Recherchez le plugin ci-dessous:
ESLint - par Dirk Baeumer
Recherchez le plugin ci-dessous:
Prettier - Code formatter - par plus joli
Appuyez sur Ctrl + Shift + I vers le code de format. Vous serez invité à sélectionner le formateur par défaut. Sélectionnez plus joli comme votre défaut.
Recherchez le plugin ci-dessous:
Prettier ESLint - par Rebecca Vest
Ces scripts sont adaptés à notre projet TypeScript. Nous vérifions uniquement les fichiers .ts.
Ajoutez les commandes ci-dessous à la section scripts de votre package.json .
"start:dev" : " nodemon " "lint" : " eslint --ext .ts src "
"lint-fix" : " eslint --fix --ext .ts src " "pretty" : " prettier --write 'src/**/*.ts' " Curveball est un micro-cadre pour construire des API dans le nœud. Il est construit à partir de zéro avec le support de dactylographie par opposition à son prédécesseur le plus populaire KOA.
https://curveballjs.org/
L'installez:
npm install @curveball/core Copiez l'exemple du site Web dans index.ts . La seule chose que nous allons changer est le numéro de port. Pour deux raisons. Un, le port 80 peut être bloqué. Deux. Exécuter sur différents ports nous permet d'avoir plusieurs projets de nœuds en cours d'exécution simultanément.
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 ) ;Démarrez le serveur en mode Dev avec le script que nous avons créé précédemment:
npm run start:devVous obtiendrez la sortie suivante car Nodemon écoute les modifications de fichiers:
> [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,jsAprès avoir fait un changement de code, regardez la sortie de la console du serveur pour être nodemon au travail. Rafraîchissez également la page Web pour voir les mises à jour.
Configurez un rechargement automatique après les modifications du code pour le développement. Installez nodemon pour surveiller les modifications de fichiers et ts-node pour exécuter directement le code TypeScript au lieu d'avoir à compiler, puis transmettre au node .
npm install --save-dev ts-node nodemon Ajoutez une configuration nodemon.json . Cela configurera NODEMON pour surveiller les modifications des fichiers .ts et .js dans votre répertoire de code source, puis exécuter la commande EXEC après les modifications.
{
"watch" : [ " src " ],
"ext" : " .ts,.js " ,
"ignore" : [],
"exec" : " ts-node ./src/index.ts "
} Ajoutez un script NPM à l'intérieur de package.json pour lancer nodemon pour le développement:
"start:dev" : " nodemon " Exécutez npm run start:dev pour démarrer le processus de rechargement.
Installez Docker et des instructions de recherche sur la façon d'exécuter Docker sans Sudo - Instructions omises ici car elles sont spécifiques à la distribution OS / Distro.
Créez un fichier docker-compose.yml avec un seul conteneur de nœud en tant que service:
Le nom de notre projet est "Project" comme le nom du service et du conteneur. Nous avons un volume mappant notre répertoire de projet vers / projet à l'intérieur du conteneur de nœuds. Assurez-vous enfin que les ports correspondent aux ports exposés dans votre application.
Plus de détails ci-dessous:
https://docs.docker.com/compose/compose-file/
version : ' 3 '
services :
project :
build : .
container_name : project
volumes :
- .:/project
ports :
- " 9000 " Créez ensuite Dockerfile avec le contenu suivant.
FROM node:12
WORKDIR /project
COPY package.json .
RUN npm install
COPY . .
CMD [ "npm" , "run" , "start:dev" ]Cela configure notre répertoire de projet à l'intérieur du conteneur, installe nos packages de nœuds, des copies sur le contenu de notre système de fichiers natifs et démarre notre serveur de courbe en mode Dev.
Maintenant, élevez le conteneur:
docker-compose upVous verrez la sortie suivante:
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`
Vous pouvez utiliser CTRL-C pour arrêter le conteneur.
Utilisez docker-compose up -d pour faire monter le conteneur en mode détaché - il est élevé dans le fond et vous êtes libre de continuer à utiliser la ligne de commande.
Nous créons un conteneur basé sur le nœud v12. Notre répertoire de travail à l'intérieur du conteneur est défini comme /project (où notre code de projet sera mappé)
La version du nœud installé dépendra du système d'exploitation installé et de la mise à jour de ses packages.
Si vous utilisez un nœud en dehors des conteneurs Docker et travaillez sur plusieurs projets de nœuds nécessitant chacun des versions de nœud différentes, installez NVM:
https://github.com/nvm-sh/nvm
Un grand merci à ce qui suit pour m'avoir aidé à créer ce tutoriel.
