Công cụ tạo TypeScript Interface từ JSON

Công cụ chuyển JSON sang TypeScript làm gì?

Công cụ suy luận kiểu tĩnh từ dữ liệu mẫu. Thay vì viết tay một interface cho mỗi phản hồi API, bạn dán một phản hồi thực tế và nhận về các khai báo TypeScript tương ứng: mỗi object lồng nhau có một interface riêng, mảng có kiểu rõ ràng, và dùng union khi giá trị khác nhau. Đây là cách nhanh nhất để có autocomplete và kiểm tra kiểu lúc biên dịch cho dữ liệu nhận từ REST API, webhook hay file cấu hình JSON.

Cách suy luận kiểu

Mảng các object được gộp lại

Khi một mảng chứa nhiều object, công cụ gộp chúng thành một interface duy nhất thay vì chỉ lấy phần tử đầu tiên. Key chỉ xuất hiện ở một số phần tử sẽ trở thành optional (archived?: boolean), còn key có giá trị khác nhau giữa các phần tử sẽ nhận một union type (license: string | null). Interface của phần tử mảng được đặt tên theo dạng số ít của key: repos → Repo, categories → Category. Các cấu trúc giống nhau xuất hiện ở nhiều nơi chỉ được khai báo một lần và tái sử dụng.

interface hay type?

Với cấu trúc object, hai cách gần như có thể thay thế cho nhau. interface có thể mở rộng bằng extends và gộp khai báo khi khai báo lại, đồng thời thường cho thông báo lỗi dễ hiểu hơn; còn type alias có thể biểu diễn union, tuple và mapped type. Nhiều team dùng interface cho mô hình dữ liệu, bạn nên chọn cách phù hợp với quy tắc lint của dự án (ví dụ @typescript-eslint/consistent-type-definitions).

Giới hạn của suy luận: hãy kiểm tra lại kết quả

Mẫu dữ liệu chỉ phản ánh những gì có mặt trong đó. Trường có giá trị null trong mẫu sẽ được gán kiểu null; hãy sửa thành kiểu thực tế (ví dụ string | null). Ngày tháng thường đến dưới dạng chuỗi ISO và được gán kiểu string, vì JSON không có kiểu ngày. Các key không phải định danh hợp lệ, như social-links, sẽ tự động được đặt trong dấu nháy. Với việc kiểm tra dữ liệu không đáng tin lúc runtime, hãy kết hợp các kiểu này với một thư viện validate schema như Zod. Bạn nên làm gọn mẫu trước bằng JSON Formatter, hoặc chuyển cấu hình YAML bằng YAML to JSON trước khi tạo kiểu.

Cũng được tìm dưới tên: json sang ts, json to typescript, chuyển json sang interface typescript, tạo interface từ json, json2ts online, tạo type từ json, typescript interface generator.

Các công cụ dùng kèm tốt với JSON sang TypeScript

• CSV sang JSON — Dán CSV hoặc TSV để nhận mảng JSON gồm các object.
• SVG sang JSX — Dán SVG từ Figma, Illustrator hoặc bộ icon và nhận ngay một React component (JSX hoặc TSX) sẵn sàng sử dụng, kèm bản xem trước icon an toàn.
• Chuyển cURL sang Code — Dán lệnh curl từ tài liệu API hoặc “Copy as cURL” trong DevTools của trình duyệt, rồi nhận ngay đoạn code chạy được cho sáu ngôn ngữ, giữ nguyên header, body và thông tin xác thực.
• Kiểm tra JSON Schema — Dán schema và dữ liệu JSON để xem chính xác giá trị nào vi phạm quy tắc nào, hoặc tạo schema ban đầu từ dữ liệu mẫu.