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 membolehkan nilai seperti false, rentetan kosong, atau nombor 0 dinilai seperti apa adanya. Ini adalah perbezaan besar dari operator OR logik tradisional (||). Operator ini diperkenalkan dalam TypeScript 3.7.

Sintaks Asas

Sintaks asas adalah seperti berikut:.

1let result = value ?? defaultValue;

• value adalah sasaran yang diperiksa untuk null atau undefined.
• defaultValue adalah nilai yang dikembalikan apabila 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

Terdapat perbezaan penting antara operator nullish coalescing dan 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

• Seperti yang ditunjukkan, operator OR logik mengembalikan nilai lalai 18 walaupun nilai itu adalah 0.

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

• Sebaliknya, operator nullish coalescing mengembalikan nilai asal walaupun ia adalah 0.

• Pilihan antara operator OR logik dan operator nullish coalescing bergantung pada sama ada 0 atau rentetan 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;
 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, sifat age boleh menjadi number, null, atau undefined, jadi operator nullish coalescing digunakan untuk menetapkan nilai lalai 18.
• Sementara itu, sifat name hanya membenarkan string, jadi nilainya digunakan seperti apa adanya.

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 rentetan kosong sebagai 'falsy', menjadikannya sangat berguna apabila anda ingin mengekalkan nilai tersebut. 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,
3                              // so the new value is assigned
4
5console.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

Menggunakan pernyataan if, ia boleh ditulis seperti berikut:.

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

Kaedah menggunakan operator ternari

Sebagai alternatif, menggunakan operator ternary, ia boleh ditulis seperti berikut:.

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"

Kaedah ringkas menggunakan operator penugasan nullish coalescing

Sebaliknya, menggunakan operator penugasan nullish coalescing, ia boleh ditulis seperti berikut:.

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

Seperti yang ditunjukkan, operator penugasan nullish coalescing adalah lebih mudah dan lebih mudah dibaca berbanding kaedah penugasan yang lain, meningkatkan kejelasan 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 null dan undefined yang 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)

• Operator ini melakukan penugasan hanya apabila nilai adalah null atau undefined. Sebagai contoh, nilai seperti rentetan kosong (""), 0, atau false tidak disasarkan.

Berhati-hati ketika menggunakannya dengan operator lain..

 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"

• Operator penugasan nullish coalescing mungkin menghasilkan keputusan yang tidak diingini apabila digunakan dengan operator lain. Sangat penting untuk memahami perbezaan antara operator ini dan operator penugasan OR logik.

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, kod menjadi lebih ringkas dan mudah dibaca.

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

YouTube Video