Chuyển JSON sang TypeScript

Dán phản hồi API và nhận ngay interface hoặc type alias TypeScript dùng được luôn, với kiểu lồng nhau, trường optional và union null được tự động suy ra.

Chạy trên trình duyệtKhông cần đăng kýKhông tải lên gì

TypeScript

Cách dùng JSON sang TypeScript

  1. Dán một mẫu JSON, như phản hồi API, vào ô bên trái hoặc mở tệp .json.
  2. Đặt tên kiểu gốc (ví dụ User hoặc ApiResponse).
  3. Chọn khai báo interface hoặc type và bật/tắt export, readonly hoặc tất cả trường optional.
  4. Chọn unknown (an toàn hơn) hoặc any cho những giá trị mà mẫu không thể cho biết, như mảng rỗng và null.
  5. Sao chép mã được tạo hoặc tải xuống dưới dạng tệp .ts.

Cách suy ra kiểu

  • Kiểu nguyên thủy: chuỗi, số và boolean tương ứng với string, number và boolean.
  • Object lồng nhau trở thành interface riêng được đặt tên theo PascalCase, nên billing_address trở thành BillingAddress.
  • Mảng object được gộp thành một kiểu phần tử, đặt tên ở dạng số ít: users cho ra User[]. Khóa thiếu ở một số phần tử trở thành optional (key?:).
  • Giá trị null kết hợp với các giá trị khác của khóa đó: string | null. Khóa chỉ luôn là null sẽ dùng unknown hoặc any.
  • Mảng hỗn hợp trở thành mảng union như (number | string)[].
  • Cấu trúc giống hệt nhau chỉ được khai báo một lần và dùng lại, còn các cấu trúc khác nhau nhưng trùng tên sẽ được thêm hậu tố số.
  • Khóa không phải định danh hợp lệ, như "first-name" hay "2fa", được đặt trong dấu nháy.

interface và type

Với cấu trúc object thuần, hai cách gần như có thể thay thế cho nhau. Khai báo interface có thể được mở rộng và gộp, và cho thông báo lỗi trình biên dịch rõ ràng hơn một chút. type alias còn biểu diễn được union và mapped type. Nhiều nhóm dùng interface cho model API và type cho mọi thứ khác; hãy chọn cách mà codebase hoặc linter của bạn (@typescript-eslint/consistent-type-definitions) yêu cầu.

Có kiểu tốt hơn từ mẫu dữ liệu

Kiểu chỉ có thể đầy đủ như mẫu dữ liệu. Hãy dán phản hồi có chứa các trường optional, hoặc mảng có nhiều phần tử đa dạng, để công cụ phát hiện được khóa optional và nullable. Các giá trị như ngày tháng và enum trong JSON chỉ là chuỗi thường; hãy thu hẹp chúng bằng tay sau đó, ví dụ status: 'active' | 'disabled'. Để kiểm tra lúc chạy, hãy kết hợp kiểu được tạo với thư viện schema như Zod.

Câu hỏi thường gặp

JSON của tôi có bị tải lên không?
Không. Kiểu được tạo bằng JavaScript trong trình duyệt của bạn. Phản hồi API chứa token hoặc dữ liệu cá nhân không bao giờ rời khỏi thiết bị của bạn.
Thuộc tính optional được phát hiện như thế nào?
Khi các object trong cùng một mảng có khóa khác nhau, khóa thiếu ở ít nhất một object được đánh dấu optional bằng ?. Với một object duy nhất, mọi khóa đều bắt buộc, trừ khi bạn đánh dấu Tất cả tùy chọn (optional).
Nên dùng <code>unknown</code> hay <code>any</code>?
unknown an toàn hơn: TypeScript buộc bạn thu hẹp kiểu giá trị trước khi dùng. any tắt kiểm tra kiểu cho giá trị đó. Chỉ dùng nó nếu bạn định tinh chỉnh kiểu sau.
Vì sao ngày ISO lại có kiểu <code>string</code>?
JSON không có kiểu ngày tháng, nên ngày được truyền dưới dạng chuỗi. Nếu bạn chuyển chúng bằng new Date() sau khi phân tích, hãy đổi thuộc tính thành Date trong model của bạn.
Công cụ có xử lý được JSON lớn hoặc lồng sâu không?
Có. Thời gian tạo tỉ lệ tuyến tính với kích thước đầu vào và chạy cục bộ, nên phản hồi vài megabyte được chuyển đổi chưa tới một giây.

Công cụ liên quan

JSON Formatter Làm đẹp, thu gọn và kiểm tra JSON, báo lỗi theo dòng/cột. JSON Diff So sánh hai object JSON và liệt kê thay đổi theo đường dẫn. YAML sang JSON Chuyển cấu hình YAML sang JSON, hỗ trợ nhiều tài liệu và báo lỗi chính xác. cURL Converter Biến lệnh curl thành mã fetch, Axios, Python, Go hoặc PHP.