Offre estivale Bibliothèque Numérique ENI :
50€ offerts pour préparer la rentrée ! Cliquez ici
Formez-vous en autonomie à Excel, Word, VBA, Microsoft 365…. Cliquez ici
  1. Livres & vidéos
  2. Angular
  3. TypeScript
Extrait - Angular Développez vos applications web avec le framework JavaScript de Google (4e édition)
Extraits du livre
Angular Développez vos applications web avec le framework JavaScript de Google (4e édition)
1 avis
Revenir à la page d'achat du livre

TypeScript

Introduction à TypeScript

TypeScript est un langage de programmation open source développé et maintenu par Microsoft. C’est une surcouche à JavaScript qui apporte principalement un système de typage statique, tout en étant entièrement compatible à celui-ci. En d’autres termes, tout code JavaScript est valide dans du code TypeScript.

L’objectif principal de TypeScript est de faciliter le développement d’applications en offrant des outils puissants pour la vérification de types, l’introspection du code et l’autocomplétion. Viennent s’ajouter à cela certaines syntaxes modernes qui ne sont pas forcément déjà disponibles depuis JavaScript, améliorant la productivité des développeurs et la qualité du code.

Dans l’exemple suivant, nous avons un aperçu de la syntaxe :

let myName: string = 'John' 

La variable myName est définie comme étant une chaîne de caractères, et contrairement à du code JavaScript, nous ne pouvons pas assigner une valeur d’un autre type sans que l’éditeur de code, ainsi que le compilateur, ne nous remonte une erreur, comme ci-dessous :

images/02El01.png

Les bases de TypeScript

1. Variables et types de données

Types basiques

Lorsqu’on définit une variable, on peut rajouter le caractère ":" suivi du type souhaité. Celui-ci peut être un type primitif comme string, number et boolean. Pour typer un tableau, vous avez plusieurs possibilités comme dans l’exemple ci-dessous :

let arr1: any[]; 
let arr2: 
Array<any>; 
 
let arr3: number[]; 
let arr4: Array<number>; 

Les tableaux arr1 et arr2 sont typés de la même manière et sont totalement identiques, mais ne contiennent aucun type d’élément spécifié. Bien que le mot-clé utilisé soit différent, on notera que ce sont des tableaux, mais que nous n’avons pas indiqué le type des éléments constituant les tableaux, contrairement aux arr3 et arr4 où nous avons été plus précis.

De la même manière, pour les types primitifs, nous pouvons utiliser Number, String et Boolean. Le fait de pouvoir typer avec deux mots-clés différents se retrouve dans d’autres langages comme le C#, car les minuscules correspondent aux mots-clés de TypeScript pour typer, alors qu’avec une majuscule, cela correspond aux interfaces des objets natifs à JavaScript.

2. Les fonctions

a. Déclaration de fonctions

En TypeScript les fonctions sont définies de manière traditionnelle, en utilisant le mot-clé function, mais l’en-tête peut être suivi d’un type lié au retour de la fonction.

function print(message: string, name: string): string { 
 let concatenation = message + name; 
 return concatenation; 
} 

Notre fonction print prend donc deux paramètres de type string et retourne explicitement une chaîne de caractères.

b. Fonctions fléchées

Il existe une deuxième façon de déclarer des fonctions en TypeScript : en utilisant une fonction fléchée (arrow function), tout comme en JavaScript. Elles peuvent être définies via une variable ou de manière anonyme dans le cadre d’une fonction de rappel (callback) passée en paramètre. Leur nom vient de leur syntaxe où les paramètres sont séparés du corps...

Fonctionnalités avancées de TypeScript

1. Génériques

Jusqu’à maintenant, nous avons vu toutes sortes de manières de typer explicitement des éléments de code via des interfaces, des types, des classes, etc.

Mais il existe aussi une notation qui permet de ne pas avoir à spécifier de type, mais de le recevoir dynamiquement.

Voici un exemple simpliste : nous voulons envoyer des logs avec une donnée associée (un payload) ; cependant, nous ne pouvons pas prévoir quel sera le type du payload car ce log doit pouvoir être utilisé n’importe où dans l’application. Nous pouvons donc procéder comme suit :

class Log<T>{ 
  payload:T; 
  message:string; 
 
