TypeScript - Fonctions

Les fonctions sont les éléments constitutifs d'un code lisible, maintenable et réutilisable. Une fonction est un ensemble d'instructions pour effectuer une tâche spécifique. Les fonctions organisent le programme en blocs logiques de code. Une fois définies, les fonctions peuvent être appelées pour accéder au code. Cela rend le code réutilisable. De plus, les fonctions facilitent la lecture et la maintenance du code du programme.

Une déclaration de fonction informe le compilateur du nom, du type de retour et des paramètres d'une fonction. Une définition de fonction fournit le corps réel de la fonction.

Sr. Non Fonctions et description
1. Définition d'une fonction

Une définition de fonction spécifie quoi et comment une tâche spécifique serait effectuée.
2. Appeler une fonction

Une fonction doit être appelée pour l'exécuter.
3. Fonctions de retour

Les fonctions peuvent également renvoyer la valeur avec le contrôle, de nouveau à l'appelant.
4. Fonction paramétrée

Les paramètres sont un mécanisme permettant de transmettre des valeurs aux fonctions.

Paramètres facultatifs

Des paramètres facultatifs peuvent être utilisés lorsque des arguments ne doivent pas être obligatoirement passés pour l'exécution d'une fonction. Un paramètre peut être marqué comme facultatif en ajoutant un point d'interrogation à son nom. Le paramètre facultatif doit être défini comme dernier argument d'une fonction. La syntaxe pour déclarer une fonction avec un paramètre facultatif est la suivante -

function function_name (param1[:type], param2[:type], param3[:type])

Exemple: paramètres facultatifs

