Tự động thêm giá trị vào đối tượng javascript
|
Đoạn mã dường như vô hại này gây ra lỗi TypeScript khi gán động const organization = {}
9 cho đối tượng type Org = typeof organization0 Show
Xem ví dụ này trong Nguồn gốc của sự nhầm lẫn, có lẽ hợp lý nếu bạn là người mới bắt đầu sử dụng TypeScript, là. làm thế nào một thứ có vẻ đơn giản như vậy lại có thể là một vấn đề như vậy trong TypeScript? TL; DR của tất cả là, nếu bạn không thể xác định loại biến tại thời điểm khai báo, bạn có thể sử dụng loại tiện ích type Org = typeof organization1 hoặc chữ ký chỉ mục đối tượng để giải quyết vấn đề này. Nhưng trong bài đăng này, chúng ta sẽ tự giải quyết vấn đề và hướng tới một giải pháp phù hợp trong hầu hết các trường hợp Nhảy ra đằng trước
Hiểu vấn đề với việc gán động các thuộc tính cho các đối tượngNói chung, TypeScript xác định loại biến khi nó được khai báo và loại được xác định này không thay đổi, tôi. e. , nó vẫn giữ nguyên trong suốt ứng dụng của bạn Có những ngoại lệ đối với quy tắc này, chẳng hạn như khi xem xét thu hẹp loại hoặc làm việc với loại type Org = typeof organization5, nhưng đây là quy tắc chung cần nhớ nếu không Trong ví dụ trước, đối tượng type Org = typeof organization0 được khai báo như sau const organization = {}
Không có loại rõ ràng nào được gán cho biến type Org = typeof organization0, vì vậy TypeScript suy ra một loại type Org = typeof organization0 dựa trên khai báo là type Org = typeof organization9, i. e. , đối tượng trống theo nghĩa đen Ví dụ: nếu bạn thêm bí danh loại, bạn có thể khám phá loại type Org = typeof organization0 type Org = typeof organization Xem cái này trong Sau đó, khi bạn cố gắng tham khảo chỗ dựa const organization = {}
9 trên đối tượng trống này theo nghĩa đentype Org = typeof organization5 TypeScript hét lên
Khi bạn hiểu vấn đề, lỗi có vẻ phù hợp Hãy khắc phục điều này Giải quyết vấn đềCó rất nhiều cách để bạn có thể giải quyết lỗi TypeScript tại đây. Hãy xem xét những điều này Giải pháp 1. Nhập rõ ràng đối tượng tại thời điểm khai báoĐây là giải pháp dễ nhất để suy luận thông qua. Khi bạn khai báo đối tượng, hãy tiếp tục và gõ nó. Hơn nữa, gán cho nó tất cả các giá trị có liên quan type Org = typeof organization7 Xem cái này trong Điều này giúp loại bỏ mọi bất ngờ. Bạn đang nói rõ loại đối tượng này là gì và khai báo đúng tất cả các thuộc tính có liên quan khi bạn tạo đối tượng  Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơnTuy nhiên, điều này không phải lúc nào cũng khả thi nếu các thuộc tính đối tượng phải được thêm động, đó là lý do tại sao tất cả chúng ta ở đây Giải pháp 2. Sử dụng chữ ký chỉ mục đối tượngĐôi khi, các thuộc tính của đối tượng thực sự cần được thêm vào sau khi chúng được khai báo. Trong trường hợp này, bạn có thể sử dụng chữ ký chỉ mục đối tượng, như sau type Org = typeof organization8 Xem cái này trong Tại thời điểm khai báo biến type Org = typeof organization0, bạn có thể tiếp tục và nhập rõ ràng biến đó vào type Org = typeof organization54 sau Để giải thích thêm về cú pháp, bạn có thể quen với các kiểu đối tượng có kiểu thuộc tính cố định type Org = typeof organization1 Tuy nhiên, bạn cũng có thể thay thế const organization = {}
9 cho một “loại biến”Ví dụ: nếu bạn muốn xác định bất kỳ thuộc tính chuỗi nào trên type Org = typeof organization56 type Org = typeof organization4 Lưu ý rằng cú pháp tương tự như cách bạn sử dụng thuộc tính đối tượng biến trong JavaScript chuẩn type Org = typeof organization5 Tương đương với TypeScript được gọi là chữ ký chỉ mục đối tượng. Hơn nữa, lưu ý rằng bạn có thể gõ type Org = typeof organization57 với các nguyên thủy khác type Org = typeof organization7 Giải pháp 3. Sử dụng loại tiện ích type Org = typeof organization 1Cho phép bạn hạn chế một loại đối tượng có thuộc tính là type Org = typeof organization70 và giá trị thuộc tính là type Org = typeof organization71. Nó có chữ ký sau. type Org = typeof organization72 Trong ví dụ của chúng tôi, type Org = typeof organization70 cũng đại diện cho type Org = typeof organization74 và type Org = typeof organization71, type Org = typeof organization74. Giải pháp ở đây khá ngắn gọn như hình dưới đây const organization = {}
0Thay vì sử dụng bí danh loại, bạn cũng có thể đặt loại const organization = {}
1type Org = typeof organization1 Xem cái này trong Giải pháp 4. Sử dụng kiểu dữ liệu type Org = typeof organization 78Bây giờ, một đối tượng type Org = typeof organization78 về cơ bản là một cấu trúc dữ liệu khác với một type Org = typeof organization80, nhưng để hoàn thiện, bạn có thể loại bỏ vấn đề này nếu bạn đang sử dụng một type Org = typeof organization78 Xem xét ví dụ bắt đầu được viết lại để sử dụng đối tượng type Org = typeof organization78 const organization = {}
2Với đối tượng type Org = typeof organization78, bạn sẽ không gặp lỗi khi gán động thuộc tính cho đối tượng . Đây có vẻ là một giải pháp tuyệt vời lúc đầu, nhưng hãy cẩn thận là đối tượng type Org = typeof organization78 của bạn được gõ yếu. Bạn có thể truy cập một thuộc tính không tồn tại và không nhận được bất kỳ cảnh báo nào const organization = {}
3. Điều này không giống như đối tượng tiêu chuẩn Theo mặc định, type Org = typeof organization78 được khởi tạo có các loại khóa và giá trị là type Org = typeof organization5 — i. e. , type Org = typeof organization87. Do đó, kiểu trả về của biến type Org = typeof organization88 sẽ là type Org = typeof organization5. Ít nhất khi sử dụng type Org = typeof organization78, tôi thực sự khuyên bạn nên chuyển một số loại thông tin khi tạo. Ví dụ. const organization = {}
4type Org = typeof organization88 sẽ vẫn chưa được xác định, nhưng bạn sẽ không ngạc nhiên về cách sử dụng mã của nó. Bây giờ bạn sẽ nhận được loại thích hợp cho nó. Nếu bạn thực sự không biết type Org = typeof organization12 của type Org = typeof organization78 sẽ là gì, bạn có thể tiếp tục và trình bày điều này ở cấp độ loại. const organization = {}
5Và nếu bạn không chắc chắn type Org = typeof organization12 hoặc type Org = typeof organization15 là gì, hãy đảm bảo an toàn bằng cách trình bày điều này ở cấp độ loại const organization = {}
6Giải pháp 5. Xem xét một tài sản type Org = typeof organization 80 tùy chọnGiải pháp này không phải lúc nào cũng khả thi, nhưng nếu bạn biết tên của thuộc tính sẽ được gán động, bạn có thể tiếp tục cung cấp tùy chọn này khi khởi tạo đối tượng như minh họa bên dưới const organization = {}
7. Nếu bạn không thích ý tưởng sử dụng thuộc tính tùy chọn, bạn có thể rõ ràng hơn với cách nhập của mình như minh họa bên dưới const organization = {}
8. Phần kết luậnNgoài các kiểu nguyên thủy, các kiểu phổ biến nhất mà bạn sẽ phải xử lý có khả năng là các kiểu đối tượng Trong trường hợp bạn cần xây dựng một đối tượng động, hãy tận dụng loại tiện ích type Org = typeof organization1 hoặc sử dụng chữ ký chỉ mục đối tượng để xác định các thuộc tính được phép trên đối tượng Nếu bạn muốn đọc thêm về chủ đề này, vui lòng xem bảng thống kê của tôi về bảy câu hỏi TypeScript được hỏi nhiều nhất trên Stack Overflow hoặc tweet cho tôi bất kỳ câu hỏi nào. Chúc mừng Đăng NhậpTên Lửa. Khả năng hiển thị đầy đủ vào web và ứng dụng dành cho thiết bị di động của bạnLogRocket là một giải pháp giám sát ứng dụng giao diện người dùng cho phép bạn phát lại các sự cố như thể chúng đã xảy ra trong trình duyệt của chính bạn. Thay vì đoán tại sao xảy ra lỗi hoặc yêu cầu người dùng chụp ảnh màn hình và kết xuất nhật ký, LogRocket cho phép bạn phát lại phiên để nhanh chóng hiểu điều gì đã xảy ra. Nó hoạt động hoàn hảo với bất kỳ ứng dụng nào, bất kể khung công tác nào và có các plugin để ghi lại ngữ cảnh bổ sung từ Redux, Vuex và @ngrx/store Ngoài việc ghi nhật ký các hành động và trạng thái Redux, LogRocket còn ghi nhật ký bảng điều khiển, lỗi JavaScript, dấu vết ngăn xếp, yêu cầu/phản hồi mạng với tiêu đề + nội dung, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Nó cũng cung cấp công cụ cho DOM để ghi lại HTML và CSS trên trang, tạo lại các video hoàn hảo về pixel của ngay cả các ứng dụng dành cho thiết bị di động và trang đơn phức tạp nhất Cách tự động thêm khóaTrả lời. Sử dụng ký hiệu dấu chấm hoặc dấu ngoặc vuông
. ) để thêm một cặp khóa/giá trị hoặc thuộc tính vào đối tượng JavaScript.
Làm cách nào để đặt động các giá trị đối tượng JavaScript?Trong JavaScript, bạn có thể chọn giá trị động hoặc tên biến và tên đối tượng và chọn chỉnh sửa tên biến trong tương lai mà không cần truy cập vào mảng. Để thực hiện, bạn có thể tạo một biến và gán cho nó một giá trị cụ thể .
Làm cách nào để thêm một giá trị vào đối tượng trong JavaScript?Sử dụng phương thức gán ()
. Sử dụng phương thức gán(), chúng ta có thể gán hoặc thêm một giá trị mới cho một đối tượng hiện có hoặc chúng ta có thể tạo đối tượng mới mà không thay đổi các giá trị đối tượng hiện có.
Làm cách nào để tự động thêm giá trị vào một mảng đối tượng trong JavaScript?Có hai cách để tự động thêm phần tử vào cuối mảng JavaScript. Bạn có thể sử dụng Mảng. nguyên mẫu. phương thức push() hoặc bạn có thể tận dụng thuộc tính “độ dài” của mảng để tự động lấy chỉ mục về vị trí của phần tử mới. |
