Comment programmer des scripts avec TypeScript

TypeScript est un langage de programmation de plus en plus populaire, développé par Microsoft. Il s'agit d'une surcouche syntaxique de JavaScript qui apporte du typage statique aux projets JavaScript, ce qui permet de détecter les erreurs plus tôt et d'améliorer la qualité du code. Dans cet article, nous allons explorer comment programmer des scripts avec TypeScript et découvrir les bases pour vous permettre de créer des projets TypeScript robustes et performants.

Introduction à TypeScript

Avant de nous plonger dans le code, il est important de comprendre pourquoi TypeScript a été créé et en quoi il diffère de JavaScript. TypeScript est un langage qui étend les fonctionnalités de JavaScript en ajoutant des types. Les types permettent aux développeurs de définir la structure des objets et des variables, ce qui facilite la compréhension du code et la détection des erreurs.

TypeScript est transpilé en JavaScript, ce qui signifie qu'il doit être converti en JavaScript avant d'être exécuté par les navigateurs ou les moteurs JavaScript. Cette étape de transpilation est généralement automatisée par des outils de développement tels que Webpack, Babel ou le compilateur TypeScript lui-même.

Installation et configuration de TypeScript

Pour commencer à travailler avec TypeScript, vous devez d'abord l'installer sur votre machine. Vous pouvez le faire en utilisant npm (Node Package Manager) ou yarn (un autre gestionnaire de paquets), selon vos préférences. Voici comment installer TypeScript avec npm :

npm install -g typescript

Et voici comment l'installer avec yarn :

yarn global add typescript

Une fois TypeScript installé, vous devrez créer un fichier de configuration TypeScript, appelé tsconfig.json, qui contiendra les paramètres de compilation pour votre projet. Voici un exemple de fichier tsconfig.json :

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["node_modules"]
}

Ceci est un fichier de configuration de base qui indique au compilateur TypeScript de compiler votre code en JavaScript compatible avec la version ES2017, en utilisant le système de modules CommonJS. La compilation sera effectuée en mode strict, et le code compilé sera placé dans le dossier dist.

Création d'un script TypeScript

Maintenant que nous avons TypeScript installé et configuré, il est temps de créer notre premier script TypeScript. Créez un fichier nommé index.ts et ajoutez le code suivant :

function greet(name: string): string {
  return `Bonjour, ${name} !`;
}

const name = "TypeScript";
console.log(greet(name));

Ce script définit une fonction greet qui prend un argument de type string et retourne une chaîne de caractères. Nous appelons ensuite cette fonction avec l'argument name, qui est également de type string, et nous affichons le résultat dans la console.

Compilation et exécution du script TypeScript

Pour compiler notre script TypeScript en JavaScript, nous devons utiliser le compilateur TypeScript. Exécutez la commande suivante dans votre terminal :

tsc index.ts

Cette commande générera un fichier index.js contenant le code JavaScript transpilé. Vous pouvez maintenant exécuter le fichier JavaScript avec Node.js en utilisant la commande suivante :

node index.js

Vous devriez voir le message "Bonjour, TypeScript !" s'afficher dans la console.

Utilisation des types et des interfaces

L'un des principaux avantages de TypeScript est la possibilité d'utiliser des types et des interfaces pour décrire la structure de vos données. Par exemple, supposons que nous voulions créer un script pour gérer une liste de tâches. Nous pourrions définir une interface pour décrire la structure d'une tâche :

interface Task {
  id: number;
  description: string;
  completed: boolean;
}

Nous pouvons ensuite utiliser cette interface pour définir des fonctions qui manipulent des tâches :

function addTask(tasks: Task[], description: string): Task[] {
  const newTask: Task = {
    id: tasks.length + 1,
    description,
    completed: false,
  };
  return [...tasks, newTask];
}

function completeTask(tasks: Task[], id: number): Task[] {
  return tasks.map((task) => (task.id === id ? { ...task, completed: true } : task));
}

Ces fonctions utilisent l'interface Task pour décrire le type des arguments et des valeurs de retour, ce qui permet au compilateur TypeScript de vérifier que les fonctions sont utilisées correctement.

Modules et importations

Dans les projets TypeScript plus importants, il est courant de diviser le code en modules pour faciliter la gestion du code et éviter les conflits de noms. TypeScript prend en charge les modules ES6, ce qui vous permet d'utiliser les mots-clés import et export pour partager du code entre les fichiers.

Par exemple, supposons que nous voulions déplacer notre interface Task et nos fonctions de gestion des tâches dans un fichier séparé. Nous pourrions créer un fichier taskManager.ts et y déplacer notre code :

// taskManager.ts
export interface Task {
  id: number;
  description: string;
  completed: boolean;
}

export function addTask(tasks: Task[], description: string): Task[] {
  // ...
}

export function completeTask(tasks: Task[], id: number): Task[] {
  // ...
}

Nous pouvons ensuite importer ces éléments dans notre fichier index.ts en utilisant la syntaxe d'importation ES6 :

// index.ts
import { Task, addTask, completeTask } from './taskManager';

let tasks: Task[] = [];
tasks = addTask(tasks, 'Apprendre TypeScript');
tasks = completeTask(tasks, 1);
console.log(tasks);

En résumé, TypeScript est un langage puissant et flexible qui étend les fonctionnalités de JavaScript en ajoutant des types. Son utilisation peut améliorer la qualité du code, faciliter la détection des erreurs et rendre les projets plus faciles à maintenir. Dans cet article, nous avons abordé les bases de la programmation de scripts avec TypeScript, y compris l'installation et la configuration, la création de scripts, l'utilisation des types et des interfaces, ainsi que la gestion des modules et des importations.

En maîtrisant ces concepts de base, vous serez en mesure de créer des projets TypeScript solides et efficaces. Bien sûr, il y a encore beaucoup à apprendre, notamment en ce qui concerne les fonctionnalités avancées de TypeScript telles que les types génériques, les décorateurs et les espaces de noms. Nous vous encourageons à continuer à explorer TypeScript et à l'appliquer dans vos projets pour bénéficier des avantages offerts par le typage statique et une meilleure organisation du code.