தமிழ்

மாட்யூல் ஆக்மென்டேஷன் மூலம் மூன்றாம் தரப்பு டைப்ஸ்கிரிப்ட் வகைகளை விரிவுபடுத்தி, வகை பாதுகாப்பை மேம்படுத்துவது எப்படி என அறிக.

டைப்ஸ்கிரிப்ட் மாட்யூல் ஆக்மென்டேஷன்: மூன்றாம் தரப்பு வகைகளை விரிவுபடுத்துதல்

டைப்ஸ்கிரிப்டின் வலிமை அதன் உறுதியான வகை அமைப்பில் உள்ளது. இது டெவலப்பர்களுக்கு பிழைகளை முன்கூட்டியே கண்டறியவும், குறியீட்டின் பராமரிப்பை மேம்படுத்தவும், மற்றும் ஒட்டுமொத்த மேம்பாட்டு அனுபவத்தை அதிகரிக்கவும் உதவுகிறது. இருப்பினும், மூன்றாம் தரப்பு நூலகங்களுடன் பணிபுரியும் போது, வழங்கப்பட்ட வகை வரையறைகள் முழுமையடையாமல் அல்லது உங்கள் குறிப்பிட்ட தேவைகளுடன் சரியாகப் பொருந்தாமல் இருக்கும் சூழ்நிலைகளை நீங்கள் சந்திக்க நேரிடலாம். இங்குதான் மாட்யூல் ஆக்மென்டேஷன் மீட்புக்கு வருகிறது, இது அசல் நூலகக் குறியீட்டை மாற்றாமல் ஏற்கனவே உள்ள வகை வரையறைகளை விரிவுபடுத்த உங்களை அனுமதிக்கிறது.

மாட்யூல் ஆக்மென்டேஷன் என்றால் என்ன?

மாட்யூல் ஆக்மென்டேஷன் என்பது ஒரு சக்திவாய்ந்த டைப்ஸ்கிரிப்ட் அம்சமாகும், இது வேறு ஒரு கோப்பிலிருந்து ஒரு மாட்யூலுக்குள் அறிவிக்கப்பட்ட வகைகளைச் சேர்க்க அல்லது மாற்றியமைக்க உதவுகிறது. இதை, வகை-பாதுகாப்பான முறையில் ஏற்கனவே உள்ள ஒரு கிளாஸ் அல்லது இன்டர்ஃபேஸில் கூடுதல் அம்சங்கள் அல்லது தனிப்பயனாக்கங்களைச் சேர்ப்பதாக நினைத்துப் பாருங்கள். இது குறிப்பாக மூன்றாம் தரப்பு நூலகங்களின் வகை வரையறைகளை விரிவுபடுத்தவும், புதிய பண்புகள், மெத்தட்கள் அல்லது ஏற்கனவே உள்ளவற்றை உங்கள் பயன்பாட்டின் தேவைகளுக்கு ஏற்ப மாற்றுவதற்கும் பயனுள்ளதாக இருக்கும்.

ஒரே பெயரில் இரண்டு அல்லது அதற்கு மேற்பட்ட அறிவிப்புகள் ஒரே ஸ்கோப்பில் சந்திக்கும்போது தானாகவே நிகழும் டெக்ளரேஷன் மெர்ஜிங் போலல்லாமல், மாட்யூல் ஆக்மென்டேஷன் declare module தொடரியலைப் பயன்படுத்தி ஒரு குறிப்பிட்ட மாட்யூலை வெளிப்படையாகக் குறிவைக்கிறது.

மாட்யூல் ஆக்மென்டேஷனை ஏன் பயன்படுத்த வேண்டும்?

உங்கள் டைப்ஸ்கிரிப்ட் ஆயுதக் களஞ்சியத்தில் மாட்யூல் ஆக்மென்டேஷன் ஏன் ஒரு மதிப்புமிக்க கருவி என்பது இங்கே:

மாட்யூல் ஆக்மென்டேஷன் எவ்வாறு செயல்படுகிறது

முக்கியக் கருத்து declare module தொடரியலைச் சுற்றியே உள்ளது. இதோ பொதுவான கட்டமைப்பு:


declare module 'module-name' {
  // Type declarations to augment the module
  interface ExistingInterface {
    newProperty: string;
  }
}

