JSON से TypeScript

मुफ्त ऑनलाइन JSON से TypeScript टूल। JSON डेटा को मानक TS interface टाइप परिभाषाओं में स्वचालित रूप से अनुमान लगाता है। नेस्टेड सब-इंटरफ़ेस, ऐरे यूनियन टाइप, वैकल्पिक और readonly फ़ील्ड, 2/4 स्पेस इंडेंटेशन विकल्प, पूरी तरह ब्राउज़र-स्थानीय प्रसंस्करण, कोई अपलोड नहीं।

संबंधित सुझाव

JSON से TypeScript के बारे में: JSON डेटा को स्वचालित रूप से TS प्रकारों में बदलना

JSON से TypeScript JSON प्रारूप में डेटा (JSON ऑब्जेक्ट या JSON ऐरे) को TypeScript interface प्रकार घोषणाओं में बदलने की प्रक्रिया है। JSON (JavaScript Object Notation) REST API, कॉन्फ़िगरेशन फ़ाइलों, लॉग के लिए मानक डेटा प्रारूप के रूप में फ्रंटएंड और बैकएंड विकास में हर जगह मौजूद है, जबकि TypeScript JavaScript का सुपरसेट है, जो कोड में स्थैतिक प्रकार जाँच जोड़ता है। विकास में अक्सर API द्वारा लौटाए गए JSON के लिए एक संबंधित TS interface लिखने की आवश्यकता होती है, मैन्युअल लेखन त्रुटि-प्रवण और समय लेने वाला होता है — यह टूल इस प्रक्रिया को स्वचालित करने के लिए है।

इस टूल का सार JSON ऑब्जेक्ट की संरचना को स्वचालित रूप से TypeScript interface में अनुमान लगाना है। JSON ऑब्जेक्ट का प्रत्येक key interface की प्रॉपर्टी नाम बन जाता है, प्रत्येक value के शाब्दिक प्रकार को संबंधित TS प्रकार में मैप किया जाता है: स्ट्रिंग `string` में, संख्या `number` में, बूलियन `boolean` में, null `null` में, ऐरे `T[]` में, नेस्टेड ऑब्जेक्ट स्वतंत्र सब-इंटरफ़ेस में। पूरी प्रक्रिया ब्राउज़र में स्थानीय रूप से पूरी होती है, किसी बैकएंड सेवा की आवश्यकता नहीं होती, कुछ ही सेकंड में पूर्ण और उपयोग योग्य प्रकार परिभाषा उत्पन्न होती है।

प्रकार अनुमान JSON से TypeScript रूपांतरण का सार है। JSON में स्वयं केवल 6 मूल प्रकार होते हैं (null, boolean, number, string, array, object), जबकि TypeScript का मूल प्रकार सिस्टम string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], यूनियन प्रकार (A | B) आदि शामिल करता है। हमारे टूल का getTsType फ़ंक्शन value के typeof और विशिष्ट रूप के अनुसार मैप करता है: typeof null `null` में मैप; typeof undefined `undefined` में मैप; typeof boolean `boolean` में मैप; typeof number `number` में मैप; typeof string `string` में मैप; Array.isArray() मिलने पर ऐरे के रूप में संसाधित।

नेस्टेड ऑब्जेक्ट हैंडलिंग टूल की प्रमुख क्षमता है। जब JSON में नेस्टेड ऑब्जेक्ट होते हैं, तो टूल पुनरावर्ती रूप से स्वतंत्र सब-इंटरफ़ेस उत्पन्न करता है, टाइप दोहराव से बचता है। उदाहरण के लिए `address: { street, city }` `RootAddress` सब-इंटरफ़ेस उत्पन्न करेगा, और मुख्य interface `address: RootAddress` के माध्यम से इसका संदर्भ देगा। सब-इंटरफ़ेस नामकरण नियम: "पैरेंट interface का नाम + फ़ील्ड नाम का पहला अक्षर बड़ा अक्षर", जो शब्दार्थात्मक स्पष्टता बनाए रखता है। processedTypes Set का उपयोग डुप्लिकेशन के लिए किया जाता है, समान संरचना के नेस्टेड ऑब्जेक्ट केवल एक बार interface उत्पन्न करते हैं।

ऐरे प्रकार अनुमान के तीन प्रसंस्करण मोड हैं। पहला, जब ऐरे खाली हो, तो `any[]` फ़ॉलबैक के रूप में उत्पन्न होता है (क्योंकि तत्व प्रकार का अनुमान नहीं लगाया जा सकता)। दूसरा, जब सभी तत्व एक ही प्रकार के हों, तो `T[]` प्रकार उत्पन्न होता है (जैसे `string[]`, `User[]`)। तीसरा, जब तत्व प्रकार असंगत हों, तो यूनियन ऐरे `(A | B)[]` उत्पन्न होता है (जैसे `(string | number)[]`)। यह अंतर उत्पन्न प्रकारों को सटीक और पठनीय बनाता है, अनावश्यक `any[]` के अत्यधिक उपयोग से बचता है।

