JSON เป็น TypeScript

การแปลง JSON เป็น TypeScript คืออะไร?

วาง JSON payload แล้วรับ TypeScript interfaces กลับมา — สัญญาประเภทที่อธิบายอย่างชัดเจนว่า object มี properties อะไรบ้างและแต่ละ property มีประเภทใด หากไม่มี interfaces ข้อมูลจาก JSON.parse() จะมาเป็น any ทำให้ editor ช่วยเหลือไม่ได้ และ compiler ไม่ตรวจสอบการเข้าถึงหรือกำหนด property การแปลง JSON เป็น TypeScript ให้ความปลอดภัยนั้นโดยไม่ต้องเขียน interfaces เอง

TypeScript รองรับค่า JSON ทั้งหกประเภท ได้แก่ string, number, boolean, null, object และ array JSON object ที่ซ้อนกันทุกชั้นจะกลายเป็น named interface ของตัวเอง Arrays ได้รับประเภทจาก element แรก ผลลัพธ์ตรงกับสิ่งที่ JSON.parse() คืนมาจริงๆ ดังนั้น interfaces จึงสะท้อนข้อมูลจริงแทนที่จะเป็นการคาดเดา

การเขียน interfaces ด้วยมือสำหรับ JSON ขนาดใหญ่หรือซ้อนกันลึกนั้นน่าเบื่อและเกิดข้อผิดพลาดได้ง่าย เครื่องมือสร้าง TypeScript จาก JSON อ่านโครงสร้างโดยอัตโนมัติ จัดการ nesting แบบ recursive และสร้างโค้ด interface ที่เรียบร้อยภายในไม่กี่วินาที มีประโยชน์เป็นพิเศษเมื่อต่อ API ที่ไม่คุ้นเคย ทดลองใช้งานกับ mock data หรือย้าย JavaScript codebase มาเป็น TypeScript และช่วยให้คุณไม่ต้องติดตาม property names และประเภทที่ซ้อนกันด้วยมือ เพื่อให้คุณโฟกัสกับ application logic แทน type boilerplate

ทำไมต้องใช้เครื่องมือสร้าง TypeScript จาก JSON?

การสร้าง TypeScript interfaces ด้วยมือทำได้กับ objects ขนาดเล็ก แต่จะยากขึ้นอย่างรวดเร็วเมื่อโครงสร้างซ้อนกันหรือ API responses มีขนาดใหญ่ ลองนึกถึง API response ที่มี 50 fields และ nesting สามระดับ — การเขียนด้วยมือหมายถึง interfaces หลายสิบชุด ซึ่งแต่ละชุดอาจมีการพิมพ์ผิดหรือขาด nullable fields เครื่องมือที่ทำงานอัตโนมัติสร้างชุดทั้งหมดใน milliseconds และลดโอกาสที่ประเภทจะไม่ตรงกันระหว่างโค้ดและข้อมูลที่ใช้งาน นอกจากความแม่นยำแล้ว ยังช่วยให้ types ของคุณสอดคล้องกับ API contract จริง เมื่อ service เปลี่ยน response shape เพียงวาง JSON ที่อัปเดตแล้ว regenerate — เร็วกว่าการตามหาทุก property ที่เปลี่ยนแปลงใน interface file ที่เขียนด้วยมือมาก

กรณีใช้งาน JSON เป็น TypeScript

ตารางอ้างอิงการแมปประเภท JSON เป็น TypeScript

ค่า JSON ทุกค่าแมปกับประเภท TypeScript ตารางด้านล่างแสดงวิธีที่ JSON primitive และประเภทโครงสร้างแต่ละอย่างแปลงออกมา การแมปนี้เป็นไปตามมาตรฐาน ECMA-404 JSON และ built-in types ของ TypeScript

TypeScript interface กับ type Alias

TypeScript มีสองวิธีในการอธิบาย object shapes ได้แก่ interface declarations และ type aliases ทั้งสองใช้แสดงโครงสร้าง JSON ได้ แต่แตกต่างกันในพฤติกรรมการขยายและการรวม เครื่องมือส่วนใหญ่ที่แปลง JSON เป็น TypeScript สร้าง interfaces เพราะเป็นตัวเลือกมาตรฐานสำหรับ object shapes ใน TypeScript

ตัวอย่างโค้ด

ด้านล่างคือตัวอย่างการสร้าง TypeScript interfaces จาก JSON ในภาษาและเครื่องมือต่างๆ แต่ละ snippet สร้างผลลัพธ์ที่ใช้งานได้จริง

// 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;
# }

คำถามที่พบบ่อย