टाइपस्क्रिप्ट कॉन्फ़िगरेशन: एक व्यापक tsconfig.json गाइड

टाइपस्क्रिप्ट, जो जावास्क्रिप्ट का एक सुपरसेट है, वेब डेवलपमेंट की गतिशील दुनिया में स्टैटिक टाइपिंग लाता है। टाइपस्क्रिप्ट की पूरी शक्ति का उपयोग करने के लिए एक अच्छी तरह से कॉन्फ़िगर की गई tsconfig.json फ़ाइल महत्वपूर्ण है। यह गाइड tsconfig.json का एक व्यापक अवलोकन प्रदान करती है, जिसमें आवश्यक कंपाइलर विकल्प, प्रोजेक्ट सेटअप और उन्नत कॉन्फ़िगरेशन शामिल हैं।

tsconfig.json क्या है?

tsconfig.json फ़ाइल एक कॉन्फ़िगरेशन फ़ाइल है जो टाइपस्क्रिप्ट प्रोजेक्ट के लिए कंपाइलर विकल्पों को निर्दिष्ट करती है। यह टाइपस्क्रिप्ट कंपाइलर को बताती है कि टाइपस्क्रिप्ट कोड को जावास्क्रिप्ट में कैसे ट्रांसपाइल करना है। यह फ़ाइल प्रोजेक्ट की संरचना को परिभाषित करने, कंपाइलेशन नियमों को सेट करने और डेवलपमेंट टीम में निरंतरता सुनिश्चित करने के लिए आवश्यक है, चाहे वह टीम एक ही कार्यालय में स्थित हो या कई महाद्वीपों में फैली हो।

एक tsconfig.json फ़ाइल बनाना

एक tsconfig.json फ़ाइल बनाने के लिए, अपने प्रोजेक्ट की रूट डायरेक्टरी में टर्मिनल पर नेविगेट करें और निम्नलिखित कमांड चलाएँ:

tsc --init

यह कमांड सामान्य रूप से उपयोग किए जाने वाले कंपाइलर विकल्पों के साथ एक बुनियादी tsconfig.json फ़ाइल उत्पन्न करता है। फिर आप अपनी प्रोजेक्ट की विशिष्ट आवश्यकताओं के अनुरूप फ़ाइल को अनुकूलित कर सकते हैं। एक सामान्य tsconfig.json में compilerOptions, include, और exclude जैसे विकल्प शामिल होंगे।

आवश्यक कंपाइलर विकल्प

compilerOptions अनुभाग tsconfig.json फ़ाइल का हृदय है। इसमें विकल्पों की एक विस्तृत श्रृंखला होती है जो टाइपस्क्रिप्ट कंपाइलर के व्यवहार को नियंत्रित करती है। यहाँ कुछ सबसे महत्वपूर्ण कंपाइलर विकल्प दिए गए हैं:

target

target विकल्प जेनरेट किए गए जावास्क्रिप्ट कोड के लिए ECMAScript लक्ष्य संस्करण निर्दिष्ट करता है। सामान्य मानों में ES5, ES6 (ES2015), ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext शामिल हैं। सही लक्ष्य चुनना इच्छित रनटाइम वातावरण, जैसे ब्राउज़र या Node.js संस्करणों के साथ संगतता सुनिश्चित करने के लिए महत्वपूर्ण है।

उदाहरण:

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

module

module विकल्प मॉड्यूल कोड जनरेशन शैली निर्दिष्ट करता है। सामान्य मानों में CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020, और ESNext शामिल हैं। मॉड्यूल सिस्टम का चुनाव लक्ष्य वातावरण और उपयोग किए गए मॉड्यूल बंडलर (जैसे, Webpack, Rollup, Parcel) पर निर्भर करता है। Node.js के लिए, अक्सर CommonJS का उपयोग किया जाता है, जबकि आधुनिक वेब अनुप्रयोगों के लिए, एक मॉड्यूल बंडलर के साथ ES6 या ESNext को प्राथमिकता दी जाती है। ESNext का उपयोग करने से डेवलपर्स को नवीनतम सुविधाओं और अनुकूलन का लाभ उठाने की अनुमति मिलती है, जबकि अंतिम मॉड्यूल प्रारूप को संभालने के लिए बंडलर पर निर्भर रहना पड़ता है।

