TypeScript ट्यूटोरियल: इंटरफ़ेस, एनम, ऐरे क्या है उदाहरण के साथ

एचएमबी क्या है? TypeScript?

TypeScript का सुपरसेट है Javaस्क्रिप्ट। TypeScript शुद्ध ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग भाषा है जो कक्षाओं, इंटरफेस आदि का समर्थन करती है। यह द्वारा विकसित एक ओपन-सोर्स भाषा है Microsoft जो कोड को स्थिर रूप से संकलित करता है Javaस्क्रिप्ट। इसे आसानी से ब्राउज़र या Nodejs में चलाया जा सकता है।

ECMAScript के लिए जारी सभी नवीनतम सुविधाएँ समर्थित हैं TypeScript और इसके अतिरिक्त TypeScript इसमें स्वयं की ऑब्जेक्ट-ओरिएंटेड विशेषताएं हैं जैसे इंटरफेस, एम्बिएंट डिक्लेरेशन, क्लास इनहेरिटेंस, आदि, जो एक बड़े एप्लिकेशन को विकसित करने में मदद करती हैं, जो अन्यथा करना मुश्किल होगा। Javaलिपि.

डाउनलोड और इंस्टॉल कैसे करें TypeScript

डाउनलोड और इंस्टॉल करने की चरण दर चरण प्रक्रिया यहां दी गई है TypeScript:

चरण 1) Nodejs डाउनलोड और इंस्टॉल करें

नोडजेएस की आधिकारिक साइट पर जाएं: https://nodejs.org/en/download/ और अपने ऑपरेटिंग सिस्टम के अनुसार nodejs डाउनलोड और इंस्टॉल करें। nodejs डाउनलोड करने के बारे में विस्तृत निर्देश यहाँ उपलब्ध हैं: https://www.guru99.com/download-install-node-js.html

चरण 2) Nodejs और npm संस्करण की जाँच करें

यह जांचने के लिए कि क्या नोडजेएस और एनपीएम स्थापित है, बस अपने कमांड प्रॉम्प्ट में संस्करण की जांच करें।

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

तो आपके पास nodejs v10 और npm 6 स्थापित है।

चरण 3) TypeScript स्थापना

अपनी प्रोजेक्ट डायरेक्टरी typeproject/ बनाएं और npm init चलाएं, जैसा कि नीचे दिए गए कमांड में दिखाया गया है:

npm init

चरण 4) स्थापना प्रारंभ करें

अब, हम .json पैकेज बनाएंगे जो हमारी परियोजना के लिए निर्भरताएं संग्रहीत करेगा।

एक बार इंस्टॉल हो जाने पर TypeScript के रूप में इस प्रकार है:

npm -g install typescript

उपरोक्त आदेश स्थापना का ध्यान रखेगा TypeScript. npm install में “-g” जोड़ने से इंस्टॉल हो जाएगा TypeScript वैश्विक स्तर पर। -g का उपयोग करने का लाभ यह है कि आप इसका उपयोग करने में सक्षम होंगे TypeScript टीएससी किसी भी निर्देशिका से कमांड का उपयोग करें क्योंकि यह वैश्विक रूप से स्थापित है। यदि आप इंस्टॉल नहीं करना चाहते हैं TypeScript विश्व स्तर पर नीचे दिए गए आदेश का उपयोग करें:

npm --save install typescript

अपनी प्रोजेक्ट निर्देशिका में src/ फ़ोल्डर बनाएँ और src/ फ़ोल्डर में बनाएँ TypeScript test.ts फ़ाइल खोलें और अपना कोड लिखें।

उदाहरण : test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

संकलन करना TypeScript करने के लिए कोड Javascript

उपरोक्त कोड को संकलित करने के लिए निम्नलिखित कमांड का उपयोग करें:

If TypeScript वैश्विक स्तर पर स्थापित करने के लिए नीचे दिए गए आदेश का उपयोग करें:

tsc test.ts

If TypeScript आपके प्रोजेक्ट में स्थानीय रूप से स्थापित है तो आपको पथ का उपयोग करने की आवश्यकता है TypeScript node_modules से, जैसा दिखाया गया है:

node_modules/typescript/bin/tsc test.ts

उपरोक्त आदेश एक test.js फ़ाइल बनाएगा और कोड को जावास्क्रिप्ट में संकलित करेगा।

उदाहरण : test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

निष्पादित करना Javascript Nodejs का उपयोग करना

इस में TypeScript ट्यूटोरियल में, हम nodejs में test.js को निम्नानुसार निष्पादित करेंगे:

D:\typeproject\src>node test.js
15

कंसोल्ड मान test.js के निष्पादन पर प्रदर्शित होता है

निष्पादित करना Javaब्राउज़र में स्क्रिप्ट

उदाहरण:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

निष्पादित करना Javascript Nodejs का उपयोग करना

संकलन करना TypeScript करने के लिए कोड Javascript ECMAScript संस्करण का उपयोग करना

TypeScript Ecmascript रिलीज़ की गई सभी सुविधाओं का समर्थन करता है, और डेवलपर्स कोडिंग करते समय इसका उपयोग कर सकते हैं। लेकिन सभी नई सुविधाएँ पुराने ब्राउज़र पर समर्थित नहीं हैं, जिसके कारण आपको जावास्क्रिप्ट को Ecmascript के पुराने संस्करण में संकलित करने की आवश्यकता है। TypeScript संकलक विकल्प प्रदान करता है जो ऐसा कर सकता है।

उदाहरण : test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

अपनी पसंद के ES संस्करण को संकलित करने के लिए, आप अपने कमांड में target या t विकल्प का उपयोग इस प्रकार कर सकते हैं:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

डिफ़ॉल्ट रूप से, लक्ष्य ES3 है। यदि आप इसे बदलना चाहते हैं, तो आप उपरोक्त कमांड का उपयोग कर सकते हैं।

फिलहाल हम इसमें ES6 का उपयोग करेंगे TypeScript ट्यूटोरियल को लक्ष्य के रूप में रखें:

tsc --target ES6  test.ts

test.ts से test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

कोड वैसा ही रहता है, क्योंकि आपके द्वारा उपयोग किया गया एरो फंक्शन एक ES6 सुविधा है और ES6 में संकलित करने पर इसमें कोई परिवर्तन नहीं होता है।

डिफ़ॉल्ट रूप से लक्ष्य ES3 है, इसलिए लक्ष्य के बिना आपको test.js इस प्रकार मिलता है:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

तो यहाँ पर, मोटा तीर एक सामान्य अनाम फ़ंक्शन में बदल गया है।

चर में TypeScript

