Nullish Coalescing Operator sa TypeScript

Sa artikulong ito, ipapaliwanag namin ang Nullish Coalescing Operator sa TypeScript.

YouTube Video

Nullish Coalescing Operator sa TypeScript

Ang nullish coalescing operator (??) sa TypeScript ay katulad ng short-circuit evaluation sa JavaScript ngunit mas malinaw na ginagamit upang magbigay ng fallback value kapag ang kaliwang bahagi ay null o undefined. Pinapayagan ka ng operator na ito na madaling suriin kung ang isang halaga ay null o undefined at magtakda ng default na halaga kung kinakailangan.

Ang nullish coalescing operator (??) ay ibinabalik ang halaga sa kanan lamang kung ang kaliwang bahagi ay null o undefined. Pinahihintulutan nito ang mga halaga tulad ng false, isang walang laman na string, o ang bilang na 0 na masuri ayon sa pagkakalahad nito. Ito ay isang malaking pagkakaiba mula sa tradisyonal na operator ng logical OR (||). Ang operator na ito ay ipinakilala sa TypeScript 3.7.

Pangunahing Syntax

Ang pangunahing syntax ay ang mga sumusunod:.

1let result = value ?? defaultValue;

• Ang value ay ang target na sinusuri kung null o undefined.
• Ang defaultValue ay ang halagang ibinabalik kapag ang value ay null o undefined.

Halimbawa ng Paggamit

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

Dito, ang function na getUserName ay nagbabalik ng "Default User" kung ang userName ay null o undefined, kung hindi naman, ibinabalik nito ang halaga ng userName.

Pagkakaiba mula sa logical OR operator

Mayroong mahalagang pagkakaiba sa pagitan ng nullish coalescing operator at ng logical OR operator. Ang logical OR operator ay itinuturing ang mga halaga tulad ng false, 0, at "" (walang laman na string) bilang "falsy," tulad ng null at undefined. Sa kabilang banda, ang nullish coalescing operator ay gumagamit lamang ng null at undefined bilang fallback.

Halimbawa ng logical OR 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

• Gaya ng ipinakita, ang logical OR operator ay ibinabalik ang default na halaga na 18 kahit na ang halaga ay 0.

Halimbawa ng nullish coalescing operator

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

• Sa kabilang banda, ibinabalik ng nullish coalescing operator ang orihinal na halaga kahit na ito ay 0.

• Ang pagpili sa pagitan ng logical OR operator at ng nullish coalescing operator ay nakadepende kung ang 0 o isang walang laman na string ay tinatanggap. Halimbawa, kung nais mong panatilihin ang edad ng isang gumagamit bilang 0, kailangan mong gumamit ng nullish coalescing operator.

Pagsasama sa Mga Uri (Types)

Mapapalakas mo ang tibay ng iyong code sa pamamagitan ng paggamit ng type safety ng TypeScript kasama ng nullish coalescing operator. Sa sumusunod na halimbawa, ginagamit ang default na mga halaga kapag ang ilang mga katangian ay null o 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

• Sa User interface, ang age property ay maaaring isang number, null, o undefined, kaya ang nullish coalescing operator ay ginagamit upang magtalaga ng default na halagang 18.
• Samantala, ang name property ay nagpapahintulot lamang ng string, kaya ang halaga ay ginagamit na ayon sa eksaktong ibinigay.

Buod

• Ang nullish coalescing operator ay tumutulong magtakda ng default na halaga kapag ang halaga lamang ay null o undefined. Hindi tulad ng tradisyonal na logical OR operator, hindi nito tinitingnan ang false, 0, o walang laman na string bilang 'falsy', ginagawa itong talagang kapaki-pakinabang kapag nais mong panatilihin ang mga halagang iyon. Bukod pa rito, ang pagsasama nito sa type system ng TypeScript ay nagbibigay-daan sa paggawa ng mas matatag at madaling basahin na code.
• Sa pamamagitan ng epektibong paggamit ng nullish coalescing operator, maaari kang sumulat ng pinaikli ngunit malinaw na lohika para sa pagpapalagay ng default na mga halaga at mabawasan ang di-kailangang mga pagsusuri sa null.

