TypeScript ट्यूटोरियल
टाइपस्क्रिप्ट के साथ शुरुआत करना

टिप्पणियों

संस्करण

स्थापना और सेटअप

पृष्ठभूमि

टाइपस्क्रिप्ट जावास्क्रिप्ट का एक टाइप सुपरसेट है जो सीधे जावास्क्रिप्ट कोड को संकलित करता है। टाइपस्क्रिप्ट फाइलें आमतौर पर .ts एक्सटेंशन का उपयोग करती हैं। कई IDE बिना किसी अन्य सेटअप के टाइपस्क्रिप्ट का समर्थन करते हैं, लेकिन टाइपस्क्रिप्ट को कमांड लाइन से टाइपस्क्रिप्ट नोड.जेएस पैकेज के साथ भी संकलित किया जा सकता है।

IDEs

दृश्य स्टूडियो

• Visual Studio 2015 में टाइपस्क्रिप्ट शामिल है।
• Visual Studio 2013 Update 2 या बाद में टाइपस्क्रिप्ट शामिल है, या आप पुराने संस्करणों के लिए टाइपस्क्रिप्ट डाउनलोड कर सकते हैं।

विजुअल स्टूडियो कोड

• विजुअल स्टूडियो कोड (vscode) प्रासंगिक स्वत: पूर्णता प्रदान करता है और साथ ही टाइपस्क्रिप्ट के लिए पुन: प्रसंस्करण और डीबगिंग टूल भी प्रदान करता है। vscode खुद टाइपस्क्रिप्ट में लागू किया गया है। मैक ओएस एक्स, विंडोज और लिनक्स के लिए उपलब्ध है।

WebStorm

• WebStorm 2016.2 टाइपस्क्रिप्ट और एक अंतर्निहित कंपाइलर के साथ आता है। [वेबस्टॉर्म फ्री नहीं है]

इंटेलीज आईडिया

• IntelliJ IDEA 2016.2 में Jetbrains टीम द्वारा रखे गए प्लगइन के माध्यम से टाइपस्क्रिप्ट और कंपाइलर के लिए समर्थन है। [इंटेलीज फ्री नहीं है]

परमाणु और परमाणु-टाइपस्क्रिप्ट

• Atom के साथ टाइपप्रति का समर्थन करता है परमाणु टाइपप्रति पैकेज।

उदात्त पाठ

• Sublime Text टाइपस्क्रिप्ट पैकेज के साथ टाइपस्क्रिप्ट का समर्थन करता है।

कमांड लाइन इंटरफ़ेस स्थापित करना

Node.js स्थापित करें

विश्व स्तर पर npm पैकेज स्थापित करें

आप किसी भी डायरेक्टरी से इस तक पहुंचने के लिए विश्व स्तर पर टाइपस्क्रिप्ट स्थापित कर सकते हैं।

npm install -g typescript

या

स्थानीय रूप से npm पैकेज स्थापित करें

आप टाइपस्क्रिप्ट स्थानीय रूप से स्थापित कर सकते हैं और एक निर्देशिका तक सीमित करने के लिए package.json को बचा सकते हैं।

npm install typescript --save-dev

स्थापना चैनल

आप से स्थापित कर सकते हैं:

• स्थिर चैनल: npm install typescript
• बीटा चैनल: npm install typescript@beta
• देव चैनल: npm install typescript@next

टाइपस्क्रिप्ट कोड संकलन

tsc संकलन कमांड typescript साथ आता है, जिसका उपयोग कोड संकलित करने के लिए किया जा सकता है।

tsc my-code.ts

यह एक my-code.js फ़ाइल बनाता है।

Tsconfig.json का उपयोग कर संकलन करें

आप संकलन विकल्प भी प्रदान कर सकते हैं जो आपके कोड के साथ tsconfig.json फ़ाइल के माध्यम से यात्रा करते हैं। एक नया टाइपस्क्रिप्ट प्रोजेक्ट शुरू करने के लिए, टर्मिनल विंडो में अपने प्रोजेक्ट के रूट डायरेक्टरी में cd और tsc --init रन करें। यह कमांड न्यूनतम विन्यास विकल्पों के साथ tsconfig.json फ़ाइल उत्पन्न करेगा, जो नीचे जैसा है।

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

एक साथ tsconfig.json अपने टाइपप्रति परियोजना की जड़ में रखा फ़ाइल, तो आप उपयोग कर सकते हैं tsc संकलन को चलाने के लिए आदेश।

