Praktik Terbaik untuk Logika Kondisional dalam TypeScript

Artikel ini menjelaskan praktik terbaik untuk logika kondisional dalam TypeScript.

YouTube Video

Praktik Terbaik untuk Logika Kondisional dalam TypeScript

Mempersempit Jenis dengan Penjaga Tipe (Type Guards)

Dengan memanfaatkan sistem tipe TypeScript dan menggunakan penjaga tipe (type guards) dalam pernyataan if, Anda dapat meningkatkan keamanan tipe dan keterbacaan kode.

1function processInput(input: string | number) {
2    if (typeof input === "string") {
3        console.log(`String input: ${input.toUpperCase()}`);
4    } else {
5        console.log(`Number input: ${input.toFixed(2)}`);
6    }
7}

Menggunakan typeof dan penjaga tipe lainnya memastikan bahwa kode dalam setiap blok aman secara tipe dan relevan secara konteks.

Hindari Pernyataan if Bersarang

Pernyataan if yang terlalu bersarang mengurangi keterbacaan dan kemudahan pemeliharaan kode. Sebagai gantinya, gunakan pengembalian awal (early returns), operator logis, atau ekstraksi fungsi.

Contoh Buruk:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (user.age) {
3        if (user.age > 18) {
4            if (user.isAdmin) {
5                console.log("User is an adult admin.");
6            }
7        }
8    }
9}

Contoh yang Ditingkatkan:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (!user.age || user.age <= 18 || !user.isAdmin) {
3        return;
4    }
5    console.log("User is an adult admin.");
6}

Pendekatan ini meratakan kode dan membuat logika lebih mudah dipahami.

Gunakan Optional Chaining

Saat memeriksa properti yang bersarang, gunakan optional chaining (?.) untuk menghindari kondisi if yang tidak diperlukan.

Tanpa Optional Chaining:

1if (user && user.profile && user.profile.email) {
2    console.log(user.profile.email);
3}

Menggunakan Optional Chaining:

1if (user?.profile?.email) {
2    console.log(user.profile.email);
3}

Ini mengurangi kode boilerplate dan meningkatkan keterbacaan. Di sini, kode boilerplate merujuk pada kode yang berulang dan standar yang sering kali diperlukan untuk menyelesaikan tugas tertentu dalam pemrograman.

Gunakan Operator Kesetaraan Ketat (Strict Equality Operators)

TypeScript mendukung pengetikan ketat, dan menggunakan kesetaraan ketat (===) atau ketidaksamaan ketat (!==) membantu mencegah koersi tipe yang tidak terduga.

Contoh Buruk:

1if (value == "123") {
2    console.log("Value is 123.");
3}

Contoh yang Ditingkatkan:

1if (value === "123") {
2    console.log("Value is 123.");
3}

Gunakan Enums atau Tipe Literal untuk Kondisi yang Eksplisit

Menggunakan enums atau tipe literal memperjelas kondisi dan mengurangi kemungkinan kesalahan.

 1type Status = "success" | "error" | "loading";
 2
 3function displayMessage(status: Status) {
 4    if (status === "success") {
 5        console.log("Operation succeeded.");
 6    } else if (status === "error") {
 7        console.log("Operation failed.");
 8    } else {
 9        console.log("Loading...");
10    }
11}

Dengan mendefinisikan nilai yang diharapkan, TypeScript dapat mendeteksi tipe dan memastikan akurasi.

Gabungkan kondisi yang serupa

Ketika beberapa kondisi memiliki logika yang sama, gabungkan menggunakan operator logika atau pernyataan switch.

Contoh Buruk:

1if (role === "admin") {
2    grantAccess();
3}
4if (role === "superadmin") {
5    grantAccess();
6}

Contoh yang Ditingkatkan:

1if (role === "admin" || role === "superadmin") {
2    grantAccess();
3}

Sebagai alternatif, gunakan pernyataan switch untuk menangani beberapa cabang yang jelas:

 1switch (role) {
 2    case "admin":
 3    case "superadmin":
 4        grantAccess();
 5        break;
 6    case "user":
 7        console.log("Limited access.");
 8        break;
 9    default:
10        console.log("No access.");
11}

Hindari membuat ekspresi kondisional menjadi rumit

Ekspresi kondisional yang kompleks dalam pernyataan if mengurangi keterbacaan. Ekstrak mereka ke dalam variabel atau fungsi yang bermakna.

Contoh Buruk:

1if (user.age > 18 && user.isAdmin && user.permissions.includes("write")) {
2    console.log("User can write.");
3}

Contoh yang Ditingkatkan:

1const isAdultAdminWithWriteAccess = user.age > 18 && user.isAdmin && user.permissions.includes("write");
2if (isAdultAdminWithWriteAccess) {
3    console.log("User can write.");
4}

Memberi nama pada kondisi meningkatkan kejelasan dan membuat kode terdokumentasi dengan sendirinya.

Gunakan operator ternary untuk kondisi yang sederhana

Untuk kondisi yang sederhana, menggunakan operator ternary membuat kode lebih ringkas.

Contoh:

1const message = isLoggedIn ? "Welcome back!" : "Please log in.";
2console.log(message);

Namun, hindari menggunakan operator ternary untuk kondisi yang kompleks karena mengurangi keterbacaan.

Kesimpulan

Dengan mengikuti praktik terbaik ini, Anda dapat membuat pernyataan if di TypeScript menjadi jelas, efisien, dan mudah dirawat. Manfaatkan fitur TypeScript seperti type guard, optional chaining, dan enum untuk meningkatkan keterbacaan dan kekuatan kode Anda. Jaga agar kondisi tetap ringkas dan jelas, demi kode yang selalu mudah dipahami dan dirawat.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video