TypeScript:
การทำงานกับ JSON

วิธีการ:

การแปลง JSON เป็นวัตถุ TypeScript

เพื่อแปลงสตริง JSON เป็นวัตถุ TypeScript, คุณใช้วิธีการ JSON.parse() นี่มีประโยชน์เมื่อได้รับข้อมูล JSON จากเว็บเซิร์ฟเวอร์หรือการอ่านไฟล์ JSON

const jsonStr = '{"name": "John Doe", "age": 30}';
const obj = JSON.parse(jsonStr);

console.log(obj.name); // ผลลัพธ์: John Doe

การแปลงวัตถุ TypeScript เป็นสตริง JSON

เพื่อแปลงวัตถุ TypeScript เป็นสตริง JSON, คุณใช้วิธีการ JSON.stringify() นี่มีประโยชน์เป็นพิเศษเมื่อคุณต้องการส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์

const person = {
  name: "Jane Doe",
  age: 25,
};

const jsonStr = JSON.stringify(person);

console.log(jsonStr); // ผลลัพธ์: {"name":"Jane Doe","age":25}

การทำงานกับอินเทอร์เฟซ

คุณสามารถกำหนดอินเทอร์เฟซ TypeScript เพื่อทำงานร่วมกับข้อมูล JSON ได้อย่างราบรื่นโดยการรับรองโครงสร้างของวัตถุของคุณ

interface Person {
  name: string;
  age: number;
}

const jsonStr = '{"name": "Alex", "age": 28}';
const person: Person = JSON.parse(jsonStr);

console.log(person.age); // ผลลัพธ์: 28

การใช้ไลบรารีของบุคคลที่สามที่ได้รับความนิยม

สำหรับสถานการณ์ที่ซับซ้อนยิ่งขึ้น เช่น การตรวจสอบสคีมาหรือการเปลี่ยนแปลง คุณอาจใช้ไลบรารีเช่น class-transformer หรือ AJV (Another JSON Schema Validator)

class-transformer

ไลบรารีนี้สามารถแปลงวัตถุธรรมดาเป็นอินสแตนซ์คลาสและในทางกลับกัน ซึ่งมีประโยชน์สำหรับการตรวจสอบประเภทและการจัดการ

import "reflect-metadata";
import { plainToClass } from "class-transformer";
import { Person } from "./person";

const jsonStr = '{"name": "Mia", "age": 22}';
const person = plainToClass(Person, JSON.parse(jsonStr));

console.log(person instanceof Person); // ผลลัพธ์: true
console.log(person.name); // ผลลัพธ์: Mia

AJV

AJV เป็นไลบรารีที่อนุญาตให้ทำการตรวจสอบสคีมา JSON ได้อย่างรวดเร็ว นี่หมายความว่าคุณสามารถตรวจสอบวัตถุ JSON กับสคีมาที่กำหนดไว้ล่วงหน้า

import Ajv from "ajv";

const ajv = new Ajv();

const schema = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number" },
  },
  required: ["name", "age"],
  additionalProperties: false,
};

const validate = ajv.compile(schema);
const valid = validate({ name: "Tom", age: 24 });

console.log(valid); // ผลลัพธ์: true
if (!valid) console.log(validate.errors);

ด้วยเครื่องมือและเทคนิคเหล่านี้ คุณสามารถจัดการข้อมูล JSON ในแอปพลิเคชัน TypeScript ของคุณได้อย่างมีประสิทธิภาพ ทำให้มั่นใจได้ถึงความสมบูรณ์ข้อมูลและใช้ประโยชน์จากระบบประเภทที่ทรงพลังของ TypeScript