Chapter 6: Debugging और Testing (Debugging and Testing

Chapter 6: Debugging और Testing (Debugging and Testing

    इस अध्याय में, हम TypeScript कोड के डिबगिंग और टेस्टिंग के महत्वपूर्ण पहलुओं के बारे में जानेंगे। डिबगिंग और टेस्टिंग किसी भी सॉफ़्टवेयर डेवलपमेंट प्रक्रिया के महत्वपूर्ण हिस्से हैं, जो आपको बग्स की पहचान करने और उन्हें ठीक करने में मदद करते हैं। हम देखेंगे कि कैसे Visual Studio Code (VSCode) का उपयोग करके TypeScript कोड को डिबग किया जा सकता है और Jest और Mocha जैसे लोकप्रिय टेस्टिंग फ्रेमवर्क्स का उपयोग करके यूनिट टेस्ट लिखे और चलाए जा सकते हैं। इस अध्याय का उद्देश्य आपको TypeScript कोड की गुणवत्ता और स्थिरता में सुधार करने के लिए आवश्यक उपकरण और तकनीकों से परिचित कराना है।

     

    Debugging TypeScript Code

    डिबगिंग TypeScript कोड डेवलपमेंट प्रक्रिया का एक महत्वपूर्ण हिस्सा है, जिससे आप अपने कोड में बग्स की पहचान और समाधान कर सकते हैं। इस सेक्शन में, हम देखेंगे कि कैसे Visual Studio Code (VSCode) का उपयोग करके TypeScript कोड को डिबग किया जा सकता है। हम डिबगिंग के विभिन्न टूल्स और तकनीकों के बारे में भी जानेंगे।

    1. VSCode में डिबगिंग सेटअप करें (Setting Up Debugging in VSCode)

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

    1.1 launch.json कॉन्फिगर करें (Configure launch.json)

    VSCode में डिबगिंग सेटअप करने के लिए, आपको अपने प्रोजेक्ट के .vscode फोल्डर में launch.json फ़ाइल को कॉन्फिगर करना होगा।

    1. VSCode में, डिबग पैनल खोलें और create a launch.json file पर क्लिक करें।
    2. Node.js के लिए डिफॉल्ट कॉन्फिगरेशन चुनें।
    3. आपके प्रोजेक्ट के .vscode फोल्डर में एक launch.json फ़ाइल बनेगी।

    launch.json फ़ाइल इस प्रकार दिख सकती है:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

    2. ब्रेकपॉइंट्स सेट करें (Setting Breakpoints)

    ब्रेकपॉइंट्स का उपयोग कोड के किसी विशिष्ट हिस्से पर डिबगिंग रोकने के लिए किया जाता है, जिससे आप वैरिएबल्स की स्थिति और कोड के फ्लो का निरीक्षण कर सकते हैं।

    1. VSCode में अपने TypeScript कोड की फाइल खोलें।
    2. कोड के बाईं ओर के मार्जिन में क्लिक करके ब्रेकपॉइंट सेट करें।
    3. आप ब्रेकपॉइंट्स को टॉगल कर सकते हैं और उन्हें हटाने के लिए फिर से क्लिक कर सकते हैं।

    3. डिबगिंग प्रारंभ करें (Start Debugging)

    1. डिबग पैनल में जाकर Launch Program कॉन्फिगरेशन चुनें।
    2. डिबग बटन (हरे तीर) पर क्लिक करें या F5 दबाएं।
    3. आपका प्रोग्राम ब्रेकपॉइंट्स पर रुक जाएगा, जिससे आप वैरिएबल्स, कॉल स्टैक, और अन्य डिबगिंग जानकारी का निरीक्षण कर सकते हैं।

    4. वैरिएबल्स और वॉचेस का निरीक्षण करें (Inspect Variables and Watches)

    डिबग मोड में, आप वैरिएबल्स और वॉचेस का निरीक्षण कर सकते हैं:

    1. वैरिएबल्स पैनल में, वर्तमान स्कोप के सभी वैरिएबल्स को देखें।
    2. वॉच पैनल में, आप विशिष्ट वैरिएबल्स या एक्सप्रेशन्स को जोड़ सकते हैं जिन्हें आप निरीक्षण करना चाहते हैं।

    5. कॉल स्टैक का निरीक्षण करें (Inspect Call Stack)

    कॉल स्टैक पैनल में, आप देख सकते हैं कि आपका कोड किस क्रम में निष्पादित हो रहा है। यह आपको यह समझने में मदद करता है कि आपका कोड कहां से और कैसे कॉल हो रहा है।

    6. स्टेपिंग के माध्यम से नेविगेट करें (Navigate through Stepping)

    डिबगिंग के दौरान, आप स्टेपिंग का उपयोग कर सकते हैं:

    • Step Over (F10): वर्तमान लाइन को निष्पादित करें और अगले स्टेटमेंट पर जाएं।
    • Step Into (F11): वर्तमान लाइन में किसी भी फंक्शन के अंदर जाएं।
    • Step Out (Shift+F11): वर्तमान फंक्शन से बाहर निकलें और कॉलिंग फंक्शन पर वापस जाएं।
    • Continue (F5): डिबगिंग को फिर से शुरू करें और अगले ब्रेकपॉइंट पर रुकें।

    7. स्रोत मैप्स का उपयोग करें (Using Source Maps)

    स्रोत मैप्स TypeScript कोड को JavaScript में मैप करते हैं, जिससे आप डिबगिंग के दौरान अपने TypeScript कोड को देख सकते हैं।

    1. tsconfig.json में स्रोत मैप्स को सक्षम करें:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

    2. TypeScript कोड को पुनः कंपाइल करें।

    3. डिबगिंग करते समय, आप अपने TypeScript कोड में सीधे नेविगेट कर सकते हैं।

    Testing with TypeScript

    TypeScript में कोड की टेस्टिंग डेवलपमेंट प्रक्रिया का एक महत्वपूर्ण हिस्सा है, जो कोड की गुणवत्ता और विश्वसनीयता सुनिश्चित करने में मदद करता है। इस सेक्शन में, हम देखेंगे कि कैसे TypeScript कोड के लिए यूनिट टेस्ट लिखे और चलाए जा सकते हैं। हम लोकप्रिय टेस्टिंग फ्रेमवर्क्स Jest और Mocha का उपयोग करेंगे।

    1. Jest के साथ टेस्टिंग (Testing with Jest)

    1.1 Jest इंस्टॉल करें (Install Jest)

    सबसे पहले, Jest और आवश्यक टाइप डिफिनिशंस को प्रोजेक्ट में इंस्टॉल करें:

    npm install jest ts-jest @types/jest --save-dev

    1.2 Jest कॉन्फ़िगर करें (Configure Jest)

    Jest को TypeScript के साथ कॉन्फ़िगर करने के लिए, एक jest.config.js फ़ाइल बनाएँ और इसमें निम्नलिखित कॉन्फ़िगरेशन जोड़ें:

    module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],
};

    1.3 स्क्रिप्ट जोड़ें (Add Scripts)

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

    "scripts": {
  "test": "jest"
}

    1.4 यूनिट टेस्ट लिखें (Write Unit Tests)

    src फोल्डर में एक __tests__ फोल्डर बनाएँ और एक यूनिट टेस्ट फ़ाइल example.test.ts बनाएँ:

    // src/__tests__/example.test.ts
