Try Catch TypeScript: Tipe Error dan Custom Error

TypeScript memakai try, catch, finally, dan throw dari JavaScript. Bagian yang khas TypeScript adalah variabel catch: dengan strict menyala, variabel itu bertipe unknown, jadi kamu memeriksa apa yang dilempar sebelum memakainya.

function parsePort(text: string): number {
    const port = Number(text);
    if (!Number.isInteger(port) || port < 1 || port > 65535) {
        throw new RangeError(`invalid port: "${text}"`);
    }
    return port;
}

try {
    console.log(parsePort("8080")); // 8080
    console.log(parsePort("http")); // throws
} catch (e) {
    // e: unknown
    if (e instanceof Error) {
        console.log(`${e.name}: ${e.message}`); // RangeError: invalid port: "http"
    }
} finally {
    console.log("done");
}

Sisi runtime-nya (cara stack dibongkar, tipe error bawaan apa saja yang ada) dibahas di try/catch JavaScript.

Kenapa Variabel catch Bertipe unknown

JavaScript bisa melempar apa saja: Error, string, angka, undefined, objek dari sebuah library. TypeScript tidak bisa tahu yang mana, jadi dengan strict (flag useUnknownInCatchVariables) variabelnya bertipe unknown dan kamu wajib mempersempitnya sebelum dipakai:

// This does not compile: e is unknown, so e.message is not allowed.
try {
    JSON.parse("{ broken");
} catch (e) {
    console.log("parse failed:", e.message);
}

index.ts(5,34): error TS18046: 'e' is of type 'unknown'.

Tanpa strict, e bertipe any dan kode yang sama bisa dikompilasi, lalu bermasalah saat runtime kalau yang dilempar adalah string: e.message bernilai undefined, dan akses yang lebih dalam, seperti e.message.length, melempar TypeError. Kamu juga tidak bisa lolos dengan anotasi: catch (e: Error) menghasilkan error TS1196 (Catch clause variable type annotation must be 'any' or 'unknown' if specified).

Mempersempit Error

instanceof Error mencakup semua yang dibangun di atas Error, termasuk TypeError, SyntaxError, RangeError, dan subclass buatanmu sendiri. Untuk yang lainnya, ubah nilainya menjadi string. Helper kecil membuat tempat pemanggilan tetap singkat:

function toError(value: unknown): Error {
    if (value instanceof Error) return value;
    if (typeof value === "string") return new Error(value);
    return new Error(`non-error thrown: ${JSON.stringify(value)}`);
}

const throwers: Array<() => void> = [
    () => JSON.parse("{"),
    () => { throw "plain string"; },
    () => { throw { code: 42 }; },
];

for (const run of throwers) {
    try {
        run();
    } catch (e) {
        const err = toError(e);
        console.log(err.constructor.name, "|", err.message);
    }
}
// SyntaxError | Expected property name or '}' in JSON at position 1 (line 1 column 2)
// Error | plain string
// Error | non-error thrown: {"code":42}

catch yang hanya menangani sebagian error sebaiknya melempar ulang sisanya: if (!(e instanceof ValidationError)) throw e;. Menelan error yang tidak dikenal menyembunyikan bug sungguhan.

Melempar Error

throw menerima ekspresi apa pun, dan TypeScript tidak membatasinya. Tetaplah melempar objek Error: objek ini membawa stack trace, dan setiap pemeriksaan instanceof Error di codebase bergantung padanya.

Fungsi yang selalu melempar error punya tipe kembalian never, yang dipakai TypeScript untuk mempersempit tipe setelah pemanggilan:

function fail(message: string): never {
    throw new Error(message);
}

function getEnv(env: Record<string, string | undefined>, key: string): string {
    const value = env[key];
    if (value === undefined) fail(`missing ${key}`);
    return value; // value: string, because fail() never returns
}

const env = { HOME: "/home/ada" };
console.log(getEnv(env, "HOME")); // /home/ada
try {
    getEnv(env, "PORT");
} catch (e) {
    if (e instanceof Error) console.log(e.message); // missing PORT
}

Sejak ES2022, Error menerima argumen kedua berisi cause, yang merangkai error tingkat rendah ke error yang kamu lempar: throw new Error("could not load settings", { cause: e }). Pemanggil bisa membaca err.cause (bertipe unknown).

