TypeScript : les fonctions

Cet article fait suite à l’introduction sur TypeScript qui a été publié précédemment. Ici, nous nous attarderons sur les fonctions dans TypeScript, leurs particularités et comment le TypeScript introduit de nouvelles notions comparées au JavaScript, notamment le caractère obligatoire ou optionnel des paramètres ou encore la gestion du this.

La syntaxe de base d’une fonction en TypeScript

Une fonction peut être déclarée de deux façons différentes : avec un nom ou anonymement. Voici ce que cela donne :

Ces deux approches permettent une plus grande liberté sur la façon de générer des APIs contenant un ensemble de fonctions, ou de déclarer une fonction unique utilisable partout dans votre application.

Ci-dessus, je vous propose un exemple d’API où les fonctions sont nommées, contrairement à l’exemple suivant où la fonction globale est anonyme.

NB : Une fonction anonyme ne peut être utilisée qu’après avoir été affectée à une variable.

Ici la méthode myGreeting est appelée sans affectation, or vu que myGreeting est une variable à laquelle on affecte une fonction et qu’elle n’est pas encore affectée, une erreur est levée.

Le typage des fonctions de TypeScript

Le typage de la valeur que retourne une fonction se fait en ajoutant après la définition de ses paramètres “: nom_du_type”.

Parfois, il est nécessaire de spécifier, non pas le type de la valeur retournée, mais la fonction complète.

Dans l’exemple ci-dessus, nous avons défini une variable nommée “anyGreeting” de type fonction qui a besoin d’un paramètre de type string et qui retourne une valeur de type string également. En utilisant cette approche, seules les fonctions ayant ces caractéristiques  peuvent être affectées à la variable anyGreeting.

Ici, nous tentons d’affecter une fonction qui prend en paramètre un string et qui retourne un nombre, mais le compilateur Typescript nous indique clairement que ce n’est pas possible car le type de retour ne convient pas.

Typage par déduction

Dans l’article d’introduction au TypeScript, nous avons pu constater que TypeScript est capable de déduire le type d’une variable en fonction du contexte dans lequel cette variable est définie pour la première fois. Il en est de même avec le typage des fonctions : il s’agit du typage contextuel.

Ici, vu que les paramètres sont typés “number” et que la valeur de retour est du même type que les paramètres, alors le type de retour de la fonction est “number” également.

Ici, le type des paramètres de la fonction anonyme ne sont pas définis explicitement. Cependant, le compilateur TypeScript est capable d’en déduire ces derniers à partir du type fonction de *otherSum*.

A noter également que l’exemple ci-dessus peut s’écrire en une seule fois.

Les fonctions fléchées dans TypeScript

La fonction fléchée, ou Arrow function, est une autre façon de définir une fonction de façon plus concise et donc de simplifier la syntaxe. Elle se présente de la façon suivante :

Cette syntaxe se décompose de la façon suivante :

• Les paramètres sont définis de la même façon que la syntaxe classique. Ils sont écrits entre parenthèses et chaque paramètre est séparé par une virgule ;
• La flèche qui marque la séparation entre les paramètres et l’implémentation de la fonction ;
• Le corps de la fonction entre des accolades.

Ici nous avons réécrit la fonction greeting en utilisant la syntaxe de la fonction flèche (écriture lambda).

NB : la fonction flèche en TypeScript possède une gestion différente du mot clé this par rapport à la syntaxe classique. Nous détaillerons ce point dans la section dédiée.

Les paramètres de TypeScript

Dans cette section, nous nous attarderons à présenter les paramètres et les possibilités qu’offrent le langage TypeScript.

En TypeScript, tout paramètre défini est obligatoire. Ici, la fonction “formalGreeting” a besoin de deux paramètres de type string.

Ici, le compilateur indique qu’il manque le paramètre *lastName* pour utiliser la fonction *formalGreeting*.

TypeScript : paramètres optionnels et paramètres par défaut

Contrairement au JavaScript où tout paramètre est optionnel, en TypeScript cette condition doit être explicitement indiquée par un point d’interrogation (?) à côté du nom du paramètre optionel.

Dans l’exemple ci-dessous, nous présentons différent cas d’utilisation d’une fonction avec un paramètre optionnel.

La fonction “informalGreeting” peut être appelée avec au plus un paramètre de type string. Dans le cas où nous utilisons la fonction sans paramètre, alors la valeur “Hi, body!” sera retournée. Toutefois si nous utilisons un paramètre, alors le message sera “Hi  value_du_paramètre”.