चर मानों को संग्रहीत करने के लिए उपयोग किया जाता है, और मान एक स्ट्रिंग, संख्या, बूलियन या अभिव्यक्ति हो सकता है। जब चर की बात आती है TypeScript, वे समान हैं Javaलिपितो चलिए सीखते हैं कि वेरिएबल्स को मान कैसे घोषित करें और असाइन करें। TypeScript.

कोड में वेरिएबल को बिना परिभाषित किए इस्तेमाल नहीं किया जा सकता। वेरिएबल घोषित करने के लिए आप इसका इस्तेमाल कर सकते हैं

था कीवर्ड,

चलो कीवर्ड

const कीवर्ड

चरों के साथ कार्य करना TypeScript जावास्क्रिप्ट के समान है, और जावास्क्रिप्ट से परिचित उपयोगकर्ताओं को यह बहुत आसान लगेगा। केवल वैरिएबल जैसे चलो और const की तुलना में ज्यादा उपयोग नहीं किया जाता था.

var का उपयोग करके चर घोषित करना

सिंटेक्स:

var firstname = "Roy";

आइये कुछ पर नजर डालें TypeScript var कीवर्ड की कार्यप्रणाली और साथ ही घोषित चरों के दायरे को समझने के लिए उदाहरण था कीवर्ड।

उदाहरण 1:

var  k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function.
    return k++;
}

test(); // output as  1
test(); // output as 2
alert(c); // will throw error , Uncaught ReferenceError: c is not defined

उदाहरण 2:

var t = 0; // variable t is declared in global scope.
function test() {    
    var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    return t;
}
test(); // will return 10.
console.log(t); // will console 0.

उदाहरण 3:

var i = 0;
function test() {
    if (i>0) {
      var t = 1;
    }
    return t;
}

test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

let का उपयोग करके चर घोषित करना

RSI TypeScript let का सिंटैक्स नीचे दिया गया है:

सिंटेक्स:

let name="Roy";

का काम चलो चर लगभग समान है था, लेकिन एक छोटे से अंतर के साथ और एक का उपयोग करके एक ही समझ जाएगा TypeScript उदाहरण।

उदाहरण:

let i = 1;
function test() {
    if (i>0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error : Uncaught ReferenceError: t is not defined.

ऊपर TypeScript उदाहरण एक त्रुटि फेंकता है, लेकिन अगर यह ठीक काम करता तो यह ठीक काम करता था कीवर्ड. चर का उपयोग करना चलो घोषित ब्लॉक स्कोप के भीतर उपलब्ध हैं, उदाहरण के लिए, वेरिएबल t केवल if-ब्लॉक के अंदर उपलब्ध है और पूरे फ़ंक्शन के लिए नहीं।

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

const का उपयोग करके चर घोषित करना

कॉन्स्ट का मतलब है स्थिर चर। वे let चर के समान हैं, केवल अंतर यह है कि एक बार मान निर्दिष्ट हो जाने के बाद उसे बदला नहीं जा सकता।

सिंटेक्स:

const name;

उदाहरण:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

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

प्रकार TypeScript

TypeScript एक मजबूत टाइप की गई भाषा है, जबकि जावास्क्रिप्ट नहीं है। एक चर जिसका मान स्ट्रिंग के रूप में परिभाषित है, उसे बिना किसी समस्या के संख्या में बदला जा सकता है Javascript.यह बात यहां बर्दाश्त नहीं की जाती TypeScript. में TypeScript, किसी चर का प्रकार केवल शुरुआत में और निष्पादन के माध्यम से परिभाषित किया जाता है, इसे उसी प्रकार को बनाए रखना होता है, इसमें कोई भी परिवर्तन जावास्क्रिप्ट के संकलन के दौरान संकलन-समय त्रुटि का कारण बनेगा।

इसके प्रकार निम्नलिखित हैं:

  • नंबर
  • तार
  • बूलियन
  • कोई
  • शून्य

नंबर

केवल पूर्णांक, फ्लोट, अंश आदि लेता है।

सिंटेक्स:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

यहां कुछ महत्वपूर्ण विधियां दी गई हैं जिनका उपयोग संख्या प्रकारों पर किया जा सकता है:

फिक्स्ड () - यह संख्या को एक स्ट्रिंग में परिवर्तित कर देगा और विधि को दिए गए दशमलव स्थानों को बनाए रखेगा।

तार() - यह विधि संख्या को स्ट्रिंग में परिवर्तित करेगी।

का मूल्य() - यह विधि संख्या का आदिम मान वापस देगी।

टूप्रिसिशन() - यह विधि संख्या को निर्दिष्ट लंबाई में स्वरूपित करेगी।

उदाहरण : सभी स्ट्रिंग विधियों के साथ

let _num :number = 10.345;
_num.toFixed(2); // "10.35"
_num.valueOf(); // 10.345
_num.toString(); // "10.345"
_num.toPrecision(2); //"10"

तार

स्ट्रिंग: केवल स्ट्रिंग मान

सिंटेक्स:

let str :string = "hello world";

यहां कुछ महत्वपूर्ण विधियां दी गई हैं जिनका उपयोग स्ट्रिंग प्रकारों पर किया जा सकता है:

  • विभाजित() – यह विधि स्ट्रिंग को एक सरणी में विभाजित करेगी।
  • चरत() – यह विधि दिए गए इंडेक्स के लिए पहला अक्षर देगी।
  • के सूचकांक() – यह विधि दिए गए मान के लिए पहली घटना की स्थिति देगी।
  • बदलें () - यह विधि 2 स्ट्रिंग लेती है, पहला स्ट्रिंग में खोजने के लिए मान और यदि मौजूद है तो इसे दूसरे से बदल देगा और एक नया स्ट्रिंग वापस देगा।
  • ट्रिम () – यह विधि स्ट्रिंग के दोनों ओर से सफेद रिक्त स्थान हटा देगी।
  • substr() - यह विधि स्ट्रिंग का एक हिस्सा देगी जो प्रारंभ और अंत के रूप में दी गई स्थिति पर निर्भर करेगी।
  • सबस्ट्रिंग() - यह विधि स्ट्रिंग का एक भाग देगी जो प्रारंभ और अंत के रूप में दी गई स्थिति पर निर्भर करेगी। अंतिम स्थिति पर मौजूद वर्ण को बाहर रखा जाएगा।
  • toअपरकेस() -स्ट्रिंग को अपरकेस में परिवर्तित करेगा
  • लोअरकेस में() – स्ट्रिंग को लोअरकेस में परिवर्तित करेगा।

उदाहरण:

let _str:string = "Typescript";

_str.charAt(1); // y
_str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"]
_str.indexOf("s"); //4 , gives -1 is the value does not exist in the string.
_str.replace("Type", "Coffee"); //"Coffeescript"
_str.trim(); //"Typescript"
_str.substr(4, _str.length); //"script"
_str.substring(4, 10); //"script"
_str.toUpperCase();//"TYPESCRIPT"
_str.toLowerCase();//"typescript"

बूलियन

सत्य, असत्य, 0, और 1 जैसे तार्किक मान स्वीकार करेगा।

सिंटेक्स:

let bflag :boolean = 1;
let status :boolean = true;

कोई

सिंटेक्स:

let a :any = 123
a = "hello world"; // changing type will not give any error.

का उपयोग करके घोषित चर कोई प्रकार चर को स्ट्रिंग, संख्या, सारणी, बूलियन या शून्य के रूप में ले सकता है। TypeScript कोई संकलन-समय त्रुटि नहीं देगा; यह में घोषित चरों के समान है Javaस्क्रिप्ट. किसी भी प्रकार के चर का उपयोग केवल तभी करें जब आप उस चर के साथ जुड़े मूल्य के प्रकार के बारे में सुनिश्चित न हों।

शून्य

शून्य प्रकार का प्रयोग अधिकतर ऐसे फ़ंक्शन पर रिटर्न प्रकार के रूप में किया जाता है, जिसमें रिटर्न करने के लिए कुछ नहीं होता।

सिंटेक्स:

function testfunc():void{
 //code here
}

TypeScript ऐरे

An ऐरे in TypeScript एक डेटा प्रकार है जिसमें आप कई मान संग्रहीत कर सकते हैं। आइए जानें कि Array संचालन के लिए मान कैसे घोषित और असाइन करें TypeScript.

जबसे TypeScript यह एक दृढ़तापूर्वक टाइप की गई भाषा है, आपको यह बताना होगा कि किसी सरणी में मानों का डेटा प्रकार क्या होगा। अन्यथा, यह इसे किसी भी प्रकार का मान लेगा।

एक सारणी घोषित करें और आरंभ करें

सिंटेक्स:

let nameofthearray : Array<typehere>

उदाहरण

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed.

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

किसी ऐरे से तत्वों तक पहुँचने के विभिन्न तरीके

किसी सारणी से तत्वों को प्राप्त करने के लिए, मान सूचकांक 0 से शुरू होकर सारणी की लंबाई तक होता है।

उदाहरण:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
years[0]; // output will be 2016			
years[1]; // output will be 2017			
years[2]; // output will be 2018			
years[3]; // output will be 2019

आप किसी सरणी से तत्वों को भी प्राप्त कर सकते हैं TypeScript एसटी पाश के रूप में नीचे दिखाया गया है:

का प्रयोग TypeScript पाश के लिए

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i=0;i<=years.length; i++) {
     console.log(years[i]);
}
Output:
2016
2017
2018
2019

फॉर-इन लूप का उपयोग करना

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i in years) {
     console.log(years[i])
}