नमस्ते दुनिया

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

यहां हमारे पास एक वर्ग है, Greeter , जिसमें एक constructor और एक greet विधि है। हम new कीवर्ड का उपयोग करके कक्षा का एक उदाहरण बना सकते हैं और एक स्ट्रिंग में पास कर सकते हैं जो हम चाहते हैं कि कंसोल को आउटपुट करने के लिए greet विधि। हमारे के कहने Greeter वर्ग में संग्रहित है greeter चर जो हम तो हमें फोन करने के लिए greet विधि।

मूल वाक्य रचना

टाइपस्क्रिप्ट जावास्क्रिप्ट का एक टाइप किया हुआ सुपरसेट है, जिसका अर्थ है कि सभी जावास्क्रिप्ट कोड मान्य टाइपस्क्रिप्ट कोड हैं। टाइपस्क्रिप्ट इसके शीर्ष पर कई नई सुविधाएँ जोड़ता है।

टाइपस्क्रिप्ट जावास्क्रिप्ट को C # और जावा की तरह एक जोरदार-टाइप की गई, ऑब्जेक्ट ओरिएंटेड भाषा की तरह बनाता है। इसका मतलब है कि टाइपस्क्रिप्ट कोड बड़ी परियोजनाओं के लिए उपयोग में आसान हो जाता है और यह कोड समझने और बनाए रखने में आसान हो जाता है। मजबूत टाइपिंग का मतलब यह भी है कि भाषा को पहले (और) चलाया जा सकता है और चर को उन मूल्यों को नहीं सौंपा जा सकता है जो उनकी घोषित सीमा से बाहर हैं। उदाहरण के लिए, जब टाइपस्क्रिप्ट वैरिएबल को एक संख्या के रूप में घोषित किया जाता है, तो आप इसके लिए कोई पाठ मान निर्दिष्ट नहीं कर सकते।

यह मजबूत टाइपिंग और ऑब्जेक्ट ओरिएंटेशन टाइपस्क्रिप्ट को डिबग और बनाए रखना आसान बनाता है, और वे मानक जावास्क्रिप्ट के सबसे कमजोर बिंदुओं में से दो थे।

घोषणाएं लिखें

आप वेरिएबल्स, फंक्शन पैरामीटर्स और फंक्शन रिटर्न टाइप्स में टाइप डिक्लेरेशन जोड़ सकते हैं। चर नाम के बाद एक बृहदान्त्र के बाद प्रकार लिखा जाता है, इस तरह: var num: number = 5; कंपाइलर तब संकलन के दौरान प्रकारों (जहाँ संभव हो) की जाँच करेगा और टाइप त्रुटियों की रिपोर्ट करेगा।

var num: number = 5;
num = "this is a string";  // error: Type 'string' is not assignable to type 'number'.

मूल प्रकार हैं:

• number (दोनों पूर्णांक और फ्लोटिंग पॉइंट संख्या)
• string
• boolean
• Array । आप किसी सरणी के तत्वों के प्रकार निर्दिष्ट कर सकते हैं। सरणी प्रकारों को परिभाषित करने के दो समान तरीके हैं: Array<T> और T[] । उदाहरण के लिए:
  • number[] - संख्या की सरणी
  • Array<string> - strings की array
• Tuples। Tuples में विशिष्ट प्रकार के तत्वों की एक निश्चित संख्या होती है।
  • [boolean, string] - ट्यूपल जहां पहला तत्व एक बूलियन है और दूसरा एक स्ट्रिंग है।
  • [number, number, number] - तीन संख्याओं का ट्यूपल।
• {} - ऑब्जेक्ट, आप इसके गुणों या अनुक्रमणिका को परिभाषित कर सकते हैं
  • {name: string, age: number} - नाम और आयु विशेषताओं के साथ वस्तु
  • {[key: string]: number} - स्ट्रिंग द्वारा अनुक्रमित संख्याओं का एक शब्दकोश
• enum - { Red = 0, Blue, Green } - संख्या में मैप की गई गणना
• समारोह। आप मापदंडों और वापसी मूल्य के लिए प्रकार निर्दिष्ट करते हैं:
  • (param: number) => string - फ़ंक्शन एक नंबर पैरामीटर रिटर्निंग स्ट्रिंग ले रहा है
  • () => number - कोई संख्या वापस करने वाले कोई पैरामीटर के साथ कार्य।
  • (a: string, b?: boolean) => void - एक स्ट्रिंग ले रहा है और वैकल्पिक रूप से बिना रिटर्न वैल्यू वाला एक बूलियन है।
