Pinakamahuhusay na Kasanayan para sa Kondisyunal na Lohika sa TypeScript

Ipinapaliwanag ng artikulong ito ang pinakamahuhusay na kasanayan para sa kondisyunal na lohika sa TypeScript.

YouTube Video

Pinakamahuhusay na Kasanayan para sa Kondisyunal na Lohika sa TypeScript

Pagpapatibay ng Mga Uri gamit ang Type Guards

Sa pamamagitan ng paggamit sa sistema ng uri ng TypeScript at paggamit ng type guards sa loob ng mga if statement, maaari mong mapahusay ang kaligtasan at pagiging malinaw ng mga uri.

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}

Ang paggamit ng typeof at iba pang type guards ay nagsisiguro na ang code sa loob ng bawat block ay ligtas sa uri at nauugnay sa konteksto.

Iwasan ang Pagkakaroon ng Mga Nested na if Statement

Ang mga labis na nested na if statement ay nagpapababa ng pagiging malinaw at maayos ng code. Sa halip, gumamit ng early returns, mga operator na lohikal, o i-extract ang mga function.

Masamang Halimbawa:

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}

Pinahusay na Halimbawa:

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}

Ang paraang ito ay nagpapalapat ng code at ginagawang mas nauunawaan ang lohika.

Gamitin ang Optional Chaining

Kapag sinusuri ang mga nested na property, gumamit ng optional chaining (?.) para maiwasan ang hindi kinakailangang mga kundisyong if.

Walang Kasamang Optional Chaining:

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

Gamit ang Optional Chaining:

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

Pinapababa nito ang boilerplate code at pinapaganda ang pagiging malinaw. Dito, ang boilerplate code ay tumutukoy sa paulit-ulit at istandardisadong code na madalas kinakailangan upang makamit ang mga espesipikong gawain sa programming.

Gumamit ng Mga Operador para sa Mahigpit na Pagkakapantay

Sinusuportahan ng TypeScript ang mahigpit na typing, at ang paggamit ng mahigpit na pagkakapantay (===) o mahigpit na hindi pagkakapantay (!==) ay tumutulong upang maiwasan ang hindi inaasahang type coercion.

Masamang Halimbawa:

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

Pinahusay na Halimbawa:

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

Gumamit ng Enums o Literal Types para sa Malinaw na Kundisyon

Ang paggamit ng enums o literal types ay nagpapalinaw sa mga kundisyon at nagpapababa ng tsansa ng mga pagkakamali.

 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}

Sa pamamagitan ng pagtukoy ng inaasahang mga halaga, maaaring matukoy ng TypeScript ang mga uri at masiguro ang kawastuhan.

Pagsamahin ang magkatulad na mga kondisyon

Kapag ang maraming kondisyon ay may parehong lohika, pagsamahin ang mga ito gamit ang mga logical operator o isang switch statement.

Masamang Halimbawa:

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

Pinahusay na Halimbawa:

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

Bilang kahalili, gumamit ng switch statement upang pamahalaan ang maraming malinaw na sanga:

 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}

Iwasan ang pagpapakumplikado ng mga conditional expression

Ang mga kumplikadong conditional expression sa if statements ay nagpapababa ng pagiging mabasa ng code. Ihiwalay ang mga ito sa mga makahulugang variable o function.

Masamang Halimbawa:

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

Pinahusay na Halimbawa:

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

Ang pagbibigay ng pangalan sa mga kondisyon ay nagpapabuti ng kalinawan at ginagawang self-documenting ang code.

Gumamit ng ternary operators para sa mga simpleng kondisyon

Para sa mga simpleng kondisyon, ang paggamit ng ternary operators ay nagpapasimple ng code.

Halimbawa:

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

Gayunpaman, iwasan ang paggamit ng ternary operators para sa mga kumplikadong kondisyon dahil ito'y nagpapababa ng pagiging mabasa ng code.

Palitan ang mga conditional branches gamit ang mga array o mapa

Kapag ang kondisyon ay simpleng value mapping lamang, ang paggamit ng mga array o mapa ay maaaring magpahusay sa pagbabasa at pagpapanatili ng code kumpara sa mga switch na pahayag o masalimuot na mga bloke ng if-else. Sa TypeScript, maaari mong gamitin ang impormasyon ng uri upang magpatupad nito nang mas ligtas.

Masamang Halimbawa:

 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}

Pinahusay na halimbawa: Paggamit ng 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}

Pinahusay na halimbawa: Paggamit ng Mapa

 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}

Konklusyon

Sa pagsunod sa mga pinakamainam na kasanayan, maari kang gumawa ng mga if statement sa TypeScript na malinaw, mahusay, at madaling mapanatili. Sa pamamagitan ng paggamit ng mga tampok ng TypeScript tulad ng type guards, optional chaining, at enums, maaari mong pagandahin ang readability at tibay ng code. Sa pamamagitan ng pagsunod sa mga pinakamahusay na gawi, maaari mong gawing maikli at malinaw ang mga kondisyon, na nagreresulta sa mas madaling maunawaan at mapanatiling code.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video