JSON sang TypeScript
Biến một tài liệu JSON mẫu thành interface hoặc type alias TypeScript, với các trường tùy chọn và union được suy ra từ dữ liệu của bạn.
Chạy hoàn toàn trong trình duyệt của bạn
Kiểu được suy ra từ mẫu bạn dán, nên chúng mô tả mẫu đó chứ không phải một schema: một trường là chuỗi trong ví dụ của bạn có thể là số ở nơi khác. Mọi số đều là number, và ngày tháng vẫn là string. Thứ tự thuộc tính theo JSON.parse, vốn liệt kê các khóa là số nguyên lên trước.
Cách tạo TypeScript từ JSON
- Dán một phản hồi hoặc tệp JSON vào ô. Nhiều phần tử trong mảng giúp kết quả tốt hơn, vì các trường thiếu ở một số phần tử sẽ trở thành tùy chọn.
- Đặt tên cho kiểu cấp cao nhất, chọn
interfacehoặctype, và đánh dấu export, readonly hoặc nhận diện trường tùy chọn nếu cần. - Sao chép các khai báo hoặc tải xuống dưới dạng tệp
.ts. Hãy xem lại các tên, vì chúng lấy từ tên khóa của bạn.
Suy ra kiểu từ một mẫu JSON
Kiểu TypeScript mô tả hình dạng của dữ liệu, và một phản hồi JSON đã chứa sẵn một hình dạng: mỗi khóa, loại giá trị phía sau nó, và cách các đối tượng lồng nhau. Bộ chuyển đổi duyệt qua mẫu và ghi hình dạng đó thành các khai báo, nên bạn không phải gõ tay bốn mươi trường trước khi có thể gọi một API một cách tự tin.
Bước quan trọng nhất là cách xử lý mảng. Mọi phần tử trong mảng đối tượng đều được đọc và các dạng của chúng được gộp lại: khóa có mặt ở mọi phần tử vẫn bắt buộc, khóa chỉ có ở một số phần tử trở thành tùy chọn, và các giá trị khác loại nhau trở thành một union. Đó là lý do một mẫu có nhiều bản ghi cho ra kiểu tốt hơn nhiều so với mẫu chỉ có một. Giá trị null được xử lý khác với khóa bị thiếu, vì hai trường hợp này có nghĩa khác nhau đối với đoạn mã đọc trường đó.
Kiểu được suy ra chỉ là điểm khởi đầu, không phải một hợp đồng. Chúng không thể biết rằng một chuỗi luôn là một trong ba giá trị, rằng một số thực ra là ID nguyên, hay rằng một trường có mặt trong mọi ví dụ của bạn có thể biến mất trên môi trường thật. Hãy đọc kết quả, đổi tên những chỗ nghe vụng về và siết chặt các kiểu quan trọng.
Mẹo
- Hãy kiểm tra mẫu của bạn đúng cú pháp trước bằng Định dạng và kiểm tra JSON, công cụ chỉ ra chính xác ký tự gây lỗi cú pháp.
- Đang làm việc với cấu hình YAML? Chuyển đổi bằng YAML sang JSON rồi dán kết quả vào đây.
- Cần xem nội dung của một payload token trước khi định kiểu? Giải mã bằng Giải mã JWT.
Câu hỏi thường gặp
Công cụ quyết định một trường là tùy chọn như thế nào?
Khi bạn có một mảng đối tượng, các đối tượng được gộp thành một dạng duy nhất. Khóa xuất hiện ở một số phần tử nhưng không phải tất cả sẽ có dấu ?. Khóa có mặt nhưng chứa null ở một số phần tử thì không phải là tùy chọn; nó trở thành T | null. Hãy tắt nhận diện trường tùy chọn nếu bạn muốn mọi khóa đều bắt buộc.
Các kiểu lồng nhau được đặt tên như thế nào?
Mỗi đối tượng lồng nhau được đặt tên theo khóa của nó ở dạng PascalCase, nên billing_address trở thành BillingAddress. Với mảng, kiểu phần tử bỏ chữ "s" ở cuối khi khóa dài hơn 3 chữ cái và không kết thúc bằng ss, us hoặc is: users cho User, còn address cho AddressItem. Nếu hai dạng khác nhau muốn cùng một tên, dạng thứ hai được đánh số, cho ra User và User2.
Các đối tượng có cùng dạng thì sao?
Chúng dùng chung một khai báo. Nếu billing và shipping đều chứa { street, city }, bạn nhận một interface, đặt tên theo nơi nó xuất hiện đầu tiên. Hai đối tượng có cùng khóa nhưng kiểu giá trị khác nhau là hai dạng khác nhau và được đặt tên riêng.
Vì sao mảng rỗng có kiểu unknown[]?
Một mảng rỗng không chứa ví dụ nào, nên không thể suy ra gì về các phần tử của nó. unknown[] là câu trả lời trung thực; hãy tự sửa khi bạn biết kiểu phần tử. Mảng trộn nhiều loại giá trị trở thành một union, chẳng hạn (string | number)[].
Kết quả có thể khác với API thật không?
Có. Một mẫu chỉ cho thấy các giá trị nó chứa. Một trường luôn có trong mẫu của bạn nhưng đôi khi thiếu trên môi trường thật sẽ là bắt buộc ở đây, và một chuỗi kiểu enum sẽ chỉ là string thuần. Để kiểm tra chặt chẽ, hãy dùng schema; để bắt đầu nhanh, hãy dùng kết quả này rồi điều chỉnh.
JSON của tôi có bị tải lên không?
Không. Không có gì bạn dán bị gửi đi; việc chuyển đổi chạy trong trình duyệt của bạn, và bạn có thể ngắt kết nối mạng sau khi trang đã tải.