• any - किसी भी प्रकार की अनुमति देता है। any प्रकार की अभिव्यक्तियाँ टाइप नहीं की गई हैं।
• void - "कुछ भी नहीं" का प्रतिनिधित्व करता है, जिसका उपयोग फ़ंक्शन रिटर्न मान के रूप में किया जा सकता है। केवल null और undefined void प्रकार का हिस्सा हैं।
• never
  • let foo: never; -जिस प्रकार के तहत वैरिएबल के प्रकार जो कभी सच नहीं होते हैं।
  • function error(message: string): never { throw new Error(message); } - रिटर्न प्रकार के कार्यों के रूप में जो कभी वापस नहीं आते हैं।

• null - मान null लिए टाइप करें। null प्रत्येक प्रकार का अंतर्निहित हिस्सा है, जब तक कि सख्त अशक्त जांच सक्षम न हो।

ढलाई

आप उदाहरण के लिए कोण कोष्ठक के माध्यम से स्पष्ट ढलाई कर सकते हैं:

var derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod();

यह उदाहरण एक derived वर्ग को दर्शाता है derived कंपाइलर द्वारा MyInterface रूप में व्यवहार किया MyInterface । दूसरी पंक्ति में कास्टिंग के बिना संकलक एक अपवाद को फेंक देगा क्योंकि यह कुछ someSpecificMethod() को नहीं समझता है, लेकिन <ImplementingClass>derived माध्यम से कास्टिंग करने से पता चलता है कि संकलक को क्या करना है।

टाइपस्क्रिप्ट में कास्टिंग का दूसरा तरीका कीवर्ड के as उपयोग कर रहा है:

var derived: MyInterface;
(derived as ImplementingClass).someSpecificMethod();

टाइपस्क्रिप्ट 1.6 के बाद से, डिफ़ॉल्ट कीवर्ड के as में उपयोग कर रहा है, क्योंकि <> .jsx फ़ाइलों में अस्पष्ट है। इसका उल्लेख टाइपस्क्रिप्ट आधिकारिक दस्तावेज में किया गया है।

कक्षाएं

टाइपस्क्रिप्ट कोड में कक्षाओं को परिभाषित और उपयोग किया जा सकता है। कक्षाओं के बारे में अधिक जानने के लिए, क्लासेस प्रलेखन पृष्ठ देखें ।

टाइपस्क्रिप्ट REPL Node.js में

Node.js में टाइपस्क्रिप्ट REPL के उपयोग के लिए आप tsun पैकेज का उपयोग कर सकते हैं

इसे विश्व स्तर पर स्थापित करें

npm install -g tsun

और tsun कमांड के साथ अपने टर्मिनल या कमांड प्रॉम्प्ट में चलाएं

उपयोग उदाहरण:

$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl
$ function multiply(x, y) {
..return x * y;
..}
undefined
$ multiply(3, 4)
12

टीएस-नोड का उपयोग करके टाइपस्क्रिप्ट चलाना

ts नोड का उपयोग कर precompilation की आवश्यकता के बिना, एक NPM पैकेज है जो उपयोगकर्ता टाइपप्रति फ़ाइलों को सीधे चलाने की अनुमति देता है tsc । यह आरईपीएल भी प्रदान करता है।

विश्व स्तर पर उपयोग करके ts-node स्थापित करें

npm install -g ts-node

ts-नोड टाइपस्क्रिप्ट कंपाइलर को बंडल नहीं करता है, इसलिए आपको इसे स्थापित करने की आवश्यकता हो सकती है।

npm install -g typescript

निष्पादित स्क्रिप्ट

Main.ts नामक स्क्रिप्ट निष्पादित करने के लिए, चलाएँ

ts-node main.ts

// main.ts
console.log("Hello world");

उदाहरण उपयोग

$ ts-node main.ts
Hello world

REPL चल रहा है

REPL चलाने के लिए कमांड ts-node चलाएं

उदाहरण उपयोग

$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2, 2)
4
> .exit

REPL उपयोग कमांड से बाहर निकलने के लिए .exit या दो बार CTRL+C दबाएं।