முக்கியப் பகுதிகளைப் பிரித்துப் பார்ப்போம்:

நடைமுறை எடுத்துக்காட்டுகள்

எடுத்துக்காட்டு 1: ஒரு மூன்றாம் தரப்பு நூலகத்தை விரிவுபடுத்துதல் (Moment.js)

நீங்கள் தேதி மற்றும் நேரத்தைக் கையாள Moment.js நூலகத்தைப் பயன்படுத்துகிறீர்கள் என்றும், ஒரு குறிப்பிட்ட லோகேலுக்காக (எ.கா., ஜப்பானில் ஒரு குறிப்பிட்ட வடிவத்தில் தேதிகளைக் காண்பிக்க) ஒரு தனிப்பயன் வடிவமைப்பு விருப்பத்தைச் சேர்க்க விரும்புகிறீர்கள் என்றும் வைத்துக்கொள்வோம். அசல் Moment.js வகை வரையறைகளில் இந்த தனிப்பயன் வடிவம் இல்லாமல் இருக்கலாம். இதைச் சேர்க்க மாட்யூல் ஆக்மென்டேஷனை எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே:

  1. Moment.js க்கான வகை வரையறைகளை நிறுவவும்:
    
    npm install @types/moment
    
  2. உங்கள் ஆக்மென்டேஷனை வரையறுக்க ஒரு டைப்ஸ்கிரிப்ட் கோப்பை (எ.கா., moment.d.ts) உருவாக்கவும்:
    
    // moment.d.ts
    import 'moment'; // Import the original module to ensure it's available
    
    declare module 'moment' {
      interface Moment {
        formatInJapaneseStyle(): string;
      }
    }
    
  3. தனிப்பயன் வடிவமைப்பு லாஜிக்கை செயல்படுத்தவும் (ஒரு தனி கோப்பில், எ.கா., moment-extensions.ts):
    
    // moment-extensions.ts
    import * as moment from 'moment';
    
    moment.fn.formatInJapaneseStyle = function(): string {
      // Custom formatting logic for Japanese dates
      const year = this.year();
      const month = this.month() + 1; // Month is 0-indexed
      const day = this.date();
      return `${year}年${month}月${day}日`;
    };
    
  4. ஆக்மென்ட் செய்யப்பட்ட Moment.js ஆப்ஜெக்டைப் பயன்படுத்தவும்:
    
    // app.ts
    import * as moment from 'moment';
    import './moment-extensions'; // Import the implementation
    
    const now = moment();
    const japaneseFormattedDate = now.formatInJapaneseStyle();
    console.log(japaneseFormattedDate); // Output: e.g., 2024年1月26日
    

விளக்கம்:

எடுத்துக்காட்டு 2: ஒரு Request ஆப்ஜெக்டில் பண்புகளைச் சேர்த்தல் (Express.js)

நீங்கள் Express.js ஐப் பயன்படுத்துகிறீர்கள் என்றும், மிடில்வேர் மூலம் நிரப்பப்படும் userId போன்ற ஒரு தனிப்பயன் பண்பை Request ஆப்ஜெக்டில் சேர்க்க விரும்புகிறீர்கள் என்றும் வைத்துக்கொள்வோம். மாட்யூல் ஆக்மென்டேஷன் மூலம் இதை எவ்வாறு அடையலாம் என்பது இங்கே:

  1. Express.js க்கான வகை வரையறைகளை நிறுவவும்:
    
    npm install @types/express
    
  2. உங்கள் ஆக்மென்டேஷனை வரையறுக்க ஒரு டைப்ஸ்கிரிப்ட் கோப்பை (எ.கா., express.d.ts) உருவாக்கவும்:
    
    // express.d.ts
    import 'express'; // Import the original module
    
    declare module 'express' {
      interface Request {
        userId?: string;
      }
    }
    
  3. உங்கள் மிடில்வேரில் ஆக்மென்ட் செய்யப்பட்ட Request ஆப்ஜெக்டைப் பயன்படுத்தவும்:
    
    // middleware.ts
    import { Request, Response, NextFunction } from 'express';
    
    export function authenticateUser(req: Request, res: Response, next: NextFunction) {
      // Authentication logic (e.g., verifying a JWT)
      const userId = 'user123'; // Example: Retrieve user ID from token
      req.userId = userId; // Assign the user ID to the Request object
      next();
    }
    
  4. உங்கள் ரூட் ஹேண்ட்லர்களில் userId பண்பை அணுகவும்:
    
    // routes.ts
    import { Request, Response } from 'express';
    
    export function getUserProfile(req: Request, res: Response) {
      const userId = req.userId;
      if (!userId) {
        return res.status(401).send('Unauthorized');
      }
    
      // Retrieve user profile from database based on userId
      const userProfile = { id: userId, name: 'John Doe' }; // Example
      res.json(userProfile);
    }
    

