TypeScript : les fonctions

Dans tout langage de programmation les fonctions jouent un rôle central. ce sont des unités d’exécution qui accomplissent des tâches. On les utilise énormément avec JavaScript. TypeScript reprend évidemment toutes les possibilités de JavaScript mais il en ajoute d’autres qui enrichissent et élargissent ces possibilités.

Les 2 types de fonctions en JavaScript

Pour mémoire en JavaScript on peut définir une fonction de 2 manières :

  • en la nommant, par exemple :
function carre(x) {  return x * x; }
  •  en la rendant anonyme, par exemple :
let maFonction = function(x) { return x * x; };

Donc on a aussi ces deux possibilités avec TypeScript.

Par contre on ne va pas avoir besoin de ce genre de syntaxe qui vise à isoler du code puisqu’on a des espaces de noms comme on l’a vu dans le précédent article :

(function(){ ... })()

Type des fonctions

On a vu dans les précédents articles qu’on peut typer les paramètres d’une fonction, mais on peut aussi typer la valeur de retour :

function carre(x: number): number {
    return x * x ;
}

Là on veut que la fonction retourne une valeur numérique.

Si la fonction ne renvoie pas de valeur on lui donne le type void :

function affiche(texte: string): void {
    alert(texte);
}

Les paramètres

Paramètre optionnel

Avec JavaScript les paramètres d’une fonction sont optionnels par défaut. Avec TypeScript ce n’est pas le cas, il faut passer autant de valeurs qu’il y a de paramètre à renseigner. Mais des fois a besoin de plus de souplesse et fort heureusement TypeScript permet de rendre des paramètres optionnels :

function afficheNom(nom: string, prenom?: string): void {
    let texte = nom;
    if (prenom) {
        texte += ' ' + prenom;
    }
    alert(texte);
}
afficheNom('Durand');
afficheNom('Dupont', 'Marcel');

Ici le prénom est optionnel. Il a suffi d’ajouter un point d’interrogation.

Valeur par défaut

Plutôt que de le rendre simplement optionnel on peut lui attribuer une valeur par défaut en cas d’absence :

function afficheNom(nom: string, prenom = 'Pierre'): void {
  let texte = nom;
  if (prenom) {
    texte += ' ' + prenom;
  }
    alert(texte);
}
afficheNom('Durand');
afficheNom('Dupont', 'Marcel');

Si aucun prénom n’est transmis ça sera d’office Pierre (comme dans un célèbre film !).

Paramètres du reste

Des fois on ne sait pas de combien de paramètres on a besoin. On utilise alors les paramètres du reste :

function ajouter(base, ...elements) {
    for (var i = 0; i < elements.length; i++) {
        base += elements[i];
    }
  return base;
}

var resultat = ajouter(10, 1, 2);
alert(resultat);

Ici on ajoute au premier paramètre tous les autres transmis, quel qu’en soit le nombre.

Paramètre union

On a vu qu’avec TypeScript on peut typer les paramètres mais comment faire si on n’est pas sûr du type transmis ? On peut toujours régresser et ne pas typer mais ce serait dommage. On peut aussi utiliser le type any, mais ça revient au même.

Une possibilité consiste à utiliser l’union, si pas exemple on peut recevoir soit un string soit un number :

function compresse(value: string, mode: string | number) {
    if (typeof mode === 'string') {
        return value.substr(0, mode.length);
    }
    else if (typeof mode === 'number') {
        return value.substr(0, mode);
    }    
    return value;
}

alert(compresse('trucacompresser', 6));
alert(compresse('trucacompresser', 'comprimer'));

Fonction fléchée

Les fonctions fléchées permettent deux choses :

  • avoir une syntaxe plus légère
  • lier la valeur this de façon lexicale.

Regardez ce code :

var notes = [8, 12, 14, 5];
var result = notes.reduce(function (total, current) { return total + current; });

On utilise une fonction anonyme pour traiter le tableau, le résultat est la somme des valeurs 39.

Avec la syntaxe des fonctions fléchées on obtient ceci :

var result = notes.reduce((total, current) => total + current);

Ce qui est plus lisible.

Regardez maintenant ce code :

function MyComponent() {
	this.note = 10;
	setTimeout(() => {
		++this.note;
		console.log(this.note);
	}, 100);
} 
new MyComponent();

Avec du JavaScript classique la valeur this dans le setTimeout ne réfèrerait pas le composant. Avec TypeScript ça fonctionne bien. D’ailleurs après compilation on retrouve l’utilisation classique d’une variable :

function MyComponent() {
    var _this = this;
    this.note = 10;
    setTimeout(function () {
        ++_this.note;
        console.log(_this.note);
    }, 100);
}
new MyComponent();

 

Laisser un commentaire