Chuyển JSON sang TypeScript
Dán JSON bất kỳ để nhận ngay các interface TypeScript gọn gàng — kiểu được suy đệ quy, tự phát hiện field optional, và object/mảng lồng nhau được tách thành interface riêng có tên. Chạy hoàn toàn trong trình duyệt.
Giới thiệu công cụ
Khi bạn tiêu thụ một API, cách nhanh nhất để có type safety là mô tả response của nó bằng một interface TypeScript — nhưng viết tay từ một payload mẫu thì chán và dễ sai. Công cụ này nhận JSON bất kỳ và sinh interface tự động, suy kiểu cho từng field và biến object/mảng lồng nhau thành các kiểu có tên riêng.
Nó xử lý những chi tiết quan trọng với payload thực: suy kiểu đệ quy để cấu trúc lồng sâu được gán kiểu đầy đủ, phát hiện field optional khi khóa thiếu hoặc null, và gán kiểu mảng theo hình dạng phần tử. Bạn dán một response, bạn nhận các interface dán thẳng vào codebase, tất cả tính trong trình duyệt.
Cách sử dụng
- Copy một JSON response hoặc object tiêu biểu từ API hay fixture của bạn.
- Dán vào khung nhập của công cụ.
- Các interface TypeScript được sinh hiện ngay ở khung kết quả.
- Xem lại kiểu đã suy, dấu optional và các interface lồng được tách ra.
- Đổi tên interface gốc cho khớp domain của bạn nếu muốn.
- Copy các interface và dán vào file .ts của bạn.
Tính năng
- Suy kiểu đệ quy xuyên qua object lồng sâu.
- Object và mảng lồng nhau được tách thành interface có tên riêng.
- Phát hiện field optional và đánh dấu bằng dấu hỏi.
- Mảng được gán kiểu theo hình dạng phần tử thay vì any lỏng lẻo.
- Kết quả gọn, dễ đọc, sẵn sàng dán vào dự án.
- Xử lý mảng object bằng cách suy một kiểu phần tử chung.
- Chạy hoàn toàn trong trình duyệt — JSON của bạn không bao giờ được tải lên.
Câu hỏi thường gặp
JSON tôi dán có bị gửi đi đâu không?
Không. Việc chuyển đổi thực hiện cục bộ trong trình duyệt bằng JavaScript. API response thường chứa dữ liệu riêng tư, nên nó không rời khỏi máy bạn.
Nó quyết định một field là optional thế nào?
Kiểu được suy từ mẫu bạn cung cấp. Một field null, hoặc chỉ xuất hiện ở một số phần tử trong mảng object, được coi là optional và đánh dấu tương ứng. Để optional thật đáng tin, hãy cung cấp mẫu bao quát các biến thể.
Object lồng nhau thì sao?
Mỗi object lồng khác biệt thành một interface có tên riêng, và object cha tham chiếu nó theo tên. Cách này giữ kết quả dễ đọc thay vì tạo một kiểu inline khổng lồ.
Mảng được gán kiểu ra sao?
Một mảng được gán kiểu theo hình dạng phần tử — mảng số thành number[], mảng object thành một interface có tên rồi []. Mảng trộn kiểu sẽ lùi về union hoặc một kiểu rộng hơn.
Nó có xử lý mảng ở cấp cao nhất không?
Có. Nếu JSON gốc là một mảng, công cụ suy kiểu phần tử và sinh interface cho phần tử đó, để bạn dùng như một kiểu mảng.