Generic di TypeScript: Fungsi, Tipe, dan Class Generic

Generic adalah parameter tipe. Fungsi generic mendeklarasikan sebuah tipe placeholder, biasanya bernama T, dan setiap pemanggilan mengisinya, jadi tipe yang masuk menentukan tipe yang keluar. Satu fungsi lalu bisa bekerja untuk angka, string, dan object buatanmu sendiri, dan setiap pemanggilan tetap bertipe lengkap.

function first<T>(items: T[]): T | undefined {
  return items[0];
}

const n = first([10, 20, 30]);        // T = number, n: number | undefined
const s = first(["ada", "grace"]);    // T = string, s: string | undefined
const u = first([{ id: 1 }]);         // T = { id: number }

console.log(n?.toFixed(1));           // 10.0
console.log(s?.toUpperCase());        // ADA
console.log(u?.id);                   // 1

<T> setelah nama fungsi mendeklarasikan parameter tipe. items: T[] memakainya untuk input, dan T | undefined untuk output, sehingga keduanya terikat satu sama lain. Kamu tidak pernah menulis number atau string: TypeScript menyimpulkan T dari argumennya.

Kenapa Tidak Pakai any atau unknown?

Tanpa generic, kamu akan memberi tipe parameter any atau unknown. Keduanya menerima semua array, dan keduanya kehilangan hubungan antara input dan output:

function firstAny(items: any[]): any {
  return items[0];
}

function firstUnknown(items: unknown[]): unknown {
  return items[0];
}

function firstGeneric<T>(items: T[]): T | undefined {
  return items[0];
}

const a = firstAny(["x"]);
console.log(typeof a.toFixed);         // undefined: a.toFixed(2) would compile, then throw

const b = firstUnknown(["x"]);
// b.toUpperCase();                    // error TS18046: 'b' is of type 'unknown'.
console.log(typeof b === "string" ? b.toUpperCase() : "?"); // X (after narrowing)

const c = firstGeneric(["x"]);
console.log(c?.toUpperCase());         // X, with no narrowing needed

Inferensi Argumen Tipe

Biasanya TypeScript menyimpulkan argumen tipe dari nilai yang kamu kirim. Kamu juga bisa menuliskannya secara eksplisit di dalam kurung sudut saat pemanggilan. Ini diperlukan kalau tidak ada argumen yang menyebut T, atau kalau hasil inferensinya bukan yang kamu inginkan.

function pair<T>(a: T, b: T): [T, T] {
  return [a, b];
}

function emptyList<T>(): T[] {
  return [];
}

const p1 = pair(1, 2);                      // T inferred as number
const p2 = pair<string | number>(1, "one"); // explicit: mixing allowed
const names = emptyList<string>();          // nothing to infer from, so pass it
names.push("Ada");

console.log(p1, p2, names); // [ 1, 2 ] [ 1, 'one' ] [ 'Ada' ]

Ada dua hasil inferensi yang perlu diketahui. pair(1, "one") tanpa argumen eksplisit adalah error: TypeScript menyimpulkan T = number dari argumen pertama, lalu melaporkan Argument of type 'string' is not assignable to parameter of type 'number'. (TS2345). Dan emptyList() tanpa argumen sama sekali mendapat T = unknown, sehingga hasilnya unknown[], yang jarang sesuai keinginanmu.

Beberapa Parameter Tipe

Sebuah fungsi bisa mendeklarasikan parameter tipe sebanyak yang dibutuhkan, dipisahkan dengan koma. Masing-masing disimpulkan secara terpisah.

function zip<A, B>(left: A[], right: B[]): [A, B][] {
  const length = Math.min(left.length, right.length);
  const out: [A, B][] = [];
  for (let i = 0; i < length; i++) out.push([left[i], right[i]]);
  return out;
}

function mapValues<K extends string, V, R>(obj: Record<K, V>, fn: (value: V) => R): Record<K, R> {
  const out = {} as Record<K, R>;
  for (const key of Object.keys(obj) as K[]) out[key] = fn(obj[key]);
  return out;
}

console.log(zip(["a", "b", "c"], [1, 2]));        // [ [ 'a', 1 ], [ 'b', 2 ] ]
const prices = mapValues({ tea: 2.5, cake: 4 }, (v) => `$${v.toFixed(2)}`);
console.log(prices);                               // { tea: '$2.50', cake: '$4.00' }

mapValues menyimpulkan tiga hal sekaligus: K adalah "tea" | "cake", V adalah number, dan R adalah string dari nilai kembalian callback. K extends string adalah sebuah constraint, yang dibahas di halaman berikutnya.

Interface dan Type Alias Generic