  constructor(message:string, payload: T){ 
    this.message = message; 
    this.payload = payload; 
  } 
} 
 
const log1 = new Log<string>("test",'string data'); 
const log2 = new Log("test2",{a:1,b:2}); 

2. Les décorateurs

Les décorateurs sont une fonctionnalité avancée de TypeScript. Fondamentalement, ce sont de simples fonctions qui, via une syntaxe spécifique, peuvent s’attacher à différents éléments de JavaScript comme les classes, les méthodes et les accesseurs pour y ajouter des métadonnées et intercepter leur comportement.

Conçu pour fonctionner au sein d’une classe, un décorateur peut, par exemple, intercepter l’exécution du constructeur pour forcer l’ajout d’une propriété....

TypeScript et ECMAScript

1. ECMAScript

ECMA (European Computer Manufacturers Association) est une organisation internationale dédiée à la standardisation des technologies de l’information et des communications. Elle se concentre sur le développement de normes internationales pour les langages de programmation et de protocoles de communication liés aux systèmes informatiques. Parmi les langages de programmation soutenus par l’organisation, nous pouvons trouver Dart et C#, mais celle qui nous intéresse en particulier est la norme ECMAScript qui s’avère être la base de travail pour les différents concepteurs de moteur "JavaScript", le but étant d’être capables de répondre aux défis actuels et futurs du Web. Cette évolution est guidée par des processus de standardisation ouverts, où les propositions sont discutées, testées et adoptées en fonction de leur pertinence et de leur utilité pour la communauté globale des développeurs.

Abrégé en "ES" (ECMAScript), il est parfois possible de voir deux notations, soit en utilisant leur numéro de version explicitement, à savoir "ES6", soit en utilisant l’année "ES2015". Une nouvelle version du standard sort chaque année depuis sa version 6, sortie en 2015, qui fut une avancée...

Compilation

TypeScript étant une surcouche à JavaScript, le code n’est pas réellement compilé comme on peut l’entendre pour un langage comme C, par exemple, mais il est transformé en JavaScript. L’appellation correcte serait "transpilé" mais, par facilité, les deux termes sont employés.

Étant donné qu’il n’existe pas de types en JavaScript, il faut bien comprendre que tous nos types, interfaces et contenu des d.ts ne sont pas transmis au code JavaScript généré ; tout cela est uniquement utile lors des phases de développement jusqu’à la compilation. Il est donc impossible de vérifier le type d’un objet pendant l’interprétation du JavaScript par le browser (ou runtime). 

Pour le reste, il existe trois principaux compilateurs :

  • tsc : le compilateur officiel, fourni par Microsoft.

  • Babel : principalement utilisé pour permettre aux développeurs de coder avec des versions avancées de JavaScript, et cela, avec un support en cas d’exécution sur de vieux navigateurs. Babel permet aussi de transpiler le TypeScript vers du JavaScript.

  • SWC (Speedy Web Compiler) : un outil plus récent et moderne, il apparaît comme étant plus performant que Babel, offrant les mêmes fonctionnalités.

Lorsque vous développez...

Conclusion

Lors de la création de la version 2 d’Angular, les équipes de Google ont décidé de collaborer avec Microsoft pour utiliser TypeScript de manière efficace. Ainsi, la librairie Angular elle-même a été créée en TypeScript et c’est pourquoi Angular essaie de l’exploiter au maximum. Nous verrons que les différents principaux éléments d’Angular sont des classes TypeScript, accompagnées de décorateurs spécifiques tels que @Component, @Directive, @NgModule, etc., permettant d’annoter les classes avec des métadonnées essentielles pour le framework. Aussi, Angular offre une approche plus "orientée objet", vu les choix de classes et l’utilisation d’injections de dépendances. Tout de même, le framework est en constante évolution. Bien que la structure repose historiquement sur des classes, les dernières versions tendent à alléger cette architecture en intégrant davantage de concepts fonctionnels. Angular semble ainsi trouver un équilibre entre la programmation orientée objet et fonctionnelle, sans basculer entièrement vers l’un ou l’autre paradigme.

Aujourd’hui, les classes sont bien supportées par JavaScript mais ce n’était pas le cas initialement. Ainsi, les autres structures comme...