Nullish Coalescing-operator i TypeScript

I denne artikel vil vi forklare Nullish Coalescing-operatoren i TypeScript.

YouTube Video

Nullish Coalescing-operator i TypeScript

Nullish Coalescing-operatoren (??) i TypeScript ligner JavaScripts kortslutningsevaluering, men den bruges mere eksplicit til at angive en fallback-værdi kun når venstre side er null eller undefined. Denne operator tillader dig nemt at kontrollere, om en værdi er null eller undefined, og angive en standardværdi efter behov.

Nullish Coalescing-operatoren (??) returnerer højre side kun hvis venstre side er null eller undefined. Dette gør det muligt for værdier som false, en tom streng eller tallet 0 at blive evalueret som de er. Dette er en væsentlig forskel fra den traditionelle logiske ELLER-operator (||). Denne operator blev introduceret i TypeScript 3.7.

Grundlæggende syntaks

Den grundlæggende syntaks er som følger:.

1let result = value ?? defaultValue;

• value er målet, der kontrolleres for null eller undefined.
• defaultValue er den værdi, der returneres, når value er null eller undefined.

Eksempel på brug

1function getUserName(userName: string | null | undefined): string {
2    return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice"));  // Output: Alice
6console.log(getUserName(null));     // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User

Her returnerer funktionen getUserName "Default User", hvis userName er null eller undefined. Ellers returnerer den værdien af userName.

Forskel fra den logiske ELLER-operator

Der er en vigtig forskel mellem nulpunkts-sammenkoblingsoperatoren og den logiske ELLER-operator. Den logiske ELLER-operator behandler værdier som false, 0 og "" (tom streng) som "falske", ligesom null og undefined. På den anden side bruger Nullish Coalescing-operatoren kun null og undefined som fallback.

Eksempel på den logiske ELLER-operator

1function getUserAge(age: number | null | undefined): number {
2    return age || 18;  // `0` also applies the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 18
7console.log(getUserAge(null)); // Output: 18

• Som vist returnerer den logiske ELLER-operator standardværdien 18, selv når værdien er 0.

Eksempel på nullish coalescing-operatoren

1function getUserAge(age: number | null | undefined): number {
2    return age ?? 18;  // `0` does not apply the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 0
7console.log(getUserAge(null)); // Output: 18

• På den anden side returnerer nulpunkts-sammenkoblingsoperatoren den oprindelige værdi, selv når den er 0.

• Valget mellem den logiske ELLER-operator og nulpunkts-sammenkoblingsoperatoren afhænger af, om 0 eller en tom streng er acceptabel. For eksempel, hvis du vil gemme en brugers alder som 0, skal du bruge nullish coalescing-operatoren.

Kombination med typer

Du kan forbedre robustheden af din kode ved at udnytte TypeScripts typesikkerhed i kombination med Nullish Coalescing-operatoren. I det følgende eksempel bruges standardværdier, når visse egenskaber er null eller undefined.

 1interface User {
 2    name: string;
 3    age?: number | null;
 4}
 5
 6function displayUserInfo(user: User): string {
 7    const userName: string = user.name;
 8    const userAge: number = user.age ?? 18;
 9    return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18

• I User-interfacet kan age-egenskaben være et number, null eller undefined, så nulpunkts-sammenkoblingsoperatoren bruges til at tildele en standardværdi på 18.
• I mellemtiden tillader name-egenskaben kun string, så værdien bruges, som den er.

Sammendrag

• Nullish coalescing-operatoren hjælper med at indstille en standardværdi kun, når værdien er null eller undefined. I modsætning til den traditionelle logiske ELLER-operator behandles false, 0 eller tomme strenge ikke som 'falsy', hvilket gør den særlig nyttig, når du vil bevare disse værdier. Desuden gør kombinationen med TypeScripts type-system det muligt at skabe mere robust og læsevenlig kode.
• Ved effektivt at bruge nullish coalescing-operatoren kan du kortfattet skrive logik til at angive standardværdier og samtidig reducere unødvendige null-kontroller.

Nullish Coalescing Tildelingsoperator i TypeScript

Nullish coalescing tildelingsoperatoren (??=) er en relativt ny operator i TypeScript, som giver en praktisk metode til kun at tildele en værdi, hvis variablen er null eller undefined. Her vil vi forklare, hvordan denne operator fungerer, hvilke situationer den er effektiv i, og give eksempler med kode.

Hvad er Nullish Coalescing Tildelingsoperatoren

Nullish coalescing assignment-operatoren er en tildelingsoperator baseret på nullish coalescing-operatoren. Denne operator bruges til kun at tildele en ny værdi, hvis variablen er null eller undefined.

1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null,
3                              // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"

Ved at bruge denne operator kan du skrive logikken for "tildele, hvis variablen er undefined eller null" mere kortfattet.

Sammenligning med traditionelle tildelingsmetoder

Uden nullish coalescing assignment-operatoren skulle du bruge en if-sætning eller en ternær operator for at opnå samme adfærd. Lad os sammenligne med de traditionelle tildelingsmetoder.

Konventionel metode

Ved hjælp af en if-sætning kan det skrives som følger:.

1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3    variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"

Metode ved brug af den ternære operator

Alternativt kan det ved hjælp af den ternære operator skrives som følger:.

1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"

En kortfattet metode ved hjælp af nulpunkts-sammenkoblings-tildelingsoperatoren.

På den anden side kan det, ved hjælp af nulpunkts-sammenkoblings-tildelingsoperatoren, skrives sådan her:.

1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"

Som vist er nulpunkts-sammenkoblings-tildelingsoperatoren meget enklere og mere læselig sammenlignet med andre tildelingsmetoder, hvilket forbedrer kodeklarhed.

Specifikke eksempler på brug af ??=

Nullish coalescing assignment-operatoren er nyttig i forskellige scenarier, såsom initialisering af objekt-egenskaber og indstilling af standardværdier. Her er nogle specifikke eksempler.

Initialisering af objektets egenskaber

 1interface Config {
 2    theme?: string;
 3    language?: string;
 4}
 5
 6let config: Config = {};
 7config.theme ??= "light";  // Set the default "light" theme if none is specified
 8config.language ??= "en";  // Set the default "en" language if none is specified
 9
10console.log(config); // Output: { theme: "light", language: "en" }

Initialisering af arrays

1let numbers: number[] | null = null;
2numbers ??= [];  // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]

Indstilling af standardværdier for funktionsargumenter

1function greet(name?: string) {
2    name ??= "Guest";  // Set name to "Guest" if it is undefined or null
3    console.log(`Hello, ${name}!`);
4}
5
6greet();          // Output: "Hello, Guest!"
7greet("Alice");   // Output: "Hello, Alice!"

Noter og begrænsninger

Nullish coalescing assignment-operatoren er meget nyttig, men der er nogle forbehold.

Kun null og undefined er målrettede..

1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)

• Denne operator foretager kun tildeling, når værdien er null eller undefined. For eksempel er værdier som en tom streng (""), 0 eller false ikke målrettede.

Vær forsigtig, når du bruger den med andre operatorer..

 1let value: string | null = null;
 2
 3// Targets not only "null" and "undefined" but also falsy values
 4value ||= "Default";
 5console.log(value);  // Output: "Default"
 6
 7value = "";
 8// An empty string is also targeted
 9value ||= "Default";
10console.log(value);  // Output: "Default"
11
12value = null;
13// Targets only null or undefined
14value ??= "Default";
15console.log(value);  // Output: "Default"

• Nulpunkts-sammenkoblings-tildelingsoperatoren kan give utilsigtede resultater, når den bruges sammen med andre operatorer. Det er særligt vigtigt at forstå forskellen mellem denne og den logiske ELLER-tildelingsoperator.

Eksempelkode

 1let config: { theme?: string; language?: string } = {};
 2
 3// Use Nullish Coalescing Assignment to set default values
 4config.theme ??= "light";
 5config.language ??= "en";
 6
 7console.log(config); // Output: { theme: "light", language: "en" }
 8
 9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]

• Ved at bruge nullish coalescing assignment-operatoren kan du eliminere unødvendig kode og skrive mere flydende og elegant TypeScript-kode.

Sammendrag

Den nullish coalescing-tildelingsoperator (??=) er en af de enkle og effektive tildelingsoperationer i TypeScript. Den er særligt nyttig, når du skal udføre kontrol for null eller undefined, mens du sætter standardværdier. Sammenlignet med traditionelle if-sætninger eller ternære operatorer bliver koden mere kortfattet og læselig.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video