விளக்கம்:

எடுத்துக்காட்டு 3: HTML கூறுகளுக்கு தனிப்பயன் பண்புகளைச் சேர்த்தல்

ரியாக்ட் அல்லது வ்யூ.js போன்ற நூலகங்களுடன் பணிபுரியும் போது, நீங்கள் HTML கூறுகளுக்கு தனிப்பயன் பண்புகளைச் சேர்க்க விரும்பலாம். மாட்யூல் ஆக்மென்டேஷன் இந்த தனிப்பயன் பண்புகளுக்கான வகைகளை வரையறுக்க உதவும், இது உங்கள் டெம்ப்ளேட்கள் அல்லது JSX குறியீட்டில் வகை பாதுகாப்பை உறுதி செய்கிறது.

நீங்கள் ரியாக்ட் பயன்படுத்துகிறீர்கள் என்றும், HTML கூறுகளுக்கு data-custom-id என்ற தனிப்பயன் பண்பைச் சேர்க்க விரும்புகிறீர்கள் என்றும் வைத்துக்கொள்வோம்.

  1. உங்கள் ஆக்மென்டேஷனை வரையறுக்க ஒரு டைப்ஸ்கிரிப்ட் கோப்பை (எ.கா., react.d.ts) உருவாக்கவும்:
    
    // react.d.ts
    import 'react'; // Import the original module
    
    declare module 'react' {
      interface HTMLAttributes extends AriaAttributes, DOMAttributes {
        "data-custom-id"?: string;
      }
    }
    
  2. உங்கள் ரியாக்ட் கூறுகளில் தனிப்பயன் பண்பைப் பயன்படுத்தவும்:
    
    // MyComponent.tsx
    import React from 'react';
    
    function MyComponent() {
      return (
        
    This is my component.
    ); } export default MyComponent;

விளக்கம்:

மாட்யூல் ஆக்மென்டேஷனுக்கான சிறந்த நடைமுறைகள்

பொதுவான இடர்களும் அவற்றை தவிர்ப்பதற்கான வழிகளும்

மாட்யூல் ஆக்மென்டேஷனைப் பயன்படுத்துவதன் நன்மைகள்

டைப்ஸ்கிரிப்டில் மாட்யூல் ஆக்மென்டேஷனைப் பயன்படுத்துவது பல முக்கிய நன்மைகளை வழங்குகிறது:

முடிவுரை

டைப்ஸ்கிரிப்ட் மாட்யூல் ஆக்மென்டேஷன் என்பது மூன்றாம் தரப்பு நூலகங்களிலிருந்து வகை வரையறைகளை விரிவுபடுத்துவதற்கும் தனிப்பயனாக்குவதற்கும் ஒரு சக்திவாய்ந்த நுட்பமாகும். மாட்யூல் ஆக்மென்டேஷனைப் பயன்படுத்துவதன் மூலம், உங்கள் குறியீடு வகை-பாதுகாப்பாக இருப்பதை உறுதிசெய்யலாம், டெவலப்பர் அனுபவத்தை மேம்படுத்தலாம் மற்றும் குறியீடு நகலெடுப்பதைத் தவிர்க்கலாம். இந்த வழிகாட்டியில் விவாதிக்கப்பட்ட சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலமும் பொதுவான இடர்களைத் தவிர்ப்பதன் மூலமும், நீங்கள் மிகவும் வலுவான மற்றும் பராமரிக்கக்கூடிய டைப்ஸ்கிரிப்ட் பயன்பாடுகளை உருவாக்க மாட்யூல் ஆக்மென்டேஷனை திறம்படப் பயன்படுத்தலாம். இந்த அம்சத்தைத் தழுவி, டைப்ஸ்கிரிப்டின் வகை அமைப்பின் முழுத் திறனையும் திறக்கவும்!