Beste praktijken voor conditionele logica in TypeScript

Dit artikel legt de beste praktijken uit voor conditionele logica in TypeScript.

YouTube Video

Beste praktijken voor conditionele logica in TypeScript

Types verfijnen met type guards

Door gebruik te maken van het TypeScript-type systeem en type guards te gebruiken binnen if-verklaringen, kunt u de typeveiligheid en leesbaarheid verbeteren.

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}

Het gebruik van typeof en andere type guards zorgt ervoor dat de code binnen elk blok typeveilig en contextueel relevant is.

Vermijd geneste if-verklaringen

Diep geneste if-verklaringen verminderen de leesbaarheid en onderhoudbaarheid van de code. Gebruik in plaats daarvan vroege terugkeer, logische operatoren of extractiefuncties.

Slecht voorbeeld:

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}

Verbeterd voorbeeld:

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}

Deze aanpak maakt de code platter en de logica beter begrijpelijk.

Gebruik optionele chaining

Bij het controleren van geneste eigenschappen, gebruik optionele chaining (?.) om onnodige if-voorwaarden te vermijden.

Zonder optionele chaining:

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

Met optionele chaining:

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

Dit vermindert boilerplate-code en verbetert de leesbaarheid. Hier verwijst boilerplate-code naar repetitieve, gestandaardiseerde code die vaak nodig is om specifieke taken in programmeren uit te voeren.

Gebruik strikte gelijkheidsoperatoren

TypeScript ondersteunt strikt typen, en het gebruik van strikte gelijkheid (===) of strikte ongelijkheid (!==) helpt onverwachte typecoercion te voorkomen.

Slecht voorbeeld:

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

Verbeterd voorbeeld:

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

Gebruik enums of letterlijke types voor expliciete voorwaarden

Het gebruik van enums of letterlijke types verduidelijkt voorwaarden en vermindert de kans op fouten.

 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}

Door verwachte waarden te definiëren, kan TypeScript typen detecteren en nauwkeurigheid garanderen.

Combineer gelijkaardige voorwaarden

Wanneer meerdere voorwaarden dezelfde logica delen, combineer ze met behulp van logische operatoren of een switch-statement.

Slecht voorbeeld:

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

Verbeterd voorbeeld:

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

Gebruik als alternatief een switch-statement om meerdere duidelijke takken te verwerken:

 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}

Voorkom dat conditionele expressies complex worden

Complexe conditionele expressies in if-statements verminderen de leesbaarheid. Haal ze uit in betekenisvolle variabelen of functies.

Slecht voorbeeld:

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

Verbeterd voorbeeld:

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

Het benoemen van de voorwaarden verbetert de duidelijkheid en maakt de code zelfdocumenterend.

Gebruik ternary operators voor eenvoudige voorwaarden

Voor eenvoudige voorwaarden maakt het gebruik van een ternary operator de code beknopt.

Voorbeeld:

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

Gebruik echter geen ternary operators voor complexe voorwaarden, omdat dit de leesbaarheid vermindert.

Vervang voorwaardelijke aftakkingen door arrays of mappen

Wanneer de voorwaarde eenvoudigweg een waardetoewijzing is, kunnen arrays of mappen de leesbaarheid en onderhoudbaarheid van de code verbeteren in vergelijking met switch-verklaringen of complexe if-else-structuren. In TypeScript kun je type-informatie benutten om het veiliger te implementeren.

Slecht voorbeeld:

 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}

Verbeterd voorbeeld: Gebruik van een 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}

Verbeterd voorbeeld: Gebruik van een map

 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}

Conclusie

Door deze beste praktijken te volgen, kunt u if-statements in TypeScript duidelijk, efficiënt en onderhoudbaar maken. Door gebruik te maken van TypeScript-functies zoals type guards, optional chaining en enums, kun je de leesbaarheid en robuustheid van de code verbeteren. Door best practices te volgen, kun je voorwaarden beknopt en duidelijk houden, wat resulteert in code die gemakkelijker te begrijpen en te onderhouden is.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video