Output:
2016
2017
2018
2019

फॉर-ऑफ लूप का उपयोग करना

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let  i of years) {
     console.log(i)
}
Output:
2016
2017
2018
2019

foreach लूप का उपयोग करना

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
years.forEach(function(yrs, i) {
  console.log(yrs);
});
Output:
2016
2017
2018
2019

TypeScript सरणी के तरीके

TypeScript ऐरे ऑब्जेक्ट में कई प्रॉपर्टीज़ और मेथड्स होते हैं जो डेवलपर्स को ऐरे को आसानी से और कुशलता से संभालने में मदद करते हैं। आप arrayname.property निर्दिष्ट करके प्रॉपर्टी का मान प्राप्त कर सकते हैं और array name.method() निर्दिष्ट करके मेथड का आउटपुट प्राप्त कर सकते हैं।

लंबाई संपत्ति

=> यदि आप किसी सारणी में तत्वों की संख्या जानना चाहते हैं, तो आप लंबाई गुण का उपयोग कर सकते हैं।

Revएर्स विधि

=> आप रिवर्स विधि का उपयोग करके किसी सरणी में आइटमों के क्रम को उलट सकते हैं।

सॉर्ट विधि

=> आप सॉर्ट विधि का उपयोग करके किसी सरणी में आइटम को सॉर्ट कर सकते हैं।

पॉप विधि

=> आप पॉप विधि का उपयोग करके किसी सरणी के अंतिम आइटम को हटा सकते हैं।

Shift तरीका

=> आप शिफ्ट विधि का उपयोग करके किसी ऐरे के पहले आइटम को हटा सकते हैं।

पुश विधि

=> आप सरणी के अंतिम आइटम के रूप में मान जोड़ सकते हैं।

concat विधि

=> आप दो सरणियों को एक सारणी तत्व में जोड़ सकते हैं।

लंबाई गुण का उदाहरण

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.length);  // 12

रिवर्स विधि का उदाहरण

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.reverse());  //  ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]

सॉर्ट विधि का उदाहरण

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]

पॉप विधि का उदाहरण

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.				

console.log(months.pop()); //Dec

शिफ्ट विधि का उदाहरण

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.			

console.log(months.shift()); // Jan

पुश विधि का उदाहरण

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
years.forEach(function(yrs, i) {			
  console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020				
});

concat विधि का उदाहरण

let array1: Array<number> = [10, 20, 30]; 			
let array2: Array<number> = [100, 200, 300];			
console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]

कक्षा में TypeScript

TypeScript का सुपरसेट है Javaस्क्रिप्ट, इसलिए जो भी संभव हो, करें Javaस्क्रिप्ट भी संभव है TypeScriptक्लास एक नई सुविधा है जो ES6 के बाद से जोड़ी गई है, इसलिए पहले Javaस्क्रिप्ट क्लास प्रकार की कार्यक्षमता को कोड का पुनः उपयोग करने के लिए प्रोटोटाइप कार्यक्षमता वाले फ़ंक्शन का उपयोग करके आज़माया गया था। क्लास का उपयोग करके, आप हमारे कोड को जावा, सी#, पायथन आदि जैसी भाषाओं के लगभग करीब ला सकते हैं, जहाँ कोड का पुनः उपयोग किया जा सकता है। क्लास की सुविधा के साथ TypeScript/Javaलिपि, भाषा को बहुत शक्तिशाली बनाती है।

क्लास को परिभाषित करना TypeScript

यहाँ एक बुनियादी वर्ग वाक्यविन्यास है TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

उदाहरण: क्लास पर एक कार्यशील उदाहरण

