Maison > interface Web > js tutoriel > Comment configurer une API Node.js avec TypeScript en 5

Comment configurer une API Node.js avec TypeScript en 5

Linda Hamilton
Libérer: 2025-01-03 18:01:40
original
471 Les gens l'ont consulté

How to Set Up a Node.js API with TypeScript in 5

Aujourd'hui, créer une API efficace et évolutive avec Node.js et TypeScript est plus simple et plus puissant que jamais. Chez CodeInit, notre objectif est de proposer des didacticiels pratiques et simples pour vous aider à créer des solutions professionnelles qui répondent aux demandes du marché. Dans cet article, je vais vous guider étape par étape dans la configuration d'une API moderne en utilisant les meilleures pratiques pour 2025.

Que vous soyez un développeur débutant ou expérimenté souhaitant booster votre workflow, ce guide est fait pour vous. Plongeons-y ensemble !

Pourquoi utiliser Node.js et TypeScript ?

Node.js reste l'une des technologies backend les plus populaires, et lorsqu'il est combiné avec TypeScript, vous obtenez le meilleur des deux mondes : vitesse et sécurité. TypeScript ajoute un typage statique, ce qui facilite la maintenance de votre code et réduit les erreurs courantes.

En 2025, maîtriser les outils qui boostent la productivité et s'alignent sur les tendances du marché est essentiel.

Ce dont vous avez besoin avant de commencer

Avant de commencer, assurez-vous que votre environnement est correctement configuré. Voici les prérequis :

  • Node.js 20 ou version ultérieure
  • Éditeur de texte – Je recommande Visual Studio Code
  • Connaissance de base de JavaScript et du terminal
  • npm, fil ou pnpm installé sur votre système

Astuce : Utilisez le terminal intégré dans VS Code pour suivre ce tutoriel plus facilement.

Personnellement, j'aime utiliser pnpm. Pour installer pnpm globalement, utilisez la commande ci-dessous :

npm i -g pnpm
Copier après la connexion
Copier après la connexion

Étape 1 : Configuration de l'environnement

Tout d'abord, assurez-vous que Node.js est installé :

node -v
Copier après la connexion
Copier après la connexion

Si tout est correctement configuré, vous devriez voir la version Node.js. Sinon, téléchargez la dernière version sur le site officiel.

Maintenant, créons la structure du projet :

mkdir my-api && cd my-api
pnpm init -y
Copier après la connexion
Copier après la connexion

Cette commande crée le fichier package.json, qui gère les dépendances du projet.

Étape 2 : Installation de TypeScript

TypeScript est essentiel pour maintenir et organiser des projets plus importants. Installons-le :

pnpm install typescript tsx @types/node -D
Copier après la connexion
Copier après la connexion

Ensuite, configurez TypeScript en créant un fichier tsconfig.json :

npx tsc --init
Copier après la connexion
Copier après la connexion

Modifiez le fichier pour refléter les meilleures pratiques pour 2025 :

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}
Copier après la connexion
Copier après la connexion

Créez le répertoire src pour organiser votre code :

mkdir src
Copier après la connexion
Copier après la connexion

Étape 3 : Ajout d'ESLint

Maintenir un code propre est crucial. Ajoutons ESLint pour garantir la qualité et la standardisation.

Utilisez la commande ci-dessous pour configurer ESLint :

pnpm create @eslint/config@latest
Copier après la connexion
Copier après la connexion

Paramètres ESLint recommandés

  • Comment souhaiteriez-vous utiliser ESLint ? (Pour vérifier la syntaxe et trouver des problèmes)
  • Quel type de modules votre projet utilise-t-il ? (Modules JavaScript (import/export))
  • Quel framework votre projet utilise-t-il ? (Aucun)
  • Votre projet utilise-t-il TypeScript ? (Oui)
  • Où s'exécute votre code ? (Nœud)
  • Voulez-vous les installer maintenant ? (Oui)

Une fois installé, le fichier eslint.config.js sera créé à la racine du projet.

Voici un exemple de configuration :

npm i -g pnpm
Copier après la connexion
Copier après la connexion

Ajouter des commandes ESLint

Ajoutez les scripts suivants à package.json :

node -v
Copier après la connexion
Copier après la connexion

La première commande exécute ESLint et affiche les erreurs dans la console, tandis que la seconde tente de corriger les erreurs automatiquement.

Exécuter :

mkdir my-api && cd my-api
pnpm init -y
Copier après la connexion
Copier après la connexion

ou

pnpm install typescript tsx @types/node -D
Copier après la connexion
Copier après la connexion

Étape 4 : Création de l'API

Création de l'itinéraire de contrôle de santé

Il est maintenant temps de démarrer avec votre API. Utilisons Express, un framework minimaliste pour Node.js.

Installer Express et ses types :

npx tsc --init
Copier après la connexion
Copier après la connexion

Créez le fichier src/index.ts et ajoutez le code suivant :

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}
Copier après la connexion
Copier après la connexion

Ajoutez le script suivant à package.json :

mkdir src
Copier après la connexion
Copier après la connexion

Exécuter :

pnpm create @eslint/config@latest
Copier après la connexion
Copier après la connexion

Visitez : http://localhost:3000/health pour vérifier l'état de l'API.

Ajout de la Route Pokémon

Développons l'API avec une route qui renvoie une liste de Pokémon.

Mettez à jour src/index.ts avec le code suivant :

import pluginJs from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ['**/*.{js,mjs,cjs,ts}'] },
  { languageOptions: { globals: globals.node } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      semi: 'off',
      quotes: ['error', 'single']
    }
  }
];
Copier après la connexion

Testez l'itinéraire : http://localhost:3000/pokemons.

Conclusion

Dans ce guide, vous avez appris à configurer une API moderne avec Node.js et TypeScript, en commençant par un itinéraire simple et en l'étendant pour inclure des données saisies. Ce n'est que le début ! Avec cette base, vous pouvez mettre en œuvre l'authentification, les connexions à la base de données et bien plus encore.

Si vous avez trouvé cet article utile, partagez-le avec d'autres développeurs et abonnez-vous à notre newsletter pour plus de conseils. Conquérons ensemble le monde du développement ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal