Najlepsze praktyki dotyczące logiki warunkowej w TypeScript

Ten artykuł wyjaśnia najlepsze praktyki dotyczące logiki warunkowej w TypeScript.

YouTube Video

Najlepsze praktyki dotyczące logiki warunkowej w TypeScript

Zawężanie typów za pomocą strażników typów

Wykorzystując system typów TypeScript i używając strażników typów w instrukcjach if, można poprawić bezpieczeństwo typów i czytelność.

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}

Korzystanie z typeof i innych strażników typów zapewnia, że kod w każdym bloku jest typowo bezpieczny i kontekstowo odpowiedni.

Unikaj zagnieżdżonych instrukcji if

Głęboko zagnieżdżone instrukcje if obniżają czytelność i łatwość utrzymania kodu. Zamiast tego stosuj wczesne zwroty, operatory logiczne lub wydzielaj funkcje.

Zły przykład:

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}

Poprawiony przykład:

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}

To podejście spłaszcza kod i sprawia, że logika jest bardziej zrozumiała.

Wykorzystuj opcjonalne łańcuchowanie

Podczas sprawdzania zagnieżdżonych właściwości używaj opcjonalnego łańcuchowania (?.), aby uniknąć niepotrzebnych instrukcji if.

Bez opcjonalnego łańcuchowania:

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

Za pomocą opcjonalnego łańcuchowania:

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

To zmniejsza ilość kodu szablonowego i poprawia czytelność. Tutaj kod szablonowy oznacza powtarzalny, znormalizowany kod, który jest często wymagany do realizacji konkretnych zadań w programowaniu.

Używaj operatorów ścisłej równości

TypeScript obsługuje ścisłe typowanie, a używanie ścisłej równości (===) lub ścisłej nierówności (!==) pomaga zapobiegać nieoczekiwanej konwersji typów.

Zły przykład:

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

Poprawiony przykład:

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

Używaj enumeracji lub typów literałowych dla jawnych warunków

Używanie enumeracji lub typów literałowych wyjaśnia warunki i zmniejsza ryzyko błędów.

 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}

Definiując oczekiwane wartości, TypeScript może wykrywać typy i zapewniać dokładność.

Kombinuj podobne warunki

Gdy wiele warunków korzysta z tej samej logiki, połącz je, używając operatorów logicznych lub instrukcji switch.

Zły przykład:

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

Poprawiony przykład:

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

Alternatywnie, użyj instrukcji switch, aby obsłużyć wiele jednoznacznych gałęzi:

 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}

Unikaj komplikowania wyrażeń warunkowych

Złożone wyrażenia warunkowe w instrukcjach if obniżają czytelność. Przenieś je do znaczących zmiennych lub funkcji.

Zły przykład:

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

Poprawiony przykład:

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

Nadawanie nazw warunkom poprawia ich przejrzystość i sprawia, że kod staje się samodokumentujący.

Używaj operatorów trójargumentowych dla prostych warunków

Dla prostych warunków użycie operatorów trójargumentowych sprawia, że kod staje się zwięzły.

Przykład:

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

Jednak unikaj użycia operatorów trójargumentowych dla złożonych warunków, ponieważ obniża to czytelność.

Zastąp gałęzie warunkowe tablicami lub mapami

Gdy warunek jest zwykłym odwzorowaniem wartości, użycie tablic lub map może poprawić czytelność i łatwość utrzymania kodu w porównaniu z instrukcjami switch lub złożonymi blokami if-else. W TypeScript możesz wykorzystać informacje o typach, aby zaimplementować to bardziej bezpiecznie.

Zły przykład:

 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}

Ulepszony przykład: Użycie tablicy

 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}

Ulepszony przykład: Użycie Mapy

 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}

Wnioski

Stosując te najlepsze praktyki, możesz uczynić instrukcje if w TypeScript jasnymi, efektywnymi i łatwymi do utrzymania. Korzystając z funkcji TypeScript, takich jak strażnicy typu (type guards), opcjonalne łańcuchowanie (optional chaining) i wyliczenia (enums), można poprawić czytelność i solidność kodu. Stosując najlepsze praktyki, można utrzymać warunki zwięzłe i przejrzyste, co skutkuje kodem łatwiejszym do zrozumienia i utrzymania.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video