Nullish-sammanslagning-operator i TypeScript

I denna artikel kommer vi att förklara Nullish-sammanslagning-operator i TypeScript.

YouTube Video

Nullish-sammanslagning-operator i TypeScript

Nullish-sammanslagning-operatorn (??) i TypeScript liknar JavaScripts short-circuit-utvärdering men används mer explicit för att tillhandahålla ett fallback-värde endast när vänstra sidan är null eller undefined. Denna operator låter dig enkelt kontrollera om ett värde är null eller undefined och ställa in ett standardvärde vid behov.

Nullish-sammanslagning-operatorn (??) returnerar det högra värdet endast om vänstra sidan är null eller undefined. Detta betyder att värden som false, en tom sträng eller siffran 0 förblir oförändrade. Detta är en stor skillnad från den traditionella logiska ELLER-operatören (||). Denna operator introducerades i TypeScript 3.7.

Grundläggande syntax

1let result = value ?? defaultValue;

• value: Ämnet att kontrollera om det är null eller undefined
• defaultValue: Värdet som returneras om value är null eller undefined

Exempel på användning

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

Här returnerar funktionen getUserName "Standardanvändare" om userName är null eller undefined, annars returnerar den värdet av userName.

Skillnad från den logiska ELLER-operatören

Den logiska ELLER-operatören behandlar värden som false, 0 och "" (tom sträng) som "falska," precis som null och undefined. Å andra sidan använder nullish-sammanslagning-operatorn endast null och undefined som fallback.

Exempel på den logiska ELLER-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

Exempel på den nullish sammanslående operatö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

Att välja mellan den logiska ELLER-operatören och den nullish sammanslående operatören beror på om 0 och tomma strängar är acceptabla. Till exempel, om du vill behålla en användares ålder som 0, måste du använda den nullish sammanslående operatören.

Kombination med typer

Du kan förbättra robustheten i din kod genom att utnyttja TypeScripts typsäkerhet i kombination med nullish-sammanslagning-operatorn. I följande exempel används standardvärden när vissa egenskaper är 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-gränssnittet är age number | null, vilket tillåter null eller undefined som sitt värde.
• Funktionen displayUserInfo returnerar "Anonym" om name är null eller undefined, och 18 om age är null eller undefined.

Sammanfattning

Den nullish sammanslående operatören hjälper till att sätta ett standardvärde endast när värdet är null eller undefined. Till skillnad från den traditionella logiska ELLER-operatören behandlar den inte false, 0 eller tomma strängar som "falska," vilket gör den särskilt användbar för att bevara dessa värden. Dessutom möjliggör kombinationen med TypeScripts typsystem skapandet av robustare och mer lättlästa kod.

Genom att effektivt använda operatorn för nullsammanfogning kan du på ett koncist sätt skriva logik för att sätta standardvärden samtidigt som du minskar onödiga null-kontroller.

Nullsammanfogande tilldelningsoperator i TypeScript

Den nullsammanfogande tilldelningsoperatorn (??=) är en relativt ny operator som introducerats i TypeScript och som erbjuder ett bekvämt sätt att tilldela ett värde endast om variabeln är null eller undefined. Här förklarar vi hur denna operator fungerar, i vilka situationer den är effektiv samt ger exempel med kod.

Vad är den nullsammanfogande tilldelningsoperatorn

Den nullish sammanslående tilldelningsoperatören är en tilldelningsoperatör baserad på den nullish sammanslående operatören. Denna operator används för att tilldela ett nytt värde endast om variabeln är 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"

Genom att använda denna operator kan du skriva logiken "tilldela om variabeln är undefined eller null" mer koncist.

Jämförelse med traditionella tilldelningsmetoder

Utan den nullish sammanslående tilldelningsoperatören skulle du behöva använda en if-sats eller en ternär operator för att uppnå samma beteende. Låt oss jämföra med de traditionella tilldelningsmetoderna.

Konventionell metod

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

Metod som använder ternär operator

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

Kompakt metod som använder ??=-operatorn

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

Den nullish sammanslående tilldelningsoperatören är mycket enklare och mer läsbar jämfört med andra tilldelningsmetoder, vilket förbättrar kodens läsbarhet.

Specifika exempel på användning av ??=

Den nullish sammanslående tilldelningsoperatören är användbar i olika scenarier, såsom initialisering av objektets egenskaper och inställning av standardvärden. Här är några specifika exempel.

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 arrayer

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

Sätta standardvärden för funktionsargument

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

Anteckningar och begränsningar

Den nullish sammanslående tilldelningsoperatören är mycket användbar, men det finns vissa begränsningar.

• Endast riktar mot null och undefined: Denna operator tilldelar endast om värdet är null eller undefined. Till exempel riktar den sig inte mot tomma strängar (""), 0, och false.

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)

• Kombinera med andra operatörer: Att använda den nullish sammanslående tilldelningsoperatören med andra operatörer kan leda till oavsiktliga resultat. Det är särskilt viktigt att förstå skillnaden mellan den och den logiska ELLER-tilldelningsoperatö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"

Exempelkod

 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]

Genom att använda den nullish sammanslående tilldelningsoperatören kan du eliminera onödig kod och skriva smidigare, mer elegant TypeScript-kod.

Sammanfattning

Nullish coalescing-tilldelningsoperatorn (??=) är en av de enkla och effektiva tilldelningsoperationerna i TypeScript. Den är särskilt användbar när du behöver kontrollera null eller undefined samtidigt som du ställer in standardvärden. Jämfört med traditionella if-satser eller ternära operatorer gör den koden mer koncis och läsbar, och bör aktivt användas i framtida utveckling.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video