class Students {
    age : number;
    name : string;
    roll_no : number;
    
    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

ऊपर दिए गए उदाहरण में, आपके पास Students नाम की एक क्लास है। इसमें age, name, और roll_no जैसे गुण हैं।

कंस्ट्रक्टर में एक TypeScript वर्ग

ऊपर हमने जो उदाहरण के तौर पर Students वर्ग को परिभाषित किया है, उसका कन्स्ट्रक्टर नीचे दिखाया गया है:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

कंस्ट्रक्टर विधि में आयु, नाम और रोल_नंबर जैसे पैरामीटर होते हैं। जब क्लास को कॉल किया जाता है तो कंस्ट्रक्टर प्रॉपर्टी को इनिशियलाइज़ करने का काम संभालता है। प्रॉपर्टी को एक्सेस करने के लिए निम्न का इस्तेमाल किया जाता है इसका कीवर्ड। उदाहरण के लिए, age प्रॉपर्टी तक पहुँचने के लिए this.age, roll_no तक पहुँचने के लिए this.roll_no, आदि। आप एक डिफ़ॉल्ट कंस्ट्रक्टर भी रख सकते हैं, जैसा कि नीचे दिखाया गया है:

constructor () {}

अंदर के तरीके TypeScript वर्ग

उदाहरण के लिए, वर्ग Students में getRollNo(), getName(), getAge() जैसी विधियां परिभाषित हैं, जिनका उपयोग रोल_नंबर, नाम और आयु गुणों का विवरण देने के लिए किया जाता है।

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

क्लास का इंस्टेंस बनाना TypeScript

उदाहरण:

In TypeScript क्लास का इंस्टेंस बनाने के लिए आपको new ऑपरेटर का इस्तेमाल करना होगा। जब हम new ऑपरेटर का इस्तेमाल करके क्लास का इंस्टेंस बनाते हैं, तो हमें वह ऑब्जेक्ट मिलता है जो क्लास के प्रॉपर्टीज़ और मेथड्स को एक्सेस कर सकता है, जैसा कि नीचे दिखाया गया है:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge(); // 15
student_details.getName(); // Harry John

संकलन TypeScript कक्षा से Javaलिपि

आप संकलन के लिए नीचे दिखाए अनुसार tsc कमांड का उपयोग कर सकते हैं Javascript.

Command: tsc  Students.ts

का उत्पादन Javascript संकलन पर कोड नीचे दिखाया गया है:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Javascript, क्लास को स्वयं आह्वानित फ़ंक्शन में परिवर्तित कर दिया जाता है।

वर्ग विरासत

कक्षाओं को विरासत में प्राप्त किया जा सकता है विस्तार में कीवर्ड TypeScript.

वर्ग वंशानुक्रम सिंटैक्स:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

कक्षा बी साझा करने में सक्षम हो जाएगा कक्षा विधियाँ और गुण.

यहाँ इनहेरिटेंस का उपयोग करने वाले क्लास का एक कार्यशील उदाहरण दिया गया है

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge(); // output is 24
_std1.setMarks(500);
_std1.getMarks(); // output is 500

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

अब आइए उपरोक्त क्लास में कुछ और परिवर्तन करें।

उदाहरण:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge(); // output is 24
_std1.getMarks(); // output is 500

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

In TypeScript आपको सभी पैरामीटर्स को बेस पैरामीटर्स के रूप में सुपर कॉल करने की आवश्यकता है। यह कन्स्ट्रक्टर के अंदर किया जाने वाला पहला काम होना चाहिए। सुपर विस्तारित क्लास के कन्स्ट्रक्टर को निष्पादित करेगा।

संशोधक तक पहुंचें TypeScript

TypeScript आपके तरीकों और प्रॉपर्टीज़ के लिए सार्वजनिक, निजी और संरक्षित एक्सेस संशोधक का समर्थन करता है। डिफ़ॉल्ट रूप से, यदि एक्सेस संशोधक नहीं दिए गए हैं तो विधि या प्रॉपर्टी को सार्वजनिक माना जाता है, और वे क्लास के ऑब्जेक्ट से आसानी से एक्सेस किए जा सकेंगे।

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

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

उदाहरण:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is "+ this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);  
        this.tmarks = tmarks;    
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }
    
    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks(); // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails(); // output is Name is Sheena
  • निजी: गुण या विधियों को क्लास के ऑब्जेक्ट और व्युत्पन्न क्लास द्वारा एक्सेस नहीं किया जा सकता है, उनका उपयोग क्लास के अंदर आंतरिक रूप से किया जाना है।
  • संरक्षित: प्रॉपर्टीज और मेथड्स को भी बनाए गए ऑब्जेक्ट द्वारा एक्सेस नहीं किया जा सकता है। वे क्लास के अंदर से एक्सेस किए जा सकते हैं और इसे एक्सटेंड करने वाले क्लास के लिए उपलब्ध हैं।
  • जनता: प्रॉपर्टीज और मेथड्स को बिना किसी कीवर्ड के घोषित किया जाता है। उन्हें बाहर से क्लास के ऑब्जेक्ट का उपयोग करके आसानी से एक्सेस किया जा सकता है।

इंटरफ़ेस में TypeScript

की मुख्य विशेषताओं में से एक TypeScript इंटरफ़ेस है। इंटरफ़ेस परिभाषित नियमों का एक सेट है जिसे इसका उपयोग करने वाली इकाई द्वारा लागू किया जाना चाहिए। इकाई एक वर्ग, फ़ंक्शन या चर हो सकती है। एक इंटरफ़ेस गुणों और विधियों से बना हो सकता है। आप उस गुण या विधि के लिए “?” सिंटैक्स का उपयोग करके गुणों को वैकल्पिक रूप से परिभाषित कर सकते हैं। इंटरफ़ेस इंटरफ़ेस को लागू करने वाले किसी भी फ़ंक्शन, चर या वर्ग के लिए एक मजबूत प्रकार की जाँच जोड़ता है।

एक इंटरफ़ेस का सिंटैक्स TypeScript

interface Dimension {
    width: string;
    height: string;
}

आपने Dimension नामक एक इंटरफ़ेस परिभाषित किया है, जिसके गुण width और height हैं, तथा दोनों का प्रकार स्ट्रिंग है।

अब इस इंटरफ़ेस को एक वेरिएबल, एक फ़ंक्शन या एक क्लास द्वारा लागू किया जा सकता है। इंटरफ़ेस डाइमेंशन को लागू करने वाले वेरिएबल का उदाहरण यहाँ दिया गया है।

उदाहरण:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

इंटरफ़ेस डाइमेंशन के सिग्नेचर में चौड़ाई और ऊंचाई है, और दोनों अनिवार्य हैं। यदि इंटरफ़ेस को लागू करते समय, कोई भी प्रॉपर्टी छूट जाती है, या टाइप बदल जाता है, तो यह जावास्क्रिप्ट में कोड संकलित करते समय संकलन समय त्रुटि देगा।