Nullish Coalescing Assignment Operator sa TypeScript

Ang nullish coalescing assignment operator (??=) ay isang bagong operator na ipinakilala sa TypeScript, na nagbibigay ng maginhawang paraan upang magtalaga ng halaga lamang kung ang variable ay null o undefined. Dito, ipapaliwanag namin kung paano gumagana ang operator na ito, sa anong mga sitwasyon ito epektibo, at magbibigay ng mga halimbawa gamit ang code.

Ano ang Nullish Coalescing Assignment Operator

Ang nullish coalescing assignment operator ay isang assignment operator batay sa nullish coalescing operator. Ang operator na ito ay ginagamit upang magtalaga ng bagong halaga lamang kung ang variable ay null o 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"

Sa paggamit ng operator na ito, maaari mong isulat ng mas maikli ang lohika ng "magtipa kung ang variable ay undefined o null".

Paghahambing sa Tradisyunal na Paraan ng Pagtatalaga

Kung walang nullish coalescing assignment operator, kailangang gumamit ng if na pahayag o ternary operator upang makamit ang parehong pagkilos. Ikumpara natin sa tradisyunal na mga paraan ng pagtatalaga.

Pamantayang paraan

Kapag ginamit ang isang if na pahayag, maaari itong isulat sa ganitong paraan:.

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

Paraan gamit ang ternary operator

Bilang alternatibo, gamit ang ternary operator, maaari itong isulat sa ganitong paraan:.

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"

Isang maikling paraan gamit ang nullish coalescing assignment operator

Sa kabilang banda, gamit ang nullish coalescing assignment operator, maaari itong isulat ng ganito:.

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

Gaya ng ipinakita, ang nullish coalescing assignment operator ay mas simple at mas madaling basahin kumpara sa ibang mga paraan ng pagtatakda, na nagpapabuti sa kalinawan ng code.

Tiyak na Mga Halimbawa ng Paggamit ng ??=

Ang nullish coalescing assignment operator ay kapaki-pakinabang sa iba't ibang sitwasyon, tulad ng pag-i-initialize ng mga katangian ng object at pagtatakda ng default na mga halaga. Narito ang ilang mga tiyak na halimbawa.

Inisyal na pagsasaayos ng mga katangian ng object

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

Inisyal na pagsasaayos ng mga array

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

Pag-set ng mga default na halaga para sa mga argumento ng function

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

Mga Tala at Limitasyon

Ang nullish coalescing assignment operator ay napaka-kapaki-pakinabang, ngunit may ilang mga babala.

Tanging null at undefined lamang ang tinatarget..

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)

• Ang operator na ito ay nagsasagawa ng pagtatakda lamang kapag ang halaga ay null o undefined. Halimbawa, ang mga halaga tulad ng walang laman na string (""), 0, o false ay hindi tinatarget.

Mag-ingat kapag ginagamit ito kasama ng ibang mga operator..

 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"

• Ang nullish coalescing assignment operator ay maaaring magdulot ng hindi inaasahang resulta kapag ginamit sa ibang mga operator. Mahalagang maunawaan ang pagkakaiba nito sa logical OR assignment operator.

Halimbawang Kodigo

 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]

• Sa pamamagitan ng paggamit ng nullish coalescing assignment operator, maaalis mo ang hindi kinakailangang code at makakagawa ng mas maayos at elegante na TypeScript code.

Buod

Ang nullish coalescing assignment operator (??=) ay isa sa mga pinakasimple at epektibong assignment operation sa TypeScript. Ito ay lalo na kapaki-pakinabang kapag kailangang mag-check para sa null o undefined habang nagseset ng mga default value. Kung ihahambing sa tradisyonal na if na pahayag o ternary operator, ang code ay nagiging mas maikli at madaling basahin.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video