Chuỗi tùy chọn (Optional Chaining) trong TypeScript

Trong bài viết này, chúng tôi giải thích về Chuỗi tùy chọn (Optional Chaining) trong TypeScript.

YouTube Video

Chuỗi tùy chọn (Optional Chaining) trong TypeScript

Chuỗi tùy chọn trong TypeScript là một tính năng hữu ích để truy cập các thuộc tính của các đối tượng hoặc mảng lồng nhau sâu. Tính năng này ngăn chặn lỗi khi truy cập các thuộc tính không tồn tại, cho phép bạn viết mã ngắn gọn và dễ đọc.

Chuỗi tùy chọn là gì?

Toán tử chuỗi tùy chọn (?.) trả về undefined khi truy cập một thuộc tính hoặc phương thức của đối tượng không tồn tại. Điều này cho phép mã tiếp tục chạy mà không xảy ra lỗi nếu thuộc tính không tồn tại.

Ví dụ, khi truy cập các thuộc tính của một đối tượng lồng nhau như được hiển thị dưới đây, một lỗi sẽ xảy ra nếu thuộc tính không tồn tại khi sử dụng cách thông thường.

Ví dụ

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined

• Trong trường hợp này, sẽ xảy ra lỗi nếu address không tồn tại. Chuỗi tùy chọn có thể được sử dụng để ngăn chặn điều này.

Ví dụ sử dụng chuỗi tùy chọn

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined

• Sử dụng chuỗi tùy chọn tránh được lỗi và thay vào đó trả về undefined khi các thuộc tính không tồn tại.

Cách sử dụng Chuỗi tùy chọn

Chuỗi tùy chọn có thể được sử dụng trong nhiều trường hợp, chẳng hạn như truy cập thuộc tính, gọi hàm và truy cập mảng. Chúng tôi sẽ giải thích cách sử dụng từng trường hợp này.

Truy cập thuộc tính

Bạn có thể truy cập an toàn các thuộc tính lồng nhau của đối tượng.

 1interface Company {
 2    name: string;
 3    location?: {
 4        city?: string;
 5        country?: string;
 6    };
 7}
 8
 9const company: Company = {
10    name: 'Tech Corp',
11    location: {
12        city: 'New York'
13    }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined

Đoạn mã này sử dụng toán tử optional chaining để truy cập các thuộc tính city và country chỉ khi thuộc tính location tồn tại trong đối tượng company.

Gọi hàm

Chuỗi tùy chọn cũng có thể kiểm tra sự tồn tại của một hàm trước khi gọi nó.

 1interface User {
 2    name?: string;
 3    greet?: () => void;
 4}
 5
 6const user: User = {
 7    name: 'Bob',
 8    // greet is undefined
 9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs

Đoạn mã này sử dụng toán tử optional chaining để gọi hàm greet một cách an toàn, chỉ khi hàm đó tồn tại. Không có lỗi xảy ra ngay cả khi hàm chưa được định nghĩa.

Truy cập mảng

Chuỗi tùy chọn có thể được áp dụng cho mảng để kiểm tra xem phần tử có tồn tại hay không.

 1interface Team {
 2    members?: string[];
 3}
 4
 5const team: Team = {
 6    members: ['Alice', 'Bob', 'Charlie']
 7};
 8
 9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined

Đoạn mã này truy cập các phần tử của mảng chỉ khi team.members tồn tại, trả về giá trị cho các chỉ mục hiện có và undefined cho những chỉ mục không tồn tại.

Optional Chaining và toán tử Nullish Coalescing

Chuỗi tùy chọn trả về undefined, nhưng đôi khi điều này không đủ. Trong trường hợp này, toán tử nullish coalescing (??), được giới thiệu trong TypeScript 3.7, có thể được sử dụng để cung cấp giá trị mặc định cho null hoặc undefined.

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'

Khi kết hợp với optional chaining, bạn có thể viết mã linh hoạt hơn.

1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Lưu ý khi sử dụng Optional Chaining

Khi sử dụng optional chaining, bạn cần lưu ý những điểm sau:.

• Sử dụng optional chaining không cần thiết

  • Việc sử dụng optional chaining cho các thuộc tính hoặc phương thức chắc chắn tồn tại có thể khiến mã của bạn trở nên dài dòng không cần thiết. Nên chỉ sử dụng khi sự tồn tại của đối tượng được truy cập là không chắc chắn.

• Lỗi chính tả

  • Lạm dụng optional chaining có thể khiến bạn khó nhận ra các lỗi chính tả dẫn đến việc truy cập các thuộc tính không mong muốn. Hãy thực hiện kiểm tra kiểu chính xác và sử dụng nó một cách thận trọng.

Tóm tắt mã

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice',
11    address: {
12        city: 'Tokyo'
13    }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Tóm tắt

Optional chaining trong TypeScript mang lại mã ngắn gọn đồng thời tránh được lỗi khi truy cập vào các đối tượng hoặc mảng lồng sâu. Ngoài ra, kết hợp nó với toán tử nullish coalescing cho phép bạn đặt giá trị mặc định và xây dựng logic linh hoạt hơn. Khi được sử dụng đúng cách, nó có thể cải thiện đáng kể độ an toàn và tính dễ đọc của mã.

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