Articles
टाइपस्क्रिप्ट का परिचय
टाइपस्क्रिप्ट के मूल तत्व

टाइपस्क्रिप्ट के मूल तत्व

यह लेख टाइपस्क्रिप्ट के मूल तत्वों की व्याख्या करता है।

YouTube Video

"Hello World!" को निष्पादित करना

सबसे पहले, हम Visual Studio Code का उपयोग करके टाइपस्क्रिप्ट में क्लासिक "Hello World!" उदाहरण चलाएंगे।

npm install -g typescript

npm कमांड का उपयोग करके typescript इंस्टॉल करें।

tsconfig.json फ़ाइल बनाएं।

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

main.ts फ़ाइल को Visual Studio Code में चलाने के लिए .vscode/launch.json फ़ाइल बनाएं।

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

एक main.ts फ़ाइल बनाएं जो "Hello World!" प्रदर्शित करे। आप इसे Visual Studio Code में F5 कुंजी दबाकर चला सकते हैं।

1console.log("Hello World!");

इस तरह से कॉन्फ़िगर करके, आप VSCode के भीतर TypeScript फ़ाइलों को निष्पादित कर सकते हैं।

टाइपस्क्रिप्ट का अवलोकन

टाइपस्क्रिप्ट (TS) माइक्रोसॉफ्ट द्वारा विकसित जावास्क्रिप्ट का सुपरसेट है। टाइपस्क्रिप्ट स्थिर टाइपिंग का समर्थन करता है, जिससे अधिक मज़बूत और सुव्यवस्थित कोड संभव होता है।

स्थिर टाइपिंग

  • टाइपस्क्रिप्ट जावास्क्रिप्ट में प्रकार (types) जोड़ता है और संकलन समय पर प्रकार जांच करता है। यह प्रकार संबन्धित बग्स को पहले से रोकने में सक्षम बनाता है।
1let message: string = "Hello, TypeScript";
2console.log(message);

संकलन

  • क्योंकि टाइपस्क्रिप्ट को सीधे ब्राउज़र में निष्पादित नहीं किया जा सकता, इसे जावास्क्रिप्ट में ट्रांसपाइल (संकलन) करने की आवश्यकता होती है। TS फ़ाइलों को JS फ़ाइलों में परिवर्तित करने के लिए tsc (टाइपस्क्रिप्ट कम्पाइलर) का उपयोग करें।

वैकल्पिक प्रकार एनोटेशन

  • टाइपस्क्रिप्ट प्रकार अनुमान भी करता है, लेकिन जब आवश्यक हो तो आपको प्रकार स्पष्ट रूप से निर्दिष्ट करने की अनुमति देता है। यह कोड की पठनीयता और विश्वसनीयता में सुधार करता है।
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

इंटरफेस

  • टाइपस्क्रिप्ट ऑब्जेक्ट्स के आकार को परिभाषित करने के लिए interface प्रदान करता है। यह ऑब्जेक्ट संरचना के सख्त प्रबंधन को संभव बनाता है।
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

क्लासेस

  • टाइपस्क्रिप्ट जावास्क्रिप्ट की क्लास सिंटैक्स का विस्तार करता है और इनहेरिटेंस, एक्सेस मॉडिफायर (public, private, protected), और एब्सट्रैक्ट क्लासेस को सपोर्ट करता है।
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

जेनेरिक्स

  • टाइपस्क्रिप्ट में, आप जेनेरिक्स का उपयोग करके पुन: उपयोग योग्य और टाइप-सुरक्षित कोड लिख सकते हैं।
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

इकोसिस्टम

  • टाइपस्क्रिप्ट पूरी तरह से जावास्क्रिप्ट के इकोसिस्टम के साथ संगत है और मौजूदा जावास्क्रिप्ट कोड का जैसा है वैसा उपयोग कर सकता है। इसके अतिरिक्त, यह React और Node.js जैसी लोकप्रिय लाइब्रेरीज़ के साथ इंटीग्रेट होता है।