Class Error Kustom

Subclass dari Error membuat pemanggil bisa membedakan kegagalan dengan instanceof dan membawa data tambahan. Atur name, karena nilai warisannya adalah "Error" dan nilai itu muncul di log serta di String(err):

class HttpError extends Error {
    override name = "HttpError";

    constructor(readonly status: number, message: string, options?: ErrorOptions) {
        super(message, options);
    }
}

class NotFoundError extends HttpError {
    override name = "NotFoundError";

    constructor(resource: string) {
        super(404, `${resource} not found`);
    }
}

function handle(e: unknown): string {
    if (e instanceof NotFoundError) return `404 page for: ${e.message}`;
    if (e instanceof HttpError) return `HTTP ${e.status}: ${e.message}`;
    if (e instanceof Error) return `unexpected: ${e.message}`;
    return "unknown failure";
}

console.log(handle(new NotFoundError("user 7"))); // 404 page for: user 7 not found
console.log(handle(new HttpError(503, "maintenance"))); // HTTP 503: maintenance
console.log(handle(new TypeError("oops")));        // unexpected: oops

const wrapped = new HttpError(500, "db down", { cause: new Error("timeout") });
const cause = wrapped.cause; // unknown
console.log(String(wrapped), "| cause:", cause instanceof Error ? cause.message : cause);
// HttpError: db down | cause: timeout

Periksa class yang paling spesifik lebih dulu, karena NotFoundError juga merupakan HttpError. Modifier override di sini opsional, kecuali noImplicitOverride menyala.

Panduan lama menambahkan Object.setPrototypeOf(this, new.target.prototype) ke setiap constructor error. Itu dibutuhkan saat class dikompilasi menjadi fungsi ES5, di mana instanceof rusak untuk subclass Error. TypeScript 7 tidak lagi mendukung target: "es5" (ia melaporkan TS5108: Option 'target=ES5' has been removed), dan dengan ES2015 atau yang lebih baru, class ... extends Error bawaan berfungsi seperti di atas.

Pola Result

TypeScript tidak melacak error apa saja yang bisa dilempar sebuah fungsi, jadi tidak ada yang mengingatkan pemanggil untuk menanganinya. Untuk kegagalan yang memang diperkirakan (input tidak valid, data yang tidak ada), mengembalikan nilai yang menyatakan "sukses atau gagal" memasukkan error ke dalam sistem tipe:

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

function parseAge(input: string): Result<number> {
    const n = Number(input);
    if (!Number.isInteger(n)) return { ok: false, error: `"${input}" is not a whole number` };
    if (n < 0 || n > 150) return { ok: false, error: `${n} is out of range` };
    return { ok: true, value: n };
}

for (const input of ["36", "abc", "200"]) {
    const r = parseAge(input);
    if (r.ok) {
        console.log("age:", r.value + 1); // r.value only exists when ok is true
    } else {
        console.log("error:", r.error);
    }
}
// age: 37
// error: "abc" is not a whole number
// error: 200 is out of range

Membaca r.value sebelum memeriksa r.ok adalah error kompilasi, dan memang itulah tujuannya. Pakai exception untuk hal yang tidak terduga (bug, koneksi yang putus) dan nilai Result untuk hasil yang harus diputuskan oleh pemanggil.

Error di Kode Async

Promise yang di-reject menjadi error yang dilempar di await, jadi try/catch di sekitar await bekerja dengan cara yang sama, dan variabelnya kembali bertipe unknown. Satu-satunya perbedaan adalah .catch() pada promise: parameter callback-nya bertipe any, bukan unknown, jadi beri anotasi sendiri (.catch((e: unknown) => ...)). Lihat async/await untuk contohnya.

Kesalahan Umum

• Membaca e.message tanpa mempersempit. Dengan strict, kodenya tidak bisa dikompilasi; tanpa strict, kodenya rusak saat yang dilempar bukan Error.
• Menangkap semuanya lalu lanjut berjalan. Tangani error yang kamu perkirakan dan lempar ulang sisanya.
• Lupa mengatur name pada error kustom. Log lalu menyebut semuanya sebagai Error.
• Melempar string. throw "failed" tidak punya stack trace dan gagal dalam pemeriksaan instanceof Error.