How to get started with TypeScript

Feb 2, 2026
कैसे करना है

टाइपस्क्रिप्ट उन भाषाओं में से एक है जो उपयोग करते हैं जावास्क्रिप्ट रनटाइम के रूप में निष्पादन पर्यावरण: .ts फ़ाइलों को टाइपस्क्रिप्ट कोड युक्त सामान्य जावास्क्रिप्ट में संकलित किया जाता है, जिसे तब ब्राउज़र द्वारा चलाया जा सकता है।

जेरेमी अशकेस ने पहली बार इस अवधारणा को अपनी कॉफ़ीस्क्रिप्ट भाषा के साथ लोकप्रिय बना दिया, लेकिन दुख की बात है, इसके अपेक्षाकृत क्रमशः सिंटैक्स को सी # या विजुअल बेसिक से परिचित डेवलपर्स के लिए सीखना मुश्किल था।

चूंकि माइक्रोसॉफ्ट ने वेब 2.0 प्रौद्योगिकियों में विस्तार किया, इसलिए उसने जेरेमी अशकेस से प्रेरणा लेना चुना। विजुअल स्टूडियो की क्षमताओं के कारण, डेवलपर्स विभिन्न भाषा एक्सटेंशन से लाभ के दौरान बस हैक कर सकते हैं।

टाइपस्क्रिप्ट स्थिर टाइपिंग तक ही सीमित नहीं है: यह विभिन्न प्रकार की उन्नत सुविधाओं के साथ आता है जो आपको वेब पर ऑब्जेक्ट उन्मुख प्रोग्रामिंग प्रतिमानों को अनुकरण करने की अनुमति देता है। यह लघु मार्गदर्शिका आपको इसकी कुछ प्रमुख विशेषताओं के माध्यम से ले जाएगी। यदि भाषा आपको अपील करती है, तो फ्लाई पर अधिक जानकारी सीखी जा सकती है।

01. विजुअल स्टूडियो इंस्टॉल करें

[4 9] Visual Studio 2017 comes with a new installer; the required features are split into payloads to make deployment easier

विजुअल स्टूडियो 2017 एक नए इंस्टॉलर के साथ आता है; तैनाती को आसान बनाने के लिए आवश्यक विशेषताओं को पेलोड में विभाजित किया जाता है

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

02. एसडीके जोड़ें

टाइपस्क्रिप्ट के तेज़ रिलीज कैडेंस के कारण, विजुअल स्टूडियो को एसडीके मॉड्यूल के साथ विस्तारित करने की आवश्यकता है, जिसे डाउनलोड किया जा सकता है यहां Microsoft साइट । बस इंस्टॉलर को चलाएं जैसे कि यह एक मानक विंडोज एप्लिकेशन था।

03. वास्तविक के लिए टाइपस्क्रिप्ट डाउनलोड करें

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

पीएस सी: \ उपयोगकर्ता \ Tamha \ डाउनलोड & gt; एनपीएम इंस्टॉल-ए टाइपस्क्रिप्ट

सी: \ user \ thamha \ appdata \ roaming \ Npm \ tsc - & gt; सी: \ user \ thamha \ appdata \ loaming \ npm \ node_modules \ प्रकारित \ bin \ tsc

सी: \ user \ thamha \ appdata \ roaming \ Npm \ tsserver - & gt; सी: \ user \ thamha \ appdata \ roaming \ npm \ node_modules \ प्रकारित \ bin \ tsserver

सी: \ उपयोगकर्ता \ Thamha \ AppData \ Roaming \ Npm

