Chapter 2: बेसिक्स (Basics)

Chapter 2: बेसिक्स (Basics)

इस अध्याय में, हम TypeScript की बुनियादी बातें सीखेंगे, जो आपको TypeScript के साथ प्रोग्रामिंग की एक मजबूत नींव प्रदान करेंगी। हम टाइप्स (Types), वेरिएबल्स (Variables), और फंक्शन्स (Functions) के बारे में चर्चा करेंगे और यह जानेंगे कि ये TypeScript में कैसे काम करते हैं। इस अध्याय का उद्देश्य आपको TypeScript की मूलभूत अवधारणाओं से परिचित कराना और उन्हें अपने प्रोजेक्ट्स में सही ढंग से उपयोग करने में सक्षम बनाना है।

टाइप्स (Types)

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

1. प्राइमिटिव टाइप्स (Primitive Types)

प्राइमिटिव टाइप्स TypeScript में सबसे बुनियादी टाइप्स हैं। इसमें निम्नलिखित शामिल हैं:

स्ट्रिंग (string)

स्ट्रिंग टाइप का उपयोग टेक्स्ट डेटा के लिए किया जाता है।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let name: string = "Daniel";
let name: string = "Daniel";
let name: string = "Daniel";

नंबर (number)

नंबर टाइप का उपयोग संख्या डेटा के लिए किया जाता है, चाहे वह इंटीजर हो या फ्लोटिंग-पॉइंट नंबर।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let age: number = 30;
let price: number = 99.99;
let age: number = 30; let price: number = 99.99;
let age: number = 30;
let price: number = 99.99;

बूलियन (boolean)

बूलियन टाइप का उपयोग केवल दो मानों के लिए किया जाता है: true और false।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let isStudent: boolean = true;
let isStudent: boolean = true;
let isStudent: boolean = true;

एरेस (Arrays)

एरेस का उपयोग एक ही प्रकार के कई मानों को संग्रहीत करने के लिए किया जाता है।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let names: string[] = ["Daniel", "Karina", "Mateo"];
let ages: number[] = [25, 30, 35];
let names: string[] = ["Daniel", "Karina", "Mateo"]; let ages: number[] = [25, 30, 35];
let names: string[] = ["Daniel", "Karina", "Mateo"];
let ages: number[] = [25, 30, 35];

ट्युपल्स (Tuples)

ट्युपल्स एक निश्चित क्रम में विभिन्न प्रकार के मानों को संग्रहीत करने के लिए उपयोग किए जाते हैं।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let person: [string, number] = ["Daniel", 30];
let person: [string, number] = ["Daniel", 30];
let person: [string, number] = ["Daniel", 30];

एनी (any)

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let data: any = "Hello";
data = 123; // No error
let data: any = "Hello"; data = 123; // No error
let data: any = "Hello";
data = 123; // No error

एन्म (Enums)

एन्म का उपयोग नामांकित स्थिरांक (named constants) के समूह को परिभाषित करने के लिए किया जाता है।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
enum Color {
Red,
Green,
Blue
}
let favoriteColor: Color = Color.Green;
enum Color { Red, Green, Blue } let favoriteColor: Color = Color.Green;
enum Color {
    Red,
    Green,
    Blue
}
let favoriteColor: Color = Color.Green;

यूनियन टाइप्स (Union Types)

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let identifier: number | string;
identifier = 123;
identifier = "ABC123";
let identifier: number | string; identifier = 123; identifier = "ABC123";
let identifier: number | string;
identifier = 123;
identifier = "ABC123";

कस्टम टाइप्स (Custom Types)

कस्टम टाइप्स का उपयोग जटिल प्रकारों को परिभाषित करने के लिए किया जाता है, जैसे ऑब्जेक्ट्स और इंटरफेसेस।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
interface Person {
name: string;
age: number;
isStudent?: boolean; // Optional property
}
let person: Person = {
name: "Daniel",
age: 30
};
interface Person { name: string; age: number; isStudent?: boolean; // Optional property } let person: Person = { name: "Daniel", age: 30 };
interface Person {
    name: string;
    age: number;
    isStudent?: boolean; // Optional property
}

let person: Person = {
    name: "Daniel",
    age: 30
};

वेरिएबल्स और कांसटेण्ट्स (Variables and Constants)

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

1. वेरिएबल्स (Variables)

let और var

let और var का उपयोग वेरिएबल्स को घोषित करने के लिए किया जाता है, लेकिन इनके व्यवहार में कुछ अंतर होते हैं।