शक्तिशाली डेवलपर टूल्स

  • टाइपस्क्रिप्ट एडवांस फीचर्स प्रदान करता है जैसे ऑटो-कम्पलीट, रिफैक्टरिंग सपोर्ट और VSCode जैसे एडिटर्स में एरर चेकिंग।

टाइपस्क्रिप्ट बड़े प्रोजेक्ट्स में विश्वसनीयता को बढ़ाने और डेवलपर उत्पादकता में सुधार करने में विशेष रूप से उपयोगी है।

टाइपस्क्रिप्ट में वेरिएबल्स

यह टाइपस्क्रिप्ट में वेरिएबल्स की मूलभूत अवधारणाओं और उपयोग को समझाता है।

वेरिएबल डिक्लेरेशन

टाइपस्क्रिप्ट में, वेरिएबल्स को तीन कीवर्ड्स का उपयोग करके घोषित किया जाता है: let, const, और var। हर कीवर्ड की अलग-अलग विशेषताएँ होती हैं।

let का उदाहरण:

let का ब्लॉक स्कोप होता है (केवल कर्ली ब्रेसेस {} के भीतर ही मान्य है)। मूल्यों को बाद में पुनः असाइन किया जा सकता है।

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

const का उदाहरण:

const को पुनः असाइन नहीं किया जा सकता है, इसलिए एक बार असाइन किए गए मान को बदला नहीं जा सकता है। हालांकि, ऑब्जेक्ट्स और एरेज़ की सामग्री को बदला जा सकता है।

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

var का उदाहरण:

var का स्कोप फंक्शन तक सीमित होता है और इसे पुनः असाइन किया जा सकता है। हालांकि, ब्लॉक स्कोप को अनदेखा करने के कारण, यह let या const की तुलना में अप्रत्याशित व्यवहार कर सकता है।

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

टाइप एनोटेशन्स

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

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

अप्रारंभिक चरों

यदि कोई चर बिना प्रारंभिककरण के घोषित किया जाता है, तो डिफ़ॉल्ट रूप से undefined असाइन किया जाता है। let के साथ घोषित किए गए चरों को स्पष्ट रूप से undefined असाइन करना चाहिए या यदि अप्रारंभिक है, तो इसके प्रकार में undefined शामिल होना चाहिए।

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

चर का क्षेत्र (स्कोप)

let और const का ब्लॉक स्कोप होता है, इसलिए ये केवल उसी ब्लॉक के भीतर मान्य होते हैं।

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

वैरिएबल होस्टिंग

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

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • इस मामले में, var के साथ घोषित किए गए वैरिएबल होस्ट किए जाते हैं, और उनके मान आउटपुट किए जाते हैं।
1console.log(b); // ReferenceError
2let b = 20;
  • let के साथ घोषित किए गए वैरिएबल होस्ट नहीं किए जाते हैं, जिससे एक त्रुटि उत्पन्न होती है।

सारांश

नीचे let, const, और var का सारांश दिया गया है।

  • let को पुनः असाइन किया जा सकता है और इसका ब्लॉक स्कोप होता है।
  • const को पुनः असाइन नहीं किया जा सकता है और इसका ब्लॉक स्कोप होता है।
  • var को पुनः असाइन किया जा सकता है और इसका फंक्शन स्कोप होता है।
  • इन सभी में वेरिएबल प्रकार निर्दिष्ट करने के लिए स्पष्ट प्रकार एनोटेशन की अनुमति होती है।

टाइपस्क्रिप्ट में एस्केप कैरेक्टर्स

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

उदाहरण के लिए, \n का उपयोग करें ताकि एक संदेश में नई पंक्ति (newline) शामिल हो।

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

विशेष कैरेक्टर्स को एस्केप करना

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

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

बैकस्लैश को एस्केप करना

किसी स्ट्रिंग में बैकस्लैश शामिल करने के लिए, इसे डबल बैकस्लैश के रूप में लिखना आवश्यक है।

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

यूनिकोड और हेक्साडेसिमल एस्केप्स

