Installation et configuration de TypeScript

Dans ce tutoriel, nous allons voir comment installer et configurer TypeScript pour commencer à développer efficacement.

Prérequis

Avant de commencer, assurez-vous d’avoir :

• Node.js installé (version 14 ou supérieure)
• npm ou yarn comme gestionnaire de paquets
• Un éditeur de code (VS Code recommandé)

Vérifier Node.js

node --version
npm --version

Installation de TypeScript

1. Installation globale (recommandée pour débuter)

# Avec npm
npm install -g typescript

# Avec yarn
yarn global add typescript

2. Vérifier l’installation

tsc --version

Vous devriez voir quelque chose comme : Version 5.3.3

Créer votre premier projet TypeScript

1. Créer un nouveau dossier

mkdir mon-projet-typescript
cd mon-projet-typescript

2. Initialiser le projet

# Initialiser npm
npm init -y

# Installer TypeScript localement (recommandé pour les projets)
npm install -D typescript

# Installer les types Node.js (si nécessaire)
npm install -D @types/node

3. Créer le fichier de configuration

# Générer tsconfig.json
npx tsc --init

Configuration avec tsconfig.json

Le fichier tsconfig.json configure le comportement du compilateur TypeScript :

{
  "compilerOptions": {
    // Version JavaScript cible
    "target": "ES2020",
    
    // Système de modules
    "module": "commonjs",
    
    // Dossier de sortie
    "outDir": "./dist",
    
    // Dossier source
    "rootDir": "./src",
    
    // Vérifications strictes
    "strict": true,
    
    // Résolution des modules
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    
    // Génération de source maps
    "sourceMap": true,
    
    // Déclarations de types
    "declaration": true,
    "declarationMap": true
  },
  
  // Fichiers à inclure
  "include": [
    "src/**/*"
  ],
  
  // Fichiers à exclure
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Structure de projet recommandée

mon-projet-typescript/
├── src/
│   ├── index.ts
│   ├── utils/
│   └── types/
├── dist/           # Fichiers compilés
├── tests/
├── package.json
├── tsconfig.json
└── README.md

Premier fichier TypeScript

Créez src/index.ts :

// src/index.ts
interface User {
    id: number;
    name: string;
    email: string;
}

function greetUser(user: User): string {
    return `Hello, ${user.name}!`;
}

const user: User = {
    id: 1,
    name: "Alice",
    email: "alice@example.com"
};

console.log(greetUser(user));

Compilation et exécution

1. Compiler le code

# Compilation simple
npx tsc

# Compilation en mode watch (surveille les changements)
npx tsc --watch

2. Exécuter le code compilé

node dist/index.js

3. Scripts npm utiles

Ajoutez ces scripts dans votre package.json :

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "tsc --watch",
    "clean": "rm -rf dist"
  }
}

Outils de développement

1. ts-node (exécution directe)

# Installation
npm install -D ts-node

# Utilisation
npx ts-node src/index.ts

2. nodemon (rechargement automatique)

# Installation
npm install -D nodemon

# Script dans package.json
{
  "scripts": {
    "dev": "nodemon --exec ts-node src/index.ts"
  }
}

3. Configuration VS Code

Créez .vscode/settings.json :

{
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.autoImports": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

Configuration avancée

1. Chemins d’importation personnalisés

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@utils/*": ["utils/*"],
      "@types/*": ["types/*"],
      "@components/*": ["components/*"]
    }
  }
}

Utilisation :

// Au lieu de
import { helper } from '../../../utils/helper';

// Vous pouvez écrire
import { helper } from '@utils/helper';

2. Configuration pour différents environnements

// tsconfig.prod.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "sourceMap": false,
    "removeComments": true
  }
}

Vérification et linting

1. ESLint avec TypeScript

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint

Configuration .eslintrc.js :

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended'
  ],
  rules: {
    // Vos règles personnalisées
  }
};

2. Prettier pour le formatage

npm install -D prettier

# Configuration .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80
}

Commandes utiles

Vérification de l’installation

Testez votre configuration :

// test.ts
const message: string = "TypeScript fonctionne !";
console.log(message);

// Compilation
npx tsc test.ts

// Exécution
node test.js

Prochaines étapes

Maintenant que TypeScript est installé et configuré, vous êtes prêt à :

1. Apprendre les types de base de TypeScript
2. Explorer les interfaces et types avancés
3. Découvrir les classes et la POO
4. Maîtriser les génériques

Conseil : Commencez avec une configuration simple et ajoutez progressivement des options selon vos besoins. La configuration par défaut de tsc --init est un excellent point de départ !