JSON sang TypeScript

Chuyển đổi JSON sang TypeScript là gì?

Dán một JSON payload và bạn nhận lại TypeScript interface — các hợp đồng có kiểu mô tả chính xác đối tượng có những thuộc tính nào và mỗi thuộc tính giữ kiểu dữ liệu gì. Nếu không có chúng, dữ liệu từ JSON.parse() trả về dưới dạng any, khiến trình soạn thảo không hỗ trợ và trình biên dịch không kiểm tra việc truy cập hoặc gán thuộc tính. Chuyển đổi JSON sang TypeScript mang lại sự an toàn đó mà không cần viết interface thủ công.

TypeScript bao phủ cả sáu kiểu giá trị JSON: string, number, boolean, null, object và array. Mỗi đối tượng JSON lồng nhau biến thành interface riêng có tên. Mảng được suy kiểu từ phần tử đầu tiên. Kết quả khớp với những gì JSON.parse() thực sự trả về lúc chạy, vì vậy các interface phản ánh dữ liệu thực thay vì phỏng đoán.

Viết interface thủ công cho JSON lớn hoặc lồng nhau sâu rất tẻ nhạt và dễ mắc lỗi. Một bộ tạo JSON sang TypeScript đọc cấu trúc tự động, xử lý lồng nhau theo đệ quy và xuất mã interface sạch trong vài giây. Điều này đặc biệt hữu ích khi kết nối với API chưa quen, tạo nguyên mẫu với dữ liệu giả, hoặc chuyển đổi codebase JavaScript sang TypeScript. Nó cũng giải phóng bạn khỏi việc theo dõi thủ công tên và kiểu thuộc tính lồng nhau, để bạn tập trung vào logic ứng dụng thay vì mã soạn sẵn về kiểu.

Tại sao dùng bộ tạo JSON sang TypeScript?

Tạo TypeScript interface thủ công khả thi với các đối tượng nhỏ, nhưng nhanh chóng gặp khó khăn với cấu trúc lồng nhau hoặc phản hồi API lớn. Hãy xem xét phản hồi API 50 trường với ba cấp lồng nhau — viết thủ công có nghĩa là hàng chục interface, mỗi cái là nguồn tiềm ẩn của lỗi đánh máy hoặc trường nullable bị bỏ sót. Bộ tạo tự động tạo ra toàn bộ tập hợp trong vài mili giây và giảm nguy cơ không khớp kiểu giữa mã của bạn và dữ liệu nó sử dụng. Ngoài độ chính xác, nó giữ các kiểu đồng bộ với hợp đồng API thực tế. Khi một dịch vụ thay đổi cấu trúc phản hồi, chỉ cần dán JSON mới và tạo lại — nhanh hơn nhiều so với tìm từng thuộc tính đã thay đổi trong file interface viết tay.

Các trường hợp sử dụng JSON sang TypeScript

Bảng tham chiếu ánh xạ kiểu JSON sang TypeScript

Mỗi giá trị JSON ánh xạ sang một kiểu TypeScript. Bảng dưới đây cho thấy cách mỗi kiểu nguyên thủy và cấu trúc JSON dịch sang. Ánh xạ này tuân theo chuẩn JSON ECMA-404 và các kiểu tích hợp sẵn của TypeScript.

interface và type Alias trong TypeScript

TypeScript cung cấp hai cách mô tả cấu trúc đối tượng: khai báo interface và type alias. Cả hai đều dùng để biểu diễn cấu trúc JSON, nhưng khác nhau về hành vi mở rộng và gộp. Hầu hết các bộ tạo JSON sang TypeScript xuất interface vì đây là lựa chọn chuẩn cho cấu trúc đối tượng trong TypeScript.

Ví dụ mã nguồn

Dưới đây là các ví dụ tạo TypeScript interface từ JSON trong các ngôn ngữ và công cụ khác nhau. Mỗi đoạn mã tạo ra đầu ra có thể chạy được.

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

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