ප්‍රධාන අන්තර්ගතයට පිවිසෙන්න
LibraTool logoLibraTool

නොමිලේ JSON සිට TypeScript පරිවර්තකය

ඕනෑම JSON වස්තුවකින් හෝ අරාවකින් TypeScript interfaces හෝ type aliases සාදන්න. ඔබේ JSON ඇලවීමෙන් ක්ෂණිකව TypeScript types ලබා ගන්න.

load වූ පසු offline ක්‍රියා කරයි
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;
}

පොදු භාවිත

  • API ප්‍රතිගිණුම්කරුවෙන් TypeScript වර්ගවල ඉතිරියAPI JSON ප්‍රතිගිණුම පිටපතින් සහ ඔබගේ ෆ්‍රන්ටෙන්ඩ් කේතය ඒකීවි සඳහා TypeScript ඉදිරිපත් කිරීම ඉතිරිය.
  • වින්‍යාස සහ සැකසුම් පරිමාණ සඳහා TypeScript වර්ගයන්ඔබේ යෙදුම් සැකසුම් වලට type ආරක්ෂාව එක් කිරීමට JSON configuration ගොනු වලින් TypeScript interfaces ජනනය කරන්න.
  • ඩේටබේස් වාර්තා වලින් TypeScript වර්ගයන් ඉතිරියJSON සඳහා තිරස් ඩේටබේස් වාර්තා හෝ ORM ඉතිරිය ගිණුම ඒකීවි ඩේටා ස්තරයට TypeScript ඉදිරිපත් කිරීම සඳහා පරිවර්තනය කරන්න.
  • ලිපිගිණුම ඩේටා සහ පරීක්ෂණ නැරඹුමි වර්ගයන්JSON ලිපිගිණුම ඩේටා සහ පරීක්ෂණ නැරඹුමි වලින් TypeScript ඉදිරිපත් කිරීම ඉතිරිය ඔබගේ ඒකක පරීක්ෂණ සහ Storybook ඉතිහාසයට ඒකීවි කිරීම සඳහා.
  • තෙවන පක්ෂ API ප්‍රතිගිණුම ඒකීවිතෙවන පක්ෂ API ප්‍රතිගිණුම් වලින් TypeScript ඉදිරිපත් කිරීම ඉතිරිය තිරස් වර්ගයන් නැත හෝ පුරන.

එය ක්‍රියා කරන්නේ කෙසේද

මෙම මෙවලම zero external libraries සමඟ අතින් ලියන ලද recursive type inference ඇල්ගොරිතමයක් භාවිතා කරයි — ආදානය වලංගු කර parse කිරීමට JSON.parse, පසුව JSON tree එකේ සෑම අගයක්ම හරහා ගොස් TypeScript interface හෝ type declarations කෙලින්ම බ්‍රවුසරයේ නිකුත් කරන අභිරුචි traversal එකක්. කිසිවක් සර්වරයකට යවනු නොලැබේ.

  1. 1
    JSON parse කර වලංගු කෙරේ
    ඔබේ ආදානය JSON.parse වෙත ලබා දෙනු ලැබේ. එය අසාර්ථක වේ නම්, නිශ්චිත parse දෝෂය ආදානයට පහළින් වහාම මතුවේ. සාර්ථක parse එකක් පරිවර්තනයේ ඉතිරි කොටස ධාවනය කරන typed value tree එකක් නිපදවයි.
  2. 2
    පුනරාවර්තී වර්ග අනුමානය
    recursive getType ශ්‍රිතයක් සෑම node එකක්ම හරහා යයි: primitives string, number, boolean, හෝ null වලට map වේ; objects නව named interface එකක් trigger කරයි; objects arrays ඒවායේ keys සියලුම elements හරහා merge කර ඇත, එබැවින් සමහර items වල පමණක් ඇති keys optional වන අතර conflicting value types | සමඟ join කෙරේ.
  3. 3
    Collision-safe interface නාමකරණය
    සෑම nested object එකකටම එහි JSON key එකෙන් ලබා ගත් PascalCase නමක් ලැබේ (snake_case, kebab-case, සහ spaces සියල්ල සාමාන්‍යකරණය කෙරේ). structurally වෙනස් objects දෙකකට එකම නම බෙදාගැනීමට සිදුවේ නම්, ඊට පෙර නිර්වචනය නිහඬව overwrite කරනවා වෙනුවට සංඛ්‍යාත්මක suffix එකක් (Data, Data2, …) එකතු කෙරේ.
  4. 4
    ප්‍රතිදානය render කර බාගත කළ හැක
    Nested interfaces ප්‍රථමයෙන් නිකුත් වන අතර, පසුව root type එක, ඔබේ තේරීම අනුව export interface හෝ export type ලෙස format කෙරේ. ප්‍රතිඵලය clipboard වෙත පිටපත් කළ හැක හෝ .ts ගොනුවක් ලෙස බාගත කළ හැක — සියල්ල සම්මත Blob එකකින් ගොඩනගා ඇති අතර සර්වර round-trip එකක් නැත.

සම්බන්ධ මෙවලම්

📋

JSON Schema සිට Form

JSON Schema ඇලවීමෙන් සජීව, ක්‍රියාකාරී form — text, number, checkbox, dropdown සහ list ක්ෂේත්‍ර — ලබා ගන්න, ඉන්පසු ඔබේ ආදාන ලබා දෙන JSON copy paste කරන්න. API request bodies prototype කිරීමට කදිමය. ඔබේ බ්‍රවුසරයේ ක්‍රියා කරයි.

උත්සාහ කරන්න
⌨️

ටයිප් කිරීමේ වේගය පරීක්ෂා කිරීම (WPM)

කාල නියමිත, වචන ගණන, උද්ධෘත, අභිරුචි සහ සෙන් පරීක්ෂණ මගින් ඔබේ ටයිප් කිරීමේ වේගය (WPM) සහ නිරවද්‍යතාව මනින්න. සජීවී WPM, අමු වේගය, ස්ථාවරත්වය, ප්‍රතිඵල ප්‍රස්තාරයක්, බහු භාෂා, සහ අක්ෂරයෙන් අක්ෂරයට ප්‍රතිපෝෂණ — සියල්ල ඔබේ බ්‍රවුසරයේම.

උත්සාහ කරන්න
📐

CSS clamp() සකසන්නා

Responsive typography සහ spacing සඳහා fluid CSS clamp() අගය සාදන්න. Min/max ප්‍රමාණය සහ viewport පරාසය සකසන්න, සජීව preview බලන්න, single-line CSS copy paste කරන්න.

උත්සාහ කරන්න

නිතර අසන ප්‍රශ්න