Funzioni in TypeScript: tipi dei parametri, di ritorno e void

Una funzione TypeScript è una funzione JavaScript con i tipi sui parametri e, se vuoi, sul valore di ritorno. Ogni parametro riceve un'annotazione, il tipo di ritorno va dopo la lista dei parametri, e il compilatore controlla ogni chiamata rispetto a entrambi.

function area(width: number, height: number): number {
  return width * height;
}

console.log(area(3, 4)); // 12

// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
area("3", 4);

// @ts-expect-error: Expected 2 arguments, but got 1.
area(3);

Entrambe le chiamate sbagliate sono errori di compilazione (TS2345 e TS2554). I commenti // @ts-expect-error dicono al compilatore che sulla riga successiva è atteso un errore, così il resto del file viene comunque eseguito. Togline uno ed esegui di nuovo per vedere il messaggio vero.

Tipi dei parametri

Ogni parametro si scrive name: Type. Con strict, attivo di default in TypeScript 7, un parametro senza annotazione e senza un contesto da cui dedurre il tipo è un errore: Parameter 'x' implicitly has an 'any' type. (TS7006). In pratica, quindi, ogni parametro di una funzione a sé viene annotato.

Come tipo di parametro va bene qualsiasi tipo: primitivi, array, tipi oggetto, unioni, altre funzioni.

type User = { name: string; tags: string[] };

function describe(user: User, maxTags: number): string {
  const shown = user.tags.slice(0, maxTags).join(", ");
  return `${user.name} (${shown})`;
}

function formatId(id: string | number): string {
  return typeof id === "number" ? id.toFixed(0).padStart(5, "0") : id.toUpperCase();
}

console.log(describe({ name: "Ada", tags: ["math", "code", "tea"] }, 2)); // Ada (math, code)
console.log(formatId(42));      // 00042
console.log(formatId("ab-7"));  // AB-7

TypeScript controlla anche il numero di argomenti. Passarne più o meno di quanti la funzione ne dichiara è un errore, a differenza del JavaScript puro, che riempie quelli mancanti con undefined e ignora quelli in più. Per rendere un parametro facoltativo o dargli un valore di default, vedi parametri facoltativi.

Tipi di ritorno: annotare o dedurre

Il tipo di ritorno segue la parentesi di chiusura: function f(): Type. È facoltativo. Senza, TypeScript deduce il tipo da ogni return nel corpo.

// Inferred: (n: number) => "even" | "odd"
function parity(n: number) {
  return n % 2 === 0 ? "even" : "odd";
}

// Annotated: the contract is written down
function average(values: number[]): number {
  if (values.length === 0) return 0;
  const sum = values.reduce((acc, v) => acc + v, 0);
  return sum / values.length;
}

const p = parity(7);
console.log(p, average([2, 4, 9])); // odd 5

Un'annotazione si guadagna il posto quando la funzione è esportata, quando ha più percorsi di ritorno o quando è ricorsiva. L'errore compare allora dentro la funzione, sul return sbagliato, invece che in una chiamata. Un caso classico è un ramo che si dimentica di restituire un valore:

// This does not compile: one path falls off the end of the function.
function grade(score: number): string {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
}

console.log(grade(85));

Il compilatore segnala index.ts(2,32): error TS2366: Function lacks ending return statement and return type does not include 'undefined'. Aggiungi un return "C"; finale e il codice viene eseguito. Senza l'annotazione : string la funzione compilerebbe con il tipo dedotto "A" | "B" | undefined, e il problema si sposterebbe su chi usa il risultato.

void: funzioni che non restituiscono nulla

Una funzione che si limita a fare qualcosa (stampare, scrivere, modificare dati) ha tipo di ritorno void. È ciò che TypeScript deduce quando non c'è un return con un valore, e puoi scriverlo in modo esplicito.

function logLine(label: string, value: number): void {
  console.log(`${label.padEnd(8)}${value}`);
}

