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

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.

Konklusyon

Sa pagsunod sa mga pinakamainam na kasanayan, maari kang gumawa ng mga if statement sa TypeScript na malinaw, mahusay, at madaling mapanatili. Gamitin ang mga tampok ng TypeScript tulad ng type guards, optional chaining, at enums upang mapabuti ang pagiging mabasa at tibay ng iyong code. Panatilihing maikli at malinaw ang mga kondisyon, at gawing madaling maunawaan at mapanatili ang 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