मुख्य सामग्री पर जाएँ

मुफ़्त JSON से टाइपस्क्रिप्ट कनवर्टर

किसी भी JSON ऑब्जेक्ट या ऐरे से टाइपस्क्रिप्ट इंटरफ़ेस या टाइप उपनाम उत्पन्न करें। अपना JSON पेस्ट करें और तुरंत उपयोग के लिए तैयार टाइपस्क्रिप्ट प्रकार प्राप्त करें।

लोड होने के बाद ऑफ़लाइन काम करता है
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 प्रकारअपनी एप्लिकेशन सेटिंग में टाइप सुरक्षा जोड़ने के लिए JSON कॉन्फ़िगरेशन फाइलों से TypeScript इंटरफेस उत्पन्न करें।
  • डेटाबेस रिकॉर्ड से TypeScript प्रकार उत्पन्न करेंडेटा परत टाइपिंग के लिए JSON-निर्यात किए गए डेटाबेस रिकॉर्ड या ORM क्वेरी परिणामों को TypeScript इंटरफेस में परिवर्तित करें।
  • मॉक डेटा और टेस्ट फिक्स्चर टाइप करेंअपनी यूनिट परीक्षा और Storybook कहानियों को टाइप करने के लिए JSON मॉक डेटा और टेस्ट फिक्स्चर से TypeScript इंटरफेस उत्पन्न करें।
  • तीसरे पक्ष की API प्रतिक्रियाएं टाइप करेंतीसरे पक्ष की API प्रतिक्रियाओं से TypeScript इंटरफेस उत्पन्न करें जहां आधिकारिक प्रकार गायब या पुराने हैं।

यह कैसे काम करता है

यह टूल बिना किसी बाहरी लाइब्रेरी के एक हाथ से लिखा रिकर्सिव टाइप इन्फ़रेंस एल्गोरिदम उपयोग करता है — इनपुट को मान्य और पार्स करने के लिए JSON.parse, फिर JSON ट्री में हर वैल्यू पर चलने वाला और सीधे ब्राउज़र में TypeScript इंटरफ़ेस या टाइप डिक्लेरेशन बनाने वाला एक कस्टम ट्रैवर्सल। कुछ भी सर्वर को नहीं भेजा जाता।

  1. 1
    JSON पार्स और मान्य किया जाता है
    आपका इनपुट JSON.parse को दिया जाता है। अगर यह विफल होता है, सटीक पार्स एरर तुरंत इनपुट के नीचे दिखाई देती है। एक सफल पार्स एक टाइप की गई वैल्यू ट्री बनाता है जो बाक़ी कन्वर्ज़न को चलाती है।
  2. 2
    रिकर्सिव टाइप इन्फ़रेंस
    एक रिकर्सिव getType फ़ंक्शन हर नोड पर चलता है: प्रिमिटिव string, number, boolean, या null में मैप होते हैं; ऑब्जेक्ट एक नए नामित इंटरफ़ेस को ट्रिगर करते हैं; ऑब्जेक्ट के array की कुंजियाँ सभी एलिमेंट में मिला दी जाती हैं ताकि केवल कुछ आइटम में मौजूद कुंजियाँ वैकल्पिक बन जाएँ और टकराते वैल्यू टाइप | से जोड़े जाएँ।
  3. 3
    टकराव-सुरक्षित इंटरफ़ेस नामकरण
    हर नेस्टेड ऑब्जेक्ट को उसकी JSON कुंजी से निकाला गया एक PascalCase नाम मिलता है (snake_case, kebab-case, और स्पेस सब नॉर्मलाइज़ किए जाते हैं)। अगर दो संरचनात्मक रूप से अलग ऑब्जेक्ट एक ही नाम साझा करें, तो पिछली परिभाषा को चुपचाप ओवरराइट करने की बजाय एक न्यूमेरिक सफ़िक्स जोड़ा जाता है (Data, Data2, …)।
  4. 4
    आउटपुट रेंडर होता है और डाउनलोड योग्य है
    नेस्टेड इंटरफ़ेस पहले भेजे जाते हैं, फिर रूट टाइप, आपकी चुनी सेटिंग के आधार पर export interface या export type के रूप में फ़ॉर्मेट किया जाता है। परिणाम क्लिपबोर्ड में कॉपी किया जा सकता है या .ts फ़ाइल के रूप में डाउनलोड किया जा सकता है — सब एक स्टैंडर्ड Blob के साथ बनाया गया, कोई सर्वर राउंड-ट्रिप नहीं।

संबंधित टूल

📋

JSON Schema से फ़ॉर्म

JSON Schema पेस्ट करें और एक लाइव, काम करने वाला फॉर्म पाएं — टेक्स्ट, नंबर, चेकबॉक्स, ड्रॉपडाउन और लिस्ट फ़ील्ड — फिर आपके इनपुट से बना JSON कॉपी करें। API रिक्वेस्ट बॉडी प्रोटोटाइप करने के लिए बढ़िया। ब्राउज़र में चलता है।

आज़माएं
⌨️

टाइपिंग स्पीड टेस्ट (WPM)

टाइम्ड, शब्द-गणना, उद्धरण, कस्टम और ज़ेन परीक्षणों के साथ अपनी टाइपिंग गति (WPM) और सटीकता को मापें। लाइव WPM, कच्ची गति, संगति, परिणाम ग्राफ़, कई भाषाएं, और प्रति-वर्ण प्रतिक्रिया — सब कुछ आपके ब्राउज़र में।

आज़माएं
📐

CSS क्लैंप() जेनरेटर

प्रतिक्रियाशील टाइपोग्राफी और रिक्ति के लिए एक द्रव CSS क्लैंप() मान उत्पन्न करें। न्यूनतम/अधिकतम आकार और व्यूपोर्ट रेंज सेट करें, लाइव पूर्वावलोकन देखें, और एक-पंक्ति CSS की प्रतिलिपि बनाएँ।

आज़माएं

अक्सर पूछे जाने वाले प्रश्न