Hiểu sự khác biệt giữa ! Và ? Toán tử trong TypeScript

Khám phá các toán tử TypeScript để truy cập và xác nhận an toàn

Khi làm việc với Bản đánh máy, các nhà phát triển thường gặp phải các tình huống mà họ cần truy cập vào các thuộc tính hoặc phương thức của một đối tượng có thể không xác định hoặc vô giá trị. Trong những tình huống này, ! (dấu chấm than) Và ?(dấu chấm hỏi) các nhà khai thác đi vào hoạt động. Các toán tử này cho phép nhà phát triển kiểm soát cách TypeScript xử lý vô giá trị hoặc không xác định các giá trị.

các ! toán tử, thường được gọi là "toán tử xác nhận không null", được sử dụng để báo cho trình biên dịch TypeScript biết rằng biến hoặc biểu thức đang được truy cập không phải là vô giá trị hoặc không xác định. Mặt khác, ?. toán tử hoặc "toán tử chuỗi tùy chọn", kiểm tra một cách an toàn xem đối tượng có tồn tại hay không trước khi thử truy cập các thuộc tính hoặc phương thức của nó.

Sự khác biệt tinh tế này rất quan trọng khi xây dựng các ứng dụng trong đó lỗi thời gian chạy việc truy cập các giá trị không xác định có thể gây ra vấn đề nghiêm trọng. Hai toán tử này giúp cải thiện độ an toàn và khả năng đọc của mã, nhưng chúng được sử dụng cho các mục đích khác nhau.

Hiểu được sự khác biệt chính giữa obj!.property Và obj?.property có thể giúp các nhà phát triển viết nhiều hơn mã TypeScript mạnh mẽ, tránh những cạm bẫy phổ biến phát sinh khi làm việc với dữ liệu có thể không xác định. Trong bài viết này, chúng ta sẽ đi sâu hơn vào các khái niệm này bằng các ví dụ minh họa cách sử dụng chúng.

Hiểu xác nhận không null và chuỗi tùy chọn trong TypeScript

Tập lệnh đầu tiên khám phá hai tính năng quan trọng của TypeScript: khẳng định không có giá trị toán tử (!) và chuỗi tùy chọn toán tử (?.). Xác nhận không null là một cách trực tiếp để báo cho trình biên dịch TypeScript biết rằng một giá trị sẽ không bao giờ là null hoặc không được xác định. Điều này đặc biệt hữu ích khi chúng ta chắc chắn rằng một đối tượng sẽ tồn tại trong thời gian chạy, ngay cả khi TypeScript không thể chứng minh điều đó tại thời điểm biên dịch. Ví dụ, trong obj!.data, chúng ta đang yêu cầu trình biên dịch bỏ qua mọi kiểm tra null và cho rằng obj tồn tại. Cách tiếp cận này tuy thuận tiện nhưng có thể dẫn đến lỗi thời gian chạy nếu đối tượng hóa ra là null hoặc không xác định.

Mặt khác, toán tử chuỗi tùy chọn cung cấp một phương thức an toàn hơn để truy cập các thuộc tính hoặc phương thức lồng nhau trong một đối tượng có thể là null. Trong trường hợp của obj?.data, mã sẽ kiểm tra xem đối tượng có tồn tại hay không trước khi thử truy cập thuộc tính dữ liệu. Nếu đối tượng là null hoặc không xác định, nó chỉ trả về không xác định thay vì đưa ra lỗi. Phương pháp này đặc biệt hữu ích trong môi trường động nơi các đối tượng có thể được tạo hoặc tìm nạp có điều kiện từ các nguồn bên ngoài như API. Điều này ngăn ngừa sự cố hoặc hành vi không mong muốn, làm cho mã của bạn trở nên hiệu quả hơn. đàn hồi.

Ví dụ thứ hai tập trung vào việc gọi hàm bằng cách sử dụng các toán tử này. Với xác nhận khác null, chúng ta buộc phải gọi một phương thức, giả sử rằng cả đối tượng và phương thức đó đều tồn tại, như đã thấy trong obj!.doSomething(). Điều này có thể hữu ích trong các tình huống mà nhà phát triển có toàn quyền kiểm soát dữ liệu nhưng sẽ gây rủi ro nếu giả định không thành công. Nếu phương thức không tồn tại hoặc đối tượng rỗng, chương trình sẽ đưa ra một ngoại lệ. Điều này làm cho xác nhận không null trở thành một công cụ có mức độ rủi ro cao và có lợi nhuận cao.