function disp_details(id:number,name:string,mail_id?:string) { 
   console.log("ID:", id); 
   console.log("Name",name); 
   
   if(mail_id!=undefined)  
   console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","[email protected]");

  • L'exemple ci-dessus déclare une fonction paramétrée. Ici, le troisième paramètre, ie, mail_id est un paramètre optionnel.

  • Si une valeur n'est pas transmise à un paramètre facultatif lors de l'appel de fonction, la valeur du paramètre est définie sur indéfinie.

  • La fonction imprime la valeur de mail_id uniquement si l'argument reçoit une valeur.

Lors de la compilation, il générera le code JavaScript suivant -

//Generated by typescript 1.8.10
function disp_details(id, name, mail_id) {
   console.log("ID:", id);
   console.log("Name", name);
	
   if (mail_id != undefined)
      console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "[email protected]");

Le code ci-dessus produira la sortie suivante -

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id [email protected]

Paramètres de repos

Les paramètres de repos sont similaires aux arguments variables en Java. Les paramètres de repos ne limitent pas le nombre de valeurs que vous pouvez transmettre à une fonction. Cependant, les valeurs transmises doivent toutes être du même type. En d'autres termes, les paramètres de repos agissent comme des espaces réservés pour plusieurs arguments du même type.

Pour déclarer un paramètre de repos, le nom du paramètre est précédé de trois points. Tout paramètre nonrest doit venir avant le paramètre rest.

Exemple: paramètres de repos

function addNumbers(...nums:number[]) {  
   var i;   
   var sum:number = 0; 
   
   for(i = 0;i<nums.length;i++) { 
      sum = sum + nums[i]; 
   } 
   console.log("sum of the numbers",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)

  • La déclaration de la fonction addNumbers () accepte un paramètre de repos nums . Le type de données du paramètre rest doit être défini sur un tableau. De plus, une fonction peut avoir au plus un paramètre de repos.

  • La fonction est appelée deux fois, en passant respectivement trois et six valeurs.

  • La boucle for parcourt la liste des arguments, passe à la fonction et calcule leur somme.

Lors de la compilation, il générera le code JavaScript suivant -

function addNumbers() {
   var nums = [];
   for (var _i = 0; _i < arguments.length; _i++) {
      nums[_i - 0] = arguments[_i];
   }
	var i;
   var sum = 0;
	
   for (i = 0; i < nums.length; i++) {
      sum = sum + nums[i];
   }
   console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

La sortie du code ci-dessus est la suivante -

sum of numbers 6 
sum of numbers 50

Paramètres par défaut

Les paramètres de fonction peuvent également recevoir des valeurs par défaut. Cependant, ces paramètres peuvent également être des valeurs transmises explicitement.

Syntaxe

function function_name(param1[:type],param2[:type] = default_value) { 
}

Note - Un paramètre ne peut pas être déclaré facultatif et par défaut en même temps.

Exemple: paramètres par défaut

function calculate_discount(price:number,rate:number = 0.50) { 
   var discount = price * rate; 
   console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

Lors de la compilation, il générera le code JavaScript suivant -

//Generated by typescript 1.8.10
function calculate_discount(price, rate) {
   if (rate === void 0) { rate = 0.50; }
   var discount = price * rate;
   console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

Sa sortie est la suivante -

Discount amount : 500 
Discount amount : 300

  • L'exemple déclare la fonction, Calculate_discount . La fonction a deux paramètres: le prix et le taux.

  • La valeur du paramètre rate est fixée à 0,50 par défaut.

  • Le programme appelle la fonction en lui transmettant uniquement la valeur du paramètre price. Ici, la valeur du taux est de 0,50 (par défaut)

  • La même fonction est appelée, mais avec deux arguments. La valeur par défaut de rate est écrasée et est définie sur la valeur explicitement transmise.

Fonction anonyme

Les fonctions qui ne sont pas liées à un identifiant (nom de fonction) sont appelées comme anonymous functions. Ces fonctions sont déclarées dynamiquement lors de l'exécution. Les fonctions anonymes peuvent accepter des entrées et renvoyer des sorties, tout comme le font les fonctions standard. Une fonction anonyme n'est généralement pas accessible après sa création initiale.

Les variables peuvent se voir attribuer une fonction anonyme. Une telle expression est appelée une expression de fonction.

Syntaxe

var res = function( [arguments] ) { ... }

Exemple ─ Une fonction anonyme simple

var msg = function() { 
   return "hello world";  
} 
console.log(msg())

Lors de la compilation, il générera le même code en JavaScript.

Il produira la sortie suivante -

hello world

Exemple ─ Fonction anonyme avec paramètres

var res = function(a:number,b:number) { 
   return a*b;  
}; 
console.log(res(12,2))

La fonction anonyme renvoie le produit des valeurs qui lui sont transmises.

Lors de la compilation, il générera le code JavaScript suivant -

//Generated by typescript 1.8.10
var res = function (a, b) {
   return a * b;
};
console.log(res(12, 2));

La sortie du code ci-dessus est la suivante -

24

Expression de fonction et déclaration de fonction ─ Sont-ils synonymes?

L'expression de fonction et la déclaration de fonction ne sont pas synonymes. Contrairement à une expression de fonction, une déclaration de fonction est liée par le nom de la fonction.

La différence fondamentale entre les deux est que les déclarations de fonctions sont analysées avant leur exécution. D'un autre côté, les expressions de fonction ne sont analysées que lorsque le moteur de script les rencontre pendant l'exécution.

Lorsque l'analyseur JavaScript voit une fonction dans le flux de code principal, il suppose la déclaration de fonction. Lorsqu'une fonction fait partie d'une instruction, il s'agit d'une expression de fonction.

Le constructeur de fonctions

TypeScript prend également en charge la définition d'une fonction avec le constructeur JavaScript intégré appelé Function ().

Syntaxe

var res = new Function( [arguments] ) { ... }.

Exemple

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

La nouvelle fonction () est un appel au constructeur qui à son tour crée et renvoie une référence de fonction.

Lors de la compilation, il générera le même code en JavaScript.

La sortie de l'exemple de code ci-dessus est la suivante -

12

Fonctions de récursivité et TypeScript

La récursivité est une technique pour itérer sur une opération en ayant une fonction appelée à elle-même à plusieurs reprises jusqu'à ce qu'elle arrive à un résultat. La récursivité est mieux appliquée lorsque vous devez appeler la même fonction à plusieurs reprises avec différents paramètres à partir d'une boucle.

Exemple - Récursivité

function factorial(number) {
   if (number <= 0) {         // termination case
      return 1; 
   } else {     
      return (number * factorial(number - 1));     // function invokes itself
   } 
}; 
console.log(factorial(6));      // outputs 720

Lors de la compilation, il générera le même code en JavaScript.

Voici sa sortie -

720

Exemple: fonction récursive anonyme

(function () { 
   var x = "Hello!!";   
   console.log(x)     
})()      // the function invokes itself using a pair of parentheses ()

Lors de la compilation, il générera le même code en JavaScript.

Sa sortie est la suivante -

Hello!!

Fonctions Lambda

Lambda fait référence aux fonctions anonymes dans la programmation. Les fonctions Lambda sont un mécanisme concis pour représenter des fonctions anonymes. Ces fonctions sont également appeléesArrow functions.

Fonction Lambda - Anatomie

Il y a 3 parties dans une fonction Lambda -

  • Parameters - Une fonction peut éventuellement avoir des paramètres

  • The fat arrow notation/lambda notation (=>) - Il est également appelé comme l'opérateur va à

  • Statements - représente le jeu d'instructions de la fonction

Tip - Par convention, l'utilisation du paramètre à une seule lettre est encouragée pour une déclaration de fonction compacte et précise.

Expression Lambda

Il s'agit d'une expression de fonction anonyme qui pointe vers une seule ligne de code. Sa syntaxe est la suivante -

( [param1, parma2,…param n] )=>statement;

Exemple: expression Lambda

var foo = (x:number)=>10 + x 
console.log(foo(100))      //outputs 110

Le programme déclare une fonction d'expression lambda. La fonction renvoie la somme de 10 et l'argument passé.

Lors de la compilation, il générera le code JavaScript suivant.

//Generated by typescript 1.8.10
var foo = function (x) { return 10 + x; };
console.log(foo(100));      //outputs 110

Voici la sortie du code ci-dessus -

110

Déclaration Lambda

L'instruction Lambda est une déclaration de fonction anonyme qui pointe vers un bloc de code. Cette syntaxe est utilisée lorsque le corps de la fonction s'étend sur plusieurs lignes. Sa syntaxe est la suivante -

( [param1, parma2,…param n] )=> {
 
   //code block
}

Exemple: instruction Lambda

var foo = (x:number)=> {    
   x = 10 + x 
   console.log(x)  
} 
foo(100)

La référence de la fonction est retournée et stockée dans la variable foo.

Lors de la compilation, il générera le code JavaScript suivant -

//Generated by typescript 1.8.10
var foo = function (x) {
   x = 10 + x;
   console.log(x);
};
foo(100);

La sortie du programme ci-dessus est la suivante -

110

Variations syntaxiques

Type de paramètre Inférence

Il n'est pas obligatoire de spécifier le type de données d'un paramètre. Dans un tel cas, le type de données du paramètre est any. Jetons un coup d'œil à l'extrait de code suivant -

var func = (x)=> { 
   if(typeof x=="number") { 
      console.log(x+" is numeric") 
   } else if(typeof x=="string") { 
      console.log(x+" is a string") 
   }  
} 
func(12) 
func("Tom")

Lors de la compilation, il générera le code JavaScript suivant -

//Generated by typescript 1.8.10
var func = function (x) {
   if (typeof x == "number") {
      console.log(x + " is numeric");
   } else if (typeof x == "string") {
      console.log(x + " is a string");
   }
};
func(12);
func("Tom");

Sa sortie est la suivante -

12 is numeric 
Tom is a string

Parenthèses facultatives pour un seul paramètre

var display = x=> { 
   console.log("The function got "+x) 
} 
display(12)

Lors de la compilation, il générera le code JavaScript suivant -

//Generated by typescript 1.8.10
var display = function (x) {
   console.log("The function got " + x);
};
display(12);

Sa sortie est la suivante -

The function got 12

Accolades facultatives pour une seule instruction, parenthèses vides pour aucun paramètre

L'exemple suivant montre ces deux variations syntaxiques.

var disp =()=> { 
   console.log("Function invoked"); 
} 
disp();

Lors de la compilation, il générera le code JavaScript suivant -

//Generated by typescript 1.8.10
var disp = function () {
   console.log("Function invoked");
};
disp();

Sa sortie est la suivante -

Function invoked

Surcharges de fonction

Les fonctions ont la capacité de fonctionner différemment en fonction de l'entrée qui leur est fournie. En d'autres termes, un programme peut avoir plusieurs méthodes avec le même nom avec une implémentation différente. Ce mécanisme est appelé surcharge de fonction. TypeScript prend en charge la surcharge de fonctions.

Pour surcharger une fonction dans TypeScript, vous devez suivre les étapes ci-dessous -

Step 1- Déclarez plusieurs fonctions avec le même nom mais une signature de fonction différente. La signature de fonction comprend les éléments suivants.

  • The data type of the parameter

function disp(string):void; 
function disp(number):void;

  • The number of parameters

function disp(n1:number):void; 
function disp(x:number,y:number):void;

  • The sequence of parameters

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

Note - La signature de la fonction n'inclut pas le type de retour de la fonction.

Step 2- La déclaration doit être suivie de la définition de la fonction. Les types de paramètres doivent être définis suranysi les types de paramètres diffèrent pendant la surcharge. De plus, pourcase b expliqué ci-dessus, vous pouvez envisager de marquer un ou plusieurs paramètres comme facultatifs lors de la définition de la fonction.

Step 3 - Enfin, vous devez appeler la fonction pour la rendre fonctionnelle.

Exemple

Jetons maintenant un coup d'œil à l'exemple de code suivant -

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 

function disp(x:any,y?:any):void { 
   console.log(x); 
   console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

  • Les deux premières lignes décrivent la déclaration de surcharge de fonction. La fonction a deux surcharges -

    • Fonction qui accepte un seul paramètre de chaîne.

    • Fonction qui accepte respectivement deux valeurs de type number et string.

  • La troisième ligne définit la fonction. Le type de données des paramètres est défini surany. De plus, le deuxième paramètre est ici facultatif.

  • La fonction surchargée est appelée par les deux dernières instructions.

Lors de la compilation, il générera le code JavaScript suivant -

//Generated by typescript 1.8.10
function disp(x, y) {
   console.log(x);
   console.log(y);
}
disp("abc");
disp(1, "xyz");

Le code ci-dessus produira la sortie suivante -

abc 
1 
xyz