Articles
टाइपस्क्रिप्ट का परिचय
TypeScript और tsconfig.json

TypeScript और tsconfig.json

यह लेख TypeScript और tsconfig.json को समझाता है।

TypeScript की बुनियादी भूमिका से शुरू करते हुए, हम विशेष उदाहरणों के साथ समझाएँगे कि tsconfig.json किसी प्रोजेक्ट में कैसे कार्य करता है।

YouTube Video

TypeScript और tsconfig.json

TypeScript एक 'types के साथ JavaScript' है। हालांकि, TypeScript का प्रभावी ढंग से उपयोग करने के लिए आवश्यक है कि आप tsconfig.json को सही तरह से समझें और उसे सोच-समझकर कॉन्फ़िगर करें।

हमें TypeScript की आवश्यकता क्यों है?

TypeScript का मुख्य कारण है 'कोड चलाए जाने से पहले ही त्रुटियों को पकड़ना'।

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

यह कोड JavaScript में रनटाइम तक त्रुटि नहीं देता, लेकिन TypeScript में यह कंपाइल टाइम में टाइप त्रुटि देता है।

यह 'जल्दी पहचान' विकास की उत्पादकता और गुणवत्ता दोनों को बढ़ाती है।

TypeScript को कैसे चलाया जाता है?

सिद्धांत रूप में, TypeScript को वैसे ही नहीं चलाया जा सकता। आपको इसे tsc (TypeScript Compiler) से JavaScript में बदलना होता है।।

1npm install -D typescript
2npx tsc --init
  • इस प्रक्रिया के द्वारा, tsconfig.json उत्पन्न होती है, जो TypeScript प्रोजेक्ट के नियमों को निर्धारित करने वाली मुख्य फाइल होती है।

tsconfig.json की भूमिका क्या है?

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

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}
  • सिर्फ इन सेटिंग्स के साथ, आधुनिक और सुरक्षित TypeScript डेवलपमेंट संभव है।

'target': आउटपुट के लिए JavaScript का संस्करण

target यह निर्धारित करता है कि आउटपुट होने वाली JavaScript किस स्तर की होगी।

1"target": "ES2020"

इसके साथ, TypeScript ES2020 के बराबर JavaScript आउटपुट करेगा। पुराने परिवेश के लिए ES5 चुनें; सिर्फ नवीनतम के लिए, ES2022 वगैरह चुनें।

जब आप ESNext निर्दिष्ट करते हैं 

1"target": "ESNext"

  • ESNext निर्दिष्ट करता है कि सबसे नवीनतम JavaScript सिंटैक्स वैसे का वैसा आउटपुट किया जाए। TypeScript इस सिंटैक्स को ट्रांसपाइल नहीं करता, बल्कि इसे रनटाइम जैसे Node.js या ब्राउज़र पर छोड़ देता है।

  • इसलिए, ESNext तब उपयुक्त है जब आप सिर्फ नवीनतम Node.js टारगेट कर रहे हैं या आप ट्रांसपाइल करने के लिए अलग से Babel या bundler का उपयोग कर रहे हैं। दूसरी ओर, यदि रनटाइम परिवेश नवीनतम सिंटैक्स को सपोर्ट नहीं करता है, तो रनटाइम त्रुटियाँ आ सकती हैं, इसलिए सावधानी आवश्यक है।

'module': मॉड्यूल का प्रारूप बताएं

module मॉड्यूल का प्रारूप तय करता है।

1"module": "ESNext"
  • ESNext फ्रंटएंड और नवीनतम Node.js परिवेशों के लिए मानक है।
  • "CommonJS" सिर्फ तब चुनें जब आपको CommonJS चाहिए।

'strict': टाइप सुरक्षा को अधिकतम करें

strict एक स्विच है जो TypeScript की सुरक्षा को अधिकतम करता है।

1"strict": true
  • इसे सक्षम करने पर संदिग्ध टाइप और संभावित बग को आसानी से पकड़ा जा सकता है।

strict मोड और 'any' का स्वतः प्रयोग

जब आप strict सक्षम करते हैं, TypeScript उन वेरिएबल्स को त्रुटि मानता है जिनके टाइप का अनुमान नहीं लगाया जा सकता।

1function printValue(value) {
2	console.log(value);
3}
  • यह वेरिएबल value घोषणा के समय टाइप जानकारी नहीं रखता, इसलिए TypeScript इसका टाइप नहीं जान सकता। इसके परिणामस्वरूप, स्वत: any प्रयोग किया जाता है, जो strict मोड में चेतावनी (त्रुटि) देता है।
1function printValue(value: number) {
2	console.log(value);
3}
  • इस तरह टाइप को स्पष्ट रूप से बताने से, TypeScript जान लेता है कि 'यह वेरिएबल सिर्फ नंबर संभालता है'। TypeScript में यह ज्यादा जरूरी है कि टाइप को स्पष्ट रूप से पहचाना जाए बजाए इसके कि टाइप को छोड़ दिया जाए।

'include/exclude': किन फाइलों को कॉम्पाइल किया जाए, नियंत्रित करना