Tipe juga bisa menerima parameter. Kamu lalu menulis argumennya saat memakai tipe itu: Box<number>, ApiResponse<User>. Sebagian besar tipe koleksi bawaan bekerja dengan cara ini: Array<T>, Map<K, V>, Promise<T>, Record<K, V>.

interface ApiResponse<T> {
  status: number;
  data: T;
}

type Result<T, E = string> =
  | { ok: true; value: T }
  | { ok: false; error: E };

interface User {
  id: number;
  name: string;
}

function parseAge(text: string): Result<number> {
  const n = Number(text);
  return Number.isInteger(n) && n >= 0 ? { ok: true, value: n } : { ok: false, error: `bad age: ${text}` };
}

const res: ApiResponse<User[]> = { status: 200, data: [{ id: 1, name: "Ada" }] };
console.log(res.data[0].name);   // Ada

for (const input of ["36", "abc"]) {
  const r = parseAge(input);
  console.log(r.ok ? r.value + 1 : r.error); // 37, then bad age: abc
}

Result<T, E = string> juga menunjukkan parameter tipe default: Result<number> berarti Result<number, string>. Sama seperti parameter fungsi opsional, parameter yang punya default harus ditulis setelah parameter yang wajib.

Class Generic

Class menerima parameter tipe setelah namanya, dan setiap instance menetapkannya. Field, method, dan parameter constructor semuanya bisa memakainya.

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }

  peek(): T | undefined {
    return this.items.at(-1);
  }

  get size(): number {
    return this.items.length;
  }
}

const visited = new Stack<string>();
visited.push("/home");
visited.push("/docs");
console.log(visited.pop(), visited.size); // /docs 1

const numbers = new Stack<number>();
numbers.push(42);
// numbers.push("42"); // error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
console.log(numbers.peek()); // 42

Kalau constructor menerima T, kamu bisa menghilangkan argumen eksplisitnya: new Box(5) menyimpulkan Box<number>. Member static milik class itu sendiri, bukan milik instance, jadi tidak bisa memakai parameter tipe class (Static members cannot reference class type parameters., TS2302).

Arrow Function dan Tipe Fungsi Generic

Daftar parameter tipe ditulis sebelum daftar parameter. Sintaks yang sama juga dipakai untuk menjelaskan tipe fungsi generic.

const last = <T>(items: T[]): T | undefined => items[items.length - 1];

type Mapper = <T, R>(items: T[], fn: (item: T) => R) => R[];
const mapAll: Mapper = (items, fn) => items.map(fn);

// In a .tsx file, <T> looks like a JSX tag. Add a trailing comma:
const lastTsx = <T,>(items: T[]) => items[items.length - 1];

Menyimpulkan Tipe Literal dengan Parameter Tipe const

Secara default, generic menyimpulkan tipe yang dilebarkan: pair("a", "b") menghasilkan [string, string]. Kalau nilai yang persis itu penting (nama route, nama event, daftar kolom), tandai parameternya dengan const (TypeScript 5.0 ke atas), dan inferensinya akan seolah-olah argumennya ditulis as const:

function defineColumns<const T extends readonly string[]>(columns: T): T {
  return columns;
}

const loose = ["id", "name"];                  // string[]
const columns = defineColumns(["id", "name"]); // readonly ["id", "name"]

type Column = (typeof columns)[number];        // "id" | "name"
const sortBy: Column = "name";
console.log(columns, sortBy, loose.length);    // [ 'id', 'name' ] name 2

Pemanggil menulis array biasa, dan fungsinya mempertahankan tipe literalnya.

Kapan Tidak Memakai Generic

Parameter tipe layak dipakai kalau ia menghubungkan dua hal: sebuah parameter dan tipe kembalian, dua parameter, atau sebuah parameter dan callback. Kalau T hanya muncul sekali, ia tidak menambah apa pun, dan tipe biasa lebih jelas.

// Pointless: T is used once, so it is just a longer way to write unknown
function logValue<T>(value: T): void {
  console.log(value);
}

// Clearer
function logValueSimple(value: unknown): void {
  console.log(value);
}

// Also pointless: returns T but nothing connects T to an argument,
// so the caller is really just asserting a type
function parseJson<T>(text: string): T {
  return JSON.parse(text);
}

Contoh terakhir sering ditemui dan menyesatkan: parseJson<User>(text) terlihat type-safe, tetapi tidak memeriksa apa pun, persis seperti JSON.parse(text) as User. Kembalikan unknown lalu lakukan validasi. Tanda lain penggunaan berlebihan: parameter tipe yang selalu diberi argumen yang sama, atau yang bisa diganti dengan union dari dua tipe yang sudah diketahui.

Untuk generic yang perlu tahu sesuatu tentang T (bahwa ia punya length, atau bahwa K adalah key dari T), constraint dengan extends adalah langkah selanjutnya.