TypeScript - Funzioni

Le funzioni sono gli elementi costitutivi del codice leggibile, gestibile e riutilizzabile. Una funzione è un insieme di istruzioni per eseguire un'attività specifica. Le funzioni organizzano il programma in blocchi logici di codice. Una volta definite, le funzioni possono essere chiamate per accedere al codice. Ciò rende il codice riutilizzabile. Inoltre, le funzioni facilitano la lettura e la manutenzione del codice del programma.

Una dichiarazione di funzione comunica al compilatore il nome, il tipo restituito e i parametri di una funzione. Una definizione di funzione fornisce il corpo effettivo della funzione.

Suor n Funzioni e descrizione
1. Definizione di una funzione

Una definizione di funzione specifica cosa e come verrà eseguita un'attività specifica.
2. Chiamare una funzione

Una funzione deve essere chiamata in modo da eseguirla.
3. Restituzione di funzioni

Le funzioni possono anche restituire valore insieme al controllo, al chiamante.
4. Funzione parametrizzata

I parametri sono un meccanismo per passare valori alle funzioni.

Parametri opzionali

I parametri opzionali possono essere utilizzati quando gli argomenti non devono essere passati obbligatoriamente per l'esecuzione di una funzione. Un parametro può essere contrassegnato come facoltativo aggiungendo un punto interrogativo al suo nome. Il parametro facoltativo dovrebbe essere impostato come ultimo argomento in una funzione. La sintassi per dichiarare una funzione con un parametro opzionale è la seguente:

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

Esempio: parametri opzionali

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'esempio precedente dichiara una funzione parametrizzata. Qui, il terzo parametro, cioè mail_id è un parametro opzionale.

  • Se a un parametro facoltativo non viene passato un valore durante la chiamata alla funzione, il valore del parametro viene impostato su undefined.

  • La funzione stampa il valore di mail_id solo se all'argomento viene passato un valore.

Durante la compilazione, genererà il seguente codice JavaScript:

//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]");

Il codice precedente produrrà il seguente output:

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

Parametri di riposo

I parametri di riposo sono simili agli argomenti delle variabili in Java. I parametri di riposo non limitano il numero di valori che puoi passare a una funzione. Tuttavia, i valori passati devono essere tutti dello stesso tipo. In altre parole, i parametri rest fungono da segnaposto per più argomenti dello stesso tipo.

Per dichiarare un parametro rest, il nome del parametro è preceduto da tre punti. Qualsiasi parametro nonrest dovrebbe precedere il parametro rest.

Esempio: parametri di riposo

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 dichiarazione della funzione addNumbers (), accetta un parametro rest nums . Il tipo di dati del parametro rest deve essere impostato su un array. Inoltre, una funzione può avere al massimo un parametro di riposo.

  • La funzione viene richiamata due volte, passando rispettivamente tre e sei valori.

  • Il ciclo for scorre l'elenco degli argomenti, passa alla funzione e calcola la loro somma.

Durante la compilazione, genererà il seguente codice JavaScript:

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);

L'output del codice sopra è il seguente:

sum of numbers 6 
sum of numbers 50

Parametri predefiniti

Ai parametri di funzione possono essere assegnati anche valori per impostazione predefinita. Tuttavia, tali parametri possono anche essere passati esplicitamente valori.

Sintassi

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

Note - Un parametro non può essere dichiarato opzionale e predefinito allo stesso tempo.

Esempio: parametri predefiniti

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)

Durante la compilazione, genererà il seguente codice JavaScript:

//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);

Il suo output è il seguente:

Discount amount : 500 
Discount amount : 300

  • L'esempio dichiara la funzione, prepare_discount . La funzione ha due parametri: prezzo e tariffa.

  • Il valore del tasso di parametro è impostato di default su 0,50 .

  • Il programma richiama la funzione, passandole solo il valore del parametro price. Qui, il valore del tasso è 0,50 (predefinito)

  • Viene invocata la stessa funzione, ma con due argomenti. Il valore predefinito di rate viene sovrascritto e viene impostato sul valore passato esplicitamente.

Funzione anonima

Le funzioni che non sono associate a un identificatore (nome della funzione) vengono chiamate come anonymous functions. Queste funzioni vengono dichiarate dinamicamente in fase di esecuzione. Le funzioni anonime possono accettare input e restituire output, proprio come fanno le funzioni standard. Una funzione anonima di solito non è accessibile dopo la sua creazione iniziale.

Alle variabili può essere assegnata una funzione anonima. Tale espressione è chiamata espressione di funzione.

Sintassi

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

Esempio: una semplice funzione anonima

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

Durante la compilazione, genererà lo stesso codice in JavaScript.

Produrrà il seguente output:

hello world

Esempio ─ Funzione anonima con parametri

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

La funzione anonima restituisce il prodotto dei valori ad essa passati.

Durante la compilazione, genererà il seguente codice JavaScript:

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

L'output del codice sopra è il seguente:

24

Espressione di funzione e dichiarazione di funzione ─ Sono sinonimi?

L'espressione di funzione e la dichiarazione di funzione non sono sinonimi. A differenza di un'espressione di funzione, una dichiarazione di funzione è vincolata dal nome della funzione.

La differenza fondamentale tra i due è che le dichiarazioni di funzione vengono analizzate prima della loro esecuzione. D'altra parte, le espressioni di funzione vengono analizzate solo quando il motore di script le incontra durante l'esecuzione.

