Nullish-sammenslåingsoperatøren i TypeScript

I denne artikkelen vil vi forklare nullish-sammenslåingsoperatøren i TypeScript.

YouTube Video

Nullish-sammenslåingsoperatøren i TypeScript

Nullish-sammenslåingsoperatøren (??) i TypeScript ligner på JavaScripts kortslutningsevaluering, men brukes mer eksplisitt for å gi en reserveverdi kun når venstre side er null eller undefined. Denne operatøren lar deg enkelt sjekke om en verdi er null eller undefined og angi en standardverdi etter behov.

Nullish-sammenslåingsoperatøren (??) returnerer høyresideverdien kun hvis venstresiden er null eller undefined. Dette gjør det mulig å evaluere verdier som false, en tom streng eller tallet 0 som de er. Dette er en vesentlig forskjell fra den tradisjonelle logiske OR-operatøren (||). Denne operatøren ble introdusert i TypeScript 3.7.

Grunnleggende Syntax

Den grunnleggende syntaksen er som følger:.

1let result = value ?? defaultValue;

• value er målet som sjekkes for null eller undefined.
• defaultValue er verdien som returneres når value er null eller undefined.

Eksempel på bruk

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 funksjonen getUserName "Default User" hvis userName er null eller undefined, ellers returnerer den verdien av userName.

Forskjellen fra den logiske OR-operatøren

Det er en viktig forskjell mellom nullish coalescing-operatoren og den logiske ELLER-operatoren. Den logiske OR-operatøren behandler verdier som false, 0 og "" (tom streng) som «usanne», på samme måte som null og undefined. På den andre siden bruker nullish-sammenslåingsoperatøren kun null og undefined som reserve.

Eksempel på den logiske OR-operatøren

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-operatoren standardverdien 18 selv når verdien er 0.

Eksempel på den nullaktige sammenslåingsoperatøren

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 annen side, returnerer nullish coalescing-operatoren den opprinnelige verdien selv når den er 0.

• Valget mellom den logiske ELLER-operatoren og nullish coalescing-operatoren avhenger av om 0 eller en tom streng er akseptabelt. For eksempel, hvis du vil beholde en brukers alder som 0, må du bruke den nullaktige sammenslåingsoperatøren.

Kombinasjon med typer

Du kan forbedre påliteligheten av koden din ved å bruke TypeScripts typesikkerhet i kombinasjon med nullish-sammenslåingsoperatøren. I det følgende eksemplet brukes standardverdier når enkelte egenskaper 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-grensesnittet kan age-egenskapen være et number, null eller undefined, så nullish coalescing-operatoren brukes til å tilordne en standardverdi på 18.
• I mellomtiden tillater name-egenskapen kun string, så verdien brukes som den er.

Sammendrag

• Den nullaktige sammenslåingsoperatøren hjelper til med å sette en standardverdi bare når verdien er null eller undefined. I motsetning til den tradisjonelle logiske ELLER-operatoren behandler den ikke false, 0 eller tomme strenger som 'falsy', noe som gjør den spesielt nyttig når du ønsker å bevare disse verdiene. I tillegg, ved å kombinere den med TypeScripts typesystem, kan du lage mer robust og leselig kode.
• Ved å effektivt bruke nullish-coalescing-operatoren kan du skrive logikk for å sette standardverdier på en konsis måte samtidig som du reduserer unødvendige null-sjekker.

Nullish-coalescing tildelingsoperator i TypeScript

Nullish-coalescing tildelingsoperatoren (??=) er en relativt ny operator introdusert i TypeScript, som gir en praktisk metode for å tilordne en verdi bare hvis variabelen er null eller undefined. Her forklarer vi hvordan denne operatoren fungerer, i hvilke situasjoner den er effektiv, og gir eksempler med kode.

Hva er nullish-coalescing tildelingsoperatoren

Den nullaktige sammenslåingstilordningsoperatøren er en tilordningsoperatør basert på den nullaktige sammenslåingsoperatøren. Denne operatoren brukes til å tilordne en ny verdi bare hvis variabelen 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 å bruke denne operatoren kan du skrive logikken "tilordne hvis variabelen er undefined eller null" på en mer konsis måte.

Sammenligning med tradisjonelle tildelingsmetoder

Uten den nullaktige sammenslåingstilordningsoperatøren, må du bruke en if-setning eller en ternær operatør for å oppnå samme oppførsel. La oss sammenligne med de tradisjonelle tildelingsmetodene.

Konvensjonell metode

Ved å bruke en if-setning, 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 som bruker den ternære operatoren

Alternativt, ved bruk av den ternære operatoren, kan det 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 som bruker nullish coalescing-tilordningsoperatoren

På den annen side, ved bruk av nullish coalescing-tilordningsoperatoren, kan det skrives slik:.

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

Som vist er nullish coalescing-tilordningsoperatoren mye enklere og mer lesbar sammenlignet med andre tilordningsmetoder, noe som forbedrer kodeforståelsen.

Spesifikke eksempler på bruk av ??=

Den nullaktige sammenslåingstilordningsoperatøren er nyttig i ulike situasjoner, som for eksempel å initialisere objektattributter og sette standardverdier. Her er noen spesifikke eksempler.

Initialisering av objektets egenskaper

 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 av matriser

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

Sette standardverdier for funksjonsargumenter

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!"

Notater og begrensninger

Den nullaktige sammenslåingstilordningsoperatøren er svært nyttig, men det finnes noen forbehold.

Bare null og undefined blir behandlet..

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 operatoren utfører tilordning bare når verdien er null eller undefined. For eksempel, verdier som en tom streng (""), 0, eller false blir ikke behandlet.

Vær forsiktig når du bruker 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"

• Nullish coalescing-tilordningsoperatoren kan gi utilsiktede resultater når den brukes med andre operatorer. Det er spesielt viktig å forstå forskjellen mellom den og den logiske OR-tilordningsoperatøren.

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 å bruke den nullaktige sammenslåingstilordningsoperatøren, kan du eliminere unødvendig kode og skrive smidigere og mer elegant TypeScript-kode.

Sammendrag

Den nullish coalescing-tilordningsoperatoren (??=) er en av de enkle og effektive tilordningsoperasjonene i TypeScript. Den er spesielt nyttig når du må utføre sjekker for null eller undefined samtidig som du angir standardverdier. Sammenlignet med tradisjonelle if-setninger eller ternære operatorer, blir koden mer kortfattet og lesbar.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video