टाइपस्क्रिप्ट में, यूनिकोड कोड पॉइंट्स को एस्केप सीक्वेंसेज का उपयोग करके दर्शाया जा सकता है।

यूनिकोड एस्केप सीक्वेंस

आप यूनिकोड कैरेक्टर्स को \u के बाद चार अंकों की हेक्साडेसिमल संख्या निर्दिष्ट कर दर्शा सकते हैं।

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

हेक्साडेसिमल एस्केप

आप \x के बाद दो अंकों की हेक्साडेसिमल संख्या का उपयोग करके विशिष्ट कैरेक्टर्स को दर्शा सकते हैं।

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

टेम्प्लेट लिटेरल्स और एस्केप्स

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

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

विशेष मामले

टाइपस्क्रिप्ट में, एक स्ट्रिंग के भीतर अमान्य एस्केप सीक्वेंस का उपयोग करने से सिंटैक्स एरर हो सकता है। इसलिए, यह जांचना महत्वपूर्ण है कि एस्केप कैरेक्टर्स मान्य हैं या नहीं।

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

व्यावहारिक उपयोग के उदाहरण

यहाँ एस्केप कैरेक्टर्स का उपयोग करके एक जटिल स्ट्रिंग बनाने का उदाहरण दिया गया है।

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

इस उदाहरण में, \n का उपयोग नई पंक्ति और \t का उपयोग इंडेंटेशन जोड़ने के लिए किया गया है। यह JSON संरचना को पढ़ने में आसान बनाता है।

सारांश

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

टाइपस्क्रिप्ट के संस्करण

आइए यहां टाइपस्क्रिप्ट संस्करण का अवलोकन करें।

  1. टाइपस्क्रिप्ट 1.0 (2014)

    टाइपस्क्रिप्ट का पहला स्थिर संस्करण। मूलभूत सुविधाओं जैसे टाइपिंग, क्लासेस और मॉड्यूल पेश किए गए।

  2. टाइपस्क्रिप्ट 2.0 (2016)

    Non-nullable Types, Control Flow Analysis, Read-only Properties, और Never प्रकार पेश किए गए, जो प्रकार अनुमान को बढ़ाते हैं।

  3. टाइपस्क्रिप्ट 3.0 (2018)

    एक अधिक लचीला प्रकार प्रणाली पेश की गई, जिसमें Project References, Tuple Types एक्सटेंशन और Rest Parameters में सुधार जैसी विशेषताएं शामिल हैं।

  4. टाइपस्क्रिप्ट 4.0 (2020)

    Variadic Tuple Types, संपादक में सुधार, उन्नत प्रकार अनुमान, और Labelled Tuple Elements जैसी सुविधाएं जोड़ी गईं ताकि विकास अनुभव बेहतर हो सके।

  5. टाइपस्क्रिप्ट 4.1 (2020)

    Template Literal Types पेश किए गए, जिनसे स्ट्रिंग प्रकार में सुधार अधिक शक्तिशाली हुआ।

  6. टाइपस्क्रिप्ट 4.3 (2021)

    Override कीवर्ड को जोड़ना, कंस्ट्रक्टर के भीतर एक्सेस मॉडिफायर में सुधार, और WeakMap और WeakSet के लिए उन्नत प्रकार समर्थन।

  7. टाइपस्क्रिप्ट 4.5 (2021)

    Awaited प्रकार, ModuleSuffixes, और ECMAScript मॉड्यूल के साथ बेहतर संगतता जोड़ी गई।

  8. टाइपस्क्रिप्ट 5.0 (2023)

    Decorators का मानकीकरण, प्रोजेक्ट बिल्ड गति में सुधार, प्रकार प्रणाली में बढ़ोतरी, और नवीनतम ECMAScript सुविधाओं के लिए समर्थन जोड़ा गया है।

टाइपस्क्रिप्ट लगातार विकसित हो रहा है, हर साल कई संस्करण जारी किए जाते हैं जिनमें नई सुविधाएं और सुधार जोड़े जाते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

टाइपस्क्रिप्ट में डेटा प्रकार