उदाहरण:

{
  "compilerOptions": {
    "module": "ESNext"
  }
}

lib

lib विकल्प कंपाइलेशन में शामिल की जाने वाली लाइब्रेरी फ़ाइलों की एक सूची निर्दिष्ट करता है। ये लाइब्रेरी फ़ाइलें अंतर्निहित जावास्क्रिप्ट एपीआई और ब्राउज़र एपीआई के लिए प्रकार की परिभाषाएँ प्रदान करती हैं। सामान्य मानों में ES5, ES6, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext, DOM, WebWorker, ScriptHost, ES2015.Core, ES2015.Collection, ES2015.Iterable, ES2015.Promise, ES2015.Proxy, ES2015.Reflect, ES2015.Generator, ES2015.Symbol, ES2015.Symbol.WellKnown, ES2016.Array.Include, ES2017.object, ES2017.Intl, ES2017.SharedMemory, ES2017.String, ES2017.TypedArrays, ES2018.Intl, ES2018.Promise, ES2018.RegExp, ES2019.Array, ES2019.Object, ES2019.String, ES2019.Symbol, ES2020.BigInt, ES2020.Promise, ES2020.String, ES2020.Symbol.WellKnown, ES2021.Promise, ES2021.String, ES2021.WeakRef, ES2022.Error, ES2022.Object, ES2022.String, और कई अन्य शामिल हैं। उपयुक्त लाइब्रेरी का चयन यह सुनिश्चित करता है कि टाइपस्क्रिप्ट कंपाइलर के पास लक्ष्य वातावरण के लिए आवश्यक प्रकार की जानकारी हो। DOM लाइब्रेरी का उपयोग करने से प्रोजेक्ट को ब्राउज़र-विशिष्ट एपीआई का उपयोग करने वाले कोड को प्रकार की त्रुटियों के बिना संकलित करने की अनुमति मिलती है।

उदाहरण:

