Tanda Seru (!) di TypeScript: Non-Null Assertion Operator

Tanda seru setelah sebuah ekspresi, value!, adalah operator non-null assertion. Operator ini membuang null dan undefined dari tipe, jadi number | undefined bisa dipakai sebagai number. Ini adalah janji kepada compiler, bukan pemeriksaan: saat runtime tidak terjadi apa-apa.

const prices = new Map<string, number>([
  ["tea", 2.5],
  ["coffee", 3.2],
]);

const tea = prices.get("tea");         // number | undefined
const coffee = prices.get("coffee")!;  // number

console.log(coffee.toFixed(2)); // 3.20
console.log(tea!.toFixed(2));   // 2.50: ! works on any expression

Tanpa !, tea.toFixed(2) adalah error TS18048, 'tea' is possibly 'undefined'. Dengan tanda itu, kodenya lolos kompilasi karena kamu sudah memberi tahu compiler bahwa key-nya ada.

Apa yang Dilakukan x! saat Runtime: Tidak Ada

! dihapus dari output. JavaScript hasil kompilasi untuk prices.get("coffee")! hanyalah prices.get("coffee"). Kalau assertion-nya salah, error-nya muncul belakangan, di tempat pertama nilai yang hilang itu dipakai:

const prices = new Map<string, number>([["tea", 2.5]]);

try {
  const juice = prices.get("juice")!; // compiles: the ! silences the check
  console.log(juice.toFixed(2));      // TypeError at runtime
} catch (e) {
  console.log((e as Error).message);
}

Program mencetak Cannot read properties of undefined (reading 'toFixed'). Crash-nya terjadi di baris setelah !, dan di kode sungguhan jaraknya bisa jauh lebih besar: undefined itu bisa saja disimpan di sebuah object lalu meledak di file lain. Jarak itulah yang membuat ! berisiko.

Definite Assignment: let x!: T

Simbol yang sama di sebuah deklarasi punya arti yang berkaitan. TypeScript melacak apakah sebuah variabel sudah di-assign sebelum dibaca, dan ia tidak bisa mengikuti assignment yang dilakukan di dalam fungsi lain:

// This does not compile: TypeScript cannot see the assignment inside init()
let config: { port: number };

function init() {
  config = { port: 8080 };
}

init();
console.log(config.port);

index.ts(9,13): error TS2454: Variable 'config' is used before being assigned.

let config!: { port: number }; adalah definite assignment assertion: "variabel ini akan di-assign sebelum dibaca". Cara ini memperbaiki error-nya, dengan jebakan yang sama seperti x!: kalau init() suatu saat terlewat, pembacaannya mendapat undefined. Menyusun ulang kode biasanya lebih baik, misalnya const config = init(); dengan init mengembalikan object-nya.

Properti Class: prop!: T

Dengan strictPropertyInitialization (bagian dari strict), setiap properti class harus diinisialisasi di deklarasinya atau di constructor. Kalau tidak, kamu mendapat TS2564: Property 'socket' has no initializer and is not definitely assigned in the constructor. Kalau sebuah properti baru diatur belakangan oleh method atau framework, prop!: T memberi tahu compiler untuk menerimanya:

class Connection {
  url: string;
  socket!: { send(msg: string): string }; // set in open(), not in the constructor

  constructor(url: string) {
    this.url = url;
  }

  open() {
    this.socket = { send: (msg) => `sent "${msg}" to ${this.url}` };
  }
}

const c = new Connection("ws://example.com");
console.log(c.socket);            // undefined: declared but not set yet
c.open();
console.log(c.socket.send("hi")); // sent "hi" to ws://example.com

console.log pertama menunjukkan celahnya: tipenya menyatakan socket selalu ada, tetapi sebelum open() nilainya undefined. Memanggil c.socket.send pada saat itu lolos kompilasi dan melempar error. Kalau properti itu memang bisa tidak ada, deklarasikan sebagai socket?: ... lalu periksa, atau buat object-nya di constructor. Tempat utama prop! menjadi praktik standar adalah framework yang mengisi properti setelah object dibuat: @ViewChild(...) child!: ChildDirective di Angular (diatur sebelum ngAfterViewInit berjalan), atau class entity ORM yang kolomnya diisi library saat memuat sebuah baris (dokumentasi MikroORM menulis @Property() title!: string).

Alternatif yang Lebih Aman

Sebagian besar ! bisa diganti dengan sesuatu yang diperiksa compiler, atau dengan pemeriksaan yang gagal secara jelas di tempat yang tepat:

function must<T>(value: T | null | undefined, what: string): T {
  if (value == null) throw new Error(`missing ${what}`);
  return value;
}

function assertDefined<T>(value: T, what: string): asserts value is NonNullable<T> {
  if (value == null) throw new Error(`missing ${what}`);
}

const env = new Map([["PORT", "8080"]]);

const port = must(env.get("PORT"), "PORT"); // string
console.log(Number(port) + 1);              // 8081

const host = env.get("HOST");
try {
  assertDefined(host, "HOST");
  console.log(host.toUpperCase()); // host is string after the assertion
} catch (e) {
  console.log((e as Error).message); // missing HOST
}

Kedua helper itu mempersempit tipe seperti yang dilakukan !, tetapi asumsi yang salah langsung menghasilkan missing HOST di tempat itu juga, bukan TypeError di tempat lain. assertDefined adalah assertion function (asserts value is ...): setelah dipanggil, compiler memperlakukan host sebagai string. Pola lainnya ada di type guard.

Tanda Seru Lainnya

! punya arti berbeda tergantung letaknya:

Hanya dua yang pertama yang dihapus saat kompilasi. !value dan !!value dijalankan saat runtime dan mengembalikan boolean.