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 betyr at verdier som false, en tom streng eller tallet 0 forblir uendret. Dette er en vesentlig forskjell fra den tradisjonelle logiske OR-operatøren (||). Denne operatøren ble introdusert i TypeScript 3.7.

Grunnleggende Syntax

1let result = value ?? defaultValue;

• verdi: Emnet som skal sjekkes om det er null eller undefined
• standardVerdi: Verdien som returneres hvis verdi 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

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

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

Valget mellom den logiske OR-operatøren og den nullaktige sammenslåingsoperatøren avhenger av om 0 og tomme strenger er akseptable. 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 ?? "Anonymous";
 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 er age number | null, som tillater null eller undefined som verdi.
• Funksjonen displayUserInfo returnerer "Anonymous" hvis name er null eller undefined, og 18 hvis age er null eller undefined.

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 OR-operatøren, behandler den ikke false, 0 eller tomme strenger som «usanne», noe som gjør den spesielt nyttig for å 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, so the new value is assigned
3console.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

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

Metode som bruker den ternære operatoren

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

Konsis metode som bruker ??=-operatoren

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

Den nullaktige sammenslåingstilordningsoperatøren er 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.

• Kun målrettet mot null og undefined: Denne operatoren tilordner bare hvis verdien er null eller undefined. For eksempel blir ikke tomme strenger (""), 0 og false målrettet.

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)

• Kombinering med andre operatører: Bruk av den nullaktige sammenslåingstilordningsoperatøren med andre operatører kan føre til utilsiktede resultater. Det er spesielt viktig å forstå forskjellen mellom den og den logiske OR-tilordningsoperatøren.

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

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 gjør den koden mer kortfattet og lesbar, og bør aktivt brukes i fremtidig utvikling.

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