tigtools

JSON sang TypeScript

Dán phản hồi hoặc tệp JSON và nhận khai báo TypeScript bạn có thể đưa thẳng vào mã của mình.

Chạy ngay trên trình duyệt Không cần đăng ký

Khai báo là

Cách sử dụng

  1. Dán JSON vào ô nhập, mở tệp .json hoặc dùng thử ví dụ.
  2. Đặt tên cho kiểu gốc, ví dụ Order hoặc ApiResponse.
  3. Chọn khai báo interface hoặc type và có thêm export và readonly hay không.
  4. Sao chép TypeScript đã tạo hoặc tải xuống dưới dạng types.ts.

Cách hoạt động

Trình tạo quét toàn bộ tài liệu JSON và ghi nhận kiểu giá trị tại từng vị trí. Mỗi object JSON trở thành một khai báo có tên riêng. Tên được lấy từ khóa thuộc tính viết theo PascalCase, vì vậy “shipping_address” trở thành ShippingAddress. Các phần tử của mảng được đặt tên theo dạng số ít của khóa: “items” cho Item, “categories” cho Category, còn các khóa không giống dạng số nhiều được thêm hậu tố “Item”.

Tất cả object trong cùng một mảng được gộp vào một interface. Nếu một khóa chỉ xuất hiện ở một vài object, nó được đánh dấu tùy chọn bằng “?”. Nếu một giá trị có kiểu khác nhau ở các vị trí khác nhau, kiểu sẽ là union, ví dụ string | number. null được giữ là một kiểu riêng, nên trường đôi khi mang giá trị null trở thành string | null. Mảng rỗng trở thành unknown[], vì không có gì để suy luận. Hai object có cùng thuộc tính và kiểu sẽ dùng chung một interface thay vì tạo bản trùng. Các khóa không phải định danh hợp lệ, chẳng hạn “first-name”, được đặt trong dấu nháy.

Kết quả chỉ mô tả mẫu bạn dán. Một trường trong thực tế có thể tùy chọn hoặc null sẽ trở thành bắt buộc và không null nếu mẫu của bạn không thể hiện điều đó, và ngày tháng trở thành chuỗi thông thường. Hãy đối chiếu kiểu với tài liệu API trước khi dựa vào chúng.

Ví dụ

Tạo kiểu cho phản hồi API

Dán một đơn hàng từ API của cửa hàng với tên gốc Order. Bạn sẽ nhận được các interface Order, Customer, Item và Shipping, với note?: string trong Item vì chỉ một trong hai item có ghi chú.

Cấu hình chỉ đọc

Dán config.json, tích chọn “Đặt thuộc tính chỉ đọc” và dán kết quả vào config.d.ts để trình biên dịch phát hiện các lần ghi nhầm vào config.

Mảng ở cấp cao nhất

Một endpoint danh sách trả về [{…}, {…}]. Với tên gốc Product, đầu ra bắt đầu bằng “export type Product = ProductItem[];” theo sau là interface ProductItem.

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

Tại sao một trường là tùy chọn trong đầu ra?

Vì ít nhất một object trong cùng mảng không có khóa đó. Nếu mọi object đều có khóa đó thì trường là bắt buộc. Dán nhiều bản ghi để có các trường tùy chọn chính xác hơn.

Tại sao ngày tháng được định kiểu là string?

JSON không có kiểu ngày, nên ngày tháng được truyền dưới dạng chuỗi. Trình tạo không đoán định dạng. Hãy tự đổi kiểu nếu mã của bạn chuyển chúng thành đối tượng Date.

Sự khác biệt giữa interface và type là gì?

Với cấu trúc object, chúng hoạt động gần như giống nhau. Interface có thể được mở rộng và hợp nhất bởi các khai báo sau; type alias thì không thể mở lại. Hãy chọn phong cách mà codebase của bạn đang dùng.

Công cụ có thể tạo xác thực lúc chạy chẳng hạn như Zod schema không?

Không. Công cụ chỉ tạo khai báo TypeScript, được kiểm tra lúc biên dịch và không xác thực dữ liệu lúc chạy.

Quyền riêng tư

JSON của bạn chỉ được phân tích trong trình duyệt. Không có gì được tải lên, lưu trữ hoặc đưa vào phân tích.