वैकल्पिक फ़ील्ड (?) TypeScript strict मोड की महत्वपूर्ण विशेषता है। सक्षम होने पर, टूल प्रत्येक फ़ील्ड के मान को स्कैन करता है, और यदि null या undefined है, तो interface में `?` मॉडिफायर जोड़ता है: `name?: string` का अर्थ है कि वह फ़ील्ड वैकल्पिक है। यह बैकएंड API द्वारा लौटाए गए वैकल्पिक फ़ील्ड के लिए बहुत उपयोगी है, undefined फ़ील्ड तक पहुँचने पर रनटाइम त्रुटियों से बचता है। readonly फ़ील्ड अपरिवर्तनीयता पर ज़ोर देती है, उत्पन्न कोड `readonly id: number` के रूप में होता है, जो कॉन्फ़िगरेशन, स्थिति स्नैपशॉट, DTO आदि को परिभाषित करने के लिए उपयुक्त है।

interface बनाम type alias TypeScript उपयोगकर्ताओं के लिए एक सामान्य विकल्प है। इस टूल ने interface को लगातार उत्पन्न करना चुना है, क्योंकि interface TypeScript में ऑब्जेक्ट प्रकारों का वर्णन करने का मानक तरीका है, जो declaration merging, implements कीवर्ड, extends विरासत का समर्थन करता है, और React, Vue, Angular जैसे मुख्यधारा के फ्रंटएंड प्रोजेक्ट्स के कोडिंग मानकों के लिए बेहतर अनुकूल है। type alias यूनियन प्रकारों, क्रॉस प्रकारों, फ़ंक्शन प्रकारों का वर्णन करने में अधिक शक्तिशाली है, लेकिन ऑब्जेक्ट प्रकारों के लिए interface पसंद किया जाता है।

रीयल-टाइम रूपांतरण टूल की व्यावहारिक विशेषता है। उपयोगकर्ता द्वारा JSON इनपुट करने के बाद, 400ms debounce स्वचालित रूप से रूपांतरण को ट्रिगर करता है, मैन्युअल रूप से बटन क्लिक करने की आवश्यकता नहीं। CodeMirror के TypeScript सिंटैक्स हाइलाइटिंग (@codemirror/lang-javascript में typescript: true विकल्प के माध्यम से) के साथ मिलकर, उपयोगकर्ता तुरंत उत्पन्न interface देख सकता है, इनपुट को संशोधित कर सकता है और आउटपुट परिवर्तनों का निरीक्षण कर सकता है। यह रीयल-टाइम फ़ीडबैक टाइप डिज़ाइन दक्षता में काफी सुधार करता है, विशेष रूप से तेज़ प्रयोग के दौरान।

JSON त्रुटि स्व-मरम्मत टूल की मजबूती को बढ़ाता है। वास्तव में, उपयोगकर्ताओं द्वारा इनपुट किया गया JSON अक्सर अंत में अतिरिक्त कॉमा, एकल उद्धरण, उद्धरण की कमी, टिप्पणियाँ आदि जैसी छोटी समस्याओं से ग्रस्त होता है। अंतर्निहित tryFixJSON फ़ंक्शन JSON.parse विफल होने पर स्वचालित रूप से सामान्य त्रुटियों को ठीक करने का प्रयास करता है, सफल मरम्मत पर उपयोगकर्ता को सूचित करता है; यदि अभी भी पार्स नहीं किया जा सकता, तो दाईं ओर विशिष्ट त्रुटि स्थान और कारण प्रदर्शित होता है, उपयोगकर्ता को सुधारने के लिए मार्गदर्शन करता है। यह डिज़ाइन टूल की व्यावहारिकता को एक स्तर ऊपर ले जाता है, छोटी त्रुटियों के कारण बार-बार मैन्युअल समायोजन की आवश्यकता को समाप्त करता है।

शुद्ध फ्रंटएंड प्रसंस्करण इस टूल का मूल आर्किटेक्चर है। सभी JSON पार्सिंग, प्रकार अनुमान, interface जनरेशन ब्राउज़र JavaScript में निष्पादित होते हैं, किसी भी सर्वर पर कोई डेटा नहीं भेजा जाता। इस डिज़ाइन के दो मुख्य लाभ हैं: पहला, JSON सामग्री में उपयोगकर्ता की संवेदनशील जानकारी (API कुंजी, टोकन, उपयोगकर्ता डेटा) शामिल हो सकती है, स्थानीय प्रसंस्करण लीक जोखिम को पूरी तरह समाप्त कर देता है; दूसरा, रूपांतरण गति केवल डिवाइस CPU तक सीमित है, 1MB से कम का JSON लगभग तुरंत रूपांतरित हो जाता है, नेटवर्क राउंड-ट्रिप की प्रतीक्षा करने की आवश्यकता नहीं। यह पंजीकरण और लॉगिन की आवश्यकता वाली कुछ ऑनलाइन सेवाओं की तुलना में बेहतर गोपनीयता सुरक्षा और प्रदर्शन प्रदान करता है।

