Toán tử Nullish Coalescing trong TypeScript

Toán tử Nullish Coalescing trong TypeScript

Trong bài viết này, chúng ta sẽ giải thích về toán tử Nullish Coalescing trong TypeScript.

YouTube Video

Toán tử Nullish Coalescing trong TypeScript

Toán tử nullish coalescing (??) trong TypeScript tương tự như đánh giá ngắn mạch của JavaScript nhưng được sử dụng rõ ràng hơn để cung cấp giá trị thay thế chỉ khi giá trị bên trái là null hoặc undefined. Toán tử này cho phép bạn dễ dàng kiểm tra xem một giá trị có phải là null hoặc undefined hay không và đặt một giá trị mặc định nếu cần.

Toán tử nullish coalescing (??) sẽ trả lại giá trị bên phải chỉ khi giá trị bên trái là null hoặc undefined. Điều này cho phép các giá trị như false, một chuỗi rỗng hoặc số 0 được đánh giá đúng như chúng là. Điều này là một sự khác biệt lớn so với toán tử OR logic truyền thống (||). Toán tử này được giới thiệu trong TypeScript 3.7.

Cú pháp Cơ bản

Cú pháp cơ bản như sau:.

1let result = value ?? defaultValue;
  • value là giá trị mục tiêu được kiểm tra để xem có phải là null hoặc undefined không.
  • defaultValue là giá trị được trả về khi valuenull hoặc undefined.

Ví dụ sử dụng

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

Ở đây, hàm getUserName trả về "Default User" nếu userNamenull hoặc undefined, nếu không sẽ trả về giá trị của userName.

Sự khác biệt so với toán tử OR logic

Có một sự khác biệt quan trọng giữa toán tử hợp nhất nullish và toán tử HOẶC logic. Toán tử OR logic coi các giá trị như false, 0, và "" (chuỗi rỗng) là "falsy", cũng giống như nullundefined. Ngược lại, toán tử nullish coalescing chỉ sử dụng nullundefined để thay thế.

Ví dụ về toán tử OR logic

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
  • Như được hiển thị, toán tử HOẶC logic trả về giá trị mặc định là 18 ngay cả khi giá trị là 0.

Ví dụ về toán tử nullish coalescing

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
  • Mặt khác, toán tử hợp nhất nullish trả về giá trị gốc ngay cả khi nó là 0.

  • Sự lựa chọn giữa toán tử HOẶC logic và toán tử hợp nhất nullish phụ thuộc vào việc 0 hoặc chuỗi rỗng có được chấp nhận hay không. Ví dụ, nếu bạn muốn giữ tuổi của người dùng là 0, bạn cần sử dụng toán tử nullish coalescing.

Kết hợp với kiểu dữ liệu

Bạn có thể tăng cường tính ổn định của mã bằng cách tận dụng tính an toàn kiểu dữ liệu của TypeScript kết hợp với toán tử nullish coalescing. Trong ví dụ sau, các giá trị mặc định được sử dụng khi một số thuộc tính là null hoặc 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
  • Trong giao diện User, thuộc tính age có thể là một số, null hoặc undefined, vì vậy toán tử hợp nhất nullish được sử dụng để gán giá trị mặc định là 18.
  • Trong khi đó, thuộc tính name chỉ cho phép string, nên giá trị được sử dụng như nó là.

Tóm tắt

  • Toán tử nullish coalescing giúp thiết lập giá trị mặc định chỉ khi giá trị là null hoặc undefined. Không giống như toán tử HOẶC logic truyền thống, nó không coi false, 0 hoặc chuỗi rỗng là 'falsy', làm cho nó đặc biệt hữu ích khi bạn muốn giữ nguyên các giá trị đó. Ngoài ra, việc kết hợp nó với hệ thống kiểu của TypeScript cho phép tạo ra mã nguồn mạnh mẽ và dễ đọc hơn.
  • Bằng cách sử dụng hiệu quả toán tử gộp null, bạn có thể viết ngắn gọn logic để đặt giá trị mặc định trong khi giảm bớt các kiểm tra null không cần thiết.

Toán tử gán gộp null trong TypeScript

Toán tử gán gộp null (??=) là một toán tử tương đối mới được giới thiệu trong TypeScript, cung cấp một phương pháp tiện lợi để gán giá trị chỉ khi biến là null hoặc undefined. Ở đây, chúng tôi sẽ giải thích cách hoạt động của toán tử này, những tình huống mà nó hiệu quả, và cung cấp các ví dụ kèm theo mã lệnh.

Toán tử gán gộp null là gì?

Toán tử gán nullish coalescing là một toán tử gán dựa trên toán tử nullish coalescing. Toán tử này được sử dụng để gán một giá trị mới chỉ khi biến là null hoặc 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"

Bằng cách sử dụng toán tử này, bạn có thể viết ngắn gọn hơn logic "gán nếu biến là undefined hoặc null".

So sánh với các phương pháp gán giá trị truyền thống

Nếu không có toán tử gán nullish coalescing, bạn sẽ cần sử dụng câu lệnh if hoặc toán tử ba ngôi để đạt được hành vi tương tự. Hãy so sánh với các phương pháp gán giá trị truyền thống.

Phương pháp thông thường

Sử dụng một câu lệnh if, nó có thể được viết như sau:.

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

Phương pháp sử dụng toán tử ba ngôi

Ngoài ra, sử dụng toán tử ba ngôi, nó có thể được viết như sau:.

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"

Phương pháp súc tích sử dụng toán tử gán hợp nhất nullish

Mặt khác, sử dụng toán tử gán hợp nhất nullish, nó có thể được viết như sau:.

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

Như đã được hiển thị, toán tử gán hợp nhất nullish đơn giản hơn nhiều và dễ đọc hơn so với các phương pháp gán khác, cải thiện tính rõ ràng của mã.

Các ví dụ cụ thể về việc sử dụng ??=

Toán tử gán nullish coalescing hữu ích trong nhiều trường hợp khác nhau, chẳng hạn như khởi tạo thuộc tính đối tượng và đặt giá trị mặc định. Dưới đây là một số ví dụ cụ thể.

Khởi tạo các thuộc tính của đối tượng

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

Khởi tạo các mảng

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

Thiết lập giá trị mặc định cho các tham số hàm

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

Lưu ý và ràng buộc

Toán tử gán nullish coalescing rất hữu ích, nhưng cũng có một số lưu ý cần chú ý.

Chỉ các giá trị nullundefined được nhắm đến..

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)
  • Toán tử này chỉ thực hiện gán giá trị khi giá trị là null hoặc undefined. Ví dụ, các giá trị như chuỗi rỗng (""), 0, hoặc false không nằm trong mục tiêu.

Hãy cẩn thận khi sử dụng nó với các toán tử khác..

 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"
  • Toán tử gán hợp nhất nullish có thể gây ra các kết quả không mong muốn khi được sử dụng với các toán tử khác. Điều quan trọng là cần hiểu sự khác biệt giữa toán tử này và toán tử gán OR logic.

Mã mẫu

 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]
  • Bằng cách sử dụng toán tử gán nullish coalescing, bạn có thể loại bỏ mã không cần thiết và viết mã TypeScript mượt mà, tinh tế hơn.

Tóm tắt

Toán tử gán hợp nhất nullish (??=) là một trong những phép gán đơn giản và hiệu quả trong TypeScript. Nó đặc biệt hữu ích khi bạn cần kiểm tra null hoặc undefined trong khi thiết lập các giá trị mặc định. So với các câu lệnh if truyền thống hoặc các toán tử ba ngôi, mã trở nên ngắn gọn và dễ đọc hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video