Công cụ
VI

Chuyển JSON sang TypeScript

Dán một ví dụ JSON – chẳng hạn phản hồi từ API – để nhận các interface TypeScript dùng được ngay. Kiểu của từng trường, thuộc tính tùy chọn và kiểu union được suy ra từ dữ liệu.

JSON → TypeScript

JSON

TypeScript

Riêng tư: dữ liệu của bạn được xử lý ngay trong trình duyệt và không bao giờ được tải lên.

Cách tạo TypeScript từ JSON

  1. Dán một ví dụ JSON. Mảng càng có nhiều phần tử thì trường tùy chọn và kiểu union càng được nhận diện chính xác.
  2. Đặt tên cho kiểu gốc và chọn interface hoặc type, có hoặc không có export và readonly.
  3. Sao chép code TypeScript vào dự án hoặc tải về dưới dạng file .ts.

Kiểu TypeScript được suy ra từ JSON như thế nào

JSONTypeScript
"Ada"string
42, 3.14number
trueboolean
null bên cạnh các giá trị khácmột union như string | null
"address": {"city": "Paris"}một interface Address riêng
"users": [{"id": 1}]User[] – tên phần tử được chuyển sang số ít
khóa bị thiếu ở một số phần tử mảngthuộc tính tùy chọn key?:
[1, "a"](string | number)[]
[]unknown[]
{}Record<string, unknown>

Ví dụ

JSON {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} sẽ thành:

export interface Root { id: number; name: string; tags: string[]; manager: null; }

Hãy đổi tên Root thành một tên có ý nghĩa như User hoặc ApiResponse. Các đối tượng lồng nhau có cấu trúc giống hệt nhau – ví dụ địa chỉ thanh toán và địa chỉ giao hàng – sẽ dùng chung một interface, còn các khóa không phải định danh hợp lệ sẽ được đặt trong dấu nháy, ví dụ "first-name": string.

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

Nên chọn interface hay type?

Với cấu trúc đối tượng, cả hai hoạt động như nhau. Interface có thể được mở rộng và gộp, còn type alias thì mô tả được cả union. Nhiều nhóm dùng interface cho đối tượng; hãy theo phong cách sẵn có trong codebase của bạn.

Trường tùy chọn được nhận diện như thế nào?

Các đối tượng trong cùng một mảng được gộp lại. Khóa bị thiếu ở một số đối tượng sẽ trở thành tùy chọn (key?:), còn khóa có giá trị thuộc nhiều kiểu khác nhau sẽ trở thành union.

Công cụ này có kiểm tra dữ liệu lúc runtime không?

Không. Kiểu TypeScript biến mất khi code chạy. Để kiểm tra dữ liệu đầu vào, hãy tạo JSON Schema từ cùng ví dụ bằng công cụ tạo JSON Schema của chúng tôi và kiểm tra dữ liệu theo schema đó bằng một thư viện schema.

JSON của tôi có bị gửi lên máy chủ không?

Không. Các kiểu được tạo ngay trên trình duyệt của bạn, nên bạn có thể yên tâm dán cả những phản hồi API riêng tư.