{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

allowJs

allowJs विकल्प टाइपस्क्रिप्ट कंपाइलर को टाइपस्क्रिप्ट फ़ाइलों के साथ जावास्क्रिप्ट फ़ाइलों को संकलित करने की अनुमति देता है। यह मौजूदा जावास्क्रिप्ट परियोजनाओं को धीरे-धीरे टाइपस्क्रिप्ट में स्थानांतरित करने के लिए उपयोगी है। इसे true पर सेट करने से कंपाइलर .js फ़ाइलों को प्रोसेस करने में सक्षम होता है, जिससे एक प्रोजेक्ट के भीतर टाइपस्क्रिप्ट को धीरे-धीरे अपनाने की अनुमति मिलती है।

उदाहरण:

{
  "compilerOptions": {
    "allowJs": true
  }
}

jsx

jsx विकल्प निर्दिष्ट करता है कि JSX सिंटैक्स को कैसे संभाला जाना चाहिए। सामान्य मानों में preserve, react, react-native, और react-jsx शामिल हैं। preserve आउटपुट में JSX सिंटैक्स को बनाए रखता है, जबकि react JSX को React.createElement कॉल में बदल देता है। react-jsx React 17 में पेश किए गए नए JSX ट्रांसफ़ॉर्म का उपयोग करता है, जिसमें React को इम्पोर्ट करने की आवश्यकता नहीं होती है। React या अन्य JSX-आधारित लाइब्रेरी का उपयोग करने वाली परियोजनाओं के लिए सही JSX विकल्प चुनना महत्वपूर्ण है।

उदाहरण:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

declaration

declaration विकल्प प्रत्येक टाइपस्क्रिप्ट फ़ाइल के लिए संबंधित .d.ts डिक्लेरेशन फ़ाइलें उत्पन्न करता है। डिक्लेरेशन फ़ाइलों में प्रकार की जानकारी होती है और अन्य टाइपस्क्रिप्ट परियोजनाओं द्वारा संकलित कोड का उपभोग करने के लिए उपयोग की जाती हैं। पुन: प्रयोज्य लाइब्रेरी और मॉड्यूल बनाने के लिए डिक्लेरेशन फ़ाइलें बनाना आवश्यक है। ये फ़ाइलें अन्य टाइपस्क्रिप्ट परियोजनाओं को मूल स्रोत कोड को संकलित करने की आवश्यकता के बिना लाइब्रेरी द्वारा उजागर किए गए प्रकारों और इंटरफेस को समझने की अनुमति देती हैं।

उदाहरण:

{
  "compilerOptions": {
    "declaration": true
  }
}

sourceMap

sourceMap विकल्प सोर्स मैप फ़ाइलें उत्पन्न करता है, जो जेनरेट किए गए जावास्क्रिप्ट कोड को मूल टाइपस्क्रिप्ट कोड से मैप करती हैं। सोर्स मैप ब्राउज़र और अन्य वातावरणों में टाइपस्क्रिप्ट कोड को डीबग करने के लिए आवश्यक हैं। जब जावास्क्रिप्ट कोड में कोई त्रुटि होती है, तो सोर्स मैप डेवलपर को डीबगर में संबंधित टाइपस्क्रिप्ट कोड देखने की अनुमति देता है, जिससे समस्या को पहचानना और ठीक करना आसान हो जाता है।

उदाहरण:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

outDir

outDir विकल्प जेनरेट की गई जावास्क्रिप्ट फ़ाइलों के लिए आउटपुट डायरेक्टरी निर्दिष्ट करता है। यह विकल्प स्रोत कोड को संकलित कोड से अलग करके प्रोजेक्ट के बिल्ड आउटपुट को व्यवस्थित करने में मदद करता है। outDir का उपयोग करने से बिल्ड प्रक्रिया को प्रबंधित करना और एप्लिकेशन को तैनात करना आसान हो जाता है।

उदाहरण:

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

rootDir

rootDir विकल्प टाइपस्क्रिप्ट प्रोजेक्ट की रूट डायरेक्टरी निर्दिष्ट करता है। कंपाइलर इस डायरेक्टरी को मॉड्यूल नामों को हल करने के लिए आधार के रूप में उपयोग करता है। यह विकल्प एक जटिल डायरेक्टरी संरचना वाली परियोजनाओं के लिए विशेष रूप से महत्वपूर्ण है। rootDir को सही ढंग से सेट करना यह सुनिश्चित करता है कि कंपाइलर सभी आवश्यक मॉड्यूल और निर्भरताएँ पा सकता है।

उदाहरण:

{
  "compilerOptions": {
    "rootDir": "src"
  }
}

strict

strict विकल्प सभी सख्त टाइप-चेकिंग विकल्पों को सक्षम करता है। यह नई टाइपस्क्रिप्ट परियोजनाओं के लिए अत्यधिक अनुशंसित है क्योंकि यह विकास प्रक्रिया में संभावित त्रुटियों को जल्दी पकड़ने में मदद करता है। स्ट्रिक्ट मोड को सक्षम करने से सख्त टाइप चेकिंग नियम लागू होते हैं, जिससे अधिक मजबूत और रखरखाव योग्य कोड बनता है। सभी नई टाइपस्क्रिप्ट परियोजनाओं में स्ट्रिक्ट मोड को सक्षम करना एक सर्वोत्तम अभ्यास है।

उदाहरण:

{
  "compilerOptions": {
    "strict": true
  }
}

esModuleInterop

esModuleInterop विकल्प CommonJS और ES मॉड्यूल के बीच अंतर-संचालनीयता (interoperability) को सक्षम करता है। यह उन परियोजनाओं के लिए महत्वपूर्ण है जो दोनों प्रकार के मॉड्यूल का उपयोग करते हैं। जब esModuleInterop सक्षम होता है, तो टाइपस्क्रिप्ट स्वचालित रूप से CommonJS और ES मॉड्यूल के बीच के अंतर को संभाल लेगा, जिससे दोनों प्रणालियों के बीच मॉड्यूल को आयात और निर्यात करना आसान हो जाएगा। यह विकल्प विशेष रूप से तृतीय-पक्ष लाइब्रेरी के साथ काम करते समय उपयोगी होता है जो विभिन्न मॉड्यूल सिस्टम का उपयोग कर सकती हैं।

उदाहरण:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

moduleResolution

moduleResolution विकल्प निर्दिष्ट करता है कि टाइपस्क्रिप्ट मॉड्यूल इम्पोर्ट को कैसे हल करता है। सामान्य मानों में Node और Classic शामिल हैं। Node मॉड्यूल रिज़ॉल्यूशन रणनीति डिफ़ॉल्ट है और Node.js मॉड्यूल रिज़ॉल्यूशन एल्गोरिथ्म पर आधारित है। Classic मॉड्यूल रिज़ॉल्यूशन रणनीति पुरानी है और कम उपयोग की जाती है। Node मॉड्यूल रिज़ॉल्यूशन रणनीति का उपयोग यह सुनिश्चित करता है कि टाइपस्क्रिप्ट Node.js वातावरण में मॉड्यूल इम्पोर्ट को सही ढंग से हल कर सकता है।

उदाहरण:

{
  "compilerOptions": {
    "moduleResolution": "Node"
  }
}

baseUrl और paths

baseUrl और paths विकल्पों का उपयोग गैर-सापेक्ष (non-relative) मॉड्यूल इम्पोर्ट के लिए मॉड्यूल रिज़ॉल्यूशन को कॉन्फ़िगर करने के लिए किया जाता है। baseUrl विकल्प गैर-सापेक्ष मॉड्यूल नामों को हल करने के लिए आधार डायरेक्टरी निर्दिष्ट करता है। paths विकल्प आपको मॉड्यूल नामों को फ़ाइल सिस्टम पर विशिष्ट स्थानों पर मैप करने की अनुमति देता है। ये विकल्प एक जटिल डायरेक्टरी संरचना वाली परियोजनाओं और मॉड्यूल इम्पोर्ट को सरल बनाने के लिए विशेष रूप से उपयोगी हैं। baseUrl और paths का उपयोग करने से कोड अधिक पठनीय और रखरखाव योग्य बन सकता है।

उदाहरण:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

Include और Exclude विकल्प

include और exclude विकल्प निर्दिष्ट करते हैं कि कौन सी फ़ाइलें कंपाइलेशन में शामिल की जानी चाहिए और कौन सी फ़ाइलें बाहर रखी जानी चाहिए। ये विकल्प फ़ाइल नामों से मेल खाने के लिए ग्लोब पैटर्न का उपयोग करते हैं। include और exclude का उपयोग करने से आप यह नियंत्रित कर सकते हैं कि टाइपस्क्रिप्ट कंपाइलर द्वारा कौन सी फ़ाइलें संसाधित की जाती हैं, जिससे बिल्ड प्रदर्शन में सुधार होता है और त्रुटियाँ कम होती हैं। यह एक सर्वोत्तम अभ्यास है कि कंपाइलेशन में शामिल की जाने वाली फ़ाइलों को स्पष्ट रूप से निर्दिष्ट किया जाए।

उदाहरण:

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Extends विकल्प

extends विकल्प आपको किसी अन्य tsconfig.json फ़ाइल से कंपाइलर विकल्पों को इनहेरिट करने की अनुमति देता है। यह कई परियोजनाओं के बीच सामान्य कॉन्फ़िगरेशन सेटिंग्स साझा करने या आधार कॉन्फ़िगरेशन बनाने के लिए उपयोगी है। extends विकल्प का उपयोग कोड के पुन: उपयोग को बढ़ावा देता है और दोहराव को कम करता है। आधार कॉन्फ़िगरेशन बनाना और उन्हें अलग-अलग परियोजनाओं में विस्तारित करना एक सर्वोत्तम अभ्यास है।

उदाहरण:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"]
}

