Operator Nullish Coalescing dalam TypeScript

Dalam artikel ini, kami akan menjelaskan Operator Nullish Coalescing dalam TypeScript.

YouTube Video

Operator Nullish Coalescing dalam TypeScript

Operator nullish coalescing (??) dalam TypeScript serupa dengan penilaian short-circuit dalam JavaScript tetapi lebih secara eksplisit digunakan untuk menyediakan nilai pengganti hanya apabila bahagian kiri adalah null atau undefined. Operator ini membolehkan anda dengan mudah memeriksa jika satu nilai adalah null atau undefined dan menetapkan nilai lalai jika diperlukan.

Operator nullish coalescing (??) hanya mengembalikan nilai bahagian kanan apabila bahagian kiri adalah null atau undefined. Ini bermakna nilai seperti false, string kosong, atau nombor 0 tetap tidak berubah. Ini adalah perbezaan besar dari operator OR logik tradisional (||). Operator ini diperkenalkan dalam TypeScript 3.7.

Sintaks Asas

1let result = value ?? defaultValue;

• value: Subjek untuk diperiksa sama ada ia null atau undefined
• defaultValue: Nilai yang dikembalikan jika value adalah null atau undefined

Contoh Penggunaan

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

Di sini, fungsi getUserName mengembalikan "Default User" jika userName adalah null atau undefined, jika tidak ia mengembalikan nilai userName.

Perbezaan daripada operator OR logik

Operator OR logik menganggap nilai seperti false, 0, dan "" (string kosong) sebagai "falsy," sama seperti null dan undefined. Sebaliknya, operator nullish coalescing hanya menggunakan null dan undefined untuk fallback.

Contoh operator OR logik

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

Contoh operator penggabungan nullish

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

Memilih antara operator OR logik dan operator penggabungan nullish bergantung kepada sama ada 0 dan string kosong boleh diterima. Sebagai contoh, jika anda ingin mengekalkan umur pengguna sebagai 0, anda perlu menggunakan operator penggabungan nullish.

Gabungan dengan Jenis

Anda dapat meningkatkan keteguhan kod anda dengan memanfaatkan keselamatan jenis TypeScript dengan gabungan operator nullish coalescing. Dalam contoh berikut, nilai lalai digunakan apabila sifat tertentu adalah null atau 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

• Dalam antara muka User, age adalah number | null, membolehkan null atau undefined sebagai nilai.
• Fungsi displayUserInfo mengembalikan "Anonymous" jika name adalah null atau undefined, dan 18 jika age adalah null atau undefined.

Ringkasan

Operator penggabungan nullish membantu menetapkan nilai default hanya apabila nilainya adalah null atau undefined. Tidak seperti operator OR logik tradisional, ia tidak menganggap false, 0, atau string kosong sebagai "falsy," menjadikannya sangat berguna untuk mengekalkan nilai-nilai ini. Selain itu, menggabungkannya dengan sistem jenis TypeScript membolehkan penghasilan kod yang lebih kukuh dan mudah dibaca.

Dengan menggunakan operator nullish coalescing dengan berkesan, anda boleh menulis logik secara ringkas untuk menetapkan nilai lalai sambil mengurangkan pemeriksaan null yang tidak perlu.

Operator Peruntukan Nullish Coalescing dalam TypeScript

Operator peruntukan nullish coalescing (??=) adalah operator baru yang diperkenalkan dalam TypeScript, menyediakan kaedah yang mudah untuk menetapkan nilai hanya jika pemboleh ubah adalah null atau undefined. Di sini, kami akan menerangkan bagaimana operator ini berfungsi, dalam situasi apa ia berkesan, dan memberikan contoh dengan kod.

Apakah Operator Peruntukan Nullish Coalescing

Operator penugasan penggabungan nullish adalah operator penugasan berdasarkan operator penggabungan nullish. Operator ini digunakan untuk menetapkan nilai baru hanya jika pemboleh ubah adalah null atau 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"

Dengan menggunakan operator ini, anda boleh menulis logik dengan lebih ringkas untuk "menetapkan jika pemboleh ubah adalah undefined atau null".

Perbandingan dengan Kaedah Peruntukan Tradisional

Tanpa operator penugasan penggabungan nullish, anda perlu menggunakan penyataan if atau operator ternari untuk mencapai kelakuan yang sama. Mari bandingkan dengan kaedah peruntukan tradisional.

Kaedah konvensional

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

Kaedah menggunakan operator ternari

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

Kaedah ringkas menggunakan operator ??=

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

Operator penugasan penggabungan nullish jauh lebih mudah dan lebih mudah dibaca berbanding dengan kaedah penugasan lain, meningkatkan kebolehbacaan kod.

Contoh Khusus Penggunaan ??=

Operator penugasan penggabungan nullish berguna dalam pelbagai situasi, seperti menginisialisasi ciri objek dan menetapkan nilai default. Berikut adalah beberapa contoh khusus.

Inisialisasi sifat objek

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

Inisialisasi tatasusunan

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

Menetapkan nilai lalai untuk argumen fungsi

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

Nota dan Kekangan

Operator penugasan penggabungan nullish sangat berguna, tetapi terdapat beberapa peringatan.

• Hanya menyasarkan null dan undefined: Operator ini hanya menetapkan nilai jika nilainya adalah null atau undefined. Sebagai contoh, nilai string kosong (""), 0, dan false tidak disasarkan.

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)

• Menggabungkan dengan operator lain: Menggunakan operator penugasan penggabungan nullish bersama operator lain mungkin menghasilkan hasil yang tidak diingini. Sangat penting untuk memahami perbezaan antara operator ini dan operator penugasan OR logik.

 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"

Contoh Kod

 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]

Dengan menggunakan operator penugasan penggabungan nullish, anda dapat menghapuskan kod yang tidak perlu dan menulis kod TypeScript yang lebih lancar dan elegan.

Ringkasan

Operator penugasan nullish coalescing (??=) adalah salah satu operasi penugasan yang mudah dan efisien dalam TypeScript. Ia menjadi sangat berguna apabila anda perlu melakukan pemeriksaan terhadap null atau undefined semasa menetapkan nilai lalai. Berbanding dengan pernyataan if tradisional atau operator ternary, ia menjadikan kod lebih ringkas dan mudah dibaca, serta patut digunakan secara aktif dalam pembangunan masa depan.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video