उपयोग के मामले

  • फ्रंटएंड विकास में REST API या GraphQL द्वारा लौटाए गए JSON प्रतिक्रिया को शीघ्रता से TS interface में बदलें, मैन्युअल प्रकार परिभाषा लिखने से बचें।
  • React/Vue/Angular प्रोजेक्ट्स में Props, State, कंपोनेंट पैरामीटर के लिए प्रकार घोषणा की आवश्यकता होने पर, नमूना JSON से कुछ ही सेकंड में उत्पन्न करें।
  • फुल-स्टैक TypeScript प्रोजेक्ट्स में, जहाँ फ्रंटएंड और बैकएंड प्रकार परिभाषाएँ साझा करते हैं, बैकएंड का mock JSON फ्रंटएंड के लिए टाइप स्रोत के रूप में काम कर सकता है।
  • थर्ड-पार्टी API (कूरियर, मौसम, भुगतान आदि) के साथ एकीकरण करते समय, संबंधित TypeScript interface को शीघ्रता से उत्पन्न करें, दस्तावेज़ीकरण पढ़ने की आवश्यकता को समाप्त करें।
  • मॉक डेटा, टेस्ट फ़िक्सचर, JSON कॉन्फ़िगरेशन फ़ाइलों से प्रकार परिभाषाओं का रिवर्स अनुमान लगाएँ, टाइप सुरक्षा और IDE इंटेलिसेंस को मजबूत करें।
  • डेटाबेस ORM द्वारा निर्यातित JSON Schema को TypeScript interface में बदलें, Node.js बैकएंड DTO परिभाषाओं में एकीकृत करें।
  • TypeScript सीखते समय मौजूदा JSON को interface उदाहरण में बदलें, नेस्टेड प्रकारों, यूनियन प्रकारों, वैकल्पिक फ़ील्ड के सिंटैक्स को समझें।
  • कोड रिफैक्टरिंग के दौरान बिखरे हुए JS ऑब्जेक्ट लिटरल को औपचारिक interface में बदलें, कोड पठनीयता और टाइप सुरक्षा में सुधार करें।

उपयोग कैसे करें

  1. बाएँ इनपुट बॉक्स में JSON सामग्री पेस्ट करें, या .json/.txt फ़ाइल चुनने के लिए "अपलोड" बटन पर क्लिक करें, या अंतर्निहित नमूना लोड करने के लिए "नमूना" पर क्लिक करें।
  2. टूलबार के दाईं ओर interface नाम बटन (या गियर आइकन) पर क्लिक करें, रूट interface नाम अनुकूलित करें (डिफ़ॉल्ट Root), वैकल्पिक फ़ील्ड/readonly सक्षम करें।
  3. टूल स्वचालित रूप से रूपांतरित करेगा (इनपुट के 400ms बाद debounce); दाईं ओर उत्पन्न TypeScript interface कोड देखें, CodeMirror हाइलाइटिंग पठनीयता में सुधार करती है।
  4. इंडेंटेशन शैली (2 या 4 स्पेस) चुनें, सर्वोत्तम देखने के अनुभव के लिए टूलबार के बाएँ/दाएँ पैनल की चौड़ाई समायोजित करें।
  5. "कॉपी" पर क्लिक करके TS कोड को क्लिपबोर्ड पर कॉपी करें, या "डाउनलोड" पर क्लिक करके `${interfaceName}.ts` फ़ाइल (जैसे User.ts) के रूप में सहेजें।
  6. अपने प्रोजेक्ट के `types/` या `src/types/` डायरेक्टरी में कोड पेस्ट करें, आवश्यकतानुसार import करके उपयोग करें।

विशेषताएं

  • स्मार्ट प्रकार अनुमान: null, boolean, number, string, array, object आदि TypeScript प्रकारों को स्वचालित रूप से पहचानता है और मूल TS सिंटैक्स में मैप करता है।
  • नेस्टेड ऑब्जेक्ट का स्वचालित विस्तार: नेस्टेड ऑब्जेक्ट के लिए स्वचालित रूप से स्वतंत्र सब-इंटरफ़ेस बनाता है (जैसे RootAddress), टाइप पदानुक्रम स्पष्ट रखता है और अतिरेक से बचता है।
  • ऐरे प्रकार की स्मार्ट हैंडलिंग: समान प्रकार के तत्वों के लिए `T[]` उत्पन्न करता है, मिश्रित प्रकारों के लिए यूनियन ऐरे `(A | B)[]`, खाली ऐरे के लिए `any[]` फ़ॉलबैक।
  • वैकल्पिक फ़ील्ड मार्किंग: सक्षम होने पर null/undefined फ़ील्ड स्वचालित रूप से पहचानता है, `?` मॉडिफायर जोड़ता है, TypeScript strict मोड के अनुरूप कोड उत्पन्न करता है।
  • readonly फ़ील्ड समर्थन: सक्षम होने पर सभी फ़ील्ड में `readonly` मॉडिफायर जोड़ता है, अपरिवर्तनीय स्थिति, कॉन्फ़िगरेशन, DTO आदि के लिए उपयुक्त।
  • interface नाम अनुकूलन: रूट interface का नाम कॉन्फ़िगर करने योग्य (डिफ़ॉल्ट Root), डाउनलोड फ़ाइल का नाम भी इसी नाम का उपयोग करता है (जैसे User.ts)।
  • 2/4 स्पेस इंडेंटेशन चयन योग्य: टूलबार में एक क्लिक से 2 स्पेस (ESLint डिफ़ॉल्ट) और 4 स्पेस इंडेंटेशन शैलियों के बीच स्विच।
  • रीयल-टाइम स्वचालित रूपांतरण: JSON इनपुट के 400ms बाद debounce और स्वचालित रूपांतरण, किसी बटन पर क्लिक करने की आवश्यकता नहीं; पेस्ट, फ़ाइल अपलोड, नमूना - तीन इनपुट तरीकों का समर्थन।
  • JSON त्रुटि स्व-मरम्मत: अंतर्निहित tryFixJSON मरम्मत फ़ंक्शन, अंत में अतिरिक्त कॉमा, एकल उद्धरण, उद्धरण की कमी और अन्य सामान्य सिंटैक्स त्रुटियों को स्वचालित रूप से संभालता है।
  • TypeScript कोड हाइलाइटिंग: दायाँ आउटपुट CodeMirror + JavaScript (TypeScript) हाइलाइटिंग का उपयोग करता है, उच्च पठनीयता के साथ।
  • कॉपी और डाउनलोड: एक क्लिक से क्लिपबोर्ड पर कॉपी करें, या मानक .ts फ़ाइल के रूप में डाउनलोड करके फ्रंटएंड प्रोजेक्ट में सीधे उपयोग करें।
  • शुद्ध ब्राउज़र-स्थानीय प्रसंस्करण: सभी JSON पार्सिंग, प्रकार अनुमान, interface जनरेशन ब्राउज़र JavaScript में निष्पादित होते हैं, मूल डेटा अपलोड नहीं किया जाता।

