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

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ść.

Wnioski

Stosując te najlepsze praktyki, możesz uczynić instrukcje if w TypeScript jasnymi, efektywnymi i łatwymi do utrzymania. Wykorzystuj funkcje TypeScript, takie jak strażniki typów, opcjonalne łańcuchy i wyliczenia (enums), aby poprawić czytelność i niezawodność kodu. Utrzymuj warunki zwięzłe i przejrzyste, dążąc do tego, aby kod zawsze był łatwy 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