Type Alias di TypeScript: Kata Kunci type dengan Contoh

Type alias memberi nama pada sebuah tipe. Kamu menulis type Name = ..., dan sejak itu Name bisa dipakai di mana pun tipe diharapkan. Tidak seperti interface, alias bisa menamai tipe apa saja, bukan hanya bentuk object.

type UserId = string;                         // a primitive
type Point = { x: number; y: number };        // an object shape
type Status = "active" | "banned";            // a union of literals
type Pair = [string, number];                 // a tuple
type Formatter = (value: number) => string;   // a function

const id: UserId = "u_42";
const start: Point = { x: 0, y: 0 };
const current: Status = "active";
const entry: Pair = ["score", 90];
const money: Formatter = (v) => `$${v.toFixed(2)}`;

console.log(id, start, current, entry, money(3.5));
// u_42 { x: 0, y: 0 } active [ 'score', 90 ] $3.50

Alias hanya ada saat kompilasi. JavaScript yang dihasilkan tidak memuat satu pun baris type ini.

Sintaks

type Name = SomeType;
type Name<T> = SomeTypeUsing<T>;       // generic
export type Name = SomeType;           // exported from a module

Menurut konvensi, namanya ditulis dalam PascalCase. Sisi kanannya adalah ekspresi tipe apa pun, dan sebuah alias bisa memakai alias lain, termasuk dirinya sendiri (lihat tipe rekursif di bawah). Alias tersedia di seluruh scope tempat ia dideklarasikan, bahkan di atas baris deklarasinya, karena tipe dicek saat kompilasi dan tidak dijalankan berurutan seperti const atau let.

Object Type

Untuk bentuk object, alias dan interface ditulis dengan cara yang hampir sama. Alias memakai = dan biasanya diakhiri titik koma.

type User = {
  id: number;
  name: string;
  email?: string;           // optional
  readonly createdAt: string; // cannot be reassigned
};

type Admin = User & { permissions: string[] }; // extend with an intersection

const root: Admin = {
  id: 1,
  name: "root",
  createdAt: "2024-03-15",
  permissions: ["*"],
};

console.log(`${root.name} can do ${root.permissions.join(", ")}`); // root can do *

Alias tidak bisa memakai extends; intersection & yang mengambil peran itu. Excess property check, property opsional, dan property readonly bekerja persis sama seperti pada interface. Mana yang dipilih di antara keduanya untuk bentuk object dibahas di halaman interface vs type.

Union, Tuple dan Fungsi

Inilah kasus yang hanya bisa dinamai oleh alias, dan alasan utama type ada. Alias union mendaftar alternatifnya, alias tuple menetapkan panjang dan tipe elemen sebuah array, dan alias fungsi menggambarkan sebuah signature.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rect"; width: number; height: number };

type Span = [start: number, end: number]; // labeled tuple elements

type Transform = (shape: Shape, factor: number) => Shape;

const scale: Transform = (shape, factor) =>
  shape.kind === "circle"
    ? { kind: "circle", radius: shape.radius * factor }
    : { kind: "rect", width: shape.width * factor, height: shape.height * factor };

const r: Span = [10, 20];
console.log(scale({ kind: "circle", radius: 2 }, 3)); // { kind: 'circle', radius: 6 }
console.log(r[1] - r[0]);                              // 10

Di scale, parameternya tidak butuh anotasi: alias Transform sudah menyediakan tipenya. Sintaks tuple dibahas di tuple, dan narrowing union di halaman union types.

Type Alias Generic

Type parameter membuat satu alias berlaku untuk banyak tipe. Parameter ini bisa punya nilai default, sama seperti parameter fungsi.

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

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

for (const input of ["36", "abc"]) {
  const r = parseAge(input);
  console.log(r.ok ? `age ${r.value}` : r.error);
}
// age 36
// not an age: abc

Result<number> memakai default E = string. Alias generic kecil seperti type Nullable<T> = T | null atau type Dict<T> = Record<string, T> umum dipakai dalam kode nyata. Utility type bawaan (Partial<T>, Pick<T, K>, ReturnType<F>) juga merupakan alias generic, yang dideklarasikan di standard library.

Alias adalah Nama, Bukan Tipe Baru

Alias tidak membuat tipe yang berbeda. Ia adalah nama kedua untuk tipe di sisi kanan, dan compiler memperlakukan keduanya sebagai identik. Dua alias dari string bisa saling menggantikan sepenuhnya:

type UserId = string;
type OrderId = string;

function cancelOrder(id: OrderId) {
  console.log("cancelling", id);
}

const user: UserId = "u_42";
cancelOrder(user); // compiles: UserId and OrderId are both just string

Ini mencetak cancelling u_42 tanpa error, dan itulah bug yang tidak bisa dicegah oleh alias. Alias tetap membantu pembaca (parameter bertipe OrderId memberi lebih banyak informasi daripada string), tetapi kalau tertukarnya dua id harus menjadi error kompilasi, pakai branded type seperti string & { readonly __brand: "OrderId" }.

Type Alias Rekursif

Sebuah alias bisa merujuk ke dirinya sendiri, dan begitulah cara menggambarkan tree, list bersarang, dan JSON:

type Json =
  | string
  | number
  | boolean
  | null
  | Json[]
  | { [key: string]: Json };

type TreeNode = {
  value: number;
  children: TreeNode[];
};

function sum(node: TreeNode): number {
  return node.value + node.children.reduce((total, child) => total + sum(child), 0);
}

const tree: TreeNode = {
  value: 1,
  children: [
    { value: 2, children: [] },
    { value: 3, children: [{ value: 4, children: [] }] },
  ],
};

const payload: Json = { ok: true, items: [1, "two", null], meta: { page: 1 } };

console.log(sum(tree));               // 10
console.log(JSON.stringify(payload)); // {"ok":true,"items":[1,"two",null],"meta":{"page":1}}

Alias Json menolak nilai yang tidak bisa direpresentasikan JSON: { when: new Date() } atau { f: undefined } yang di-assign ke Json adalah error kompilasi (TS2322).

Tipe dari Nilai: typeof

Kalau sebuah nilai sudah ada, kamu bisa menamai tipenya alih-alih menuliskannya. Operator tipe typeof membaca tipe sebuah variabel, dan bisa digabung dengan operator lain:

const defaults = { retries: 3, verbose: false, level: "info" };

type Options = typeof defaults;
// { retries: number; verbose: boolean; level: string }

type OptionKey = keyof typeof defaults;
// "retries" | "verbose" | "level"

function start(port: number) {
  return { port, startedAt: new Date() };
}
type Server = ReturnType<typeof start>;
// { port: number; startedAt: Date }

Nilainya tetap menjadi satu-satunya sumber kebenaran: tambahkan property ke defaults dan Options ikut berubah. Penjelasan lebih lanjut ada di typeof.

Export dan Import Alias

Alias di-export dan di-import seperti nilai. import type menegaskan bahwa yang di-import hanya tipe, sehingga import itu selalu dihapus dari output JavaScript:

// shapes.ts
export type Point = { x: number; y: number };
export type Shape = { kind: "circle"; center: Point; radius: number };

// main.ts
import type { Point, Shape } from "./shapes.js";

const p: Point = { x: 1, y: 2 };