Bästa praxis för villkorslogik i TypeScript

Denna artikel förklarar bästa praxis för villkorslogik i TypeScript.

YouTube Video

Bästa praxis för villkorslogik i TypeScript

Begränsa typer med typvakter

Genom att använda TypeScripts typsystem och använda typvakter inom if-satser kan du förbättra typsäkerheten och läsbarheten.

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}

Genom att använda typeof och andra typvakter säkerställer du att koden inom varje block är typsäker och kontextuellt relevant.

Undvik nästlade if-satser

Djupet av nästlade if-satser minskar kodens läsbarhet och underhållbarhet. Använd istället tidiga returvärden, logiska operatorer eller externa funktioner.

Dåligt exempel:

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}

Förbättrat exempel:

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}

Denna metod plattar till koden och gör logiken mer begriplig.

Utnyttja valfri kedjning

När du kontrollerar nästlade egenskaper, använd valfri kedjning (?.) för att undvika onödiga if-villkor.

Utan valfri kedjning:

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

Med valfri kedjning:

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

Detta minskar boilerplate-kod och förbättrar läsbarheten. Här avser boilerplate-kod repetitiv, standardiserad kod som ofta krävs för att utföra specifika uppgifter i programmering.

Använd strikta likhetsoperatorer

TypeScript stöder strikt typning, och användning av strikt likhet (===) eller strikt olikhet (!==) hjälper till att förhindra oväntad type coercion.

Dåligt exempel:

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

Förbättrat exempel:

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

Använd enums eller bokstavstyper för explicita villkor

Användning av enums eller bokstavstyper klargör villkor och minskar risken för fel.

 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}

Genom att definiera förväntade värden kan TypeScript upptäcka typer och säkerställa noggrannhet.

Kombinera liknande villkor

När flera villkor delar samma logik, konsolidera dem med logiska operatorer eller ett switch-uttalande.

Dåligt exempel:

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

Förbättrat exempel:

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

Alternativt, använd ett switch-uttalande för att hantera flera tydliga grenar:

 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}

Undvik att göra villkorsuttryck komplexa

Komplexa villkorsuttryck i if-satser minskar läsbarheten. Extrahera dem till meningsfulla variabler eller funktioner.

Dåligt exempel:

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

Förbättrat exempel:

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

Att namnge villkoren förbättrar tydligheten och gör koden självförklarande.

Använd ternära operatorer för enkla villkor

För enkla villkor gör ternära operatorer koden kortfattad.

Exempel:

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

Undvik dock att använda ternära operatorer för komplexa villkor eftersom det minskar läsbarheten.

Ersätt villkorsgrenar med arrayer eller mappar

När villkoret endast är en värdetilldelning kan användning av arrayer eller mappar förbättra kodens läsbarhet och underhållbarhet jämfört med switch-satser eller komplexa if-else-block. I TypeScript kan du använda typinformation för att implementera det på ett säkrare sätt.

Dåligt exempel:

 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}

Förbättrat exempel: Använda en 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}

Förbättrat exempel: Använda en mapp

 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}

Slutsats

Genom att följa dessa bästa metoder kan du göra if-satser i TypeScript tydliga, effektiva och underhållbara. Genom att använda TypeScript-funktioner som typvakter, valfri kedjning och enumar kan du förbättra kodens läsbarhet och robusthet. Genom att följa bästa praxis kan du hålla villkor koncisa och tydliga, vilket resulterar i kod som är enklare att förstå och underhålla.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video