Chapter 5: प्रैक्टिकल एप्लिकेशन्स (Practical Applications)

Chapter 5: प्रैक्टिकल एप्लिकेशन्स (Practical Applications)

    इस अध्याय में, हम TypeScript के प्रैक्टिकल एप्लिकेशन्स के बारे में जानेंगे और यह समझेंगे कि TypeScript का उपयोग करके प्रोजेक्ट्स को कैसे सेटअप और प्रबंधित किया जाता है। हम TypeScript प्रोजेक्ट सेटअप, React और Node.js के साथ TypeScript का उपयोग, और अन्य वास्तविक जीवन के उदाहरणों पर चर्चा करेंगे। इस अध्याय का उद्देश्य आपको TypeScript की सिद्धांतों से प्रैक्टिकल एप्लिकेशन्स तक की यात्रा को पूरा करना है, जिससे आप TypeScript का उपयोग करके प्रभावी और संगठित प्रोजेक्ट्स बना सकें।

    प्रोजेक्ट सेटअप (Project Setup)

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

    1. नया प्रोजेक्ट बनाएँ (Create a New Project)

    सबसे पहले, एक नई डायरेक्टरी बनाएँ और उसमें जाएँ:

    mkdir my-typescript-project
cd my-typescript-project

    2. NPM इनिशियलाइज़ करें (Initialize NPM)

    अब अपने प्रोजेक्ट को NPM के साथ इनिशियलाइज़ करें:

    npm init -y

    3. TypeScript को इंस्टॉल करें (Install TypeScript)

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

    npm install typescript --save-dev

    4. TypeScript कॉन्फ़िगरेशन बनाएँ (Create TypeScript Configuration)

    TypeScript प्रोजेक्ट को कॉन्फ़िगर करने के लिए, एक tsconfig.json फ़ाइल बनाएँ। इसे बनाने के लिए निम्नलिखित कमांड का उपयोग करें:

    npx tsc --init

    यह कमांड एक tsconfig.json फ़ाइल बनाएगी जिसमें TypeScript के लिए डिफ़ॉल्ट कॉन्फ़िगरेशन सेटिंग्स होंगी।

    5. tsconfig.json कॉन्फ़िगर करें (Configure tsconfig.json)

    tsconfig.json फ़ाइल को अपनी आवश्यकताओं के अनुसार कॉन्फ़िगर करें। एक साधारण कॉन्फ़िगरेशन इस प्रकार हो सकता है:

    {
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

    6. प्रोजेक्ट स्ट्रक्चर बनाएँ (Create Project Structure)

    प्रोजेक्ट डायरेक्टरी में src नामक एक फोल्डर बनाएँ। यह वह फोल्डर होगा जहाँ आप अपने TypeScript कोड को रखेंगे।

    mkdir src

    7. TypeScript कोड लिखें (Write TypeScript Code)

    अब, src फोल्डर में एक TypeScript फ़ाइल बनाएँ और उसमें कोड लिखें। उदाहरण के लिए, index.ts नाम की एक फ़ाइल बनाएं:

    // src/index.ts
const message: string = "Hello, TypeScript!";
console.log(message);

    8. TypeScript कोड को कंपाइल करें (Compile TypeScript Code)

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

    npx tsc

    यह आपके TypeScript फाइलों को JavaScript में कंपाइल करेगा और आउटपुट फाइलें dist फोल्डर में बनाएगा।

    9. कंपाइल्ड कोड को रन करें (Run Compiled Code)

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

    node dist/index.js

    आपको आउटपुट के रूप में “Hello, TypeScript!” संदेश दिखाई देगा।

     

    TypeScript के साथ React (React with TypeScript)

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

    1. नया React प्रोजेक्ट बनाएँ (Create a New React Project)

    सबसे पहले, Create React App का उपयोग करके एक नया React प्रोजेक्ट बनाएं:

    npx create-react-app my-react-app --template typescript
cd my-react-app

    यह कमांड एक नया React प्रोजेक्ट बनाएगा और TypeScript को पहले से कॉन्फ़िगर करेगा।

    2. React और TypeScript का सेटअप (Setup React and TypeScript)

    Create React App पहले से ही आवश्यक TypeScript और React की डिपेंडेंसीज़ को सेटअप कर देता है, जिससे आपको अलग से कुछ करने की आवश्यकता नहीं होती।

    3. TypeScript कॉन्फ़िगरेशन (TypeScript Configuration)

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

    4. React कंपोनेंट्स (React Components)

    4.1 फंक्शनल कंपोनेंट्स (Functional Components)

    फंक्शनल कंपोनेंट्स TypeScript में फंक्शन सिंटेक्स का उपयोग करके बनाए जाते हैं। हम React.FC (Functional Component) टाइप का उपयोग कर सकते हैं।

    import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

    4.2 क्लास कंपोनेंट्स (Class Components)

    क्लास कंपोनेंट्स TypeScript में क्लास सिंटेक्स का उपयोग करके बनाए जाते हैं। हम React.Component टाइप का उपयोग कर सकते हैं।

    import React, { Component } from 'react';

interface GreetingProps {
  name: string;
}

interface GreetingState {
  count: number;
}

class Greeting extends Component<GreetingProps, GreetingState> {
  constructor(props: GreetingProps) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Greeting;

    5. प्रॉप्स और स्टेट के साथ टाइपिंग (Typing Props and State)

    TypeScript में, हम प्रॉप्स और स्टेट को टाइप करने के लिए इंटरफेसेस का उपयोग कर सकते हैं।

    // Props interface
interface GreetingProps {
  name: string;
}

// State interface
interface GreetingState {
  count: number;
}

    6. इवेंट हैंडलिंग (Event Handling)

    TypeScript में इवेंट्स को टाइप करने के लिए, हम React के इवेंट इंटरफेसेस का उपयोग कर सकते हैं।

    import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

    7. React और TypeScript के साथ फॉर्म्स (Forms with React and TypeScript)

    TypeScript में फॉर्म हैंडलिंग के लिए, हम फॉर्म इवेंट्स और फॉर्म इनपुट्स को टाइप कर सकते हैं।

    import React, { useState } from 'react';

const LoginForm: React.FC = () => {
  const [username, setUsername] = useState<string>('');
  const [password, setPassword] = useState<string>('');

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(`Username: ${username}, Password: ${password}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

    TypeScript के साथ Node.js (Node.js with TypeScript)

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

    1. नया Node.js प्रोजेक्ट बनाएँ (Create a New Node.js Project)

    सबसे पहले, एक नई डायरेक्टरी बनाएँ और उसमें जाएँ:

    mkdir my-node-app
cd my-node-app

    2. NPM इनिशियलाइज़ करें (Initialize NPM)

    अब अपने प्रोजेक्ट को NPM के साथ इनिशियलाइज़ करें:

    npm init -y

    यह एक package.json फ़ाइल बनाएगा जो आपके प्रोजेक्ट की डिपेंडेंसीज़ को मैनेज करेगा।

    3. TypeScript को इंस्टॉल करें (Install TypeScript)

    TypeScript और आवश्यक टाइप डिफिनिशंस को प्रोजेक्ट में इंस्टॉल करने के लिए निम्नलिखित कमांड का उपयोग करें:

    npm install typescript ts-node @types/node --save-dev

    4. TypeScript कॉन्फ़िगरेशन बनाएँ (Create TypeScript Configuration)

    TypeScript प्रोजेक्ट को कॉन्फ़िगर करने के लिए, एक tsconfig.json फ़ाइल बनाएँ। इसे बनाने के लिए निम्नलिखित कमांड का उपयोग करें:

    npx tsc --init

    यह कमांड एक tsconfig.json फ़ाइल बनाएगी जिसमें TypeScript के लिए डिफ़ॉल्ट कॉन्फ़िगरेशन सेटिंग्स होंगी।

    5. tsconfig.json कॉन्फ़िगर करें (Configure tsconfig.json)

    tsconfig.json फ़ाइल को अपनी आवश्यकताओं के अनुसार संपादित करें। एक साधारण कॉन्फ़िगरेशन इस प्रकार हो सकता है:

    {
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

    6. प्रोजेक्ट स्ट्रक्चर बनाएँ (Create Project Structure)

    प्रोजेक्ट डायरेक्टरी में src नामक एक फोल्डर बनाएँ। यह वह फोल्डर होगा जहाँ आप अपने TypeScript कोड को रखेंगे।

    mkdir src

    7. TypeScript कोड लिखें (Write TypeScript Code)

    अब, src फोल्डर में एक TypeScript फ़ाइल बनाएँ और उसमें कोड लिखें। उदाहरण के लिए, index.ts नाम की एक फ़ाइल बनाएं:

    // src/index.ts
import http from 'http';

const hostname: string = '127.0.0.1';
const port: number = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, TypeScript with Node.js\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

    8. TypeScript कोड को रन करें (Run TypeScript Code)

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

    npx ts-node src/index.ts

    आपको आउटपुट के रूप में “Server running at http://127.0.0.1:3000/” संदेश दिखाई देगा।

    9. Express.js के साथ REST API बनाएँ (Create REST API with Express.js)

    Express.js को प्रोजेक्ट में इंस्टॉल करें:

    npm install express @types/express

    src फोल्डर में एक नई फ़ाइल app.ts बनाएं और उसमें REST API बनाने के लिए कोड लिखें:

    // src/app.ts
import express, { Request, Response } from 'express';

const app = express();
const port = 3000;

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript with Express.js!');
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

    10. package.json में स्क्रिप्ट जोड़ें (Add Scripts in package.json)

    package.json फ़ाइल में TypeScript कोड को कंपाइल और रन करने के लिए स्क्रिप्ट जोड़ें:

    "scripts": {
  "build": "tsc",
  "start": "node dist/app.js",
  "dev": "ts-node src/app.ts"
}

    11. TypeScript कोड को कंपाइल करें (Compile TypeScript Code)

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

    npm run build

    12. कंपाइल्ड कोड को रन करें (Run Compiled Code)

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

    npm start

    आपको आउटपुट के रूप में “Server is running at http://localhost:3000” संदेश दिखाई देगा।

    यह भी जानें

    typescript tutorial in hindi Good Vibes Only

    Chapter 3: एडवांस्ड टाइप्स (Advanced Types)

    typescript tutorial in hindi Good Vibes Only

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

    typescript tutorial in hindi Good Vibes Only

    Chapter 1: परिचय (Introduction)

    typescript tutorial in hindi Good Vibes Only

    Chapter 6: Debugging और Testing (Debugging and Testing



    Table of Contents

    → Index