उन्नत कॉन्फ़िगरेशन

आवश्यक कंपाइलर विकल्पों के अलावा, tsconfig.json विशेष परिदृश्यों के लिए उन्नत कॉन्फ़िगरेशन का समर्थन करता है।

वृद्धिशील संकलन (Incremental Compilation)

बड़े प्रोजेक्ट्स के लिए, वृद्धिशील संकलन (incremental compilation) बिल्ड समय में काफी सुधार कर सकता है। टाइपस्क्रिप्ट पिछले कंपाइलेशन के परिणामों को कैश कर सकता है और केवल उन फ़ाइलों को फिर से संकलित कर सकता है जो बदल गई हैं। वृद्धिशील संकलन को सक्षम करने से बड़े प्रोजेक्ट्स के लिए बिल्ड समय में नाटकीय रूप से कमी आ सकती है। यह विशेष रूप से बड़ी संख्या में फ़ाइलों और निर्भरताओं वाली परियोजनाओं के लिए महत्वपूर्ण है।

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo"
  }
}

प्रोजेक्ट संदर्भ (Project References)

प्रोजेक्ट संदर्भ आपको बड़े टाइपस्क्रिप्ट प्रोजेक्ट्स को छोटे, स्वतंत्र मॉड्यूल में संरचित करने की अनुमति देते हैं। यह बिल्ड समय और कोड संगठन में सुधार कर सकता है। प्रोजेक्ट संदर्भों का उपयोग करने से बड़े प्रोजेक्ट अधिक प्रबंधनीय और बनाए रखने में आसान हो सकते हैं। बड़े, जटिल प्रोजेक्ट्स के लिए प्रोजेक्ट संदर्भों का उपयोग करना एक सर्वोत्तम अभ्यास है।