उपरोक्त कोड, जब जावास्क्रिप्ट में संकलित किया जाता है, तो इस प्रकार दिखाई देता है:

var _imagedim = {
    width: "100px",
    height: "200px"
};

आइए अब देखें कि फ़ंक्शन के साथ इंटरफ़ेस का उपयोग कैसे किया जाता है।

रिटर्न प्रकार के रूप में फ़ंक्शन पर इंटरफ़ेस का उपयोग करना

उदाहरण:

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

उपरोक्त उदाहरण में, इंटरफ़ेस डाइमेंशन को getDimension() फ़ंक्शन पर रिटर्न प्रकार के रूप में लागू किया गया है। getDimension() का रिटर्न प्रकार इंटरफ़ेस डाइमेंशन के लिए उल्लिखित गुणों और प्रकार से मेल खाना चाहिए।

संकलित कोड Javascript निम्नानुसार होगा:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

संकलन के दौरान, यदि रिटर्न प्रकार इंटरफ़ेस से मेल नहीं खाता है, तो यह एक त्रुटि उत्पन्न करेगा।

फ़ंक्शन पैरामीटर के रूप में इंटरफ़ेस

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width +"-"+ dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // will get "300px-250px"

तो ऊपर दिए गए उदाहरण में, आपने getDimension() फ़ंक्शन के लिए एक पैरामीटर के रूप में इंटरफ़ेस डाइमेंशन का उपयोग किया है। जब आप फ़ंक्शन को कॉल करते हैं, तो आपको यह सुनिश्चित करना होगा कि इसमें दिया गया पैरामीटर परिभाषित इंटरफ़ेस नियम से मेल खाता है।

संकलित कोड Javascript निम्नानुसार होगा:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

इंटरफ़ेस को लागू करने वाला वर्ग

किसी क्लास के साथ इंटरफ़ेस का उपयोग करने के लिए, आपको कीवर्ड का उपयोग करना होगा औजार.

इंटरफ़ेस को कार्यान्वित करने वाले क्लास के लिए सिंटैक्स:

class NameofClass implements InterfaceName {
}

निम्न उदाहरण क्लास के साथ इंटरफेस की कार्यप्रणाली को दर्शाता है।

interface Dimension {
    width : string,
    height: string,
    getWidth(): string; 
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

उपरोक्त उदाहरण में, आपने width और height दोनों प्रकार के स्ट्रिंग गुणों वाले इंटरफ़ेस Dimension को परिभाषित किया है और getWidth() नामक एक विधि को परिभाषित किया है, जिसका रिटर्न मान एक स्ट्रिंग के रूप में है।

संकलित कोड Javascript निम्नानुसार होगा:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

में कार्य करता है TypeScript

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

Javaस्क्रिप्ट फ़ंक्शन:

function add (a1, b1) { 
   return a1+b1;
}

TypeScript समारोह:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

उपरोक्त फ़ंक्शन में, फ़ंक्शन का नाम जोड़ा गया है, पैरामीटर हैं a1, तथा b1 दोनों का प्रकार एक संख्या के रूप में है, और रिटर्न प्रकार भी एक संख्या है। यदि आप फ़ंक्शन में स्ट्रिंग पास करते हैं, तो इसे संकलित करते समय यह संकलन-समय त्रुटि देगा Javaस्क्रिप्ट।

फ़ंक्शन को कॉल करना: add

let  x = add(5, 10) ;  // will return 15
let  b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1.
let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3.
let t = add("Harry", "John");// will throw an error :  error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.

पैरामीटर a1 और b1 अनिवार्य पैरामीटर हैं और यदि उस तरीके से प्राप्त नहीं किया जाता है तो त्रुटि उत्पन्न होगी। साथ ही, पैराम प्रकार और रिटर्न प्रकार बहुत महत्वपूर्ण है और एक बार परिभाषित होने के बाद इसे बदला नहीं जा सकता है।

किसी फ़ंक्शन के लिए वैकल्पिक पैरामीटर

जावास्क्रिप्ट में, फ़ंक्शन के सभी पैरामीटर वैकल्पिक होते हैं और अगर उन्हें पास नहीं किया जाता है तो उन्हें अपरिभाषित माना जाता है। लेकिन ऐसा नहीं है TypeScriptएक बार जब आप पैरामीटर्स को परिभाषित कर लेते हैं तो आपको उन्हें भी भेजना होगा, लेकिन यदि आप किसी पैरामीटर को वैकल्पिक रखना चाहते हैं, तो आप पैरामीटर नाम के सामने ? का उपयोग करके ऐसा कर सकते हैं, जैसा कि नीचे दिखाया गया है:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.

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

पैरामीटर्स को डिफ़ॉल्ट मान निर्दिष्ट करें

आप नीचे दिखाए अनुसार पैरामीटर्स को डिफ़ॉल्ट मान निर्दिष्ट कर सकते हैं:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John"); // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

वैकल्पिक पैरामीटर्स के समान, यहां भी डिफ़ॉल्ट आरंभीकृत पैरामीटर्स को फ़ंक्शन के अंत में रखना होगा।

शेष पैरामीटर

आपने देखा है कैसे TypeScript अनिवार्य पैरामीटर, वैकल्पिक पैरामीटर और डिफ़ॉल्ट मान आरंभीकृत पैरामीटर को संभालता है। अब, बाकी पैरामीटर पर एक नज़र डालेंगे। बाकी पैरामीटर वैकल्पिक पैरामीटर का एक समूह है जिसे एक साथ परिभाषित किया गया है, और उन्हें तीन का उपयोग करके परिभाषित किया गया है बिंदु (…) इसके बाद पैराम का नाम आता है, जो एक सरणी है।

रेस्ट पैरामीटर्स के लिए सिंटैक्स:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

जैसा कि ऊपर दिखाया गया है, बाकी पैरामीटर (…param-name) का उपयोग करके परिभाषित किए गए हैं; बाकी पैरामीटर तीन बिंदुओं से उपसर्गित एक सरणी है। सरणी में सभी पैरामीटर पास किए जाएँगे। आप फ़ंक्शन को कॉल कर सकते हैं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

उदाहरण:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday

तीर फ़ंक्शन

एरो फ़ंक्शन ES6 में जारी महत्वपूर्ण सुविधाओं में से एक है, और यह उपलब्ध है TypeScript भी। एरो फंक्शन सिंटैक्स में एक मोटा तीर होता है जिसके कारण फ़ंक्शन को एरो फ़ंक्शन कहा जाता है।

एरो फ़ंक्शन सिंटैक्स:

var nameoffunction = (params) => {				
 // code here			
}

एरो फंक्शन का उपयोग क्या है?

आइए एरो फ़ंक्शन के उपयोग को समझने के लिए उदाहरण पर नज़र डालें:

उदाहरण:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined.    
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

आपने एक अनाम फ़ंक्शन बनाया है जिसमें this प्रॉपर्टी है। स्कोर 0 पर आरंभ करें और एक विधि getScore जिसमें आंतरिक रूप से setTimeout है, और 1 सेकंड में यह this.score को कंसोल करता है। कंसोल किया गया मान अपरिभाषित देता है, हालाँकि आपने this.score को परिभाषित और आरंभीकृत किया है। यहाँ समस्या यह है किis कीवर्ड। setTimeout के अंदर फ़ंक्शन का अपना this है, और यह स्कोर को आंतरिक रूप से संदर्भित करने का प्रयास करता है, और चूंकि यह परिभाषित नहीं है, इसलिए यह undefined देता है।

नीचे दिखाए अनुसार एरो फ़ंक्शन का उपयोग करके इसका ध्यान रखा जा सकता है:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

आपने setTimeout के अंदर फ़ंक्शन को एरो फ़ंक्शन में बदल दिया है जैसा कि नीचे दिखाया गया है:

setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);

