as di TypeScript: Penjelasan Type Assertion dan Casting

value as Type adalah type assertion: ia memberi tahu TypeScript untuk memperlakukan value sebagai Type. Orang menyebutnya cast, tetapi ini hanya instruksi untuk compiler. Assertion dihapus dari output JavaScript, tidak mengonversi apa pun, dan tidak mengecek apa pun saat runtime.

interface Config {
  port: number;
  host: string;
}

const text = '{"port": 8080, "host": "localhost"}';

// JSON.parse returns any; the assertion gives the result a useful type
const config = JSON.parse(text) as Config;

console.log(config.port + 1);            // 8081
console.log(config.host.toUpperCase());  // LOCALHOST

Inilah pemakaian yang umum: kamu tahu lebih banyak tentang sebuah nilai daripada yang bisa diketahui compiler (di sini, bentuk sebuah JSON), lalu kamu menyatakannya. Kalau kamu salah, tidak ada yang memperingatkanmu. Bagian berikutnya menunjukkan apa artinya itu dan kapan pengecekan saat runtime adalah pilihan yang lebih baik.

as dan Sintaks Kurung Sudut

Ada dua cara penulisan untuk assertion yang sama:

const someValue: unknown = "hello";
const a = someValue as string;   // as syntax
const b = <string>someValue;     // angle-bracket syntax, same meaning

Bentuk kurung sudut tidak diizinkan di file .tsx, karena <string> akan dibaca sebagai tag JSX. Pakai as di mana saja dan pertanyaan itu tidak akan pernah muncul. Assertion mengikat dengan longgar, jadi bungkus dengan tanda kurung kalau kamu melanjutkan ekspresinya: (value as string).length.

Assertion Tidak Mengonversi Nilai

Bagian inilah yang menyebabkan bug sungguhan. Assertion mengubah apa yang diyakini compiler tentang sebuah nilai, bukan nilainya sendiri:

const input: unknown = "42";

const asserted = input as number;  // compiles: unknown can be asserted to anything
const converted = Number(input);   // an actual conversion

console.log(asserted + 1);   // 421 (string concatenation: it is still "42")
console.log(converted + 1);  // 43
console.log(typeof asserted, typeof converted); // string number

Compiler meyakini bahwa asserted adalah number, jadi asserted + 1 lolos pengecekan tipe sebagai operasi aritmetika. Saat runtime, nilainya tetap string "42" dan JavaScript menyambungnya. Untuk mengubah tipe sebuah nilai, konversi nilainya: Number(x), String(x), Boolean(x), BigInt(x), new Date(x). Halaman string ke number membandingkan fungsi-fungsi konversi itu.

Apa yang Diizinkan Compiler

as tidak tanpa batas. TypeScript mengizinkan x as T kalau salah satu tipe assignable ke tipe lainnya: pelebaran ("a" as string, dog as Animal) dan penyempitan (animal as Dog, unknown as User) sama-sama boleh. Kalau tipenya sama sekali tidak beririsan, TypeScript menolaknya:

// This does not compile: string and number do not overlap.
const input = "42";
const n = input as number;

console.log(n);

Compiler melaporkan index.ts(3,11): error TS2352: Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Pesannya sendiri menyebutkan jalan pintasnya: input as unknown as number. Double assertion itu lolos kompilasi, dan sama salahnya saat runtime seperti contoh di atas. Kalau kamu merasa membutuhkannya, perbaikan yang tepat biasanya adalah konversi (Number(input)) atau tipe yang berbeda.

Aturan irisan ini longgar untuk object. Object literal yang punya sebagian property-nya tetap diterima, dan begitulah as diam-diam meloloskan object yang belum lengkap:

interface User {
  name: string;
  email: string;
}

const draft = { name: "Ada" } as User; // compiles: email is missing
const empty = {} as User;              // compiles too

console.log(draft.name);               // Ada
console.log(typeof draft.email);       // undefined, although the type says string
console.log(empty.name?.length);       // undefined

Anotasi (const draft: User = { name: "Ada" }) atau satisfies User akan melaporkan email yang hilang (TS2741). Pakai as pada object literal hanya kalau kamu memang berniat melengkapinya nanti, dan utamakan membangun object yang lengkap.

as const Itu Berbeda

as const terlihat seperti assertion, tetapi melakukan kebalikan dari melonggarkan: ia membuat sebuah literal sesempit mungkin. String tetap menjadi literal type, array menjadi tuple readonly, dan property object menjadi readonly.

const sizes = ["small", "medium", "large"] as const;
type Size = (typeof sizes)[number]; // "small" | "medium" | "large"

const point = { x: 1, y: 2 } as const; // { readonly x: 1; readonly y: 2 }

function isSize(value: string): value is Size {
  return (sizes as readonly string[]).includes(value);
}

console.log(isSize("medium"), isSize("huge")); // true false
console.log(point.x + point.y);                // 3

Ini aman, karena ia menggambarkan literal itu secara persis alih-alih mengklaim sesuatu yang tidak bisa dilihat compiler. (sizes as readonly string[] di dalam isSize adalah assertion pelebaran, yang juga aman: ia membuat includes menerima string apa pun.) Lihat literal types untuk penjelasan lebih lanjut.

Kapan Type Guard Adalah Alat yang Lebih Tepat

as adalah klaim; type guard adalah pengecekan. Di batas tempat data datang dari luar kodemu (JSON, fetch, localStorage, input pengguna, sebuah pesan), klaim itu bisa saja salah, dan assertion mengubah error yang jelas di batas itu menjadi error yang membingungkan di tempat lain.

interface Point {
  x: number;
  y: number;
}

function isPoint(v: unknown): v is Point {
  return typeof v === "object" && v !== null &&
    "x" in v && typeof v.x === "number" &&
    "y" in v && typeof v.y === "number";
}

const raw: unknown = JSON.parse('{"x": 3, "y": "4"}');

// With as: compiles, and the bug surfaces later
const p1 = raw as Point;
console.log(p1.x + p1.y); // 34 (a string snuck in)

// With a guard: the bad data is caught where it enters
if (isPoint(raw)) console.log(raw.x + raw.y);
else console.log("invalid point");

Panduan kasar untuk alat-alat yang terlihat mirip:

Masih ada dua pemakaian as yang baik: mempersempit sesuatu yang tidak bisa diikuti compiler (entri Map yang kamu set dua baris sebelumnya, nilai dari library yang tidak bertipe), dan kode test yang membangun fixture parsial. Buat sekecil mungkin dan dekat dengan tempat kamu tahu klaim itu benar.