Une introduction simple à Typescript

Une brève introduction à quelques concepts de Typescript

Compilateur TypeScript

Le compilateur TypeScript est un programme JavaScript qui convertit le code TypeScript en code JavaScript brut. Il est écrit en TypeScript et peut être exécuté sur n'importe quelle plate-forme prenant en charge JavaScript. Le compilateur TypeScript est open source et disponible sur GitHub. Le compilateur est développé et maintenu par Microsoft et peut être utilisé à partir de la ligne de commande, ou il peut être utilisé comme plug-in pour les IDE populaires tels que Visual Studio et WebStorm.

Le compilateur TypeScript peut émettre du code JavaScript compatible avec différents runtimes JavaScript, tels que Node.js, Internet Explorer et Chrome. Il peut également générer des mappages source, qui mappent le code JavaScript généré au code TypeScript. Cela permet le débogage du code TypeScript dans le navigateur.

Le compilateur peut être configuré pour vérifier les erreurs de type et signalera les erreurs si elles sont trouvées. La vérification de type peut être désactivée si vous le souhaitez. Le compilateur TypeScript est disponible sous la licence open source Apache 2.0.

Pas un langage fortement typé

Typescript n'est pas un langage fortement typé car il ne nécessite pas la déclaration de variables avec un type spécifique. Cela signifie qu'une variable peut être déclarée comme un type, puis réaffectée à une valeur d'un autre type. Cela peut entraîner des erreurs si la variable est utilisée d'une manière qui n'est pas compatible avec le type pour lequel elle a été déclarée.

Un exemple de base pour illustrer cette caractéristique peut être représenté avec le type "any".

// We initialze the variable as a string.
const something: any = "Tom";

// Now it's a number. This is valid TypeScript code.
something = 42;

Compiler TypeScript en JavaScript

Le compilateur TypeScript prend le code TypeScript et le convertit en code JavaScript simple. Ce processus est connu sous le nom de transpilation. Le compilateur analyse d'abord le code TypeScript, qui vérifie les erreurs de syntaxe. Si aucune erreur n'est trouvée, le compilateur vérifie alors les erreurs de type. Si des erreurs de type sont trouvées, le compilateur les signalera et quittera.

Si aucune erreur de type n'est trouvée, le compilateur continuera et émettra le code JavaScript. Le code JavaScript émis sera compatible avec le runtime JavaScript cible spécifié.

Le compilateur TypeScript peut également générer des cartes source, qui mappent le code JavaScript généré au code TypeScript. Cela permet le débogage du code TypeScript dans le navigateur.

Serveur de langage TypeScript

Le serveur de langage TypeScript est un serveur de langage qui fournit des fonctionnalités telles que la saisie semi-automatique du code, l'accès à la définition et la vérification de type pour les projets TypeScript.

Le serveur de langage est requis pour que le compilateur TypeScript puisse fournir ces fonctionnalités. Sans le serveur de langage, le compilateur TypeScript ne pourrait fournir que des fonctionnalités de base telles que la coloration syntaxique et le formatage du code. Le serveur de langage TypeScript est open source et disponible sur GitHub.

Étapes pour créer un projet TypeScript

Avant de décrire les étapes, voici la commande pour initialiser un projet TypeScript dans votre terminal.

npx tsc --init

Description : installez le compilateur TypeScript. Créez un fichier tsconfig.json à la racine du projet. Ce fichier contient les options du compilateur pour le compilateur TypeScript. Ajoutez le répertoire src au fichier tsconfig.json. C'est là que se trouveront les fichiers source TypeScript.

Ajoutez un fichier main.ts dans le répertoire src. Il s'agit du point d'entrée du programme TypeScript. Compilez le code TypeScript en exécutant tsc à partir de la ligne de commande. Cela générera les fichiers JavaScript dans le répertoire src. Exécutez le programme TypeScript en exécutant node main.js à partir de la ligne de commande.

Différences entre TypeScript et JavaScript

Il existe quelques différences essentielles entre TypeScript et les autres langages fortement typés : TypeScript est un sur-ensemble de JavaScript, ce qui signifie que tout code JavaScript valide est également un code TypeScript valide. Cela facilite son adoption pour les projets JavaScript existants.

TypeScript utilise un système de type facultatif, ce qui signifie que des types peuvent être spécifiés pour les variables, mais ce n'est pas obligatoire. D'autres langages fortement typés, tels que Swift et Kotlin, utilisent un système de type obligatoire, qui exige que toutes les variables soient déclarées avec un type spécifique.

TypeScript prend en charge les génériques, ce qui permet des collections de type sécurisé et d'autres structures de données. Ceci n'est pas disponible en JavaScript.

Quand dois-je utiliser Javascript au lieu de Typescript pour le codage ?

Il n'y a pas de règle stricte pour savoir quand utiliser JavaScript ou TypeScript. C'est au développeur de choisir le bon outil pour le travail. Cependant, il existe quelques directives générales qui peuvent être suivies.

Si un projet est déjà écrit en JavaScript, il est généralement préférable de continuer à utiliser JavaScript. Il n'est pas nécessaire de convertir le code en TypeScript juste pour utiliser TypeScript. Mais gardez à l'esprit que la maintenance d'un projet JavaScript peut être plus difficile en raison de l'absence d'un système de type conduisant à des bogues cachés. Par conséquent, il est préférable d'envisager d'adopter TypeScript si le projet sera maintenu (et étendu) à l'avenir.

Si un projet part de zéro, il est généralement préférable d'utiliser TypeScript. Cela permettra une meilleure organisation et maintenance du code à long terme.

Exemples simples

// TypeScript.
class Person {
  name: string;
  age: number;
}

const person: Person = new Person();
const person.name = "Tom";
const person.age = 42;

// JavaScript.
var Person = function() {};
Person.prototype.name = "";
Person.prototype.age = 0;

// TypeScript.
// Here's we're also using the class, but this
// time conforming to an interface, something that
// doesn't exist in JavaScript.
interface IPerson {
  name: string;
  age: number;
}

class Person implements IPerson {
  name: string;
  age: number;
}

// JavaScript.
var IPerson = function() {};
IPerson.prototype.name = "";
IPerson.prototype.age = 0;

var Person = function() {};
Person.prototype = Object.create(IPerson);

Mots de clôture

TypeScript est un langage puissant qui peut aider à améliorer la qualité de votre code. Il est facile de démarrer et peut être utilisé sur n'importe quelle plate-forme prenant en charge JavaScript. Cet article n'a donné qu'une très brève introduction, car le langage fournit beaucoup plus de fonctionnalités et de concepts à apprendre maintenant.

Consultez les liens dans l'addendum à la fin de la page pour trouver du matériel d'apprentissage utile.