एरो फंक्शन का अपना कोई कार्य नहीं होता इसका परिभाषित है और यह अपने मूल को साझा करता है इसका , इसलिए बाहर घोषित किए गए वेरिएबल्स को एरो फ़ंक्शन के अंदर this का उपयोग करके आसानी से एक्सेस किया जा सकता है। वे छोटे सिंटैक्स के साथ-साथ कॉलबैक, इवेंट हैंडलर, टाइमिंग फ़ंक्शन के अंदर आदि के लिए उपयोगी हैं।

TypeScript enums

TypeScript Enum एक ऑब्जेक्ट है जिसमें संबंधित मानों का संग्रह एक साथ संग्रहीत होता है। Javascript enums का समर्थन नहीं करता है। अधिकांश प्रोग्रामिंग भाषा पसंद Java, सी, C++ का समर्थन करता है TypeScript Enum और यह भी उपलब्ध है TypeScript भी। Enums को enum कीवर्ड का उपयोग करके परिभाषित किया जाता है।

Enum की घोषणा कैसे करें?

सिंटेक्स:

enum NameofEnum {
   value1,
   value2,
    ..
}

उदाहरण: Enum

enum Directions {
North,
South,
East,
West
}

उपरोक्त उदाहरण में, आपने दिशाएँ नामक एक सूची परिभाषित की है। दिए गए मान उत्तर, दक्षिण, पूर्व, पश्चिम हैं। इन मानों को सूची में पहले मान के लिए 0 से क्रमांकित किया जाता है और उसके बाद अगले मान के लिए 1 से बढ़ाया जाता है।

संख्यात्मक मान के साथ Enum घोषित करें

डिफ़ॉल्ट रूप से, यदि किसी enum को कोई मान नहीं दिया जाता है, तो वह उसे 0 से शुरू होने वाली संख्या मानता है। निम्न उदाहरण एक संख्यात्मक मान के साथ एक enum दिखाता है।

enum Directions {
North = 0,
South = 1, 
East =2,
West =3
}

आप enum को एक आरंभिक मान भी दे सकते हैं और अगले enum मानों को बढ़े हुए मान मिलेंगे। उदाहरण के लिए:

enum Directions {
North = 5,
South, // will be 6
East, // 7
West // 8
}

अब उत्तर का enum मान 5 से शुरू होता है, इसलिए दक्षिण का मान 6 होगा, पूर्व = 7 और पश्चिम = 8।

आप डिफ़ॉल्ट मान लेने के बजाय अपनी पसंद के मान भी निर्दिष्ट कर सकते हैं। उदाहरण के लिए:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Enum तक कैसे पहुँचें?

निम्न उदाहरण दिखाता है कि आप अपने कोड में Enum का उपयोग कैसे करें:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North); // output is  0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]); //output is North

जावास्क्रिप्ट में संकलित कोड इस प्रकार है:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

जबसे Javascript enums का समर्थन नहीं करता है, यह enum को स्वयं आह्वान किए गए फ़ंक्शन में परिवर्तित करता है जैसा कि ऊपर दिखाया गया है।

स्ट्रिंग मान के साथ Enum घोषित करें

आप अपनी पसंद के अनुसार स्ट्रिंग मान निर्दिष्ट कर सकते हैं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

उदाहरण:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North

जावास्क्रिप्ट में संकलित कोड इस प्रकार है:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

इसमें कौन से मॉड्यूल हैं? TypeScript?

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

आपको मॉड्यूल की आवश्यकता क्यों है? TypeScript?

निम्न उदाहरण मॉड्यूल के बिना समस्या को दर्शाता है:

उदाहरण test1.ts

let age : number = 25;

आपने test1.ts में number प्रकार का एक चर age परिभाषित किया है।

उदाहरण test2.ts

test2.ts फ़ाइल में आप आसानी से वेरिएबल तक पहुंच सकते हैं उम्र test1.ts में परिभाषित करें और इसे नीचे दिखाए अनुसार संशोधित भी करें:

age = 30; // changed from 25 to 30.
let _new_age = age;

अतः उपरोक्त मामला बहुत सारी समस्याएं उत्पन्न कर सकता है, क्योंकि चर वैश्विक स्तर पर उपलब्ध हैं और उन्हें संशोधित किया जा सकता है।

- मॉड्यूल, लिखा गया कोड फ़ाइल के लिए स्थानीय रहता है और इसके बाहर पहुँचा नहीं जा सकता। फ़ाइल से कुछ भी एक्सेस करने के लिए, इसे export कीवर्ड का उपयोग करके निर्यात करना होगा। It इसका उपयोग तब किया जाता है जब आप चाहते हैं कि वेरिएबल, क्लास, फ़ंक्शन या इंटरफ़ेस किसी अन्य फ़ाइल में उपयोग किया जाए। आयात इसका उपयोग तब किया जाता है जब आप एक्सपोर्ट किए गए वैरिएबल, क्लास, या इंटरफ़ेस या फ़ंक्शन को भी एक्सेस करना चाहते हैं। ऐसा करने से लिखा गया कोड फ़ाइल के भीतर बरकरार रहता है, और भले ही आप समान वैरिएबल नाम परिभाषित करते हों, वे मिश्रित नहीं होते हैं और उस फ़ाइल के लिए स्थानीय व्यवहार करते हैं जहाँ उन्हें घोषित किया गया है।

निर्यात और आयात का उपयोग करना

