Function Type TypeScript: Sintaks Arrow dan Tipe Callback

Function type mendeskripsikan parameter dan nilai kembalian sebuah fungsi, ditulis dengan panah: (a: number, b: number) => number. Beri nama dengan type, dan kamu bisa memakainya untuk variabel, parameter, dan property objek.

type Operation = (a: number, b: number) => number;

const add: Operation = (a, b) => a + b;       // a and b are number
const multiply: Operation = (x, y) => x * y;  // names do not have to match

function apply(op: Operation, a: number, b: number): number {
  return op(a, b);
}

console.log(apply(add, 2, 3));      // 5
console.log(apply(multiply, 2, 3)); // 6

Fungsi yang diberikan ke add tidak butuh anotasi: tipe parameternya berasal dari Operation. Ini disebut contextual typing, dan itulah alasan utama untuk memberi nama pada function type.

Sintaks Function Type

Bentuknya adalah (parameters) => ReturnType. Setiap parameter butuh nama dan tipe. Nama-nama itu ada demi keterbacaan dan petunjuk di editor; fungsi apa pun dengan tipe parameter yang kompatibel akan cocok, apa pun nama parameternya.

type Predicate = (value: number) => boolean;
type Formatter = (value: number, digits?: number) => string; // optional parameter
type Logger = (...parts: string[]) => void;                    // rest parameter
type Factory = () => { id: number };                           // no parameters

Namanya tidak opsional. (string) => void mendeklarasikan parameter bernama string tanpa tipe, dan strict mode menolaknya dengan TS7051: Parameter has a name but no type. Did you mean 'arg0: string'?. Tulis (value: string) => void.

Memberi Tipe pada Arrow Function

Arrow function bisa diberi tipe dengan dua cara. Beri anotasi pada fungsinya, atau beri anotasi function type pada variabelnya dan biarkan parameternya disimpulkan.

// 1. Annotations on the function
const toCelsius = (f: number): number => ((f - 32) * 5) / 9;

// 2. A function type on the variable
const toFahrenheit: (c: number) => number = (c) => (c * 9) / 5 + 32;

// 3. The same, with a named type
type Convert = (value: number) => number;
const round1: Convert = (v) => Math.round(v * 10) / 10;

console.log(round1(toCelsius(100)));  // 37.8
console.log(toFahrenheit(37));        // 98.6

Bentuk 1 adalah pilihan yang biasa untuk fungsi yang berdiri sendiri. Bentuk 3 berguna ketika beberapa fungsi berbagi satu signature (handler, comparator, converter), karena signature-nya cukup ditulis sekali dan perubahan padanya diperiksa di mana-mana.

Tipe Callback

Parameter yang tipenya function type adalah callback. Fungsi dari pemanggil diperiksa terhadap tipe itu, dan parameternya disimpulkan dari tipe tersebut.

function repeat(times: number, action: (index: number) => void): void {
  for (let i = 0; i < times; i++) action(i);
}

repeat(3, (i) => console.log("run", i));

function mapValues(values: number[], fn: (value: number, index: number) => string): string[] {
  const out: string[] = [];
  values.forEach((v, i) => out.push(fn(v, i)));
  return out;
}

// A callback may ignore trailing parameters: this one takes only value.
console.log(mapValues([1.5, 2.25], (v) => v.toFixed(1))); // [ '1.5', '2.3' ]

Ada dua aturan yang membuat callback nyaman dipakai:

• Parameter yang lebih sedikit tidak masalah. Fungsi yang menerima satu parameter boleh dikirim ke tempat yang menawarkan dua. JavaScript mengabaikan argumen tambahan, jadi TypeScript mengizinkannya. Parameter yang lebih banyak daripada yang ditawarkan tipenya adalah error (Target signature provides too few arguments.).
• Tipe kembalian void menerima apa saja. Callback bertipe (...) => void boleh mengembalikan nilai; pemanggil berjanji tidak memakainya. Itulah sebabnya list.forEach((x) => other.push(x)) bisa dikompilasi meskipun push mengembalikan angka.

Tipe parameternya tetap harus kompatibel. Mengirim (x: string) => ... ke tempat yang mengharapkan (a: number, b: number) => number gagal dengan Types of parameters 'x' and 'a' are incompatible.

Call Signature

(n: number) => string adalah singkatan dari object type dengan call signature: { (n: number): string }. Kamu butuh bentuk panjangnya ketika fungsi itu juga membawa property.

type Counter = {
  (): number;        // call signature: calling it returns a number
  count: number;     // and it has a property
  reset: () => void; // and a method
};

function makeCounter(): Counter {
  const fn = () => ++fn.count;
  fn.count = 0;
  fn.reset = () => { fn.count = 0; };
  return fn;
}

const next = makeCounter();
next();
next();
console.log(next(), next.count); // 3 3
next.reset();
console.log(next.count);         // 0

TypeScript membolehkanmu menambahkan property ke fungsi yang dideklarasikan dengan const di scope yang sama, dan melacaknya di tipe fungsi itu. Interface juga bisa memuat call signature: interface Counter { (): number; count: number }.

Construct signature mendeskripsikan sesuatu yang dipanggil dengan new. Bentuknya menambahkan new di depan: new (name: string) => User, atau { new (name: string): User } dalam bentuk objek. Begitulah cara memberi tipe pada parameter yang menerima sebuah class.

Sintaks Method vs Sintaks Property

Di sebuah object type, member berupa fungsi bisa ditulis sebagai method, handle(value: string): void, atau sebagai property yang berisi fungsi, handle: (value: string) => void. Keduanya terlihat bisa saling menggantikan, tetapi diperiksa secara berbeda dengan strict:

// This does not compile: the property form checks parameters strictly.
interface WithMethod { handle(value: string | number): void }
interface WithProperty { handle: (value: string | number) => void }

const onlyStrings = (value: string) => console.log(value.toUpperCase());

const a: WithMethod = { handle: onlyStrings };   // accepted
const b: WithProperty = { handle: onlyStrings }; // rejected
a.handle(42);

Compiler melaporkan:

index.ts(8,27): error TS2322: Type '(value: string) => void' is not assignable to type '(value: string | number) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'string | number' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.

Error itu benar: onlyStrings tidak bisa menangani angka. Bentuk method meloloskan kesalahan yang sama (parameter method diperiksa secara "bivariant" karena alasan historis), dan a.handle(42) akan crash saat runtime dengan TypeError: value.toUpperCase is not a function. Hapus baris b untuk melihat crash itu. Saat kamu menulis object type sendiri, bentuk property menangkap lebih banyak kesalahan.

Hindari Tipe Function

Function adalah tipe bawaan yang dipenuhi oleh setiap nilai fungsi. Tipe ini hampir tidak pernah yang kamu inginkan: TypeScript tidak tahu parameter maupun tipe kembaliannya, jadi setiap pemanggilan diterima dan mengembalikan any.

const loose: Function = Math.max;
const result = loose("a", {});   // compiles: any arguments, result is any
console.log(result);             // NaN

const strict: (...values: number[]) => number = Math.max;
console.log(strict(3, 9, 4));    // 9
// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
strict("a");

Ganti Function dengan signature yang sebenarnya. Kalau kamu memang menerima fungsi apa pun (debounce generic, wrapper untuk logging), (...args: never[]) => unknown menerima setiap fungsi dan tetap menjaga hasilnya bertipe unknown, bukan any. Untuk fungsi yang tipenya bergantung pada input-nya, lihat generic: function type generic bentuknya seperti <T>(value: T) => T.