ຂ້າມໄປຫາເນື້ອຫາຫຼັກ
LibraTool logoLibraTool

ຕົວແປງ JSON ເປັນ TypeScript ຟຣີ

ສ້າງ TypeScript interface ຫຼື type alias ຈາກ JSON object ຫຼື array ໃດໆ. ວາງ JSON ແລ້ວຮັບ TypeScript type ທີ່ພ້ອມໃຊ້ ທັນທີ.

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

ການນຳໃຊ້ທົ່ວໄປ

  • ສ້າງ TypeScript Types ຈາກ API Responsesວາງໄວ້ API JSON response ແລະ ສ້າງ TypeScript interfaces ໄປໄວກ່ອນ ສໍາລັບ type-safe frontend code.
  • TypeScript Types ສໍາລັບ Config ແລະ Settings Objectsສ້າງ TypeScript interfaces ຈາກໄຟລ JSON config ເພື່ອເພີ່ມ type safety ໃຫ້ຕໍ່ settings ທີ່ມີ.
  • ສ້າງ TypeScript Types ຈາກ Database Recordsແປລາຍການອອກແບບຖານຂໍ້ມູນທີ່ສົ່ງອອກເປັນ JSON ຫຼື ORM ຜົນລັບຂໍ້ຄວາມໄປໃສ່ TypeScript interfaces ສໍາລັບ data layer typing.
  • Type Mock Data ແລະ Test Fixturesສ້າງ TypeScript interfaces ຈາກ JSON mock data ແລະ test fixtures ເພື່ອ type unit tests ແລະ Storybook stories.
  • Type Third-Party API Responsesສ້າງ TypeScript interfaces ຈາກ third-party API responses ບ່ອນທີ່ types ທຳນະ ຫຼື ເກົ່າ.

ມັນເຮັດວຽກແນວໃດ

ເຄື່ອງມືນີ້ໃຊ້ອະລະກໍລິທຶມການອະນຸມານປະເພດແບບຄືນເກີດທີ່ຂຽນເອງໂດຍບໍ່ໃຊ້ໄລບຣາຣີພາຍນອກ — JSON.parse ເພື່ອກວດສອບ ແລະ ແຍກວິເຄາະຂໍ້ມູນນຳເຂົ້າ, ຈາກນັ້ນການຍ່າງຜ່ານແບບກຳນົດເອງທີ່ຍ່າງທຸກຄ່າໃນຕົ້ນໄມ້ JSON ແລະ ອອກປະກາດ interface ຫຼື type ຂອງ TypeScript ໂດຍກົງໃນບຣາວເຊີ. ບໍ່ມີຫຍັງຖືກສົ່ງໄປຫາເຊີບເວີ.

  1. 1
    JSON ຖືກແຍກວິເຄາະ ແລະ ກວດສອບ
    ຂໍ້ມູນນຳເຂົ້າຂອງທ່ານຖືກສົ່ງໃຫ້ JSON.parse. ຖ້າມັນລົ້ມເຫຼວ, ຂໍ້ຜິດພາດການແຍກວິເຄາະທີ່ແທ້ຈິງຈະປາກົດທັນທີໃຕ້ຊ່ອງຂໍ້ມູນນຳເຂົ້າ. ການແຍກວິເຄາະທີ່ສຳເລັດຈະສ້າງຕົ້ນໄມ້ຄ່າທີ່ມີປະເພດເຊິ່ງຂັບເຄື່ອນສ່ວນທີ່ເຫຼືອຂອງການແປງ.
  2. 2
    ການອະນຸມານປະເພດແບບຄືນເກີດ
    ຟັງຊັນ getType ແບບຄືນເກີດຍ່າງຜ່ານທຸກໂໝດ: primitives ແມັບໄປຫາ string, number, boolean, ຫຼື null; ອົງປະກອບກະຕຸ້ນ interface ທີ່ມີຊື່ໃໝ່; ອາເລຂອງອົງປະກອບມີຄີຂອງພວກມັນຖືກລວມກັນຂ້າມທຸກອົງປະກອບ ດັ່ງນັ້ນຄີທີ່ມີໃນບາງລາຍການເທົ່ານັ້ນຈຶ່ງກາຍເປັນທາງເລືອກ ແລະ ປະເພດຄ່າທີ່ຂັດແຍ້ງກັນຖືກເຊື່ອມດ້ວຍ |.
  3. 3
    ການຕັ້ງຊື່ interface ທີ່ບໍ່ຂັດແຍ້ງກັນ
    ແຕ່ລະອົງປະກອບແບບຊ້ອນໄດ້ຮັບຊື່ແບບ PascalCase ທີ່ມາຈາກຄີ JSON ຂອງມັນ (snake_case, kebab-case, ແລະ ຊ່ອງຫວ່າງທັງໝົດຖືກປັບມາດຕະຖານ). ຖ້າສອງອົງປະກອບທີ່ໂຄງສ້າງຕ່າງກັນຈະໃຊ້ຊື່ດຽວກັນ, ຄຳຕໍ່ທ້າຍຕົວເລກຈະຖືກເພີ່ມ (Data, Data2, …) ແທນທີ່ຈະຂຽນທັບການປະກາດກ່ອນໜ້າແບບງຽບໆ.
  4. 4
    ຜົນລັບຖືກສະແດງ ແລະ ດາວໂຫຼດໄດ້
    Interface ແບບຊ້ອນຖືກອອກກ່ອນ, ຈາກນັ້ນປະເພດຫຼັກ, ຈັດຮູບແບບເປັນ export interface ຫຼື export type ຂຶ້ນກັບການເລືອກຂອງທ່ານ. ຜົນລັບສາມາດຄັດລອກໄປໃສ່ຄລິບບອດ ຫຼື ດາວໂຫຼດເປັນໄຟລ໌ .ts — ທັງໝົດສ້າງດ້ວຍ Blob ມາດຕະຖານໂດຍບໍ່ມີການໄປມາກັບເຊີບເວີ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

📋

JSON Schema ເປັນ Form

Paste JSON Schema ແລ້ວຮັບ form ທີ່ live ໃຊ້ງານໄດ້ — text, number, checkbox, dropdown ແລະ list — ແລ້ວຄັດລອກ JSON ທີ່ input ສ້າງ. ເໝາະ prototype API request body. ເຮັດວຽກໃນບຣາວເຊີ.

ລອງໃຊ້
⌨️

ທົດສອບຄວາມໄວການພິມ (WPM)

ວັດຄວາມໄວພິມ (WPM) ແລະ ຄວາມຖືກຕ້ອງດ້ວຍການທົດສອບແບບຈັບເວລາ, ຈຳນວນຄຳ, ຄຳຄົມ, ກຳນົດເອງ ແລະ zen. WPM ສົດ, ຄວາມໄວດິບ, ຄວາມສອດຄ່ອງ, ກຣາຟຜົນ, ຫຼາຍພາສາ ແລະ ຄຳຕິຊົມລະດັບຕົວອັກສອນ — ທັງໝົດໃນບຣາວເຊີຂອງທ່ານ.

ລອງໃຊ້
📐

ຕົວສ້າງ CSS clamp()

ສ້າງ CSS clamp() fluid ສຳລັບ typography ແລະ spacing ທີ່ responsive. ຕັ້ງ min/max size ແລະ viewport range, ເບິ່ງຕົວຢ່າງ live ແລະ ຄັດລອກ CSS ເສັ້ນດຽວ.

ລອງໃຊ້

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