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 tillåter att värden som false, en tom sträng eller talet 0 utvärderas som de är. Detta är en stor skillnad från den traditionella logiska ELLER-operatören (||). Denna operator introducerades i TypeScript 3.7.

Grundläggande syntax

Den grundläggande syntaxen är följande:.

1let result = value ?? defaultValue;

• value är målet som kontrolleras för null eller undefined.
• defaultValue är värdet som returneras när 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

Det finns en viktig skillnad mellan nullish coalescing-operatorn och den logiska ELLER-operatorn. 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

• Som visas returnerar den logiska ELLER-operatorn standardvärdet 18 även när värdet är 0.

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

• Å andra sidan returnerar nullish coalescing-operatorn det ursprungliga värdet även när det är 0.

• Valet mellan den logiska ELLER-operatorn och nullish coalescing-operatorn beror på om 0 eller en tom sträng är acceptabelt. 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;
 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 kan egenskapen age vara ett nummer, null eller undefined, så nullish coalescing-operatorn används för att tilldela ett standardvärde på 18.
• Under tiden tillåter egenskapen name endast string, så värdet används som det är.

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-operatorn behandlar den inte false, 0 eller tomma strängar som 'falsy', vilket gör den särskilt användbar när du vill behålla 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,
3                              // so the new value is assigned
4
5console.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

Med hjälp av ett if-uttalande kan det skrivas enligt följande:.

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

Metod som använder ternär operator

Alternativt kan det skrivas med hjälp av den ternära operatorn enligt följande:.

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 koncis metod som använder nullish coalescing-tilldelningsoperatorn

Å andra sidan, med hjälp av nullish coalescing-tilldelningsoperatorn, kan det skrivas så här:.

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

Som visas är nullish coalescing-tilldelningsoperatorn mycket enklare och mer läsbar jämfört med andra tilldelningsmetoder, vilket förbättrar kodens tydlighet.

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 null och undefined är målet..

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)

• Denna operator utför tilldelning endast när värdet är null eller undefined. Till exempel är värden som en tom sträng (""), 0 eller false inte målet.

Var försiktig när du använder den med andra 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-tilldelningsoperatorn kan ge oavsiktliga resultat när den används med andra operatorer. Det är särskilt viktigt att förstå skillnaden mellan den och den logiska ELLER-tilldelningsoperatören.

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-uttalanden eller ternära operatorer blir koden mer koncis och läsbar.

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