Chuỗi tùy chọn được áp dụng cho các lệnh gọi hàm, như trong obj?.doSomething(), ngăn chặn các lỗi thời gian chạy như vậy bằng cách kiểm tra xem phương thức có tồn tại hay không trước khi thử gọi nó. Nếu phương thức hoặc đối tượng không được xác định thì sẽ không có gì xảy ra và chương trình sẽ tiếp tục thực thi mà không gặp lỗi. Kỹ thuật này rất được khuyến khích trong các trường hợp đối tượng được tìm nạp động hoặc có thể không được xác định ở các giai đoạn nhất định của chương trình. Nó cho phép thực thi an toàn và giảm nhu cầu về mã kiểm tra null dài dòng, cải thiện cả hai hiệu suất và khả năng đọc mã.

// Example 1: Using non-null assertion operator (!)
// The assumption here is that obj is definitely not null or undefined
const obj: { data?: string } | null = { data: 'Hello' };
const data: string = obj!.data;  // Non-null assertion, ignores potential null/undefined
console.log(data);  // Output: 'Hello'

// Example 2: Optional chaining (?.) for safer access
// This approach checks if obj exists before accessing data property
const obj2: { data?: string } | null = null;
const data2: string | undefined = obj2?.data;  // Safely returns undefined if obj2 is null
console.log(data2);  // Output: undefined

// Note: The first approach forces the compiler to assume obj is not null
// The second approach ensures no runtime error if obj is null or undefined

// Example 1: Using non-null assertion operator for function invocation
// Assumes obj is not null or undefined before invoking the method
const objFunc: { doSomething?: () => void } | null = { doSomething: () => console.log('Action') };
objFunc!.doSomething();  // Forces execution, assuming objFunc is valid

// Example 2: Optional chaining operator for function invocation
// This approach safely checks if objFunc exists before calling the method
const objFunc2: { doSomething?: () => void } | null = null;
objFunc2?.doSomething();  // No error thrown, simply does nothing if objFunc2 is null

// Conclusion: Non-null assertion is riskier but direct, while optional chaining is safer but may return undefined

// Unit Test 1: Testing non-null assertion operator (!)
import { expect } from 'chai';
it('should return data with non-null assertion', () => {
  const obj = { data: 'Test' };
  const result = obj!.data;
  expect(result).to.equal('Test');
});

// Unit Test 2: Testing optional chaining operator (?.)
it('should return undefined if obj is null using optional chaining', () => {
  const obj = null;
  const result = obj?.data;
  expect(result).to.be.undefined;
});

// Ensures both methods behave as expected in null/undefined scenarios

Các kỹ thuật nâng cao: Khám phá các xác nhận không có giá trị và chuỗi tùy chọn

Ngoài các trường hợp sử dụng cơ bản của khẳng định không có giá trị Và chuỗi tùy chọn đã thảo luận trước đó, các toán tử này cũng đóng một vai trò quan trọng trong việc xử lý các cấu trúc dữ liệu phức tạp, đặc biệt là trong các ứng dụng quy mô lớn. Khi làm việc với các đối tượng được lồng sâu hoặc các tập dữ liệu lớn được tìm nạp từ API, bạn thường gặp phải các tình huống trong đó một số thuộc tính nhất định có thể tồn tại hoặc không tồn tại ở các giai đoạn khác nhau của vòng đời ứng dụng. Bằng cách sử dụng chuỗi tùy chọn, nhà phát triển có thể viết mã sạch hơn và dễ bảo trì hơn mà không cần liên tục thêm các bước kiểm tra null cho từng thuộc tính trong hệ thống phân cấp.

Một khía cạnh quan trọng khác cần xem xét là cách các toán tử này tương tác với chế độ nghiêm ngặt của TypeScript. Ở chế độ nghiêm ngặt, TypeScript thực thi các kiểm tra null và không xác định chặt chẽ hơn, khiến việc truy cập các thuộc tính có khả năng không xác định trở nên khó khăn hơn. các ! toán tử này cho phép các nhà phát triển bỏ qua các cảnh báo của TypeScript về các giá trị null có thể xảy ra, nhưng nó nên được sử dụng một cách thận trọng vì nó có thể dẫn đến lỗi thời gian chạy nếu sử dụng sai. Vì vậy, ? toán tử thường được ưa thích trong các tình huống mà sự tồn tại của một đối tượng hoặc thuộc tính là không chắc chắn.

Hơn nữa, việc sử dụng chuỗi tùy chọn kết hợp với các tính năng JavaScript hiện đại khác như giá trị mặc định (sử dụng toán tử || hoặc ??) có thể cải thiện đáng kể độ an toàn và khả năng đọc của mã. Chẳng hạn, nhà phát triển có thể truy cập một cách an toàn vào thuộc tính của đối tượng và cung cấp giá trị dự phòng nếu thuộc tính không được xác định. Điều này đặc biệt hữu ích trong các biểu mẫu, thông tin đầu vào của người dùng hoặc cấu hình trong đó các giá trị có thể không có hoặc tùy chọn, giúp nâng cao hơn nữa độ mạnh mẽ của mã.