Frontend Academy · पाठ

TS और tsconfig.json को Compile करना

TypeScript को compile करने के लिए tsc चलाएँ और strict, target और outDir जैसे tsconfig.json options से compiler को configure करें।

पाठ 4, कुल 4 में से13 चरण

TS और tsconfig.json को Compile करना, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

TypeScript कंपाइलर इंस्टॉल करना

TypeScript को डेवलपमेंट डिपेंडेंसी के रूप में इंस्टॉल करें। tsc CLI TypeScript फ़ाइलों को कंपाइल करता है। Vite या Next.js के साथ बंडलर कंपाइलेशन संभालता है — लेकिन टाइप जाँच के लिए tsc का उपयोग फिर भी किया जाता है।

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

tsconfig.json आरंभ करना

सभी विकल्पों पर टिप्पणी और उचित डिफ़ॉल्ट मानों वाला tsconfig.json बनाने के लिए npx tsc --init चलाएँ। यह फ़ाइल TypeScript कंपाइलर का एकमात्र कॉन्फ़िगरेशन है।

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

tsconfig.json की संरचना

मुख्य अनुभाग हैं: compilerOptions (कंपाइलर का व्यवहार), include (कौन-सी फ़ाइलें कंपाइल करनी हैं), exclude (कौन-सी फ़ाइलें छोड़नी हैं)।

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target — आउटपुट JavaScript संस्करण

target तय करता है कि tsc किस JavaScript संस्करण का आउटपुट देगा। आधुनिक वातावरण के लिए ES2022 या ESNext। अधिकतम संगतता के लिए ES5 (आमतौर पर इसके बजाय Babel इसे संभालता है)।

module — मॉड्यूल प्रणाली

module आउटपुट के मॉड्यूल फ़ॉर्मैट को नियंत्रित करता है। Node.js के लिए CommonJS। बंडलर (Vite, वेबपैक) के लिए ESNext या ES2022। package.json में type:module के साथ आधुनिक Node.js के लिए NodeNext।

strict — सख्ती का फ़्लैग

"strict": true सख्त जाँचों का एक समूह सक्षम करता है: strictNullChecks, noImplicitAny, strictFunctionTypes और अन्य। नए प्रोजेक्ट के लिए इसे हमेशा सक्षम करें — यह सबसे अधिक बग पकड़ता है।

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — null से जुड़ी त्रुटियाँ समाप्त करना

strictNullChecks सक्षम होने पर null और undefined को अन्य टाइप में असाइन नहीं किया जा सकता, जब तक उन्हें यूनियन में स्पष्ट रूप से शामिल न किया गया हो। यह आपको null की स्थितियों को संभालने के लिए बाध्य करता है।

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir और rootDir

outDir तय करता है कि कंपाइल की गई JS फ़ाइलें कहाँ रखी जाएँगी। rootDir स्रोत TypeScript फ़ाइलों की मूल डायरेक्टरी तय करता है। दोनों मिलकर dist/ के भीतर स्रोत संरचना की प्रतिकृति बनाते हैं।

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths — मॉड्यूल एलियस

paths विकल्प (और baseUrl) से पाथ एलियस कॉन्फ़िगर करें। इससे @/components/Button को ../../components/Button की जगह आयात किया जा सकता है।

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

वॉच मोड और केवल टाइप जाँच

tsc --watch फ़ाइल बदलने पर फिर से कंपाइल करता है। tsc --noEmit फ़ाइलों का आउटपुट दिए बिना टाइप जाँच करता है — सीआई में बंडलर के काम को दोहराए बिना टाइप सत्यापित करने के लिए उपयोगी।

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

tsconfig.json का विस्तार करना

बेस कॉन्फ़िगरेशन से विरासत लेने के लिए extends का उपयोग करें। साझा बेस कॉन्फ़िगरेशन, जैसे @tsconfig/strictest, समुदाय की सर्वोत्तम प्रथाएँ उपलब्ध कराते हैं।

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

त्वरित जाँच

कौन-सा tsconfig विकल्प सख्त टाइप जाँचों का पूरा समूह सक्षम करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: tsconfig.json

tsc TypeScript को JavaScript में कंपाइल करता है। tsconfig.json target (आउटपुट ES संस्करण), module (मॉड्यूल प्रणाली), outDir, strict और paths को नियंत्रित करता है। strict: true सबसे अधिक बग पकड़ता है। केवल टाइप जाँच के लिए सीआई में --noEmit का उपयोग करें। सर्वोत्तम प्रथाओं के लिए समुदाय के बेस कॉन्फ़िगरेशन का विस्तार करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

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

क्या “TS और tsconfig.json को Compile करना” पाठ निःशुल्क है?

हाँ—“TS और tsconfig.json को Compile करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“TS और tsconfig.json को Compile करना” में मैं क्या सीखूँगा?

TypeScript को compile करने के लिए tsc चलाएँ और strict, target और outDir जैसे tsconfig.json options से compiler को configure करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“TS और tsconfig.json को Compile करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

TypeScript क्यों: Compile Time पर Types Bugs पकड़ते हैं
Primitive Types, Unions और Type Aliases
Interfaces और Object Types
TS और tsconfig.json को Compile करना

← Frontend Academy पर वापस जाएँ