nicetool.dev logo

JSON sang TypeScript

Dán phản hồi API hoặc object JSON. Kiểu dữ liệu cập nhật khi bạn gõ.

JSON
Mã được tạo
export interface User {
  id: number;
  name: string;
  email: string;
  score: number;
  active: boolean;
  tags: string[];
  address: Address;
  orders: Order[];
}

export interface Address {
  city: string;
  postcode: null;
}

export interface Order {
  id: number;
  total: number;
  paidAt?: string;
  coupon?: string;
}

Vì sao nên tạo kiểu từ JSON?

API, file cấu hình và webhook đều trả về JSON, nhưng TypeScript, Go và các thư viện kiểm tra dữ liệu lúc chạy cần cấu trúc rõ ràng. Viết interface bằng tay cho một phản hồi lớn vừa chậm vừa dễ sai: một trường lúc có lúc không, một số lúc là null, hay một mảng object lồng nhau rất dễ khai báo nhầm. Công cụ này đọc một mẫu thật và suy ra cấu trúc giúp bạn. Mảng object được gộp lại, nên khóa chỉ có ở vài phần tử thành tùy chọn, khóa đôi khi là null thành nullable, và mỗi object lồng nhau có tên kiểu riêng.

Tính năng

  • • Interface hoặc type alias TypeScript với trường tùy chọn (?)
  • • Struct Go kèm json tag, omitempty và tên chuẩn Go (ID, URL)
  • • Schema Zod kèm kiểu TypeScript suy ra, sắp xếp đúng thứ tự tham chiếu
  • • Gộp mảng object, nhận diện null, kiểu hỗn hợp và số nguyên
  • • Tự đặt trong dấu nháy các khóa không hợp lệ như "first-name"

Dữ liệu của bạn được giữ riêng

Việc phân tích và sinh mã chạy trong trình duyệt. Phản hồi API chứa dữ liệu khách hàng thật không rời khỏi máy bạn.

Không tải lên, chạy được khi offline.

Cách dùng công cụ JSON sang TypeScript

  1. 1

    Dán một mẫu JSON, ví dụ phản hồi copy từ tab Network của trình duyệt, Postman hoặc curl. Mảng càng có nhiều phần tử, trường tùy chọn càng được nhận diện chính xác.

  2. 2

    Chọn đầu ra: interface TypeScript, struct Go hoặc schema Zod. Với TypeScript bạn có thể chuyển sang type alias.

  3. 3

    Đặt tên kiểu gốc, như User hay OrderResponse. Object lồng nhau được đặt tên theo khóa, phần tử mảng dùng dạng số ít (orders thành Order).

  4. 4

    Xem lại kết quả, chỉnh những gì mẫu không thể hiện được (ví dụ chuỗi thực chất là ngày tháng hay enum), rồi sao chép vào code.

Ví dụ thực tế

Khai báo kiểu cho REST API

Dán JSON từ GET /api/users/42 để có interface User kèm kiểu Address lồng bên trong, dùng ngay với fetch hay axios.

Client Go cho API bên thứ ba

Tạo struct có json tag cho payload webhook của Stripe hay GitHub. Khóa tùy chọn có omitempty và object lồng nhau thành kiểu riêng.

Kiểm tra dữ liệu lúc chạy với Zod

Biến một request body mẫu thành schema Zod và dùng schema.parse() trong route handler của Next.js để chặn dữ liệu sai, kèm z.infer cho kiểu tĩnh.

File cấu hình

Dán file cấu hình JSON để có interface, giúp editor gợi ý khóa và bắt lỗi gõ sai.

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

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

Khi gốc hoặc một giá trị lồng là mảng object, mọi phần tử được gộp lại. Khóa thiếu ở ít nhất một phần tử được đánh dấu tùy chọn (? trong TypeScript, omitempty trong Go, .optional() trong Zod).

Giá trị null được xử lý ra sao?+

Khóa là null ở vài phần tử và là chuỗi ở phần tử khác thành string | null (nullable() trong Zod, *string trong Go). Khóa luôn là null trong mẫu vẫn giữ là null, vì không thể biết kiểu thật.

Vì sao số thành int64 trong Go?+

Số nguyên trong mẫu thành int64, số thập phân thành float64. Nếu một trường có cả hai, nó được mở rộng thành float64 (number trong TypeScript).

Có nhận diện được ngày, enum hay UUID không?+

Không. JSON không có kiểu ngày hay enum nên chúng hiện là string. Hãy tinh chỉnh bằng tay, ví dụ z.string().datetime() hoặc union các giá trị cụ thể.