  • let: ब्लॉक-स्कोप्ड होता है, यानी कि यह केवल उसी ब्लॉक के अंदर उपलब्ध होता है जिसमें इसे घोषित किया गया है।

var: फंक्शन-स्कोप्ड होता है, यानी कि यह पूरी फंक्शन में उपलब्ध होता है जिसमें इसे घोषित किया गया है।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Using let
let age: number = 30;
if (true) {
let age: number = 25;
console.log(age); // 25
}
console.log(age); // 30
// Using var
var name: string = "Daniel";
if (true) {
var name: string = "Karina";
console.log(name); // Karina
}
console.log(name); // Karina
// Using let let age: number = 30; if (true) { let age: number = 25; console.log(age); // 25 } console.log(age); // 30 // Using var var name: string = "Daniel"; if (true) { var name: string = "Karina"; console.log(name); // Karina } console.log(name); // Karina
// Using let
let age: number = 30;
if (true) {
    let age: number = 25;
    console.log(age); // 25
}
console.log(age); // 30

// Using var
var name: string = "Daniel";
if (true) {
    var name: string = "Karina";
    console.log(name); // Karina
}
console.log(name); // Karina

वैरिएबल्स की टाइपिंग (Variable Typing)

TypeScript में, हम वेरिएबल्स की टाइप को पहले से परिभाषित कर सकते हैं।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let isStudent: boolean = true;
let score: number = 95.5;
let studentName: string = "Mateo";
let isStudent: boolean = true; let score: number = 95.5; let studentName: string = "Mateo";
let isStudent: boolean = true;
let score: number = 95.5;
let studentName: string = "Mateo";

2. कांसटेण्ट्स (Constants)

2.1 const

const का उपयोग उन वेरिएबल्स को परिभाषित करने के लिए किया जाता है जिनके मान को बाद में बदला नहीं जा सकता। यह ब्लॉक-स्कोप्ड होता है और इसका उपयोग मुख्यतः स्थिरांक (constants) के लिए किया जाता है।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const PI: number = 3.14;
const MAX_SCORE: number = 100;
console.log(PI); // 3.14
console.log(MAX_SCORE); // 100
// Error: Assignment to constant variable.
// PI = 3.14159;
const PI: number = 3.14; const MAX_SCORE: number = 100; console.log(PI); // 3.14 console.log(MAX_SCORE); // 100 // Error: Assignment to constant variable. // PI = 3.14159;
const PI: number = 3.14;
const MAX_SCORE: number = 100;

console.log(PI); // 3.14
console.log(MAX_SCORE); // 100

// Error: Assignment to constant variable.
// PI = 3.14159;

2.2 कांसटेण्ट्स के उपयोग के उदाहरण (Examples of Constants Usage)

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const student = {
name: "Mateo",
age: 8
};
// This is allowed
student.age = 9;
// Error: Assignment to constant variable.
// student = { name: "Daniel", age: 30 };
const scores = [85, 90, 92];
// This is allowed
scores.push(95);
// Error: Assignment to constant variable.
// scores = [100, 99, 98];
const student = { name: "Mateo", age: 8 }; // This is allowed student.age = 9; // Error: Assignment to constant variable. // student = { name: "Daniel", age: 30 }; const scores = [85, 90, 92]; // This is allowed scores.push(95); // Error: Assignment to constant variable. // scores = [100, 99, 98];
const student = {
    name: "Mateo",
    age: 8
};

// This is allowed
student.age = 9;

// Error: Assignment to constant variable.
// student = { name: "Daniel", age: 30 };

const scores = [85, 90, 92];

// This is allowed
scores.push(95);

// Error: Assignment to constant variable.
// scores = [100, 99, 98];

फंक्शन्स (Functions)

फंक्शन्स किसी भी प्रोग्रामिंग भाषा का एक महत्वपूर्ण हिस्सा हैं, और TypeScript में भी फंक्शन्स का विशेष महत्व है। फंक्शन्स कोड को पुनः उपयोग करने योग्य और संगठित बनाने में मदद करते हैं। इस सेक्शन में, हम TypeScript में फंक्शन्स को परिभाषित करने और उपयोग करने के विभिन्न तरीकों के बारे में जानेंगे।

1. फंक्शन डिक्लेरेशन (Function Declaration)

TypeScript में फंक्शन को परिभाषित करने के लिए हम function कीवर्ड का उपयोग करते हैं।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function greet(name: string): string {
return `Hello, ${name}!`;
}
let greeting = greet("Daniel");
console.log(greeting); // Hello, Daniel!
function greet(name: string): string { return `Hello, ${name}!`; } let greeting = greet("Daniel"); console.log(greeting); // Hello, Daniel!
function greet(name: string): string {
    return `Hello, ${name}!`;
}

let greeting = greet("Daniel");
console.log(greeting); // Hello, Daniel!

2. ऐरो फंक्शन्स (Arrow Functions)

ऐरो फंक्शन्स एक अधिक संक्षिप्त तरीके से फंक्शन्स को परिभाषित करने का तरीका है। ये ES6 (ECMAScript 2015) में इंट्रोड्यूस किए गए थे और TypeScript में भी उपलब्ध हैं।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const add = (a: number, b: number): number => {
return a + b;
}
let sum = add(5, 3);
console.log(sum); // 8
const add = (a: number, b: number): number => { return a + b; } let sum = add(5, 3); console.log(sum); // 8
const add = (a: number, b: number): number => {
    return a + b;
}

let sum = add(5, 3);
console.log(sum); // 8

3. फंक्शन ओवरलोडिंग (Function Overloading)

फंक्शन ओवरलोडिंग का उपयोग तब किया जाता है जब एक ही नाम के साथ विभिन्न प्रकार के फंक्शन्स को परिभाषित करना हो।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function combine(a: string, b: string): string;
function combine(a: number, b: number): number;
function combine(a: any, b: any): any {
return a + b;
}
let combinedString = combine("Hello, ", "World!");
let combinedNumber = combine(10, 20);
console.log(combinedString); // Hello, World!
console.log(combinedNumber); // 30
function combine(a: string, b: string): string; function combine(a: number, b: number): number; function combine(a: any, b: any): any { return a + b; } let combinedString = combine("Hello, ", "World!"); let combinedNumber = combine(10, 20); console.log(combinedString); // Hello, World! console.log(combinedNumber); // 30
function combine(a: string, b: string): string;
function combine(a: number, b: number): number;
function combine(a: any, b: any): any {
    return a + b;
}

let combinedString = combine("Hello, ", "World!");
let combinedNumber = combine(10, 20);

console.log(combinedString); // Hello, World!
console.log(combinedNumber); // 30

4. ऑप्शनल और डिफ़ॉल्ट पैरामीटर्स (Optional and Default Parameters)

TypeScript में, हम फंक्शन पैरामीटर्स को ऑप्शनल या डिफ़ॉल्ट मान के साथ परिभाषित कर सकते हैं।

4.1 ऑप्शनल पैरामीटर्स (Optional Parameters)

ऑप्शनल पैरामीटर्स का उपयोग करने के लिए, पैरामीटर के नाम के बाद ? का उपयोग किया जाता है।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function greet(name: string, greeting?: string): string {
if (greeting) {
return `${greeting}, ${name}!`;
} else {
return `Hello, ${name}!`;
}
}
console.log(greet("Daniel")); // Hello, Daniel!
console.log(greet("Daniel", "Good Morning")); // Good Morning, Daniel!
function greet(name: string, greeting?: string): string { if (greeting) { return `${greeting}, ${name}!`; } else { return `Hello, ${name}!`; } } console.log(greet("Daniel")); // Hello, Daniel! console.log(greet("Daniel", "Good Morning")); // Good Morning, Daniel!
function greet(name: string, greeting?: string): string {
    if (greeting) {
        return `${greeting}, ${name}!`;
    } else {
        return `Hello, ${name}!`;
    }
}

console.log(greet("Daniel")); // Hello, Daniel!
console.log(greet("Daniel", "Good Morning")); // Good Morning, Daniel!

4.2 डिफ़ॉल्ट पैरामीटर्स (Default Parameters)

डिफ़ॉल्ट पैरामीटर्स का उपयोग तब किया जाता है जब आप पैरामीटर के लिए एक डिफ़ॉल्ट मान सेट करना चाहते हैं।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function greet(name: string, greeting: string = "Hello"): string {
return `${greeting}, ${name}!`;
}
console.log(greet("Daniel")); // Hello, Daniel!
console.log(greet("Daniel", "Good Evening")); // Good Evening, Daniel!
function greet(name: string, greeting: string = "Hello"): string { return `${greeting}, ${name}!`; } console.log(greet("Daniel")); // Hello, Daniel! console.log(greet("Daniel", "Good Evening")); // Good Evening, Daniel!
function greet(name: string, greeting: string = "Hello"): string {
    return `${greeting}, ${name}!`;
}

console.log(greet("Daniel")); // Hello, Daniel!
console.log(greet("Daniel", "Good Evening")); // Good Evening, Daniel!

5. रेस्ट पैरामीटर्स (Rest Parameters)

रेस्ट पैरामीटर्स का उपयोग तब किया जाता है जब एक फंक्शन में अनिश्चित संख्या में पैरामीटर्स पास किए जाते हैं।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function getTotal(...numbers: number[]): number {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
let total = getTotal(10, 20, 30, 40);
console.log(total); // 100
function getTotal(...numbers: number[]): number { return numbers.reduce((acc, curr) => acc + curr, 0); } let total = getTotal(10, 20, 30, 40); console.log(total); // 100
function getTotal(...numbers: number[]): number {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

let total = getTotal(10, 20, 30, 40);
console.log(total); // 100



Index