{
  "compilerOptions": {
    "composite": true
  },
  "references": [
    { "path": "./module1" },
    { "path": "./module2" }
  ]
}

कस्टम प्रकार की परिभाषाएँ (Custom Type Definitions)

कभी-कभी, आपको उन जावास्क्रिप्ट लाइब्रेरी के लिए प्रकार की परिभाषाएँ प्रदान करने की आवश्यकता हो सकती है जिनमें वे नहीं होती हैं। आप इन लाइब्रेरी के लिए प्रकारों को परिभाषित करने के लिए कस्टम .d.ts फ़ाइलें बना सकते हैं। कस्टम प्रकार की परिभाषाएँ बनाने से आप अपने टाइपस्क्रिप्ट कोड में जावास्क्रिप्ट लाइब्रेरी का उपयोग कर सकते हैं बिना प्रकार की सुरक्षा का त्याग किए। यह विशेष रूप से तब उपयोगी होता है जब लीगेसी जावास्क्रिप्ट कोड या उन लाइब्रेरी के साथ काम कर रहे हों जो अपनी स्वयं की प्रकार की परिभाषाएँ प्रदान नहीं करती हैं।

// custom.d.ts
declare module 'my-library' {
  export function doSomething(x: number): string;
}

सर्वोत्तम प्रथाएं (Best Practices)

• स्ट्रिक्ट मोड का उपयोग करें: उन्नत प्रकार की जाँच के लिए strict विकल्प को सक्षम करें।
• टारगेट निर्दिष्ट करें: अपने रनटाइम वातावरण के लिए उपयुक्त target संस्करण चुनें।
• आउटपुट को व्यवस्थित करें: स्रोत कोड को संकलित कोड से अलग करने के लिए outDir का उपयोग करें।
• निर्भरताएँ प्रबंधित करें: कौन सी फ़ाइलें संकलित की जाती हैं, इसे नियंत्रित करने के लिए include और exclude का उपयोग करें।
• Extends का लाभ उठाएं: extends विकल्प के साथ सामान्य कॉन्फ़िगरेशन सेटिंग्स साझा करें।
• कॉन्फ़िगरेशन को संस्करण नियंत्रण में जाँचें: डेवलपर वातावरण और CI/CD पाइपलाइनों में निरंतरता बनाए रखने के लिए `tsconfig.json` को git में कमिट करें।