सामान्य प्रश्न

JSON को TypeScript interface में कैसे बदलें?

बाएँ इनपुट बॉक्स में JSON सामग्री पेस्ट करें, टूल स्वचालित रूप से प्रत्येक फ़ील्ड के प्रकार (string, number, boolean, array, object आदि) का अनुमान लगाएगा और मानक TypeScript interface परिभाषा उत्पन्न करेगा। नेस्टेड ऑब्जेक्ट स्वचालित रूप से सब-इंटरफ़ेस बनाएंगे, टाइप पदानुक्रम स्पष्ट रखते हुए। इनपुट के 400ms बाद स्वचालित रूपांतरण होता है, किसी बटन पर क्लिक करने की आवश्यकता नहीं।

क्या type alias या interface का जनरेशन समर्थित है?

यह टूल केवल TypeScript interface घोषणाएँ उत्पन्न करता है (type alias समर्थित नहीं है)। interface TypeScript में ऑब्जेक्ट प्रकारों का वर्णन करने का मानक तरीका है, जो declaration merging और implements कीवर्ड का समर्थन करता है, और React, Vue, Angular जैसे फ्रंटएंड प्रोजेक्ट्स के लिए पसंदीदा है।

वैकल्पिक फ़ील्ड को कैसे चिह्नित करें?

सेटिंग्स में "वैकल्पिक फ़ील्ड (?)" को सक्षम करने पर, टूल स्वचालित रूप से null या undefined मान वाले फ़ील्ड का पता लगाएगा और interface में `?` मॉडिफायर जोड़ देगा। उदाहरण के लिए `name?: string` का अर्थ है कि वह फ़ील्ड वैकल्पिक है। उत्पन्न कोड TypeScript strict कड़े मोड विनिर्देश के अनुरूप है।

readonly फ़ील्ड कैसे उत्पन्न करें?

सेटिंग्स में "readonly फ़ील्ड" को सक्षम करने पर, सभी फ़ील्ड में स्वचालित रूप से `readonly` मॉडिफायर जोड़ दिया जाएगा, उदाहरण के लिए `readonly id: number`। उत्पन्न interface अपरिवर्तनीयता पर ज़ोर देता है, जो कॉन्फ़िगरेशन, स्थिति स्नैपशॉट, या DTO को परिभाषित करने के लिए उपयुक्त है।

ऐरे प्रकारों को कैसे संभाला जाता है?

टूल ऐरे तत्वों के प्रकारों का विश्लेषण करता है। यदि सभी तत्व एक ही प्रकार के हैं, तो `T[]` प्रकार उत्पन्न होता है (जैसे `string[]`); यदि प्रकार भिन्न हैं, तो यूनियन ऐरे `(A | B)[]` उत्पन्न होता है (जैसे `(string | number)[]`); यदि ऐरे खाली है, तो फ़ॉलबैक के रूप में `any[]` उत्पन्न होता है।

क्या नेस्टेड ऑब्जेक्ट कई interface उत्पन्न करते हैं?

हाँ। प्रत्येक नेस्टेड ऑब्जेक्ट एक स्वतंत्र सब-इंटरफ़ेस उत्पन्न करता है, नामकरण नियम: "पैरेंट interface का नाम + फ़ील्ड नाम का पहला अक्षर बड़ा अक्षर"। उदाहरण के लिए, यदि Root में address ऑब्जेक्ट है, तो Root और RootAddress दोनों interface उत्पन्न होंगे। सब-इंटरफ़ेस स्वचालित रूप से एक-दूसरे को संदर्भित करते हैं, टाइप परिभाषा दोहराव से बचते हैं।

क्या interface का नाम अनुकूलित किया जा सकता है?

हाँ। टूलबार के दाईं ओर interface नाम बटन पर क्लिक करके (या सेटिंग्स में), आप रूट interface का नाम अनुकूलित कर सकते हैं (डिफ़ॉल्ट Root)। डाउनलोड की गई .ts फ़ाइल भी इसी नाम से नामित की जाएगी (जैसे `User.ts`)। सब-इंटरफ़ेस के नाम रूट नाम के आधार पर स्वचालित रूप से उत्पन्न होते हैं।

क्या डाउनलोड की गई .ts फ़ाइल प्रोजेक्ट में सीधे उपयोग की जा सकती है?

हाँ। उत्पन्न कोड TypeScript कोडिंग मानकों के अनुरूप है, इसमें पूर्ण प्रकार परिभाषाएँ, नेस्टेड interface, यूनियन प्रकार अनुमान आदि शामिल हैं, और इसे सीधे React, Vue, Angular, या Node.js प्रोजेक्ट्स में कॉपी किया जा सकता है। डाउनलोड की गई फ़ाइल का नाम `${interfaceName}.ts` है, जैसे User.ts।