import { sum } from '../example';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

साथ ही, src फोल्डर में example.ts फ़ाइल बनाएँ:

// src/example.ts
export function sum(a: number, b: number): number {
  return a + b;
}

    1.5 टेस्ट चलाएँ (Run Tests)

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

    npm test

    आपको आउटपुट में सफल टेस्ट केस दिखेंगे।

    2. Mocha और Chai के साथ टेस्टिंग (Testing with Mocha and Chai)

    2.1 Mocha और Chai इंस्टॉल करें (Install Mocha and Chai)

    Mocha, Chai, और आवश्यक टाइप डिफिनिशंस को प्रोजेक्ट में इंस्टॉल करें:

    npm install mocha chai ts-node @types/mocha @types/chai --save-dev

    2.2 Mocha कॉन्फ़िगर करें (Configure Mocha)

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

    "scripts": {
  "test": "mocha -r ts-node/register 'src/**/*.test.ts'"
}

    2.3 यूनिट टेस्ट लिखें (Write Unit Tests)

    src फोल्डर में एक यूनिट टेस्ट फ़ाइल example.test.ts बनाएँ:

    // src/example.test.ts
import { expect } from 'chai';
import { sum } from './example';

describe('sum function', () => {
  it('should add 1 and 2 to equal 3', () => {
    expect(sum(1, 2)).to.equal(3);
  });
});

साथ ही, src फोल्डर में example.ts फ़ाइल बनाएँ:

// src/example.ts
export function sum(a: number, b: number): number {
  return a + b;
}

    2.4 टेस्ट चलाएँ (Run Tests)

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

    npm test

    आपको आउटपुट में सफल टेस्ट केस दिखेंगे।

    यह भी जानें

    typescript tutorial in hindi Good Vibes Only

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

    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 4: एडवांस्ड फीचर्स (Advanced Features)



    Table of Contents

    → Index