Cách tạo TypeScript từ JSON
- 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.
- Đặt tên cho kiểu gốc và chọn
interfacehoặctype, có hoặc không cóexportvàreadonly. - 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
| JSON | TypeScript |
|---|---|
"Ada" | string |
42, 3.14 | number |
true | boolean |
null bên cạnh các giá trị khác | mộ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ảng | thuộ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ư.