TypeScript में JSON इम्पोर्ट करना: पूरी गाइड उदाहरण सहित

TypeScript में JSON इम्पोर्ट करना: आसान तरीका और समाधान

अगर आपने कभी TypeScript में import data from './config.json' लिखने की कोशिश की है, तो आप जानते हैं कि कंपाइलर लाल हो जाता है और Cannot find module एरर देता है। यह समस्या बहुत आम है! Stack Overflow पर TypeScript में JSON इम्पोर्ट करने के सवाल सबसे लोकप्रिय हैं। JSON का उपयोग हर जगह होता है — कॉन्फिग, लोकलाइज़ेशन, मॉक डेटा, स्टैटिक लिस्ट। लेकिन TypeScript डिफ़ॉल्ट रूप से JSON फ़ाइलों को सपोर्ट नहीं करता।

इस ट्यूटोरियल में हम TypeScript में JSON इम्पोर्ट करने के सभी तरीकों को कवर करेंगे — tsconfig में फ्लैग ऑन करने से लेकर एडवांस टाइपिंग तक। आप सीखेंगे कि TypeScript को JSON के साथ कैसे फ्रेंडली बनाया जाए और फिर कभी वह लाल एरर नहीं दिखेगी। चलिए शुरू करते हैं!

TypeScript JSON क्यों नहीं देखता?

कोड में जाने से पहले, कारण समझ लेते हैं। TypeScript JavaScript का एक सुपरसेट है जो स्टैटिक टाइपिंग जोड़ता है। डिफ़ॉल्ट रूप से, TypeScript कंपाइलर उम्मीद करता है कि सभी इम्पोर्ट किए गए मॉड्यूल .ts या .js फ़ाइलें हों। JSON एक मॉड्यूल नहीं, बल्कि डेटा फ़ॉर्मेट है। TypeScript को यह नहीं पता कि इसे कैसे इंटरप्रेट करना है।

समाधान दो तरीकों से है:

\n
• कंपाइलर सेटिंग — resolveJsonModule फ्लैग ऑन करके JSON सपोर्ट चालू करें।
\n
• मॉड्यूल डिक्लेरेशन — अगर फ्लैग काम नहीं करता, तो JSON फ़ाइलों के लिए मैन्युअल टाइप डिफाइन करें।
\n

तरीका 1: resolveJsonModule चालू करें (सही रास्ता)

सबसे आसान और अनुशंसित तरीका है tsconfig.json में resolveJsonModule ऑप्शन जोड़ना। यह फ्लैग TypeScript को बताता है: "दोस्त, JSON को सामान्य मॉड्यूल की तरह इम्पोर्ट करने दे।"

// tsconfig.json\n{\n    "compilerOptions": {\n        "resolveJsonModule": true,\n        "esModuleInterop": true\n    }\n}

इसके बाद आप आराम से लिख सकते हैं:

// config.ts\nimport config from './config.json';\n\nconsole.log(config.apiUrl); // काम करता है!\nconsole.log(config.port);    // काम करता है!

यहाँ क्या हो रहा है? TypeScript ऑटोमैटिकली इम्पोर्ट किए गए JSON के लिए टाइप बनाता है। अगर आपके JSON में apiUrl: string और port: number है, तो TypeScript उनके टाइप निकाल लेगा और उपयोग की जाँच करेगा। बढ़िया, है ना?

लेकिन एक बात: resolveJsonModule के साथ esModuleInterop या allowSyntheticDefaultImports भी चालू करना ज़रूरी है, वरना डिफ़ॉल्ट इम्पोर्ट में एरर आएगी।

तरीका 2: नेमड एक्सपोर्ट के साथ इम्पोर्ट

कभी-कभी आपको पूरा JSON नहीं, बल्कि कुछ खास फ़ील्ड चाहिए। TypeScript यह भी सपोर्ट करता है:

import { apiUrl, port } from './config.json';\n\nconsole.log(apiUrl); // स्ट्रिंग\nconsole.log(port);   // नंबर

यह बंडलर्स (Webpack, Vite) में "tree-shaking" की वजह से संभव है, लेकिन TypeScript लेवल पर यह सिर्फ ऑब्जेक्ट डिस्ट्रक्चरिंग है। ध्यान रखें: अगर आप resolveJsonModule का उपयोग कर रहे हैं, तो TypeScript सभी फ़ील्ड के लिए ऑटोमैटिक टाइप बनाता है, इसलिए पूरा ऑब्जेक्ट या उसके हिस्से दोनों इम्पोर्ट कर सकते हैं।

तरीका 3: require का उपयोग (पुराने प्रोजेक्ट के लिए)

अगर आप ऐसे प्रोजेक्ट में काम कर रहे हैं जहाँ resolveJsonModule चालू नहीं किया जा सकता (जैसे दूसरी सेटिंग्स से कन्फ्लिक्ट), तो पुराना require इस्तेमाल कर सकते हैं:

const config = require('./config.json');\n\nconsole.log(config.apiUrl); // काम करता है, लेकिन टाइप नहीं मिलते

इस तरीके की समस्या साफ है: आप टाइपिंग खो देते हैं। TypeScript को नहीं पता कि config में क्या है, और वह इसे any टाइप मान लेता है। इससे एरर का रास्ता खुल जाता है। अगर require का उपयोग करना ही है, तो कम से कम टाइप डिक्लेरेशन जोड़ें:

interface Config {\n    apiUrl: string;\n    port: number;