सामान्य समस्याओं का निवारण

tsconfig.json को कॉन्फ़िगर करना कभी-कभी चुनौतीपूर्ण हो सकता है। यहाँ कुछ सामान्य समस्याएँ और उनके समाधान दिए गए हैं:

मॉड्यूल रिज़ॉल्यूशन समस्याएँ

यदि आपको मॉड्यूल रिज़ॉल्यूशन त्रुटियों का सामना करना पड़ता है, तो सुनिश्चित करें कि moduleResolution विकल्प सही ढंग से कॉन्फ़िगर किया गया है और baseUrl और paths विकल्प ठीक से सेट किए गए हैं। paths विकल्प में निर्दिष्ट पथों की दोबारा जाँच करें ताकि यह सुनिश्चित हो सके कि वे सही हैं। सत्यापित करें कि सभी आवश्यक मॉड्यूल node_modules डायरेक्टरी में स्थापित हैं।

प्रकार की त्रुटियाँ (Type Errors)

यदि प्रकार की परिभाषाएँ गलत हैं या गायब हैं तो प्रकार की त्रुटियाँ हो सकती हैं। सुनिश्चित करें कि आपके द्वारा उपयोग की जा रही सभी लाइब्रेरी के लिए आपके पास सही प्रकार की परिभाषाएँ स्थापित हैं। यदि आप एक जावास्क्रिप्ट लाइब्रेरी का उपयोग कर रहे हैं जिसमें प्रकार की परिभाषाएँ नहीं हैं, तो कस्टम प्रकार की परिभाषाएँ बनाने पर विचार करें।

संकलन त्रुटियाँ (Compilation Errors)

यदि आपके टाइपस्क्रिप्ट कोड में सिंटैक्स त्रुटियाँ या प्रकार की त्रुटियाँ हैं तो संकलन त्रुटियाँ हो सकती हैं। त्रुटि संदेशों की सावधानीपूर्वक समीक्षा करें और किसी भी सिंटैक्स त्रुटि या प्रकार की त्रुटियों को ठीक करें। सुनिश्चित करें कि आपका कोड टाइपस्क्रिप्ट कोडिंग परंपराओं का पालन करता है।

निष्कर्ष

एक अच्छी तरह से कॉन्फ़िगर की गई tsconfig.json फ़ाइल एक सफल टाइपस्क्रिप्ट प्रोजेक्ट के लिए आवश्यक है। आवश्यक कंपाइलर विकल्पों और उन्नत कॉन्फ़िगरेशन को समझकर, आप अपने विकास वर्कफ़्लो को अनुकूलित कर सकते हैं, कोड की गुणवत्ता में सुधार कर सकते हैं, और लक्ष्य वातावरण के साथ संगतता सुनिश्चित कर सकते हैं। tsconfig.json को ठीक से कॉन्फ़िगर करने में समय लगाना लंबे समय में त्रुटियों को कम करके, रखरखाव में सुधार करके और बिल्ड प्रक्रिया को सुव्यवस्थित करके भुगतान करेगा। इसके परिणामस्वरूप अधिक कुशल और विश्वसनीय सॉफ्टवेयर विकास होता है। यहाँ प्रदान की गई जानकारी सार्वभौमिक रूप से लागू होने के लिए डिज़ाइन की गई है, और टाइपस्क्रिप्ट के साथ एक नया प्रोजेक्ट शुरू करने के लिए एक ठोस आधार प्रदान करनी चाहिए।

सभी उपलब्ध कंपाइलर विकल्पों की सबसे अद्यतित जानकारी और विस्तृत स्पष्टीकरण के लिए आधिकारिक टाइपस्क्रिप्ट दस्तावेज़ीकरण से परामर्श करना याद रखें। टाइपस्क्रिप्ट दस्तावेज़ीकरण टाइपस्क्रिप्ट कॉन्फ़िगरेशन की जटिलताओं को समझने के लिए एक मूल्यवान संसाधन है।