एक्सपोर्ट और इंपोर्ट करने के कई तरीके हैं। इसलिए यहाँ हम उस सिंटैक्स पर चर्चा करेंगे जो सबसे ज़्यादा इस्तेमाल किया जाता है।

आयात और निर्यात के लिए सिंटैक्स 1:

export  nameofthevariable or class name or interface name etc

//To import above variable or class name or interface you have to use import as shown below:
 

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

यहां निर्यात और आयात का एक कार्यशील उदाहरण दिया गया है।

उदाहरण:

टेस्ट1.ts

export let age: number = 25;

Export कीवर्ड का उपयोग किसी अन्य फ़ाइल में आयु चर को साझा करने के लिए किया जाता है।

टेस्ट2.ts

import { age } from "./test1"
let new_age :number = age;

आयात कीवर्ड का उपयोग तक पहुँचने के लिए किया जाता है उम्र चर, और आपको फ़ाइल स्थान निर्दिष्ट करना होगा जैसा कि ऊपर दिखाया गया है।

आयात और निर्यात के लिए सिंटैक्स 2:

निर्यात और आयात करने का एक और तरीका है और इसके लिए सिंटैक्स नीचे दिखाया गया है:

export = classname;

import classname = require(“file path of modulename”)

जब आप उपयोग कर रहे हैं निर्यात = अपने मॉड्यूल को निर्यात करने के लिए, आयात को इसे आयात करने के लिए require(“मॉड्यूलनाम का फ़ाइल पथ”) का उपयोग करना होगा।

उपरोक्त मामले को दर्शाने वाला एक कार्यशील उदाहरण यहां दिया गया है:

ग्राहक.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

मॉड्यूल लोडर

मॉड्यूल अपने आप काम नहीं कर सकता है, इसलिए आपको आयात निर्भरता का पता लगाने के लिए मॉड्यूल लोडर की आवश्यकता है जैसा कि आपने देखा है TypeScript ऊपर दिखाए गए उदाहरण। उपलब्ध मॉड्यूल लोडर nodejs के लिए CommonJS और ब्राउज़र में चलाने के लिए Require.js है।

कॉमनजेएस मॉड्यूल का उपयोग करके कोड संकलित करने के लिए निम्नलिखित कमांड का उपयोग करें:

tsc --module commonjs testCustomer.ts

Requirejs मॉड्यूल का उपयोग करके कोड संकलित करने के लिए निम्नलिखित कमांड का उपयोग करें:

tsc --module amd testCustomer.ts

उपरोक्त आदेश से आश्रित फ़ाइलें js फ़ाइल में परिवर्तित हो जाएंगी।

Requirejs का उपयोग करके testCustomer.ts से testCustomer.js का उदाहरण

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Requirejs का उपयोग करके Customer.ts से Customer.js का उदाहरण

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

require.js का उपयोग करके इसका परीक्षण करने के लिए, आपको main.js नामक एक फ़ाइल बनानी होगी, जिसमें दिखाए गए अनुसार निर्भरताओं का संदर्भ होगा।

फ़ोल्डर संरचना इस प्रकार है:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>			
<html>			
<head>			
    <title>TypeScript Module testing using Requirejs</title>			
    <script data-main="main" src="require.js"></script>			
</head>			
<body>			
    <h3>Testing modules using Requirejs</h3>			
</body>			
</html>

मॉड्यूल लोडर

नामस्थान TypeScript

नेमस्पेस मूलतः एक फ़ाइल में क्लासेस, इंटरफेस, वेरिएबल्स, फंक्शन्स का संग्रह होता है।

नामस्थान सिंटैक्स

namespace name{

export class {
}

export interface {
}

export const constname;

}

इससे संबंधित कोड एक नामस्थान के अंतर्गत उपलब्ध है।

नामस्थान कार्यशील उदाहरण: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

नामस्थान का नाम है स्टूडेंटसेटअप, आपने एक इंटरफ़ेस StudDetails, फ़ंक्शन addSpace और Student नामक एक क्लास जोड़ा है।

नामस्थान तक पहुँचना

निम्नलिखित कोड वह है जहाँ आप नामस्थान का उपयोग कर रहे हैं स्टूडेंटसेटअप.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

नामस्थान के अंदर उपलब्ध वर्ग, इंटरफ़ेस, फ़ंक्शन को नामस्थान उदाहरण के नाम का उपयोग करके संदर्भित किया जाना चाहिए स्टूडेंटसेटअप.addSpace फ़ंक्शन तक पहुंचने के लिए, छात्रसेटअप.छात्र कक्षा तक पहुँचने के लिए.

आप दोनों फ़ाइलों को एक js में संकलित कर सकते हैं जैसा कि नीचे दिखाया गया है:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

नीचे दिए गए आदेश का उपयोग करके कमांड प्रॉम्प्ट में आउटपुट की जांच करें:

node namespace.js

यह आउटपुट इस प्रकार प्रदर्शित करेगा:

The name is: H a r r y

परिवेश घोषणाएँ TypeScript

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

परिवेश वाक्यविन्यास

परिवेशी मॉड्यूल घोषित करने के लिए:

declare module moduleName {
   //code here
}

परिवेश फ़ाइल को इस रूप में सहेजा जाना चाहिए:

filename.d.ts

फ़ाइल का उपयोग करने के लिए फ़ाइलनाम.d.ts अपने .ts में आपको इसे इस प्रकार संदर्भित करना होगा:

/// <reference path="filename.d.ts"/>

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

तृतीय पक्ष Javaस्क्रिप्ट फ़ाइल: testString.js

उदाहरण: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

आपके पास StringChecks नामक एक ऑब्जेक्ट है जिसमें isString, convertToUpperCase, convertToLowerCase, और converToStringBold जैसे फ़ंक्शन हैं।

परिवेश मॉड्यूल का निर्माण TypeScript

अब हम एक एम्बिएंट मॉड्यूल बनाएंगे जिसमें उपरोक्त js फ़ंक्शनों का संदर्भ होगा और हमारी आवश्यकताओं के अनुसार टाइप चेक भी जोड़ा जाएगा।

फ़ाइल नाम : tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

आपको मॉड्यूल का नाम TestString के रूप में परिभाषित करना होगा और इंटरफ़ेस StringsFunc को निर्यात करना होगा।

isString(स्ट्रिंग: स्ट्रिंग): बूलियन

=> यह पैराम को स्ट्रिंग के रूप में लेगा और रिटर्न टाइप बूलियन होगा। अपनी .ts फ़ाइल में उपयोग करते समय यदि आप पैराम को स्ट्रिंग के अलावा किसी संख्या या किसी अन्य रूप में पास करते हैं तो यह आपको संकलन प्रकार की त्रुटि देगा।

