La fonction reduce en TypeScript

Dans cet article, nous allons voir comment utiliser la fonction reduce() en JavaScript et nous finirons par un exemple d’utilisation avec TypeScript.

La fonction reduce()

La fonction reduce() permet de traiter chaque valeur d’une liste afin de la réduire en une seule valeur.

Prototype de la fonction

array.reduce(callback[, initialValue]);

Paramètres

callback : La fonction qui sera appelée sur chaque item du tableau. Le callback permet d’accéder à l’accumulateur, la valeur courante, l’index, l’array.
initialValue : La valeur initiale de l’accumulateur

Retour

La fonction reduce() renvoie la valeur réduite de notre tableau.

Exemple d’utilisation de la fonction reduce() en JavaScript

Un cas classique d’utilisation de reduce() est d’additionner l’ensemble des valeurs d’un tableau de nombre pour en obtenir le total. Avec une boucle for, on devrait faire :

let array = [56, 12, 43, 69]
let sum = 0

for(let i = 0; i < array.length; i++) {
  sum += array[i]
};

console.log(sum) // 180

La fonction reduce() nous permet d’écrire quelque chose de plus simple pour le même résultat.

let array = [56, 12, 43, 69]
let sum = array.reduce((accumulator, item) => accumulator + item)

console.log(sum) // 180

Il est aussi possible d’assigner une valeur par défaut à notre accumulateur.

Par exemple :

let array = [56, 12, 43, 69]
let sum = array.reduce((accumulator, item) => accumulator + item, 20)

console.log(sum) // 200

Nous allons maintenant voir comment l’utiliser en TypeScript.

Exemple d’utilisation de reduce() en TypeScript

Avec TypeScript, l’utilisation de reduce() est la même.

Si on reprend l’exemple ci-dessus, TypeScript va être capable de détecter le type de notre accumulateur grâce à la valeur par défaut : 20 (ici, c’est un number).

Mais qu’en est-il si l’on souhaite travailler avec des objets un peu plus complexes ?

Prenons un autre exemple. Nous souhaitons transformer un tableau d’objet, avec une propriété value qui contient un nombre, en tableau de nombre. Nous pourrions donc écrire :

let array = [
    { value: 35 },
    { value: 89 },
    { value: 28 }
]

let sum = array.reduce((accumulator, item) => {
    accumulator.push(item.value) //Argument of type 'number' is not assignable to parameter of type 'never'
    return accumulator
}, [])

Ce code en JavaScript ne pose aucun problème.

En revanche, dans ce cas, TypeScript va lever une erreur.

Ici, nous définissons la valeur par défaut de l’accumulateur tel que [] qui est en fait interprété comme never[] (plus d’information sur never).

Le type never a la particularité de ne pas pouvoir être assignable, c’est-à-dire qu’on ne peut pas modifier sa valeur.

TypeScript utilise ce type, car on ne lui indique pas le type d’un item du tableau.

Afin de palier ce problème, il faut définir le type de notre tableau. On peut donc écrire :

let sum = array.reduce<number[]>((accumulator, item) => {
    accumulator.push(item.value)
    return accumulator
}, [])

L’écriture un peu particulière function<type>() nous permet de définir le type de la valeur de retour de notre fonction. Dans cette situation, TypeScript va être capable de faire le lien entre notre variable accumulator et le type de retour de la fonction.

La fonction reduce() n’a plus de secrets pour vous. Que ce soit en JavaScript ou en TypeScript, c’est maintenant votre allié ! 🙂