CI/CD pour projets TypeScript : GitHub Actions de A à Z

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

CI/CD pour projets TypeScript : GitHub Actions de A à Z

Le développement moderne en TypeScript est impossible sans une automatisation rapide et fiable. Les tests manuels, la compilation et le déploiement sont non seulement longs, mais aussi sujets aux erreurs. C'est là qu'intervient le CI/CD (Continuous Integration / Continuous Deployment) — une pratique qui permet de vérifier et de déployer automatiquement votre code. Dans cet article, nous allons voir comment configurer un pipeline CI/CD complet pour les projets TypeScript avec GitHub Actions, de la configuration de base aux scénarios avancés.

Qu'est-ce que le CI/CD et pourquoi un développeur TypeScript en a-t-il besoin ?

Le CI/CD est une méthodologie qui combine deux pratiques :

Continuous Integration (CI) — compilation et test automatiques du code à chaque push dans le dépôt. Cela permet de détecter rapidement les bugs et les conflits.
Continuous Deployment/Delivery (CD) — déploiement automatique de l'application sur un serveur ou dans le cloud après la réussite des tests.

Pour les projets TypeScript, le CI/CD est particulièrement important car TypeScript est compilé en JavaScript, et les erreurs de types ou de configuration peuvent n'apparaître qu'à l'étape de compilation. GitHub Actions est un outil intégré à GitHub qui permet de créer des workflows directement dans le dépôt.

Étape 1 : Workflow de base pour un projet TypeScript

Commençons simplement — créons un fichier .github/workflows/ci.yml à la racine de votre projet. Ce workflow s'exécutera à chaque push sur la branche main ou lors de la création d'une Pull Request.

name: CI Pipeline

on:  push:    branches: [ main ]  pull_request:    branches: [ main ]

jobs:  build-and-test:    runs-on: ubuntu-latest

    strategy:      matrix:        node-version: [18.x, 20.x]

    steps:      - uses: actions/checkout@v4      - name: Use Node.js ${{ matrix.node-version }}        uses: actions/setup-node@v4        with:          node-version: ${{ matrix.node-version }}          cache: 'npm'      - run: npm ci      - run: npm run build --if-present      - run: npm test      - run: npm run lint --if-present

Analysons les points clés :

actions/checkout — clone le dépôt dans le runner.
actions/setup-node — installe Node.js avec mise en cache des dépendances.
npm ci — installation propre des dépendances (plus rapide que npm install).
npm run build — compilation de TypeScript en JavaScript (assurez-vous d'avoir un script build dans package.json).
npm test — exécution des tests (par exemple, Jest).

La matrice strategy.matrix permet de tester le code sur plusieurs versions de Node.js simultanément — cela augmente la confiance dans la compatibilité.

Étape 2 : Ajout du linting et du formatage

La qualité du code est une partie importante du CI. Ajoutons des étapes pour ESLint et Prettier. Assurez-vous qu'ils sont installés dans le projet :

npm install --save-dev eslint prettier eslint-config-prettier

Complétons notre workflow avec de nouvelles étapes :

      - run: npm run lint      - run: npm run format:check

Dans package.json, les scripts correspondants doivent être présents :

{  "scripts": {    "lint": "eslint src --ext .ts",    "format:check": "prettier --check \\"src/**/*.ts\\"",    "format": "prettier --write \\"src/**/*.ts\\""  }}

Maintenant, à chaque push, GitHub Actions vérifiera non seulement les types et les tests, mais aussi le style du code. Si le linter trouve des erreurs — le pipeline échouera et le développeur recevra une notification.