Fungsi di TypeScript: Tipe Parameter, Tipe Kembalian, void

Fungsi TypeScript adalah fungsi JavaScript dengan tipe pada parameternya dan, kalau mau, pada nilai kembaliannya. Setiap parameter mendapat anotasi, tipe kembalian ditulis setelah daftar parameter, dan compiler memeriksa setiap pemanggilan terhadap keduanya.

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

Kedua pemanggilan yang salah itu adalah error saat kompilasi (TS2345 dan TS2554). Komentar // @ts-expect-error memberi tahu compiler bahwa baris berikutnya memang diharapkan error, jadi sisa file tetap berjalan. Hapus salah satunya lalu jalankan lagi untuk melihat pesan error yang sebenarnya.

Tipe Parameter

Setiap parameter ditulis name: Type. Dengan strict, yang aktif secara default di TypeScript 7, parameter tanpa anotasi dan tanpa konteks untuk disimpulkan adalah error: Parameter 'x' implicitly has an 'any' type. (TS7006). Jadi dalam praktiknya, setiap parameter fungsi yang berdiri sendiri diberi anotasi.

Tipe apa pun bisa dipakai sebagai tipe parameter: tipe primitif, array, tipe object, union, bahkan fungsi lain.

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 juga memeriksa jumlah argumen. Mengirim argumen lebih banyak atau lebih sedikit daripada yang dideklarasikan fungsi adalah error, berbeda dengan JavaScript biasa yang mengisi argumen yang kurang dengan undefined dan mengabaikan kelebihannya. Untuk membuat parameter opsional atau memberinya nilai default, lihat parameter opsional.

Tipe Kembalian: Dianotasi atau Disimpulkan

Tipe kembalian ditulis setelah tanda kurung tutup: function f(): Type. Sifatnya opsional. Tanpa anotasi, TypeScript menyimpulkan tipenya dari setiap return di dalam body fungsi.

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

Anotasi layak ditulis kalau fungsinya di-export, punya beberapa jalur return, atau rekursif. Error-nya lalu muncul di dalam fungsi, tepat di return yang salah, bukan di pemanggil. Contoh klasiknya adalah percabangan yang lupa mengembalikan nilai:

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

Compiler melaporkan index.ts(2,32): error TS2366: Function lacks ending return statement and return type does not include 'undefined'. Tambahkan return "C"; di akhir dan kodenya berjalan. Tanpa anotasi : string, fungsi itu akan lolos kompilasi dengan tipe hasil inferensi "A" | "B" | undefined, dan masalahnya pindah ke siapa pun yang memakai hasilnya.

void: Fungsi yang Tidak Mengembalikan Apa Pun

Fungsi yang hanya melakukan sesuatu (mencetak log, menulis, mengubah data) bertipe kembalian void. Itulah yang disimpulkan TypeScript kalau tidak ada return dengan nilai, dan kamu juga bisa menuliskannya secara eksplisit.

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 ]

Aturan tentang void berikut sering mengejutkan:

Baris kedua memang disengaja. Karena itulah arr.forEach(x => list.push(x)) lolos kompilasi walaupun push mengembalikan sebuah angka. void pada tipe fungsi berarti "apa pun yang dikembalikan, tidak ada yang membacanya". Untuk fungsi yang sama sekali tidak pernah selesai (selalu melempar error atau berulang selamanya), tipe kembaliannya adalah never.

Arrow Function dan Function Expression

Arrow function dan function expression memakai anotasi yang sama. Tipe kembalian ditulis setelah daftar parameter, sebelum =>.

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 }

Tanpa tanda kurung, (x, y) => { x, y } adalah sebuah blok tanpa return, dan fungsinya mengembalikan undefined. Aturan runtime untuk arrow function (tidak punya this dan arguments sendiri) sama seperti di JavaScript; lihat arrow function di JavaScript.

Kalau fungsi ditulis langsung sebagai argumen, biasanya parameternya tidak perlu dianotasi sama sekali. TypeScript tahu apa yang diterima callback dari fungsi yang menerimanya (contextual typing): di [1, 2].map(n => n * 2), n sudah bertipe number. Cara menulis tipe sebuah fungsi sebagai nilai, (n: number) => string, dibahas di tipe fungsi.

Mengembalikan Beberapa Nilai

Fungsi hanya mengembalikan satu nilai, jadi kembalikan object atau tuple lalu lakukan destructuring.

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

Tipe kembalian tuple membutuhkan anotasi. Tanpa anotasi, [a, b] disimpulkan sebagai string[]: destructuring tetap berjalan, tetapi tipenya tidak lagi menyatakan bahwa elemennya tepat dua.

Fungsi Async

Fungsi async selalu mengembalikan Promise. Anotasi tipe kembaliannya sebagai Promise<T>, dengan T adalah nilai yang dikembalikan di dalam fungsi.

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

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

Parameter this

JavaScript menentukan this saat fungsi dipanggil. TypeScript memungkinkanmu menyatakan apa yang harus menjadi this lewat parameter pertama palsu bernama this. Parameter itu dihapus dari JavaScript hasil kompilasi, dan pemanggil tidak mengirimkannya.

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'.

Tanpa parameter this, this di dalam fungsi yang berdiri sendiri adalah any implisit, dan strict mode melaporkan 'this' implicitly has type 'any' because it does not have a type annotation. (TS2683). Di dalam method class, this sudah bertipe instance class tersebut, jadi parameter ini terutama berguna untuk fungsi berdiri sendiri yang dipasang pada object, dan untuk callback yang dipanggil library dengan this tertentu.