यदि JSON पार्सिंग विफल हो जाए तो क्या करें?

यदि JSON में सामान्य त्रुटियाँ हैं जैसे अंत में अतिरिक्त कॉमा, उद्धरण चिह्नों की कमी, एकल उद्धरण के बजाय दोहरे उद्धरण का उपयोग, तो टूल स्वचालित रूप से मरम्मत का प्रयास करने के लिए tryFixJSON को कॉल करेगा। सफल मरम्मत पर उपयोगकर्ता को सूचित किया जाएगा; यदि मरम्मत नहीं हो सकती, तो दाईं ओर विशिष्ट त्रुटि स्थान और कारण प्रदर्शित होगा। आप 2/4 स्पेस इंडेंटेशन के साथ पुनः स्वरूपित करके फिर से प्रयास कर सकते हैं।

कौन सी JSON डेटा संरचनाएँ समर्थित हैं?

सभी मान्य JSON डेटा संरचनाएँ समर्थित हैं: मूल प्रकार (null, boolean, number, string), ऐरे (एकल या बहु-आयामी), नेस्टेड ऑब्जेक्ट (कोई भी गहराई), मिश्रित प्रकार के ऐरे (यूनियन प्रकार उत्पन्न करते हैं)। असमर्थित इनपुट: JSON जिसमें फ़ंक्शन, Symbol, undefined और अन्य JavaScript विशेष मान शामिल हैं (ये मान्य JSON नहीं हैं)।

क्या इंडेंटेशन स्पेस की संख्या चुनी जा सकती है?

हाँ। टूलबार के दाईं ओर एक इंडेंटेशन सेटिंग्स ड्रॉपडाउन है, जो 2 और 4 स्पेस शैलियों का समर्थन करता है। 2 स्पेस ESLint/Prettier की डिफ़ॉल्ट शैली है, 4 स्पेस उन प्रोजेक्ट्स के लिए उपयुक्त है जिन्हें अधिक ढीले इंडेंटेशन की आवश्यकता होती है। उत्पन्न कोड पठनीयता और रखरखाव के लिए सुसंगत इंडेंटेशन बनाए रखता है।

JSON Schema, Zod और अन्य प्रकार लाइब्रेरी से क्या अंतर है?

JSON Schema रनटाइम डेटा सत्यापन (API सीमा, उपयोगकर्ता इनपुट सत्यापन) के लिए उपयुक्त है; Zod/yup TypeScript-अनुकूल रनटाइम सत्यापन लाइब्रेरी हैं, जो schema से TS प्रकार उत्पन्न कर सकती हैं; हमारा टूल हल्का शुद्ध प्रकार परिभाषा जनरेटर है, रनटाइम सत्यापन नहीं करता, फ्रंटएंड स्थैतिक प्रकार परिभाषा परिदृश्यों पर केंद्रित है, तेज़ है और शून्य निर्भरता है।

समस्या निवारण

यदि उत्पन्न interface गलत हो तो क्या करें?

सामान्य कारण: JSON पार्सिंग विफलता, नेस्टेड ऑब्जेक्ट पहचान त्रुटि, ऐरे प्रकार अनुमान त्रुटि। समाधान: 1) JSON मान्य है या नहीं जाँचें (JSON फ़ॉर्मेटिंग टूल का उपयोग करें); 2) नेस्टेड ऑब्जेक्ट के लिए, सब-इंटरफ़ेस संदर्भ संबंधों की पुष्टि करें; 3) ऐरे के लिए, तत्व प्रकारों की संगति की पुष्टि करें; 4) पुनः उत्पन्न करें या उत्पन्न कोड को मैन्युअल रूप से ठीक करें। उत्पन्न interface एक मसौदा है, प्रोजेक्ट के वास्तविक API के अनुसार विवरण समायोजित करने की आवश्यकता है।

डाउनलोड की गई .ts फ़ाइल प्रोजेक्ट में कंपाइल त्रुटि देती है?

संभावित कारण: 1) tsconfig.json में strict मोड सक्षम नहीं है लेकिन readonly फ़ील्ड उत्पन्न किए गए हैं; 2) इंटरफ़ेस नाम प्रोजेक्ट में अन्य प्रकारों के साथ टकराता है; 3) फ़ील्ड नाम TypeScript कीवर्ड है (जैसे `class`, `type`)। समाधान: tsconfig की strict सेटिंग समायोजित करें, इंटरफ़ेस नाम बदलें, टकराने वाले फ़ील्ड में उद्धरण एस्केप जोड़ें (जैसे `"class": string`)।

JSON में नेस्टेड ऐरे हैं, प्रकार अनुमान गलत है?

यह टूल बहु-आयामी ऐरे (जैसे `[[1, 2], [3, 4]]`) को पुनरावर्ती रूप से संसाधित करता है, अंततः `number[][]` उत्पन्न करता है। यदि नेस्टेड ऐरे के तत्व प्रकार असंगत हैं, तो टूल `((A | B)[])[]` प्रकार उत्पन्न करेगा। खाली ऐरे हमेशा `any[]` उत्पन्न करते हैं, क्योंकि तत्व प्रकार का अनुमान नहीं लगाया जा सकता।

null मान `null` प्रकार में मैप होता है वैकल्पिक फ़ील्ड के बजाय?

