*.d.ts के रहस्य: TypeScript बाहरी कोड को कैसे देखता है

परिचय: आपका कोड lodash के साथ "दोस्ती" क्यों करता है?

क्या आपने कभी सोचा है कि TypeScript lodash या jQuery जैसी सामान्य JavaScript लाइब्रेरी के लिए प्रकार कैसे पहचानता है? आप बस import _ from 'lodash' लिखते हैं, और अचानक आपको ऑटो-कम्प्लीशन और टाइप चेकिंग मिल जाती है। जादू? नहीं, यह रहस्यमयी *.d.ts फ़ाइलों का काम है।

Stack Overflow पर "About *.d.ts in TypeScript" प्रश्न को हज़ारों बार देखा गया है — डेवलपर्स समझना चाहते हैं कि इस एक्सटेंशन के पीछे क्या छिपा है। आज हम TypeScript के अंतर्गत झाँकेंगे और समझेंगे कि टाइप डिक्लेरेशन कैसे काम करते हैं। आप न केवल सिद्धांत सीखेंगे, बल्कि व्यावहारिक उदाहरण भी प्राप्त करेंगे जो किसी भी JavaScript प्रोजेक्ट के लिए आपके स्वयं के प्रकार बनाने में मदद करेंगे।

.d.ts वास्तव में क्या है?

.d.ts एक्सटेंशन वाली फ़ाइलें TypeScript डिक्लेरेशन फ़ाइलें हैं। इनमें केवल प्रकारों का विवरण होता है, कार्यान्वयन नहीं। इन्हें एक "अनुबंध" के रूप में सोचें: TypeScript इस फ़ाइल को देखता है और समझता है कि कौन से फ़ंक्शन, क्लास और वेरिएबल मौजूद हैं, और उनके प्रकार क्या हैं।

सामान्य .ts फ़ाइलों से मुख्य अंतर: .d.ts JavaScript में संकलित नहीं होती। ये केवल स्थैतिक विश्लेषण और ऑटो-कम्प्लीशन के लिए मौजूद होती हैं।

// myLibrary.d.ts\nexport function greet(name: string): void;\nexport const VERSION: string;\n

अब, यदि आप इस लाइब्रेरी को आयात करते हैं, तो TypeScript जानेगा: greet एक स्ट्रिंग लेता है और कुछ नहीं लौटाता, और VERSION एक स्ट्रिंग है। इस फ़ाइल के बिना, आपको "Could not find a declaration file for module" त्रुटि मिलेगी।

TypeScript .d.ts कैसे ढूँढता है?

डिक्लेरेशन खोजने की प्रक्रिया कई चरणों में काम करती है:

\n
• स्वचालित खोज: यदि .js फ़ाइल के पास उसी नाम की .d.ts फ़ाइल हो, तो TypeScript इसे स्वचालित रूप से उठा लेता है।
\n
• package.json में types या typings फ़ील्ड: कई लाइब्रेरीज़ अपनी डिक्लेरेशन फ़ाइल का पथ निर्दिष्ट करती हैं। उदाहरण: "types": "./lib/index.d.ts"।
\n
• डायरेक्टिव /// <reference path="" />: डिक्लेरेशन फ़ाइल का मैन्युअल संकेत (पुरानी लेकिन अभी भी उपयोग की जाने वाली विधि)।
\n
• @types पैकेज: यदि लाइब्रेरी में अपने प्रकार नहीं हैं, तो समुदाय उन्हें npm पर @types/लाइब्रेरी-नाम नाम से प्रकाशित करता है।
\n

जब आप npm install @types/react लिखते हैं, तो आप वास्तव में .d.ts फ़ाइलों का एक सेट डाउनलोड कर रहे होते हैं जो React का वर्णन करती हैं।

अंतर्गत: TypeScript .d.ts को कैसे संसाधित करता है

आइए कल्पना करें कि TypeScript एक जासूस है जो "प्रकारों के मामले" की जाँच कर रहा है। .d.ts फ़ाइलें गवाहों के बयान हैं। वे कहती हैं: "यहाँ add फ़ंक्शन है, यह दो संख्याएँ लेता है और एक संख्या लौटाता है।" TypeScript इन बयानों पर विश्वास करता है और यह जाँच नहीं करता कि क्या यह वास्तव में सच है (क्योंकि कोई कार्यान्वयन नहीं है)।

Ambient declarations (परिवेशीय घोषणाएँ)

.d.ts की सबसे शक्तिशाली क्षमताओं में से एक ambient modules की घोषणा है। यह आपको उन मॉड्यूल के लिए प्रकारों का वर्णन करने की अनुमति देता है जो आपके कोड में नहीं हैं। उदाहरण के लिए, आप jQuery से वैश्विक चर $ का उपयोग करना चाहते हैं:

// globals.d.ts\ndeclare var $: (selector: string) => any;\n

या पूरे मॉड्यूल का वर्णन करें:

// my-custom-module.d.ts\ndeclare module 'my-custom-module' {\n    export function doSomething(x: number): string;\n    export interface Config {\n        timeout: number;\n    }\n}\n

अब आप import { doSomething } from 'my-custom-module' लिख सकते हैं — और TypeScript प्रकारों को जानेगा।

वैश्विक प्रकार बनाम मॉड्यूल प्रकार

एक महत्वपूर्ण अंतर: .d.ts फ़ाइलें या तो वैश्विक हो सकती हैं (यदि उनमें import/export नहीं है) या मॉड्यूलर (यदि है)। वैश्विक घोषणाएँ दिखाई देती हैं