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 betyder, at værdier som false, en tom streng eller tallet 0 forbliver uændrede. Dette er en væsentlig forskel fra den traditionelle logiske ELLER-operator (||). Denne operator blev introduceret i TypeScript 3.7.

Grundlæggende syntaks

1let result = value ?? defaultValue;

• value: Emnet, der skal kontrolleres for, om det er null eller undefined
• defaultValue: Værdien, der returneres, hvis 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

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

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

Valget mellem den logiske ELLER-operator og nullish coalescing-operatoren afhænger af, om 0 og tomme strenge er acceptable. 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 ?? "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-interfacet er age number | null, hvilket tillader null eller undefined som dens værdi.
• Funktionen displayUserInfo returnerer "Anonymous", hvis name er null eller undefined, og 18, hvis age er null eller undefined.

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 "falske", hvilket gør den særligt nyttig til at 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, so the new value is assigned
3console.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

1let variable: string | null = 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

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

Konkis metode ved brug af ??= operatoren

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

Nullish coalescing assignment-operatoren er meget enklere og mere læsbar sammenlignet med andre tildelelsesmetoder, hvilket forbedrer kodelæsbarheden.

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 målretter null og undefined: Denne operator tildeler kun, hvis værdien er null eller undefined. For eksempel er tomme strenge (""), 0 og false ikke 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)

• Kombination med andre operatorer: Brug af nullish coalescing assignment-operatoren sammen med andre operatorer kan føre til utilsigtede resultater. Det er særligt vigtigt at forstå forskellen mellem denne og den logiske ELLER-tildelingsoperator.

 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 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-udsagn eller ternære operatorer gør den koden mere kortfattet og læsbar og bør anvendes aktivt i fremtidig udvikling.

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