devstory

Fonctions dans TypeScript

  1. Qu'est-ce qu'une fonction ?
  2. La fonction régulière
  3. Closure (La clôture)
  4. Le paramètre optionnelle
  5. Les paramètres de type de données union
  6. Function Overloading

1. Qu'est-ce qu'une fonction ?

Dans le langage de programmation TypeScript, une fonction (function) est un bloc de code (block of code) nommé. Elle peut prendre des paramètres et renvoyer une valeur ou rien du tout, et uniquement quand elle est convoquée. Les fonctions divisent une grande mission en plusieurs petites parties et effectuent des opérations spécifiques de ce programme. Ce processus améliore la possibilité de réutiliser du code et l'approche modulaire du programme.
La syntaxe utilisée pour déclarer une fonction régulière :
function function_name(arg1: type1, arg2: type2, argN: typeN) : return_type {
   // Statements
}
Remarque: A l'instar de JavaScript, TypeScript n'accepte pas deux fonctions de même nom, même si leurs paramètres sont différents.

2. La fonction régulière

La syntaxe utilisée pour déclarer une fonction régulière :
function function_name(arg1: type1, arg2: type2, argN: typeN) : return_type {
   // Statements
}
Utiliser le mot clef void (ou vide) comme un type de retour si la fonction ne renvoie rien du tout.
function function_name(arg1: type1, arg2: type2, argN: typeN) : void {
   // Statements
}
// Same as:
function function_name(arg1: type1, arg2: type2, argN: typeN) {
   // Statements
}
Par exemple: La fonction minus avec deux paramètres de type number, et renvoie une valeur de type number.
function_ex1.ts
function minus(a: number, b: number) : number {
    return a + b;
}  
var result = minus(10, 20); // -10
console.log(`result = ${result}`);
Output:
result = -10
Par exemple: La fonction greeting accepte un paramètre de type string et ne renvoie rien du tout.
function_ex2.ts
function greeting(name: string) {
    var s = `Hello $name`;
    console.log(s);
}
// Call the function:
greeting('Tom'); // Hello Tom

3. Closure (La clôture)

Dans le langage de programmation TypeScript, Closure (clôture) est une fonction spéciale.
  • A l'instar d'une fonction, Closure est un bloc d'instructions avec des paramètres qui peut renvoyer une valeur ou rien du tout.
  • A l'inverse d'une fonction, Closure n'a pas de nom. Cependant, vous pouver l'identifier par une variable.
Voir cet articile détaillé sur Closure :

4. Le paramètre optionnelle

Comme mentionné ci-dessus, TypeScript n'accepte pas les fonctions ayant le même nom, mais une fonction peut inclure des paramètres facultatifs optionnels, qui doivent être les derniers dans la liste de paramètres.
La syntaxe :
Syntax
function function_name(argM: typeM, argN: typeN, argP?:typeP, argQ?: typeQ): return_type {  
     // Statement(s)  
}
Ou la syntaxe - le paramètre optionnel avec une valeur par défaut :
function function_name(argM: typeM, argN: typeN,
                  argP?:typeP = defaultValueP, argQ?: typeQ = defaultValueQ): return_type {  
     // Statement(s)  
}
Par exemple :
function_optional_args_ex1.ts
function concat(s1: string, s2: string, s3?: string): string {
    if (s3) {
        return s1 + s2 + s3;
    }
    return s1 + s2;
}
function sum(v1: number, v2: number, v3?: number, v4?: number): number {
    return v1 + v2 + (v3 ?? 0) + (v4 ?? 0);
}
function function_optional_args_ex1_test() {
    var result1 = concat('One', 'Two');
    console.log(`result1: ${result1}`);
    var result2 = concat('One', 'Two', 'Three');
    console.log(`result2: ${result2}`);

    var value1 = sum(1, 2, 3, 4);
    console.log(`value1: ${value1}`);
    var value2 = sum(1, 2, 3);
    console.log(`value2: ${value2}`);
    var value3 = sum(1, 2);
    console.log(`value3: ${value3}`);
}
function_optional_args_ex1_test(); // Call the function.
Output:
result1: OneTwo
result2: OneTwoThree
value1: 10
value2: 6
value3: 3

