Անցնել հիմնական բովանդակությանը
LibraTool logoLibraTool

JSON-ից TypeScript փոխակերպիչ անվճար

Ստեղծեք TypeScript ինտերֆեյսներ կամ տիպի կեղծանուններ ցանկացած JSON օբյեկտից կամ զանգվածից: Տեղադրեք ձեր JSON-ն ու ստացեք օգտագործման պատրաստ TypeScript տիպեր ակնթարթորեն:

Աշխատում է անցանց՝ բեռնվելուց հետո
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 տեսակներ API պատասխանիցPaste JSON API պատասխան և ակնթարթորեն ստեղծել TypeScript ինտերֆեյսներ տիպ-անվտանգ ձեր ֆրոնտենդ կոդ:
  • TypeScript տեսակներ կազմաձեւում ֆայլեր և կարգավորում օբյեկտների համարՍտեղծել TypeScript ինտերֆեյսներ JSON կազմաձեւում ֆայլերից տիպ-անվտանգ ավելացնել ձեր ծրագրի կարգավորում:
  • Ստեղծել TypeScript տեսակներ տվյալների բազայի գրառումներիցՓոխել JSON-արտահանված տվյալների բազայի գրառումներ կամ ORM հարցման արդյունքներ TypeScript ինտերֆեյսներ տվյալներ տիպ:
  • Տիպ մոխ տվյալներ և փորձ ամրոցՍտեղծել TypeScript ինտերֆեյսներ JSON մոխ տվյալներ և փորձ ամրոց տիպ ձեր միավոր թեստեր և Storybook հասկացություններ:
  • Տիպ երրորդ-կողմ API պատասխաններիՍտեղծել TypeScript ինտերֆեյսներ երրորդ-կողմ API պատասխաններ, որտեղ պաշտոնական տեսակները բացակայում են կամ հնացած:

Ինչպես է այն աշխատում

Այս գործիքն օգտագործում է ձեռագիր կրկնողական տիպի-եզրակացության ալգորիթմ առանց արտաքին գրադարանների — JSON.parse՝ մուտքագրումը վավերացնելու և վերլուծելու համար, ապա հատուկ անցում, որը գնում է JSON ծառի ամեն արժեքով և ուղղակիորեն դիտարկիչում արտադրում է TypeScript interface կամ type հայտարարություններ։ Ոչինչ չի ուղարկվում սերվեր։

  1. 1
    JSON-ը վերլուծված և վավերացված է
    Ձեր մուտքագրումը փոխանցվում է JSON.parse-ին։ Եթե այն ձախողվի, ճշգրիտ վերլուծության սխալն անմիջապես երևում է մուտքագրման տակ։ Հաջող վերլուծությունն արտադրում է տիպավորված արժեքային ծառ, որը վարում է փոխարկման մնացած մասը։
  2. 2
    Կրկնողական տիպի եզրակացություն
    Կրկնողական getType ֆունկցիան անցնում է ամեն հանգույցով. պարզունակները քարտեզագրվում են string, number, boolean կամ null-ի. օբյեկտները գործարկում են նոր անվանված interface. օբյեկտների զանգվածներն իրենց բանալիները միավորում են բոլոր տարրերի միջով, ուստի միայն որոշ իրերում առկա բանալիները դառնում են ընտրովի, և հակասող արժեքային տիպերը միանում են |-ով։
  3. 3
    Բախումից-զերծ interface անվանում
    Յուրաքանչյուր ներդրված օբյեկտ ստանում է PascalCase անուն, բխեցված իր JSON բանալուց (snake_case-ը, kebab-case-ը և բացատները բոլորն էլ նորմալացված են)։ Եթե երկու կառուցվածքային տարբեր օբյեկտ կիսվեին նույն անունով, թվային վերջածանց ավելացվում է (Data, Data2, …), ոչ թե լուռ վերասահմանվում է ավելի վաղ սահմանումը։
  4. 4
    Ելքը մատուցված և ներբեռնվող
    Ներդրված interface-ները արտադրվում են առաջինը, ապա արմատային type-ը, ձևաչափված export interface կամ export type-ով՝ կախված ձեր ընտրությունից։ Արդյունքը կարող է պատճենվել սեղմատախտակին կամ ներբեռնվել որպես .ts ֆայլ — ամեն ինչ կառուցված ստանդարտ Blob-ով և առանց սերվերային ուղևորության։

Առնչվող գործիքներ

📋

JSON Schema-ից Form

Թեղադրեք JSON Schema և ստացեք կենդանի գործում form — տեկստ, թիվ, դրոշման, բացվի մենյու և արակի դաշտեր — ապա բերել JSON-ն: Գործում է ձեր բրաուզերում:

Փորձեք այն
⌨️

Ստեղնաշարի արագության թեստ (WPM)

Չափեք ձեր մուտքագրման արագությունը (WPM) և ճշգրտությունը ժամանակային, բառերի քանակով, մեջբերումների, հատուկ և զեն թեստերով։ Ուղիղ WPM, հում արագություն, կայունություն, արդյունքների գրաֆիկ, բազմաթիվ լեզուներ և յուրաքանչյուր նիշի վերաբերյալ հետադարձ կապ — ամբողջը ձեր դիտարկիչում։

Փորձեք այն
📐

CSS clamp() գեներատոր

Ստեղծեք հոսուն CSS clamp() արժեք ռեսպոնսիվ տպագրության ու բացատի: Սահմանեք նվազ/մեծ չափ ու viewport տիրույթ, տեսեք ուղիղ նախադիտում ու պատճենեք մեկ տողի CSS:

Փորձեք այն

Հաճախակի տրվող հարցեր