डिफ़ॉल्ट रूप से, टूल JSON में null मान को TS के `null` प्रकार में मैप करता है (जैसे `middleName: null`)। यदि आप वैकल्पिक फ़ील्ड (`middleName?: string`) उत्पन्न करना चाहते हैं, तो आपको: 1) "वैकल्पिक फ़ील्ड" विकल्प सक्षम करना होगा (अनुशंसित); 2) या JSON में null मान को फ़ील्ड अनुपस्थिति में बदलें; 3) या उत्पन्न होने के बाद मैन्युअल रूप से `null` को `string | null` या `?` में बदलें।

इंटरफ़ेस नाम और डाउनलोड फ़ाइल नाम मेल नहीं खाते?

टूल में दोनों एक ही मान हैं, "इंटरफ़ेस नाम" सेटिंग द्वारा नियंत्रित (डिफ़ॉल्ट Root)। डाउनलोड की गई फ़ाइल का नाम `${interfaceName}.ts` है। यदि वे असंगत प्रतीत होते हैं, तो जाँचें कि कई टैब खुले हैं तो नहीं, जिससे सेटिंग्स असिंक्रोनाइज़ हो सकती हैं। सेटिंग्स बदलने के बाद पुनः उत्पन्न करने की सिफारिश की जाती है।

उत्पन्न कोड में बहुत सारे `any` प्रकार हैं?

संभावित कारण: 1) JSON में अपरिचित प्रकार हैं (वास्तव में ऑब्जेक्ट है लेकिन पार्सिंग त्रुटि); 2) ऐरे खाली है जिससे any[] फ़ॉलबैक होता है; 3) फ़ील्ड मान null है और वैकल्पिक फ़ील्ड विकल्प सक्षम नहीं है। समाधान: JSON डेटा की अखंडता जाँचें, टूल के अनुमान को बेहतर बनाने के लिए नमूना डेटा जोड़ें, हमेशा खाली रहने वाले ऐरे के लिए मैन्युअल रूप से प्रकार निर्दिष्ट करें (जैसे `User[]`)।

उत्पन्न interface को मौजूदा प्रकारों के साथ विलय करना चाहते हैं?

TypeScript interface घोषणा विलय (declaration merging) का समर्थन करता है, समान नाम के interface स्वचालित रूप से अपनी प्रॉपर्टीज़ को विलय कर देते हैं। प्रोजेक्ट में केवल समान नाम का interface बनाएँ और export करें, फिर विलय करें: उदाहरण के लिए, टूल `export interface User { id: number }` उत्पन्न करता है, आप प्रोजेक्ट में `export interface User { name: string }` लिखते हैं, दोनों स्वचालित रूप से `{ id: number; name: string }` में विलय हो जाएंगे।

शब्दकोश