tsconfig.json में आप किन फाइलों को जोड़ना है और किन्हें बाहर रखना है यह तय कर सकते हैं।

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}
  • इसके साथ, सिर्फ src के अंतर्गत आने वाली फाइलें TypeScript द्वारा मैनेज होंगी।
  • exclude में node_modules दिए होने पर वे कॉम्पाइल से बाहर रहेंगे, भले ही वे include के किसी पथ में आते हों।

'outDir': आउटपुट डायरेक्ट्री बताएं

outDir से अपने बिल्ड आउटपुट का स्थान निर्धारित करें।

1"outDir": "dist"
  • इसके साथ, सभी कॉम्पाइल रिजल्ट dist फोल्डर में आउटपुट होंगे। व्यवहार में, स्रोत कोड और बिल्ड आर्टिफैक्ट्स को अलग करना मानक है।

'rootDir': स्रोत डायरेक्ट्री बताएं

rootDir से वह डायरेक्ट्री बताई जाती है जिसे TypeScript कोड के स्रोत की जड़ मानता है।

1"rootDir": "src"

  • यह सेटिंग TypeScript को फाइलों के आउटपुट में src के आधार पर डायरेक्ट्री संरचना बनाए रखने की अनुमति देती है। उदाहरण स्वरूप, src/index.ts का आउटपुट dist/index.js होगा।

  • rootDir में बताई गई डायरेक्ट्री की संरचना outDir में दोहराई जाएगी।

'esModuleInterop': CommonJS और ES Modules को जोड़ना

आगे, आइए esModuleInterop को देखें।

1"esModuleInterop": true
  • इसे सक्षम करने से आप import सिंटैक्स से CommonJS मॉड्यूल को सुरक्षित रूप से उपयोग कर सकते हैं।
1import fs from "fs";
  • Node.js के साथ यह सेटिंग लगभग अनिवार्य है।

'noImplicitAny': छिपे हुए 'any' टाइप को प्रतिबंधित करें

tsconfig.json में टाइप जांच को मजबूत करना भी जरूरी है।

1"noImplicitAny": true
  • इसके साथ, आप छिपे हुए any टाइप को प्रतिबंधित कर सकते हैं। इससे आप भरोसेमंद तरीके से उन जगहों को पकड़ सकते हैं जहाँ टाइप बताना भूल गए हों।

अप्रयुक्त कोड पता करने की सेटिंग्स

अप्रयुक्त कोड का पता लगाने वाली सेटिंग्स मेंटेनबिलिटी बढ़ाने में भी सहायक हैं।

1"noUnusedLocals": true,
2"noUnusedParameters": true
  • इसके साथ, गैर-ज़रूरी वेरिएबल्स या आर्गुमेंट्स को तुरंत चेतावनी मिलती है।

'lib': प्रयोग के लिए उपलब्ध बिल्ट-इन APIs बताएं

lib ऐसी सेटिंग है जिससे तय होता है कि TypeScript कौन-कौन सी मानक APIs को उपलब्ध मानेगा।

1"lib": ["ES2020", "DOM"]
  • इस सेटिंग के साथ, ये टाइप उपलब्ध होते हैं:। ES2020 सेट करने से, Promise, Map, और Set जैसी आधुनिक सुविधाएँ मिलती हैं। DOM के साथ, ब्राउज़र के document, window, और HTMLElement जैसी APIs उपलब्ध होती हैं।

फ्रंटएंड में DOM शामिल करें; यदि सिर्फ Node.js है, तो DOM हटाएँ ताकि अनावश्यक Global टाइप न आएं।

'moduleResolution': मॉड्यूल ढूँढने के नियम

moduleResolution तय करता है कि import में दिए गए मॉड्यूल्स को कैसे ढूँढा और जोड़ा जाए।

1"moduleResolution": "Node"

इसके दो मुख्य विकल्प हैं:।

  • Node सेट करने से Node.js के मॉड्यूल रिज़ॉल्यूशन के नियम लगते हैं।
  • Classic पुराना, TypeScript-विशिष्ट तरीका है, जो आजकल बहुत कम प्रयोग होता है।

Node.js या bundler वाले प्रोजेक्ट्स में स्पष्ट रूप से Node बताना सुरक्षित है।

एक न्यूनतम, प्रोडक्शन के लिए तैयार tsconfig.json

अब तक आपने जो सीखा है, उसके आधार पर, एक न्यूनतम, प्रोडक्शन-रेडी tsconfig.json कुछ इस तरह होगा:।

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

यह कॉन्फ़िगरेशन फ्रंटएंड और Node.js दोनों के लिए सुरक्षित नींव देता है।

सार: tsconfig.json एक 'नियमावली' है

tsconfig.json सिर्फ एक कॉन्फ़िगरेशन फाइल नहीं, बल्कि पूरी परियोजना के लिए 'नियमावली' है। tsconfig.json के साथ, निम्नलिखित जैसी महत्वपूर्ण नीतियाँ स्पष्ट होती हैं:।

  • टाइप सुरक्षा का स्तर।
  • आपकी टीम के लिए कोडिंग नियम।
  • भविष्य की बग्स से बचाव।

tsconfig.json को समझ कर, आप सिर्फ TypeScript लिखने में ही नहीं, बल्कि अपने प्रोजेक्ट्स को सुरक्षित TypeScript उपयोग के लिए डिजाइन कर सकेंगे।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

TypeScript प्रोग्रामिंग में सर्वोत्तम अभ्यास