Le dernier cas d’utilisation montre clairement que la fonction “informalGreeting” ne peut pas être utilisée avec deux paramètres.

Dans le même esprit, un paramètre par défaut est un paramètre optionnel à qui nous donnons une valeur spécifique lorsqu’elle est omise lors de l’utilisation de la fonction.

Cette fonction fait exactement la même chose que dans l’exemple précédent. Nous pouvons cependant voir que le paramètre est défini par la présence du symbole “= suivi_de_sa_valeur” après son type.

Le même comportement que “informalGreenting” sera observé pour “informalGreentingV2”.

Paramètre du reste sur TypeScript

L’usage des paramètres obligatoires, optionnels et par défaut nous donnent un cadre d’utilisation précis d’une fonction. En effet, ces types de paramètres ne peuvent pas être utilisés plus d’une fois.

Il est possible d’utiliser un paramètre du reste pour ne plus être restreint par le nombre maximal de paramètre. Le paramètre de reste s’identifie avec trois petit points “…” placés avant le nom du paramètre.

Lorsqu’une fonction possède un paramètre du reste, ce paramètre est toujours placé en dernier. TypeScript interprète le paramètre du reste comme étant un tableau de valeur de longueur indéfinie. La méthode console.log() en est une bonne illustration de ce cas.

Le this

En tant que développeur, lorsque nous nous travaillons en JavaScript, nous sommes très vite confrontés au cas du “this”. C’est une étape incontournable de l’apprentissage du langage et TypeScript ne déroge pas à cette règle.

En JavaScript le “this” désigne le contexte de la fonction dans laquelle elle est appelée ce qui permet plus une grande souplesse. En contrepartie, sa gestion devient plus délicate car elle suppose une connaissance parfaite des contextes d’exécution des fonctions où “this” est appelé. C’est le cas de fonction en paramètre de fonction.

Dans l’exemple ci-dessus, nous avons trois fonctions qui devraient avoir le même comportement. Lorsque l’on regarde de plus près, on constate une petite différence entre “uncorrectJSGreeting” et “correctJSGreeting”.

Dans la méthode “uncorrecJsGreeting”, on tente d’utiliser la propriété “this” qui contient la variable “name” dans le callback “setIntervale”. Or, comme nous avons dit précédemment le “this” dans le callback n’a pas connaissance de “name” car lorsque le callback s’exécute, il crée un nouveau contexte où “name” n’est pas définie.

La dernière méthode “greeting” fait appel à la syntaxe de la fonction flèche (écriture lambda). Grâce à cette syntaxe, il est possible  d’utiliser le “this” où la variable “name” est définie directement de dans le callback. Cette écriture est d’ailleurs plus concise et plus lisible.

La surcharge

Un grand nombre de langages fortement typés ont un mécanisme de surcharge pour les méthodes.

La surcharge consiste à définir plusieurs méthodes qui ont le même nom mais qui diffèrent de par leur type de retour ou des paramètres qui les composent. TypeScript supporte la  surcharge : pour cela, il faut mettre en place un mécanisme de protection par le type. Cela s’effectue en faisant une vérification au préalable du type des paramètres avant de pouvoir les utiliser de la meilleure façon.

Dans l’exemple ci-dessus la méthode myMethod possède deux surcharges : l’une prenant un paramètre de type string et l’autre un paramètre de type number. Les surcharges sont définies par les signatures des méthodes avec l’ensemble des paramètres typés et le type de retour, puis terminées par un point virgule.

L’implémentation concrète de la méthode surchargée est définie avec un paramètre de type any et du même type de retour que les deux surcharges.

A noter : dans la signature de la méthode concrète, le paramètre possède un nom différent des signatures des surcharges.

Dans cet autre exemple, les surcharges portent aussi bien sur le type du paramètre que sur le type de la valeur retourné par la méthode.

Fonctions TypeScript : l’essentiel à retenir

Dans cet article, nous avons vu comment TypeScript gère l’écriture et l’utilisation des fonctions.

Nous avons vu que contrairement au JavaScript, les fonctions ont des notions de paramètre obligatoire et optionnel voire définies par défaut. Nous avons également vu que la gestion du mot clé this dans une fonction classique, un callback et une fonction flèche.

Enfin, nous avons vu que comme un grand nombre de langages fortement typés, TypeScript permet la surcharge de méthode.

Sources associée à l’article : https://github.com/ssidambarom/TypescriptCh2Demo