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 có nghĩa là các giá trị như false, chuỗi rỗng hoặc số 0 sẽ không bị thay đổi. Đ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

1let result = value ?? defaultValue;

• value: Giá trị cần kiểm tra xem có phải là null hoặc undefined hay không
• defaultValue: Giá trị sẽ được trả về nếu value là null 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 userName là null 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

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ư null và undefined. Ngược lại, toán tử nullish coalescing chỉ sử dụng null và undefined để 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

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

Việc lựa chọn giữa toán tử OR logic và toán tử nullish coalescing phụ thuộc vào việc 0 và 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 ?? "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

• Trong giao diện User, age là number | null, cho phép giá trị là null hoặc undefined.
• Hàm displayUserInfo trả về "Anonymous" nếu name là null hoặc undefined, và trả về 18 nếu age là null hoặc undefined.

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ử OR logic truyền thống, nó không coi false, 0, hoặc chuỗi rỗng là "falsy", làm cho toán tử này đặc biệt hữu ích để bảo toàn các giá trị này. 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, so the new value is assigned
3console.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

1let variable: string | null = 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

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

Phương pháp ngắn gọn sử dụng toán tử ??=

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

Toán tử gán nullish coalescing đơ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 khả năng đọc 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ỉ nhắm mục tiêu null và undefined: Toán tử này chỉ gán nếu giá trị là null hoặc undefined. Ví dụ, chuỗi rỗng (""), 0, và false không được nhắm mục tiêu.

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)

• Kết hợp với các toán tử khác: Sử dụng toán tử gán nullish coalescing với các toán tử khác có thể dẫn đến kết quả không mong muốn. Đ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.

 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"

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, nó làm cho mã ngắn gọn và dễ đọc hơn, và nên được sử dụng tích cực trong phát triển tương lai.

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