Qu'est-ce que TypeScript et devriez-vous l'utiliser à la place de Vanilla JS?

TypeScript est une version personnalisée de JavaScript créée par Microsoft qui ajoute la prise en charge du typage statique, des classes, des énumérations et des interfaces. Son utilisation pour un grand projet JavaScript peut rendre votre code plus organisé et plus facile à intégrer.

Qu'est-ce que TypeScript?

TypeScript n’est pas un nouveau langage. Il s'agit d'un sur-ensemble syntaxique de JavaScript – tout code JS valide est un code TypeScript valide. TypeScript se compile en JavaScript simple qui s'exécute dans n'importe quel navigateur. Comme il s’agit d’un langage purement additif, la couche de traduction est très simple et elle est facile à adopter dans un projet JavaScript existant.

La principale chose que TypeScript ajoute est, bien sûr, le typage statique. JavaScript est intrinsèquement typé dynamiquement. Cela signifie que toute variable ou objet peut avoir son type réaffecté au moment de l'exécution. Cela rend JS très flexible et facile à utiliser, mais le rend malheureusement compliqué lorsque vous travaillez dans un grand projet.

Avec le typage statique, vous êtes obligé de définir les paramètres que prennent les fonctions et les objets, donc si vous avez une fonction qui prend un argument de chaîne, vous ne pouvez pas lui passer un nombre, et si vous essayez de le faire, le compilateur lancera une erreur .

Par exemple, cette fonction de base prend un message paramètre auquel le type de string avec le x: type syntaxe. Il s'agit d'une primitive JavaScript, mais vous pouvez également définir vos propres types et structures personnalisés. La fonction elle-même renvoie également une valeur de chaîne. Lorsque nous utilisons cette fonction plus tard dans le code, nous pouvons la survoler et voir quels types la fonction prend et ce qu'elle renvoie.

Bien que cela puisse sembler un travail supplémentaire inutile, cela conduit à des bases de code très organisées et peut améliorer la productivité globale. L'un des principaux avantages du typage statique est une prise en charge plus riche de l'EDI. Les types étant définis de manière statique, l'EDI peut rechercher des erreurs simples beaucoup plus facilement.

Voici un exemple. Nous utiliserons VS Code pour l'EDI, car il est fourni avec la prise en charge TypeScript intégrée de Microsoft, mais les plug-ins TypeScript sont disponibles pour de nombreux éditeurs de texte. Dans cette application, nous avons un simple composant React qui prend deux propriétés et rend du texte. Dans vanilla JS, cela ressemblerait à ceci:

Avec TypeScript, nous ne pouvons pas passer le props variable sans lui attribuer un type, d'où l'erreur ci-dessus. Vous pouvez désactiver cette vérification en utilisant props: any, ce qui le rend explicitement typé dynamiquement, mais il est préférable de définir simplement le type ci-dessus:

Cette interface nécessite props être un objet avec deux clés, toutes deux définies sur des chaînes. Vous pouvez éventuellement définir ce type en ligne, mais il est préférable de nommer des éléments comme celui-ci pour référence ailleurs dans le projet.

Si nous allons utiliser ce composant ailleurs dans l'application, le compilateur lancera une erreur, en disant que le Hello il manque les deux propriétés définies dans le composant HelloProps. S'il s'agissait d'un composant plus gros et plus compliqué, vous auriez pu manquer la définition correcte d'un accessoire, rencontrer des problèmes lors des tests et finalement réaliser votre erreur après une minute ou deux de débogage. Avec TypeScript, VS Code vous en parlera au préalable.

Mieux encore, vous bénéficierez de fonctionnalités de saisie semi-automatique à mesure que vous tapez. VS Code vous indiquera les arguments nécessaires au fur et à mesure que vous les saisissez.

Et, si vous travaillez dans un grand projet (ou avec des dépendances basées sur TypeScript), vous pourrez obtenir une documentation en ligne en jetant un œil aux définitions de type:

Ces types de fonctionnalités n'existent tout simplement pas avec JavaScript vanille sans écrire manuellement une documentation en ligne complète.

Dans l'ensemble, TypeScript est très utile pour les équipes de codeurs qui cherchent à organiser leurs bases de code JavaScript. Le passage de JavaScript à TypeScript n’est pas trop difficile; il est facile à comprendre si vous connaissez déjà JavaScript et sera probablement préférable aux personnes qui ont travaillé avec d’autres langages à typage statique comme Java et les variantes C.

Si vous souhaitez vous familiariser avec TypeScript, vous pouvez lire notre guide sur sa configuration (et son utilisation dans une base de code JavaScript existante).

Autres fonctionnalités de TypeScript

TypeScript ne s'arrête pas à l'ajout de types statiques – il ajoute tout un tas de sucre syntaxique par rapport à JS vanille. Nous vous recommandons de lire leur manuel, mais nous aborderons également certains des plus intéressants ici.

Les énumérations, ou énumérateurs, sont un moyen de définir un ensemble de constantes nommées. Par exemple, Haut, Bas, Gauche ou Droite. Vous pouvez les utiliser pour définir un type personnalisé qui autorise une liste spécifique de valeurs. Vous pouvez référencer le littéral enum en utilisant EnumName.constant:

Les interfaces vous permettent de définir des structures personnalisées que vous pouvez utiliser comme types. Au-delà de l'attribution de types primitifs de base, vous les utiliserez probablement le plus. Par exemple, vous pourriez avoir un User interface qui définit un objet avec un nom d'utilisateur, une adresse e-mail et un ID, puis crée une fonction qui prend une liste d'utilisateurs et recherche leurs amis dans une base de données.

Vous pouvez également les utiliser comme interfaces plus traditionnelles, en les implémentant dans une classe et en exigeant que les champs et les méthodes de cette classe soient implémentés dans le code. Par exemple, l'interface utilisateur peut nécessiter un getPosts() à implémenter, qui renvoie un tableau d'objets Post. Cela peut vous aider à standardiser la communication de classe à classe.

Les génériques vous permettent de transmettre des informations de type via des fonctions qui peuvent accepter n'importe quel type. Sans génériques, le mieux que vous puissiez faire est une fonction comme la suivante, qui prend n'importe quel type d'argument, et renvoie une variable qui a le any type.

function identity(arg: any): any {
  return arg;
}

Cela conserve la valeur qui lui est transmise, mais perd toutes les informations de type qui lui sont associées. Au lieu de cela, vous pouvez définir une variable de type, généralement T, qui transportera les données de type. Cette nouvelle fonction retournera le type que vous lui passerez:

function identity(arg: T): T {
  return arg;
}

Vous pouvez utiliser ceci identity fonction dans votre code, et transmettez-lui des chaînes et des nombres, et TypeScript ne se plaindra pas. Il déduit automatiquement le type en fonction de l'argument qui lui est passé, mais si vous souhaitez définir un type manuellement, vous pouvez le faire en passant le nom du type entre crochets:

identity()