5. Les paramètres de type de données union

Les paramètres dans une fonction peuvent également être déclarés avec le type de données union (union data type).
La syntaxe :
function function_name (
             arg1 : data_type1, arg2 : data_type2,
             arg3 : data_type31 | data_type32 | data_type3N, // Union Data Type
             arg4 : data_type4) : return_type {
    //  Statament(s)
}
Par exemple :
function_union_type_args_ex1.ts
interface IStudent {
    studentId: number,
    studentName: string
}
interface IWorker {
    workerId: number,
    workerName: string
}
function getName(person: IStudent | IWorker): string { // Union Type Arg
    var p = person as IStudent;
    if (p.studentName) {
        return p.studentName;
    }
    return (person as IWorker).workerName;
}
function function_union_type_args_ex1_test() {
    var student = { studentId: 1, studentName: "Tom" };
    var worker = { workerId: 2, workerName: "Jerry" };

    var name1 = getName(student);
    var name2 = getName(worker);
    console.log(`name1: ${name1}`);
    console.log(`name2: ${name2}`);
}
function_union_type_args_ex1_test(); // Call the function.
Output:
name1: Tom
name2: Jerry

6. Function Overloading

Comme mentionné ci-dessus, TypeScript n'accepte pas les fonctions ayant le même nom même si elles ont des paramètres différents. La Function Overloading est une technique de "contournement", c'est-à-dire, vous ne disposez que d'une seule fonction ayant un nom spécifique, mais vous pouvez l'utiliser avec des paramètres différents.
L'idée essentielle de la surcharge de fonction est de créer une fonction générique qui permet de vérifier le type de paramètre ayant été transmis lorsque la fonction a été convoquée, ensuite, de faire une logique pour le cas approprié. Il est nécessaire d'ajouter des définitions à la fonction pour aider les autres programmeurs à l'utiliser de manière appropriée.
La syntaxe :
// Definition 1
function function_name(arg_11 : type_11, arg_1N : type_1N): return_type;
// Definition 2
function function_name(arg_21 : type_21, arg_22 : type_22, arg_2M : type_2M) : return_type;
function function_name(... args : any[]) : return_type {
   // Function body.
}
En règle générale, il existe de nombreuses façons permettant de définir une fonction surchargée. La syntaxe ci-dessus est recommandée, parce qu'elle vous permet d'éviter l'erreur ci-dessous du compilateur :
This overload signature is not compatible with its implementation signature.
La syntaxe :
function_overload_ex1.ts
interface IDimension3D {
    width: number,
    height: number,
    depth: number
}
function getVolume(dimension: IDimension3D): number; // Definition 1
function getVolume(width: number): number; // Definition 2
function getVolume(width: number, height: number, depth: number): number; // Definition 3
function getVolume(...args: any[]): number {
    if (args.length == 1) {
        if (typeof args[0] == 'number') { // Use Definition 1
            return args[0] * args[0] * args[0];
        } else {  // Use Definition 2
            var dim = args[0] as IDimension3D;
            return dim.width * dim.height * dim.depth;
        }
    } else if (args.length == 3) { // Use definition 3
        return args[0] * args[1] * args[2];
    } else {
        throw Error('Argument invalid!');
    }
}
function function_overload_ex1_test() {
    var volume1 = getVolume(10); // 1000
    var volume2 = getVolume({ width: 10, height: 20, depth: 30 }); // 6000
    var volume3 = getVolume(5, 10, 15); // 750

    console.log(`volume1 = ${volume1}`);
    console.log(`volume2 = ${volume2}`);
    console.log(`volume3 = ${volume3}`);
}
function_overload_ex1_test(); // Call the function.
Output:
volume1 = 1000
volume2 = 6000
volume3 = 750

Articles les plus récents

Show More