Fermetures dans TypeScript

Qu'est-ce que c'est Closure ?
La syntaxe de la flèche
Définir un type de fonction
Le type de fonction dans le paramètre

1. Qu'est-ce que c'est Closure ?

Fonctions dans TypeScript

Dans le langage de programmation TypeScript, une Closure (une clôture) est une fonction spéciale.

A l'instar d'une fonction, une Closure est un bloc d'instructions avec des paramètres qui peut renvoyer une valeur ou rien du tout.
À l'inverse d'une fonction, Closure n'a pas de nom, cependant, vous pouvez l'identifier par une variable.

La syntaxe :

// Closure syntax
function(arg1: data_type1, arg2: data_type2, argN: data_typeN) {
   // Statements
}
// Declare a variable as an alias for Closure
var alias = function(arg1: data_type1, arg2: data_type2, argN: data_typeN) {
   // Statements
};

L'exemple ci-dessous montre la différence entre une fonction et une clôture. Conclusion : une clôture est une fonction sans nom.

// This is a function called sayHello
function sayHello(name: string) {
    console.log(`Hello ${name}`);
}
// This is a closure (A function without name)
function (name: string) {
    console.log(`Hello ${name}`);
}

En règle générale, si vous créez une Closure, mais vous ne l'utilisez pas immédiatement, vous devez l'identifier, sinon le compilateur signalera une erreur. Par exemple:

Closure ID Example

// Compile Error!!!!!
function(a: number, b: number) {
    return a + b;
}
// OK
var closureId = function(a: number, b: number) {
    return a + b;
}

Il n'y aura probablement pas besoin d'un identifiant pour une Cloture si vous la créez et la convoquez directement.

closure_ex1.ts

// Create a Closure and call it directly!
(function (name: string) {
    console.log(`Hello ${name}`);
})('Tom');

// --- Equivalent to: ---

// Identifier for a closure:
var sayHello = function (name: string) {
    console.log(`Hello ${name}`);
};
// Call closure via identifier:
sayHello('Tom');

Un autre exemple :

closure_ex2.ts

// Create a Closure and call it directly!
var result1 = (function (a: number, b: number) {
    return a + b;
})(100, 200);

// --- Equivalent to: ---

// Identifier for a closure:
var sum = function (a: number, b: number) {
    return a + b;
};
// Call closure via identifier:
var result2 = sum(100, 200);

2. La syntaxe de la flèche

TypeScript vous permet de déclarer une Closure à l'aide de la syntaxe de la flèche, également connue sous le nom de syntaxe Lambda. Par rapport à la syntaxe traditionnelle, la syntaxe de la flèche omet le mot-clef function et ajoute une flèche ( => ) entre le bloc paramètre et le bloc contenu.

// Arrow Syntax (Lambda Syntax):
(arg1: data_type1, arg2: data_type2, argN: data_typeN) => {
    // Statements
}

// Traditional Syntax:
function(arg1: data_type1, arg2: data_type2, argN: data_typeN)  {
    // Statements
}

Par exemple :

closure_arrow_ex1.ts

// Create a Closure with Arrow Syntax.
var introduction = (name: string, country?: string) => {
    if (country) {
        console.log(`Hello, My name is ${name} from ${country}`);
    } else {
        console.log(`Hello, My name is ${name}`);
    }
};
// Call the Closure
introduction('Tom', 'USA');

// --- Equivalent to: ----

// Create a Closure with Arrow Syntax and call it directly:
((name: string, country?: string) => {
    if (country) {
        console.log(`Hello, My name is ${name} from ${country}`);
    } else {
        console.log(`Hello, My name is ${name}`);
    }
})('Tom', 'USA');

Si le contenu de la Closure se compose d'une seule expression, vous pouvez l'écrire de manière plus succincte :

var closureId1 =  (arg1: data_type1, arg2: data_type2, argN: data_typeN)  => {
    console.log('Something');
}
// --- Equivalent to: ----
var closureId1 =  (data_type1 arg1, data_type2 arg2, data_typeN argN) => console.log('Something');

