Công cụ tạo giao diện và kiểu dữ liệu TypeScript từ JSON

Tạo giao diện hoặc bí danh kiểu TypeScript từ dữ liệu JSON mẫu, chẳng hạn phản hồi API. Công cụ xử lý cấu trúc lồng nhau, null và mảng hỗn hợp; việc chuyển đổi diễn ra trong trình duyệt.

Tạo kiểu TypeScript có tên cho phản hồi API.

Converted in your browser. Null stays a value type; ? marks a field missing from some objects in an array. Empty arrays use unknown elements.

Root type nameOutput style

Load an example (replaces your input)

JSON

TypeScript

Khi nào nên sử dụng

Tạo kiểu TypeScript có tên cho phản hồi API.
So sánh nhiều đối tượng trong một mảng để xem các kiểu khác nhau và trường tùy chọn.

Cách sử dụng

Dán JSON thực tế hoặc tải một ví dụ. Khi tải ví dụ, nội dung đầu vào hiện tại sẽ được thay thế.
Đặt tên kiểu gốc và chọn interface (đối tượng lồng nhau trở thành kiểu riêng) hoặc type (một bí danh kiểu với các đối tượng lồng nhau được viết trực tiếp bên trong).
Kiểm tra null, các trường tùy chọn (?) và kiểu hợp string/number, rồi sao chép các kiểu.

JSON đầu vào

[{"id":1,"name":"Tokyo"},{"id":2}]

TypeScript đầu ra (Root, interface)

export type Root = RootValueItem[];

export interface RootValueItem {
  id: number;
  name?: string;
}

Chi tiết và giới hạn

Mọi phần tử trong mảng đều được kiểm tra. Trong ví dụ, name không có trong đối tượng thứ hai nên trở thành trường tùy chọn; còn trường có giá trị null sẽ trở thành kiểu hợp với null.

Mảng rỗng cho ra unknown[]. Mảng hỗn hợp trở thành mảng của kiểu hợp, không phải bộ dữ liệu có độ dài cố định.

Các kiểu chỉ bao quát những gì xuất hiện trong mẫu. Công cụ không suy ra các trường chưa từng xuất hiện, định dạng ngày tháng hoặc email, phạm vi giá trị hay mối quan hệ giữa các trường.

Đầu vào phải là JSON tiêu chuẩn; hãy dùng công cụ định dạng JSON để loại bỏ chú thích hoặc dấu phẩy cuối trước. Nhập mã định danh có số 0 ở đầu dưới dạng chuỗi.

Đầu vào bị giới hạn ở 1,000,000 ký tự, khoảng 64 cấp và 50,000 giá trị. Kiểu TypeScript không xác thực dữ liệu khi chạy.

FAQ

Tôi nên tạo interface hay type?

Cả hai mô tả cùng một cấu trúc. interface tạo một giao diện có tên cho mỗi đối tượng lồng nhau, giúp dễ tái sử dụng; type tạo một bí danh kiểu duy nhất với các đối tượng lồng nhau được viết trực tiếp bên trong.

Công cụ có thể tạo lớp TypeScript không?

Không, công cụ chỉ tạo giao diện hoặc bí danh kiểu. Nếu cần xác thực khi chạy, hãy dùng công cụ chuyển JSON sang Zod và điều chỉnh lược đồ theo quy tắc của bạn.

null khác gì với trường tùy chọn?

{"name":null} có trường name với giá trị null; {} hoàn toàn không có name. null được giữ trong kiểu, còn ? chỉ được thêm khi một số đối tượng trong cùng mảng thiếu trường đó.

Mảng JSON ở cấp gốc tạo ra kết quả gì?

Một bí danh kiểu cho mảng cùng với một giao diện cho các phần tử, như ví dụ phía trên, trong đó Root là RootValueItem[].

Đặc tả và tài liệu tham khảo

Kiểu hợp trong TypeScript