logLine("apples", 3);
logLine("pears", 12);

// A callback typed as returning void may return a value; it is ignored.
const lengths: number[] = [];
const push: (s: string) => void = (s) => lengths.push(s.length);
["a", "bcd"].forEach(push);
console.log(lengths); // [ 1, 3 ]

Queste regole su void sorprendono spesso:

La seconda riga è voluta. È il motivo per cui arr.forEach(x => list.push(x)) compila anche se push restituisce un numero. void in un tipo funzione significa "qualunque cosa restituisca, nessuno la legge". Per una funzione che non ritorna mai (lancia sempre un'eccezione o cicla all'infinito), il tipo di ritorno è never.

Arrow function e function expression

Arrow function e function expression accettano le stesse annotazioni. Il tipo di ritorno va dopo la lista dei parametri, prima di =>.

const double = (n: number): number => n * 2;

const toUpper = function (s: string): string {
  return s.toUpperCase();
};

// Returning an object literal from an arrow needs parentheses.
const point = (x: number, y: number) => ({ x, y });

console.log(double(21), toUpper("ok")); // 42 OK
console.log(point(1, 2));               // { x: 1, y: 2 }

Senza le parentesi, (x, y) => { x, y } è un blocco senza return, e la funzione restituisce undefined. Le regole a runtime delle arrow function (nessun this proprio, nessun arguments) sono le stesse di JavaScript; vedi arrow function in JavaScript.

Quando una funzione è scritta direttamente come argomento, di solito non ne annoti affatto i parametri. TypeScript sa cosa riceve la callback dalla funzione a cui viene passata (contextual typing): in [1, 2].map(n => n * 2), n è già number. Come scrivere il tipo di una funzione come valore, (n: number) => string, è spiegato in tipi funzione.

Restituire più valori

Una funzione restituisce un solo valore, quindi restituisci un oggetto o una tupla e destrutturalo.

function minMax(values: number[]): { min: number; max: number } {
  return { min: Math.min(...values), max: Math.max(...values) };
}

function splitName(full: string): [first: string, last: string] {
  const i = full.indexOf(" ");
  return [full.slice(0, i), full.slice(i + 1)];
}

const { min, max } = minMax([7, 2, 9]);
const [first, last] = splitName("Grace Hopper");
console.log(min, max, first, last); // 2 9 Grace Hopper

Il tipo di ritorno tupla ha bisogno dell'annotazione. Senza, [a, b] viene dedotto come string[]: la destrutturazione funziona comunque, ma il tipo non dice più che gli elementi sono esattamente due.

Funzioni async

Una funzione async restituisce sempre una Promise. Annota il tipo di ritorno come Promise<T>, dove T è ciò che la funzione restituisce al suo interno.

async function loadScore(id: number): Promise<number> {
  await new Promise((resolve) => setTimeout(resolve, 10));
  return id * 10;
}

async function main(): Promise<void> {
  const score = await loadScore(4); // score: number
  console.log("score", score);
}

main();

Scrivere async function f(): number è un errore: The return type of an async function or method must be the global Promise<T> type. Did you mean to write 'Promise<number>'? (TS1064).

Il parametro this

JavaScript decide this al momento della chiamata. TypeScript ti permette di dichiarare cosa deve essere this con un finto primo parametro chiamato this. Viene rimosso dal JavaScript compilato e chi chiama non lo passa.

interface Counter {
  count: number;
}

function increment(this: Counter, by: number): void {
  this.count += by;
}

const c = { count: 0, increment };
c.increment(2); // fine: this is c

increment(2);
// error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Counter'.

Senza il parametro this, this dentro una funzione a sé è un any implicito e la modalità strict segnala 'this' implicitly has type 'any' because it does not have a type annotation. (TS2683). Nei metodi di una classe this ha già il tipo dell'istanza, quindi il parametro serve soprattutto per funzioni a sé collegate a oggetti e per callback che le librerie chiamano con un this specifico.