var closureId2 =  function(arg1: data_type1, arg2: data_type2, argN: data_typeN) => {
    return a_value;
}
// --- Equivalent to: ----
var closureId2 =  function(arg1: data_type1, arg2: data_type2, argN: data_typeN) => a_value;

Par exemple :

closure_arrow_ex2.ts

// Create a Closure
var minus = (a: number, b: number) => a - b;

var result = minus(100, 200); // Call a closure.
console.log(`result = ${result}`);

// Create a Closure
var sayBye = (name: string) => console.log(`Bye ${name}`);
sayBye('Tom'); // Call a closure.

Output:

result = -100
Bye Tom

3. Définir un type de fonction

Dans TypeScript, le mot-clef type est utilisé pour définir un nouveau type de données. Dans cette section, on s'intéresse à la manière d'utilisation du mot-clef type pour définir un type de fonction (également appelé type de clôture).

La syntaxe :

type Function_Type_Name = (arg1: data_type1, arg2: data_type2, argN: data_typeN) => return_type;

Par exemple: Définir un type de fonction qui accepte un paramètre de type number et renvoie une valeur de type number :

function_type_ex1.ts

// A Function Type:
type TaxCalculator = (amount: number) => number;
 
function function_type_ex1_test()  {
    var usTaxCalculator: TaxCalculator = (amount: number) =>  {
        return amount * 10 / 100;
    };
    var vnTaxCalculator: TaxCalculator = (amount: number) =>  amount * 5 / 100;

    var caTaxCalculator: TaxCalculator = function(amount: number)  {
        return amount * 8 / 100;
    }
    const AMOUNT = 1000;
    var usTaxAmount = usTaxCalculator(AMOUNT);
    var vnTaxAmount = vnTaxCalculator(AMOUNT);
    var caTaxAmount = caTaxCalculator(AMOUNT);

    console.log(`Tax amount according to US calculation: ${usTaxAmount}`);
    console.log(`Tax amount according to Vietnam calculation: ${vnTaxAmount}`);
    console.log(`Tax amount according to Canada calculation: ${caTaxAmount}`);
}
function_type_ex1_test(); // Call the function.

Output:

Tax amount according to US calculation: 100
Tax amount according to Vietnam calculation: 50
Tax amount according to Canada calculation: 80

4. Le type de fonction dans le paramètre

Le type de fonction (Function Type) peut apparaître comme un paramètre d'une autre fonction, clôture, méthode ou constructeur.

function_type_in_args_ex1.ts

// Define a Function Type:
type MyTaxCalculator = (value: number) => number;

function calculateTaxAmount1(amount: number, calculator: MyTaxCalculator) {
    var taxAmount = calculator(amount);
    console.log(`Tax Amount: ${taxAmount}`);
}
// --- Equivalent to: ---

function calculateTaxAmount2(amount: number, calculator: (value: number) => number) {
    var taxAmount = calculator(amount);
    console.log(`Tax Amount: ${taxAmount}`);
}

Par exemple :

function_type_in_args_ex2.ts

// A Function accepts 2 parameters:
// 1 - amount: number
// 2 - calculator : (number) => (number)
function printTaxAmount(amount: number, calculator: (value: number) => number) {
    var taxAmount = calculator(amount);
    console.log(`Tax Amount: ${taxAmount}`);
}
function function_type_in_args_ex2_test() {
    // Function Type: (number) => (number)
    var usTaxCalculator = (value: number) => {
        return value * 10 / 100;
    };
    // Function Type: (number) => (number)
    var vnTaxCalculator: TaxCalculator = (value: number) => value * 5 / 100;

    printTaxAmount(1000, usTaxCalculator);
    printTaxAmount(1000, vnTaxCalculator);
    printTaxAmount(1000, (value: number) => value * 8 / 100);
}
function_type_in_args_ex2_test(); // Call the function.

Output:

Tax Amount: 100
Tax Amount: 50
Tax Amount: 80

Fermetures dans TypeScript

1. Qu'est-ce que c'est Closure ?

2. La syntaxe de la flèche

3. Définir un type de fonction

4. Le type de fonction dans le paramètre

Tutoriels de programmation TypeScript

Tutoriels de programmation TypeScript

Articles les plus récents