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 =
2    user.age > 18 && user.isAdmin && user.permissions.includes("write");
3
4if (isAdultAdminWithWriteAccess) {
5    console.log("User can write.");
6}

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.

Gantikan cabang bersyarat dengan array atau peta

Ketika kondisinya hanya pemetaan nilai, menggunakan array atau peta dapat meningkatkan keterbacaan dan pemeliharaan kode dibandingkan dengan pernyataan switch atau blok if-else yang kompleks. Dalam TypeScript, Anda dapat memanfaatkan informasi tipe untuk mengimplementasikannya dengan lebih aman.

Contoh Buruk:

 1function getDayName(day: number): string {
 2    switch (day) {
 3        case 0:
 4            return "Sunday";
 5        case 1:
 6            return "Monday";
 7        case 2:
 8            return "Tuesday";
 9        case 3:
10            return "Wednesday";
11        case 4:
12            return "Thursday";
13        case 5:
14            return "Friday";
15        case 6:
16            return "Saturday";
17        default:
18            return "Invalid day";
19    }
20}

Contoh yang ditingkatkan: Menggunakan array

 1function getDayName(day: number): string {
 2    const days = [
 3        "Sunday",
 4        "Monday",
 5        "Tuesday",
 6        "Wednesday",
 7        "Thursday",
 8        "Friday",
 9        "Saturday"
10    ];
11    return days[day] ?? "Invalid day";
12}

Contoh yang ditingkatkan: Menggunakan Peta

 1function getDayName(day: number): string {
 2    const dayMap = new Map<number, string>([
 3        [0, "Sunday"],
 4        [1, "Monday"],
 5        [2, "Tuesday"],
 6        [3, "Wednesday"],
 7        [4, "Thursday"],
 8        [5, "Friday"],
 9        [6, "Saturday"]
10    ]);
11    return dayMap.get(day) ?? "Invalid day";
12}

Kesimpulan

Dengan mengikuti praktik terbaik ini, Anda dapat membuat pernyataan if di TypeScript menjadi jelas, efisien, dan mudah dirawat. Dengan menggunakan fitur TypeScript seperti type guards, optional chaining, dan enum, Anda dapat meningkatkan keterbacaan dan ketangguhan kode. Dengan mengikuti praktik terbaik, Anda dapat menjaga kondisi tetap ringkas dan jelas, sehingga menghasilkan kode yang lebih mudah dipahami dan dipelihara.

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

YouTube Video