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;valuelà giá trị mục tiêu được kiểm tra để xem có phải lànullhoặcundefinedkhông.defaultValuelà giá trị được trả về khivaluelànullhoặcundefined.
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
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ư 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
- Như được hiển thị, toán tử HOẶC logic trả về giá trị mặc định là
18ngay 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
0hoặ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ínhagecó thể là mộtsố,nullhoặcundefined, 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
namechỉ cho phépstring, 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à
nullhoặcundefined. Không giống như toán tử HOẶC logic truyền thống, nó không coifalse,0hoặ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
nullkhô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ị null và undefined đượ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à
nullhoặcundefined. Ví dụ, các giá trị như chuỗi rỗng (""),0, hoặcfalsekhô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.