Funzioni in TypeScript

Questo articolo spiega le funzioni in TypeScript.

YouTube Video

Funzioni in TypeScript

Le funzioni in TypeScript sono funzioni JavaScript con annotazioni di tipo aggiunte. In TypeScript, puoi scrivere un codice più robusto definendo chiaramente i tipi di input (parametri) e output (valori di ritorno) per le funzioni. Di seguito, introduciamo i metodi di base per definire le funzioni e alcune caratteristiche delle funzioni in TypeScript.

Definizione di Funzione di Base

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• La funzione add accetta due argomenti di tipo number e restituisce un valore di tipo number.
• Accetta due argomenti, x e y, entrambi di tipo number, con i tipi specificati esplicitamente.
• Anche il tipo di ritorno è specificato come : number.

Funzioni Anonime (Espressioni di Funzione)

Le funzioni anonime e le espressioni di funzione possono essere utilizzate anche in TypeScript. I tipi possono essere annotati nello stesso modo.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• Puoi assegnare una funzione anonima a una variabile e chiamarla in seguito.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• Puoi utilizzare un'espressione di funzione con nome per abilitare le chiamate ricorsive.

Funzioni Freccia

Le annotazioni di tipo possono essere utilizzate anche con le funzioni freccia.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

Questo codice definisce una funzione freccia subtract con annotazioni di tipo che accetta due numeri come argomenti e restituisce la loro differenza.

Parametri Opzionali e di Default

I parametri possono essere resi opzionali o avere valori di default.

Parametri Opzionali

Aggiungendo ? dopo il nome del parametro, questo diventa opzionale.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

Questo codice accetta un argomento opzionale; se l'argomento viene fornito, saluta usando il nome, altrimenti restituisce un saluto generico.

Parametri di Default

Puoi anche impostare valori di default per i parametri.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

Questa funzione usa "Guest" come valore predefinito se non viene passato alcun argomento e saluta utilizzando il nome specificato o predefinito.

Definizione del Tipo di Funzione

È anche possibile definire il tipo della funzione stessa. Ad esempio, questo è utilizzato quando si passa una funzione come argomento.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

Questo codice definisce un tipo di funzione Operation che accetta due numeri e restituisce un numero, quindi lo usa per creare ed eseguire funzioni di addizione e moltiplicazione.

Quando Non C'è un Valore di Ritorno (tipo void)

Per le funzioni senza valore di ritorno, specificare il tipo void.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

Questo codice definisce una funzione void chiamata logMessage che accetta un messaggio di tipo stringa e lo stampa sulla console senza restituire un valore.

Funzione di callback

Passare una funzione come argomento a un’altra funzione e farla eseguire successivamente viene chiamato funzione di callback. Viene utilizzata frequentemente nell’elaborazione asincrona e nella gestione degli eventi.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

In questo esempio, una funzione che mostra un valore nella console viene passata come funzione di callback.

In alternativa, è possibile definire un tipo di callback utilizzando type o interface.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

Definire un tipo di callback utilizzando type o interface migliora la riutilizzabilità.

Sovraccarico delle Funzioni

Il sovraccarico di funzioni consente di definire funzioni con lo stesso nome ma con liste di parametri diverse. In TypeScript, è possibile definire più funzioni con lo stesso nome ed eseguire operazioni diverse in base ai tipi e ai numeri di parametri.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

In TypeScript, il sovraccarico viene ottenuto come segue:.

• Firma di Sovraccarico

  • Definisce come la funzione può essere usata (la sua firma). Scrivendo questa parte più volte, diventa possibile il sovraccarico.

• Firma di Implementazione

  • Implementa il corpo effettivo della funzione. Questa parte è definita una sola volta e gestisce tutti i casi dichiarati nelle firme di sovraccarico.

Regole per il Sovraccarico

Si applicano le seguenti regole per il sovraccarico delle funzioni:.

• Ordine delle Definizioni delle Firme di Sovraccarico

  • Dato che la valutazione avviene dall'alto verso il basso, si raccomanda di definire prima i tipi specifici, seguiti da quelli più generici.

• Compatibilità della Firma di Implementazione

  • La firma dell'implementazione deve essere compatibile con gli argomenti e i valori di ritorno di tutte le firme di sovraccarico.

• Specifica i Dettagli nelle Firme di Sovraccarico

  • La firma dell'implementazione tende ad essere ambigua, quindi i dettagli devono essere specificati nelle firme di sovraccarico.
  • Se viene definita solo la firma dell'implementazione, l'inferenza del tipo per la funzione sarà insufficiente.

Riepilogo

Le funzioni in TypeScript hanno le seguenti caratteristiche.

• Annotazioni di tipo
  • Specificando i tipi per gli argomenti e i valori di ritorno, puoi scrivere codice più sicuro.
• Funzioni anonime e funzioni freccia
  • Possono essere usate come in JavaScript e aggiungere annotazioni di tipo migliora la sicurezza dei tipi.
• Parametri opzionali e di default
  • Puoi rendere la specifica degli argomenti più flessibile se necessario.
• Definizioni di tipo di funzione
  • Definisci il tipo della funzione stessa per eseguire il controllo dei tipi.
• Sovraccarico di funzione
  • Puoi supportare diversi argomenti con lo stesso nome di funzione.

Utilizzando questi strumenti, è possibile scrivere codice più chiaro e robusto in TypeScript.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video