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. Ibig sabihin, ang mga value gaya ng false, walang laman na string, o numero 0 ay nananatili sa kanilang orihinal na anyo. 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

1let result = value ?? defaultValue;

• value: Ang subject na susuriin kung ito ay null o undefined
• defaultValue: Ang halaga na ibinabalik kung 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

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

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

Ang pagpili sa pagitan ng logical OR operator at nullish coalescing operator ay nakasalalay kung ang 0 at 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 ?? "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

• Sa interface ng User, ang age ay number | null, na nagpapahintulot sa null o undefined bilang halaga nito.
• Ang function na displayUserInfo ay nagbabalik ng "Anonymous" kung ang name ay null o undefined, at 18 kung ang age ay null o undefined.

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 itinuturing ang false, 0, o walang laman na mga string bilang "falsy," kaya't ito ay kapaki-pakinabang lalo upang mapanatili ang mga halagang ito. 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, so the new value is assigned
3console.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

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

Paraan gamit ang ternary operator

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

Maikling paraan gamit ang ??= operator

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

Ang nullish coalescing assignment operator ay mas simple at mas madaling basahin kumpara sa ibang paraan ng assignment, na nagpapabuti ng kaayusan 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 tumutukoy sa null at undefined: Ina-assign lamang ng operator na ito kung ang halaga ay null o undefined. Halimbawa, hindi tinatarget ang mga walang laman na string (""), 0, at 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)

• Pagsasama sa iba pang operator: Ang paggamit ng nullish coalescing assignment operator kasama ang ibang mga operator ay maaaring magdulot ng hindi inaasahang resulta. Mahalagang maunawaan ang pagkakaiba nito sa logical OR assignment operator.

 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"

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 mga tradisyunal na pahayag na if o ternary operator, ginagawa nitong mas maikli at madaling basahin ang code, kaya dapat itong aktibong gamitin sa mga darating na development.

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