`- टाइपस्क्रिप्ट @2.4.2

04. परियोजना से बाहर तोड़

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

[9 1] फ़ंक्शन Sayoi () { चेतावनी ("ओई!"); } Sayoi (); [9 2]

05. एक प्रवेश बिंदु बनाएँ

जैसा कि परिचय में उल्लेख किया गया है, एक .ts फ़ाइल अपने आप पर ज्यादा नहीं कर सकती है। इसके कारण, index.html नामक फ़ाइल बनाने के लिए आगे बढ़ें, जो एक ही फ़ोल्डर में स्थित होना चाहिए। इसके बाद, इस चरण के साथ दिखाए गए कंकाल कोड को जोड़ें। यह कंपाइलर के आउटपुट को लोड करता है, और इसे चलाता है जैसे कि यह जावास्क्रिप्ट का कोई अन्य छोटा था।

[9 1] & lt; html & gt; & lt; हेड और जीटी; & lt; स्क्रिप्ट src = "worker.js" & gt; & lt; / स्क्रिप्ट & gt; & lt; / सिर & gt; & lt; शरीर & gt; & lt; / शरीर & gt; & lt; / html & gt; [9 2]

06. संकलन और भागो

अगले चरण में .ts फ़ाइल का मैन्युअल पुनर्मूल्यांकन शामिल है। ओपन पावरशेल, और इनपुट फ़ाइल के नाम के बाद टीएससी कमांड दर्ज करें। डिफ़ॉल्ट रूप से, आउटपुट फ़ाइल बेस फ़ाइल नाम साझा करेगी, लेकिन .ts के बजाय .js का विस्तार होगा। अंत में, संदेश बॉक्स की उपस्थिति को साबित करने के लिए पसंद के ब्राउज़र में index.html फ़ाइल खोलें।

[9 1] पीएस सी: \ उपयोगकर्ता \ Tamha \ डाउनलोड & gt; टीएससी। \ कार्यकर्ता

07. टाइप करें

Use this reference table to find basic static types

बुनियादी स्थैतिक प्रकार खोजने के लिए इस संदर्भ तालिका का उपयोग करें

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

08. इसे आज़माएं

In normal JavaScript, this error would be found only when the line in question gets invoked

सामान्य जावास्क्रिप्ट में, यह त्रुटि केवल तभी मिल जाएगी जब प्रश्न में रेखा का आह्वान किया जाता है

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

[9 1] फ़ंक्शन Sayoi (Whattosay: Number) { अलर्ट (Whattosay); } Sayoi ("हैलो"); [9 2]

09. प्रोटोटाइप से बचें

जावास्क्रिप्ट प्रोटोटाइप के माध्यम से ऑब्जेक्ट-ओरिएंटेशन को लागू करता है: कोड की एक शैली जो .NET और C / C ++ दुनिया में असामान्य है। टाइपस्क्रिप्ट इस समस्या को हल करता है ताकि कक्षाओं के निर्माण की अनुमति देकर - इस चरण के साथ स्निपेट में दिखाए गए एक प्रक्रिया।

[9 1] कक्षा कल्पना { सार्वजनिक MyResult: संख्या; सार्वजनिक MYA: संख्या; सार्वजनिक myb: संख्या; कन्स्ट्रक्टर (_A: संख्या, _B: संख्या) { this.myresult = _a + _b; this.mya = _a; } } [9 2]

10. जनता की सराहना करते हैं

The holding values created by setting the public attribute get populated automatically

सार्वजनिक विशेषता सेट करके बनाए गए होल्डिंग मान स्वचालित रूप से पॉप्युलेट हो जाते हैं

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

[9 1] कक्षा कल्पना { सार्वजनिक MyResult: संख्या; // सार्वजनिक MYA: संख्या; कन्स्ट्रक्टर (सार्वजनिक MYA: संख्या, सार्वजनिक _B: संख्या) { this.myresult = mya + _b; this.mya = mya; } } [9 2]

11. विधि और उदाहरण

आइए हम इसे एक विधि के साथ प्रदान करके हमारी उदाहरण वर्ग का विस्तार करें जो MyResult और MYA में संग्रहीत मानों को एक्सेस करता है, और उन्हें स्क्रीन पर आउटपुट करता है। अंत में, नए पैरामीटर का उपयोग कक्षा का उदाहरण बनाने के लिए किया जाता है - इसका उपयोग विधि को आमंत्रित करने के लिए किया जाता है।

[9 1] कक्षा कल्पना { सार्वजनिक MyResult: संख्या; । । । सार्वजनिक कहते हैं (): शून्य { अलर्ट (यह ..मेर्सल्ट); } } MyImagine को: कल्पना करें = नई कल्पना (2, 2); myimagine.saysomething (); [9 2]

12. इसकी जादुई विशेषताओं का उपयोग करें

टाइपस्क्रिप्ट की भाषा डिजाइन का उद्देश्य डेवलपर्स को जितना संभव हो उतना प्रयास करने के लिए किया जाता है। एक अच्छी सुविधा दिखाए गए शॉर्टकट का उपयोग करके बनाए गए पैरामीटर की ऑटो-जनसंख्या है।

[9 1] कक्षा कल्पना { सार्वजनिक MyResult: संख्या; कन्स्ट्रक्टर (सार्वजनिक माया: संख्या, सार्वजनिक myb: संख्या) { tyresult = mya + myb; } सार्वजनिक कहते हैं (): शून्य { चेतावनी (this.mya + "" + यह .yb); } } [9 2]

13. विरासत करें

[1 9 8] Our small example program proves that TypeScript satisfies the core tenets of object inheritance

हमारा छोटा उदाहरण प्रोग्राम यह साबित करता है कि टाइपस्क्रिप्ट ऑब्जेक्ट विरासत के मूल सिद्धांतों को संतुष्ट करता है

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

[9 1] कक्षा भविष्य कल्पना की जाती है { सार्वजनिक कहते हैं (): शून्य { console.log (this.mya); } } [9 2]

14. ओवरराइट का विश्लेषण करें

ऊपर से कोड स्निपेट ने भविष्य में एक उप-तत्व के साथ कल्पना वर्ग को विस्तारित किया। भविष्य कल्पना से अलग है कि इसकी कहने की विधि, अधिक विकसित होने पर, ब्राउज़र की कमांड लाइन में एक संदेश उत्सर्जित करता है।

[9 1] MyImagine चलो: कल्पना = नया भविष्य (2, 2); myimagine.saysometing (); MyFuture को दें: भविष्य = नया भविष्य (9, 9); myfuture.saysomething (); [9 2]

15. ओवरराइट, Redux का विश्लेषण करें

इसके साथ, वास्तविक कोड का परीक्षण किया जा सकता है। दौड़ते समय, ब्राउज़र कंसोल में भविष्य के दो आमंत्रण होंगे - उन्नत वर्ग एक कल्पना वस्तु के रूप में लागू होने पर भी अपनी गुण रखता है।

16. प्रतिबंधित पहुंच

सार्वजनिक संशोधक के साथ सदस्य चर को उजागर करना अलोकप्रिय है: यह सब के बाद, उपयोगकर्ता चर के सामग्रियों के साथ क्या करता है इसका अधिकतर नियंत्रण लेता है। टाइपस्क्रिप्ट एक्सेसोर आपको पारंपरिक ओओपी के समान फैशन में इस समस्या के आसपास काम करने की अनुमति देता है। ध्यान रखें कि केवल पढ़ने वाले सदस्यों का भी समर्थन किया जाता है, लेकिन इस सुविधा के उपयोग के लिए ईसीएमएएस्क्रिप्ट 5 समर्थन की सक्रियता की आवश्यकता होती है।

[9 1] सार्वजनिक _mycache: स्ट्रिंग; पूर्ण कैश प्राप्त करें (): स्ट्रिंग { इसे वापस करें ._mycache; } फुलकैच सेट करें (न्यूक्स: स्ट्रिंग) { अगर (newx == "हैलो") { this_mycache = newx; } अन्य { Console.log ("गलत डेटा!"); } } [9 2]

17. इसे सार बनाओ

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

[9 1] सार वर्ग कल्पना { सार्वजनिक MyResult: संख्या; सार सारनाम (): शून्य; कन्स्ट्रक्टर (सार्वजनिक MYA: संख्या, सार्वजनिक myb: संख्या) { tyresult = mya + myb; } सार्वजनिक कहते हैं (): शून्य { चेतावनी (this.mya + "" + यह .yb); } } कक्षा भविष्य कल्पना { । । । सार्वजनिक adname () { Console.log ("हैलो"); } } [9 2]

18. एक इंटरफ़ेस बनाएं

चूंकि ऑब्जेक्ट संरचनाएं अधिक जटिल हो जाती हैं, डेवलपर्स अक्सर उन परिस्थितियों का सामना करते हैं जहां एक वर्ग तर्क के कई बिट्स लागू करता है। उस स्थिति में, एक इंटरफ़ेस एक अच्छा कामकाज बनाता है - उदाहरण दिखाता है कि क्या उम्मीद करनी है।

[9 1] इंटरफ़ेस Datainterface { फ़ील्ड: संख्या; वर्कमथोड (): शून्य; } [9 2]

19. इसे लागू करें

जैसा कि ऊपर कक्षा के मामले में, एक इंटरफ़ेस हमें अच्छा नहीं करता है अगर हम इसका उपयोग नहीं कर सकते हैं। सौभाग्य से, इसे लागू करना विशेष रूप से मुश्किल नहीं है: ध्यान रखें कि इंटरफ़ेस लेखक, इसके अलावा, अपने सृजन के हिस्सों को वैकल्पिक होने की घोषणा कर सकते हैं।

[9 1] कक्षा कार्यकर्ता डाटाक्टरफेस लागू करता है { फ़ील्ड: संख्या; वर्कमथोड (): शून्य { नई त्रुटि फेंकें ("विधि लागू नहीं की गई।"); } } [9 2]

20. एक सामान्य वर्ग का उपयोग करें

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

[9 1] // जेनेरिक समारोह समारोह पहचान (arg: संख्या): संख्या { वापसी आर्ग; } // जेनेरिक वर्ग कक्षा जेनेरिकनंबर और लेफ्टिनेंट; टी एंड जीटी; { Zerovalue: टी; जोड़ें: (x: t, y: t) = & gt; टी; } [9 2]

21. गणना का सवाल

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

[9 1] enum parserstate { निष्क्रिय = 1, Read0, रीड 1 } कक्षा कल्पना { सार्वजनिक रहस्य: पार्सस्टेट; कन्स्ट्रक्टर (सार्वजनिक माया: संख्या, सार्वजनिक myb: संख्या) { this.mystate = parserstate.idle; [9 2]

22. और जानें

[26 9]

एक ही लेख में टाइपस्क्रिप्ट के रूप में जटिल भाषा को कवर करना लगभग असंभव है। की ओर देखने के लिए टाइपस्क्रिप्ट साइट के उदाहरण भाषा के बाइंडिंग के बारे में और जानने के लिए।

यह लेख मूल रूप से अंक 266 में प्रकाशित किया गया था वेब डिजाइनर , रचनात्मक वेब डिजाइन पत्रिका - विशेषज्ञ ट्यूटोरियल, अत्याधुनिक रुझान और मुक्त संसाधनों की पेशकश। यहां अंक 266 खरीदें या [2 9 4] वेब डिजाइनर की सदस्यता लें

।

विशेष क्रिसमस प्रस्ताव: वेब डिजाइनर की सदस्यता पर 49% तक बचाएं आपके लिए या क्रिसमस के लिए एक दोस्त। यह एक सीमित प्रस्ताव है, तो जल्दी से आगे बढ़ें ...

संबंधित आलेख:

  • 20 जावास्क्रिप्ट उपकरण आपके दिमाग को उड़ाने के लिए
  • अपनी जावास्क्रिप्ट को सुलभ बनाना सीखें
  • 12 आम जावास्क्रिप्ट प्रश्नों का उत्तर दिया

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to set up and optimise your SmugMug storefront

कैसे करना है Feb 2, 2026

(छवि क्रेडिट: Pexels पर आंद्रे Furtado) [1 9] एक साधारण वे..

Google Slides: How to design a document

कैसे करना है Feb 2, 2026

(छवि क्रेडिट: Google) [1 9] Google स्लाइड अधिक से अधिक लो�..

फ़ोटोशॉप में रात में दिन कैसे बदलें

कैसे करना है Feb 2, 2026

दिन-दर-रात रूपांतरण तब तक आसपास रहे हैं जब तक फ़ोट�..

Add multi-language support to Angular

कैसे करना है Feb 2, 2026

इस ट्यूटोरियल में हम आपको दुनिया भर के लोगों के ल�..

How to use Smart layers in Photoshop

कैसे करना है Feb 2, 2026

एक उदाहरण में दोहराए जाने वाले डिज़ाइन और पैटर्न ..

रंगीन पेंसिल कैसे मिश्रण करें

कैसे करना है Feb 2, 2026

रंगीन पेंसिल को मिश्रित करने का तरीका सीखना आपको अपने उपकरण से अधिक प्रा�..

Create a busy city scene in Illustrator

कैसे करना है Feb 2, 2026

सबसे अच्छा शहर एक व्यस्त शहर है, लेकिन वह व्यस्त व�..

How to design an animated hero

कैसे करना है Feb 2, 2026

निम्नलिखित युक्तियाँ एरिक मिलर एनीमेशन स्टूडियो की आगामी वेब श्रृंखला �..

श्रेणियाँ