Quando il parser JavaScript vede una funzione nel flusso di codice principale, assume la dichiarazione di funzione. Quando una funzione si presenta come parte di un'istruzione, è un'espressione di funzione.

Il costruttore di funzioni

TypeScript supporta anche la definizione di una funzione con il costruttore JavaScript incorporato chiamato Function ().

Sintassi

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

Esempio

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

New Function () è una chiamata al costruttore che a sua volta crea e restituisce un riferimento a una funzione.

Durante la compilazione, genererà lo stesso codice in JavaScript.

L'output del codice di esempio sopra è il seguente:

12

Ricorsione e funzioni TypeScript

La ricorsione è una tecnica per iterare su un'operazione avendo una funzione chiamata a se stessa ripetutamente finché non arriva a un risultato. La ricorsione viene applicata al meglio quando è necessario chiamare ripetutamente la stessa funzione con parametri diversi dall'interno di un ciclo.

Esempio: ricorsione

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

Durante la compilazione, genererà lo stesso codice in JavaScript.

Ecco il suo output:

720

Esempio: funzione ricorsiva anonima

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

Durante la compilazione, genererà lo stesso codice in JavaScript.

Il suo output è il seguente:

Hello!!

Funzioni Lambda

Lambda si riferisce a funzioni anonime nella programmazione. Le funzioni Lambda sono un meccanismo conciso per rappresentare funzioni anonime. Queste funzioni sono anche chiamate comeArrow functions.

Funzione Lambda - Anatomia

Ci sono 3 parti in una funzione Lambda:

  • Parameters - Una funzione può opzionalmente avere parametri

  • The fat arrow notation/lambda notation (=>) - Viene anche chiamato come operatore va a

  • Statements - rappresenta il set di istruzioni della funzione

Tip - Per convenzione, l'uso del parametro di una singola lettera è incoraggiato per una dichiarazione di funzione compatta e precisa.

Espressione lambda

È un'espressione di funzione anonima che punta a una singola riga di codice. La sua sintassi è la seguente:

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

Esempio: espressione Lambda

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

Il programma dichiara una funzione di espressione lambda. La funzione restituisce la somma di 10 e l'argomento passato.

Durante la compilazione, genererà il seguente codice JavaScript.

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

Ecco l'output del codice sopra -

110

Istruzione Lambda

L'istruzione Lambda è una dichiarazione di funzione anonima che punta a un blocco di codice. Questa sintassi viene utilizzata quando il corpo della funzione si estende su più righe. La sua sintassi è la seguente:

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

Esempio: istruzione Lambda

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

Il riferimento della funzione viene restituito e memorizzato nella variabile foo.

Durante la compilazione, genererà il seguente codice JavaScript:

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

L'output del programma sopra è il seguente:

110

Variazioni sintattiche

Tipo di parametro Inference

Non è obbligatorio specificare il tipo di dati di un parametro. In tal caso il tipo di dati del parametro è any. Diamo un'occhiata al seguente snippet di codice:

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")

Durante la compilazione, genererà il seguente codice JavaScript:

//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");

Il suo output è il seguente:

12 is numeric 
Tom is a string

Parentesi opzionali per un singolo parametro

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

Durante la compilazione, genererà il seguente codice JavaScript:

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

Il suo output è il seguente:

The function got 12

Parentesi graffe opzionali per una singola istruzione, parentesi vuote per nessun parametro

L'esempio seguente mostra queste due varianti sintattiche.

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

Durante la compilazione, genererà il seguente codice JavaScript:

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

Il suo output è il seguente:

Function invoked

Sovraccarichi di funzioni

Le funzioni hanno la capacità di operare in modo diverso sulla base dell'input fornito loro. In altre parole, un programma può avere più metodi con lo stesso nome con un'implementazione diversa. Questo meccanismo è definito come sovraccarico della funzione. TypeScript fornisce il supporto per il sovraccarico delle funzioni.

Per sovraccaricare una funzione in TypeScript, è necessario seguire i passaggi indicati di seguito:

Step 1- Dichiarare più funzioni con lo stesso nome ma diversa firma di funzione. La firma della funzione include quanto segue.

  • 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 firma della funzione non include il tipo di ritorno della funzione.

Step 2- La dichiarazione deve essere seguita dalla definizione della funzione. I tipi di parametro dovrebbero essere impostati suanyse i tipi di parametro differiscono durante il sovraccarico. Inoltre, percase b spiegato sopra, si può considerare di contrassegnare uno o più parametri come opzionali durante la definizione della funzione.

Step 3 - Infine, devi richiamare la funzione per renderla funzionale.

Esempio

Diamo ora un'occhiata al seguente codice di esempio:

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");

  • Le prime due righe rappresentano la dichiarazione di sovraccarico della funzione. La funzione ha due sovraccarichi:

    • Funzione che accetta un singolo parametro di stringa.

    • Funzione che accetta rispettivamente due valori di tipo numero e stringa.

  • La terza riga definisce la funzione. Il tipo di dati dei parametri è impostato suany. Inoltre, il secondo parametro è facoltativo qui.

  • La funzione sovraccaricata viene richiamata dalle ultime due istruzioni.

Durante la compilazione, genererà il seguente codice JavaScript:

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

Il codice precedente produrrà il seguente output:

abc 
1 
xyz