convertToUpperCase(str:स्ट्रिंग): स्ट्रिंग

=> यह तर्क को स्ट्रिंग के रूप में लेगा और एक स्ट्रिंग लौटाएगा। यही बात convertToLowerCase(स्ट्रिंग: स्ट्रिंग)
: स्ट्रिंग; और convertToStringBold(स्ट्रिंग: स्ट्रिंग): स्ट्रिंग
;

चूंकि जावास्क्रिप्ट फ़ाइल में आपके पास ऑब्जेक्ट का नाम StringChecks है, अंततः हमें इसे .d.ts फ़ाइल में संदर्भित करने की आवश्यकता है जो इस प्रकार किया जाता है:

declare var StringChecks: TestString.StringsFunc;

एम्बिएंट मॉड्यूल का उपयोग करना TypeScript

अब यहाँ test.ts फ़ाइल है जहाँ परिवेश फ़ाइल tstring.d.ts का उपयोग किया जाएगा

उदाहरण: test.ts

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

संकलन करना TypeScript tsc test.ts से test.js

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

अब आप html फ़ाइल में test.js और लाइब्रेरी फ़ाइल testString.js का भी उपयोग कर सकते हैं

<html>			
<head>			
    <title>Test TypeScript Ambient</title>			
    <script src="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

कंसोल में यह आउटपुट दिखाई देता है:

true			
HELLO WORLD			
hello			
<b>Hello World</b>

TypeScript इतिहास

आइये इतिहास के महत्वपूर्ण स्थलों पर नजर डालें TypeScript:

  • दो साल के आंतरिक विकास के बाद Microsoft. TypeScript 0.9, 2013 में जारी किया गया
  • जेनेरिक्स के लिए अतिरिक्त समर्थन TypeScript 1.0 को बिल्ड 2014 में रिलीज़ किया गया था
  • जुलाई 2014 में, एक नया TypeScript कंपाइलर आया जो पिछले संस्करण की तुलना में पांच गुना तेज है।
  • जुलाई 2015 में, ES6 मॉड्यूल, नेमस्पेस कीवर्ड, फॉर, ऑफ सपोर्ट, डेकोरेटर के लिए समर्थन।
  • नवंबर 2016 में, मैप किए गए प्रकारों की कुंजी और लुकअप प्रकार, और बाकी जैसी एक अतिरिक्त सुविधा।
  • 27 मार्च 2018 को, सशर्त प्रकार, प्रतिच्छेदन प्रकार के समर्थन के साथ बेहतर कुंजी को जोड़ा गया TypeScript.

क्यों का उपयोग करें TypeScript?

यहां, उपयोग करने के महत्वपूर्ण पक्ष/लाभ दिए गए हैं TypeScript

  • बड़ी और जटिल परियोजना Javaस्क्रिप्ट को कोड करना और उसका रखरखाव करना कठिन है।
  • TypeScript कोड संगठन में बहुत मदद करता है और फिर भी संकलन के दौरान अधिकांश त्रुटियों से छुटकारा दिलाता है।
  • TypeScript JS लाइब्रेरीज़ और API डॉक्यूमेंटेशन का समर्थन करता है
  • यह वैकल्पिक रूप से टाइप की गई स्क्रिप्टिंग भाषा है
  • TypeScript कोड को सादे कोड में बदला जा सकता है Javaस्क्रिप्ट कोड
  • बेहतर कोड संरचना और ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग तकनीक
  • बेहतर विकास समय उपकरण समर्थन की अनुमति देता है
  • यह भाषा को मानक डेकोरेटर, async/await से आगे तक विस्तारित कर सकता है

कौन उपयोग करता है TypeScript?

यहाँ, कुछ सबसे आम अनुप्रयोग हैं TypeScript:

  • कोणीय टीम का उपयोग करता है TypeScript.
  • NodeJS और NPM स्थापना
  • TypeScript स्थापना
  • संकलन करना TypeScript करने के लिए कोड Javascript
  • Nodejs का उपयोग करके कोड निष्पादित करें
  • निष्पादित करना Javascript ब्राउजर में
  • संकलन करना TypeScript करने के लिए कोड Javascript ECMAScript संस्करण का उपयोग करना
  • आप आसानी से लिखे गए कोड को संकलित कर सकते हैं TypeScript सेवा मेरे JavaNodeJS का उपयोग कर स्क्रिप्ट.
  • तो साथ काम करने के लिए TypeScript आपको सबसे पहले NodeJS को डाउनलोड और इंस्टॉल करना होगा।

सारांश

  • TypeScript का सुपरसेट है Javaस्क्रिप्ट। TypeScript यह शुद्ध ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग भाषा है जो क्लासेस, इंटरफेस आदि का समर्थन करती है।
  • TypeScript जारी की गई सभी Ecmascript सुविधाओं का समर्थन करता है, और डेवलपर्स कोडिंग करते समय इसका उपयोग कर सकते हैं।
  • चरों का उपयोग मानों को संग्रहीत करने के लिए किया जाता है, और मान एक स्ट्रिंग, संख्या, बूलियन या अभिव्यक्ति हो सकता है।
  • In TypeScript, किसी चर का प्रकार केवल शुरुआत में और निष्पादन के माध्यम से परिभाषित किया जाता है, इसे उसी प्रकार को बनाए रखना होता है, इसमें कोई भी परिवर्तन जावास्क्रिप्ट के संकलन के दौरान संकलन-समय त्रुटि का कारण बनेगा।
  • एक सरणी TypeScript एक डेटा प्रकार है जिसमें आप एकाधिक मान संग्रहीत कर सकते हैं।
  • क्लास एक नई सुविधा है जो ES6 के बाद से जोड़ी गई है, इसलिए पहले Javaकोड का पुनः उपयोग करने के लिए प्रोटोटाइप कार्यक्षमता वाले फ़ंक्शन का उपयोग करके क्लास प्रकार की कार्यक्षमता की स्क्रिप्ट बनाने का प्रयास किया गया।
  • TypeScript आपकी विधियों और गुणों के लिए सार्वजनिक, निजी और संरक्षित पहुँच संशोधकों का समर्थन करता है।
  • की मुख्य विशेषताओं में से एक TypeScript इंटरफ़ेस एक परिभाषित नियम का एक सेट है जिसे इसका उपयोग करने वाली इकाई द्वारा लागू किया जाना चाहिए।
  • फ़ंक्शन किसी कार्य को पूरा करने के लिए दिए गए निर्देशों का समूह है।
  • TypeScript Enum एक ऑब्जेक्ट है जिसमें संबंधित मानों का संग्रह एक साथ संग्रहीत होता है।