JSON (JavaScript Object Notation)
JavaScript ऑब्जेक्ट सिंटैक्स पर आधारित लेकिन प्रोग्रामिंग भाषा से स्वतंत्र हल्का डेटा विनिमय प्रारूप। ऑब्जेक्ट ({}), ऐरे ([]), स्ट्रिंग, संख्या, बूलियन, null 6 मूल प्रकारों का समर्थन करता है। REST API, फ्रंटएंड-बैकएंड डेटा ट्रांसमिशन, कॉन्फ़िगरेशन फ़ाइलों, लॉग आदि में व्यापक रूप से उपयोग किया जाता है।
TypeScript
Microsoft द्वारा विकसित JavaScript का सुपरसेट, जो JavaScript में स्थैतिक प्रकार परिभाषाएँ, इंटरफ़ेस, जेनरिक आदि जोड़ता है। TypeScript कोड ब्राउज़र या Node.js में चलाने के लिए शुद्ध JavaScript में संकलित किया जाता है। React, Vue, Angular जैसे आधुनिक फ्रंटएंड प्रोजेक्ट्स की पसंदीदा भाषा।
interface (इंटरफ़ेस)
TypeScript में ऑब्जेक्ट प्रकारों का वर्णन करने के लिए कीवर्ड, सिंटैक्स: `interface Name { prop: type; }`। घोषणा विलय (समान नाम के interface स्वचालित रूप से विलय होते हैं), implements (क्लास इंटरफ़ेस लागू करता है), extends (इंटरफ़ेस विरासत) का समर्थन करता है। TypeScript में ऑब्जेक्ट के आकार का वर्णन करने का मुख्य तरीका।
type alias
TypeScript में प्रकारों को उपनाम देने के लिए कीवर्ड, सिंटैक्स: `type Name = ...`। यूनियन प्रकार (`A | B`), क्रॉस प्रकार (`A & B`), फ़ंक्शन प्रकार आदि को परिभाषित करने के लिए उपयोग किया जा सकता है। interface से अधिक लचीला लेकिन घोषणा विलय का समर्थन नहीं करता। यह टूल type के बजाय interface का उपयोग करता है।
प्रकार अनुमान (Type Inference)
यह प्रक्रिया जिसमें यह टूल JSON value के typeof और विशिष्ट रूप के आधार पर संबंधित TS प्रकार को स्वचालित रूप से निर्धारित करता है। उदाहरण के लिए typeof string string में मैप, Array.isArray() मिलने पर ऐरे के रूप में संसाधित, typeof object मिलने पर स्वतंत्र सब-इंटरफ़ेस उत्पन्न।
वैकल्पिक फ़ील्ड (?)
TypeScript में फ़ील्ड को वैकल्पिक के रूप में दर्शाने वाला मॉडिफायर। `name?: string` का अर्थ है कि name फ़ील्ड अनुपस्थित हो सकता है (मान undefined)। टूल के "वैकल्पिक फ़ील्ड" विकल्प को सक्षम करने पर, null या undefined मान वाले फ़ील्ड में स्वचालित रूप से `?` जोड़ दिया जाता है।
readonly फ़ील्ड (readonly)
TypeScript में फ़ील्ड को अपरिवर्तनीय के रूप में दर्शाने वाला मॉडिफायर। `readonly id: number` का अर्थ है कि ऑब्जेक्ट बनने के बाद id फ़ील्ड को फिर से असाइन नहीं किया जा सकता। टूल के "readonly फ़ील्ड" विकल्प को सक्षम करने पर, सभी फ़ील्ड में स्वचालित रूप से `readonly` जोड़ दिया जाता है।
यूनियन प्रकार (Union Type)
TypeScript में यह दर्शाने वाला सिंटैक्स कि मान कई प्रकारों में से एक हो सकता है, `A | B` के रूप में लिखा जाता है। टूल इसका उपयोग तब करता है जब ऐरे तत्व प्रकार असंगत हों, उदाहरण के लिए `(string | number)[]` का अर्थ है कि ऐरे तत्व string या number हो सकता है।
ऐरे प्रकार (Array Type)
TypeScript में ऐरे के लिए सिंटैक्स, दो रूपों में: जेनरिक रूप `Array<T>` और संक्षिप्त रूप `T[]`। टूल लगातार संक्षिप्त रूप का उपयोग करता है। टूल में ऐरे प्रकार जनरेशन के तीन मोड हैं: एकल प्रकार `T[]`, मिश्रित प्रकार `(A | B)[]`, खाली ऐरे `any[]`।
नेस्टेड इंटरफ़ेस (Nested Interface)
इंटरफ़ेस के भीतर अन्य इंटरफ़ेस का संदर्भ देकर प्रकार पदानुक्रम बनाना। टूल प्रत्येक नेस्टेड ऑब्जेक्ट के लिए स्वतंत्र सब-इंटरफ़ेस उत्पन्न करता है, मुख्य इंटरफ़ेस प्रॉपर्टी नाम के माध्यम से संदर्भित करता है। उदाहरण के लिए Root, RootAddress को संदर्भित करता है, RootAddress को अन्य प्रकारों द्वारा स्वतंत्र रूप से संदर्भित किया जा सकता है।
TypeScript strict मोड
TypeScript कंपाइलर का सख्त मोड, जिसमें कई उप-विकल्प शामिल हैं: noImplicitAny, strictNullChecks, strictFunctionTypes आदि। strictNullChecks सक्षम करने पर, null और undefined स्वतंत्र प्रकार हैं और अन्य प्रकार चर को असाइन नहीं किए जा सकते। इस टूल द्वारा उत्पन्न वैकल्पिक फ़ील्ड strict मोड के साथ पूरी तरह संगत हैं।
DTO (Data Transfer Object)
डेटा ट्रांसफर ऑब्जेक्ट, जिसका उपयोग विभिन्न परतों (जैसे API और Service परत) के बीच डेटा स्थानांतरित करने के लिए किया जाता है। TypeScript प्रोजेक्ट्स में आमतौर पर interface के साथ वर्णित किया जाता है, readonly के साथ संयोजन में अपरिवर्तनीयता पर ज़ोर देता है। यह टूल DTO प्रकार परिभाषाएँ उत्पन्न करने के लिए एक सामान्य टूल है।
घोषणा विलय (Declaration Merging)
TypeScript interface की विशेषता: समान नाम के interface स्वचालित रूप से अपनी प्रॉपर्टीज़ को विलय कर देते हैं। अक्सर थर्ड-पार्टी लाइब्रेरी की प्रकार परिभाषाओं का विस्तार करने के लिए उपयोग किया जाता है। इस टूल द्वारा उत्पन्न interface प्रोजेक्ट में अन्य समान नाम वाले interface के साथ विलय हो सकते हैं, जो क्रमिक प्रकार विस्तार की सुविधा देता है।
tsconfig.json
TypeScript प्रोजेक्ट की कॉन्फ़िगरेशन फ़ाइल, प्रोजेक्ट रूट डायरेक्टरी में स्थित। compilerOptions (target, module, strict आदि), include, exclude और अन्य सेटिंग्स शामिल हैं। इस टूल द्वारा उत्पन्न .ts फ़ाइलें किसी भी मानक tsconfig प्रोजेक्ट में उपयोग की जा सकती हैं।
tryFixJSON
इस टूल का अंतर्निहित JSON मरम्मत फ़ंक्शन, जो अंत में अतिरिक्त कॉमा, दोहरे उद्धरणों के बजाय एकल उद्धरण, key में उद्धरण की कमी, टिप्पणियाँ और अन्य सामान्य JSON सिंटैक्स त्रुटियों को स्वचालित रूप से संभालता है। JSON.parse विफल होने पर स्वचालित रूप से कॉल किया जाता है, सफल मरम्मत पर उपयोगकर्ता को सूचित करता है और रूपांतरण जारी रखता है।

JSON प्रकार से TypeScript प्रकार के मैपिंग नियम

हमारे टूल का getTsType फ़ंक्शन JSON value के रूप के आधार पर TypeScript प्रकार का अनुमान लगाने के पूर्ण नियम:

JSON मानउदाहरणTypeScript प्रकारनिर्धारण नियम
nullnullnullJSON null सीधे TS null प्रकार में मैप
undefinedundefinedundefinedundefined मान TS undefined में मैप (केवल रनटाइम पर मौजूद)
booleantrue / falsebooleantypeof boolean TS boolean में मैप
integer1, 100, -9999numberपूर्णांक और फ़्लोट दोनों TS number में मैप
float3.14, -0.5, 1e10numberसभी संख्यात्मक शाब्दिक number में मैप (TS int और float में अंतर नहीं करता)
string"Alice", "दिल्ली"stringtypeof string TS string में मैप
empty array[]any[]खाली ऐरे तत्व प्रकार का अनुमान नहीं लगा सकता, any[] फ़ॉलबैक
homogeneous array[1, 2, 3]T[] (जैसे number[])एक ही प्रकार के तत्व एकल ऐरे प्रकार उत्पन्न करते हैं
mixed array[1, "a"](A | B)[] (जैसे (number | string)[])अलग-अलग प्रकार के तत्व यूनियन ऐरे प्रकार उत्पन्न करते हैं
object{a: 1, b: "x"}SubInterface (जैसे Root)नेस्टेड ऑब्जेक्ट स्वतंत्र सब-इंटरफ़ेस उत्पन्न करता है और संदर्भित करता है

interface बनाम type alias तुलना

इस टूल के type alias के बजाय interface उत्पन्न करने के कारण, और TypeScript प्रोजेक्ट्स में दोनों के बीच अंतर:

क्षमता आयामinterfacetype aliasनोट
ऑब्जेक्ट प्रकार विवरण✓ (पसंदीदा)✓ (भी समर्थित)दोनों समर्थित, टूल interface उत्पन्न करता है
घोषणा विलय✓ (समान नाम स्वचालित विलय)✗ (डुप्लिकेट घोषणा त्रुटि)interface क्रमिक विस्तार का समर्थन करता है, type नहीं
implements/extends✓ (क्लास implements कर सकता है)△ (केवल ऑब्जेक्ट type implements कर सकता है)interface OOP परिदृश्यों में अधिक स्वाभाविक
यूनियन प्रकार (A | B)type यूनियन प्रकारों के लिए अधिक संक्षिप्त
क्रॉस प्रकार (A & B)type क्रॉस प्रकारों के लिए अधिक संक्षिप्त
फ़ंक्शन प्रकार△ (call signature आवश्यक)✓ (सीधे परिभाषित)type फ़ंक्शन प्रकारों के लिए अधिक सहज
प्रदर्शन (बड़ी संख्या में प्रकार)थोड़ा तेज़थोड़ा धीमाinterface कंपाइल-टाइम वृद्धिशील विलय में तेज़
टूल की पसंद✓ लगातार उपयोगटूल ऑब्जेक्ट प्रकारों पर केंद्रित, interface सर्वोत्तम विकल्प

वैकल्पिक और readonly फ़ील्ड जनरेशन नियम

इस टूल के दो टॉगल विकल्पों का उत्पन्न कोड पर प्रभाव और इष्टतम उपयोग परिदृश्य:

विकल्पट्रिगर शर्तउत्पन्न सिंटैक्सइष्टतम उपयोग परिदृश्य
वैकल्पिक फ़ील्ड (?): बंद(डिफ़ॉल्ट)name: stringसभी फ़ील्ड आवश्यक, कड़े प्रकार
वैकल्पिक फ़ील्ड (?): चालूvalue === null || value === undefinedname?: stringवैकल्पिक फ़ील्ड, अनुपस्थित होने योग्य डेटा
readonly फ़ील्ड (readonly): बंद(डिफ़ॉल्ट)name: stringसामान्य प्रकार, फ़ील्ड लिखने योग्य
readonly फ़ील्ड (readonly): चालूसभी फ़ील्ड लगातार संसाधितreadonly name: stringअपरिवर्तनीय स्थिति, कॉन्फ़िगरेशन, DTO, API प्रतिक्रिया
दोनों चालूदोनों शर्तें पूरीreadonly name?: stringAPI प्रतिक्रिया स्नैपशॉट, वैकल्पिक कॉन्फ़िगरेशन

Privacy & Security

इस JSON से TypeScript टूल के सभी ऑपरेशन पूरी तरह से आपके ब्राउज़र में स्थानीय रूप से निष्पादित होते हैं: JSON पार्सिंग, प्रकार अनुमान, interface जनरेशन सभी ब्राउज़र JavaScript द्वारा क्लाइंट साइड पर निष्पादित होते हैं, नेटवर्क के माध्यम से किसी भी सर्वर पर JSON सामग्री, अपलोड की गई फ़ाइलें, या उत्पन्न कोड नहीं भेजा जाता। फ़ाइल अपलोड मूल ब्राउज़र FileReader API का उपयोग करके सीधे मेमोरी में पढ़ा जाता है, बिना किसी मध्यस्थ सेवा के। Cookie ट्रैकिंग का उपयोग नहीं किया जाता, उपयोगकर्ता इनपुट या उपयोग डेटा एकत्र नहीं किया जाता। पृष्ठ बंद करने या रीफ्रेश करने के बाद, सभी इनपुट और आउटपुट सामग्री स्वचालित रूप से मेमोरी से साफ़ हो जाती है। API कुंजी, टोकन, संवेदनशील व्यावसायिक डेटा वाले JSON को संसाधित करने के लिए उपयुक्त।

Authoritative References