தமிழ்

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

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

மென்பொருள் மேம்பாட்டுத் துறையில், ஒரு பயன்பாட்டின் நிலையை (state) திறம்பட நிர்வகிப்பது மிகவும் முக்கியமானது. ஸ்டேட் மெஷின்கள் சிக்கலான நிலை சார்ந்த அமைப்புகளை மாதிரியாக்க ஒரு சக்திவாய்ந்த வழியை வழங்குகின்றன, இது கணிக்கக்கூடிய நடத்தை மற்றும் அமைப்பின் தர்க்கத்தைப் பற்றிய பகுத்தறிவை எளிதாக்குகிறது. டைப்ஸ்கிரிப்ட், அதன் வலுவான வகை அமைப்புடன், டிஸ்கிரிமினேட்டட் யூனியன்களை (tagged unions அல்லது algebraic data types என்றும் அழைக்கப்படுகிறது) பயன்படுத்தி வகை-பாதுகாப்பான ஸ்டேட் மெஷின்களை உருவாக்குவதற்கான ஒரு அற்புதமான வழிமுறையை வழங்குகிறது.

டிஸ்கிரிமினேட்டட் யூனியன்கள் என்றால் என்ன?

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

இதை ஒரு போக்குவரத்து விளக்கு போல நினைத்துப் பாருங்கள். அது மூன்று நிலைகளில் ஒன்றாக இருக்கலாம்: சிவப்பு, மஞ்சள், அல்லது பச்சை. 'நிறம்' என்ற பண்பு டிஸ்கிரிமினன்ட் ஆக செயல்படுகிறது, விளக்கு எந்த நிலையில் உள்ளது என்பதைத் துல்லியமாக நமக்குச் சொல்கிறது.

ஸ்டேட் மெஷின்களுக்கு டிஸ்கிரிமினேட்டட் யூனியன்களை ஏன் பயன்படுத்த வேண்டும்?

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

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

ஒரு நடைமுறை எடுத்துக்காட்டுடன் டிஸ்கிரிமினேட்டட் யூனியன்களைப் பயன்படுத்தி ஒரு ஸ்டேட் மெஷினை எவ்வாறு வரையறுப்பது என்பதை விளக்குவோம்: ஒரு ஆர்டர் செயலாக்க அமைப்பு. ஒரு ஆர்டர் பின்வரும் நிலைகளில் இருக்கலாம்: காத்திருப்பு (Pending), செயலாக்கத்தில் (Processing), அனுப்பப்பட்டது (Shipped), மற்றும் டெலிவரி செய்யப்பட்டது (Delivered).

படி 1: நிலை வகைகளை வரையறுக்கவும்

முதலில், ஒவ்வொரு நிலைக்கும் தனிப்பட்ட வகைகளை வரையறுக்கிறோம். ஒவ்வொரு வகையிலும் டிஸ்கிரிமினன்டாக செயல்படும் ஒரு `type` பண்பு இருக்கும், அத்துடன் எந்த நிலை-குறிப்பிட்ட தரவும் இருக்கும்.


interface Pending {
  type: "pending";
  orderId: string;
  customerName: string;
  items: string[];
}

interface Processing {
  type: "processing";
  orderId: string;
  assignedAgent: string;
}

interface Shipped {
  type: "shipped";
  orderId: string;
  trackingNumber: string;
}

interface Delivered {
  type: "delivered";
  orderId: string;
  deliveryDate: Date;
}

படி 2: டிஸ்கிரிமினேட்டட் யூனியன் வகையை உருவாக்கவும்

அடுத்து, `|` (யூனியன்) ஆபரேட்டரைப் பயன்படுத்தி இந்த தனிப்பட்ட வகைகளை இணைப்பதன் மூலம் டிஸ்கிரிமினேட்டட் யூனியனை உருவாக்குகிறோம்.


type OrderState = Pending | Processing | Shipped | Delivered;

இப்போது, `OrderState` என்பது `Pending`, `Processing`, `Shipped`, அல்லது `Delivered` ஆக இருக்கக்கூடிய ஒரு மதிப்பைக் குறிக்கிறது. ஒவ்வொரு நிலைக்குள்ளும் உள்ள `type` பண்பு டிஸ்கிரிமினன்டாக செயல்படுகிறது, இது டைப்ஸ்கிரிப்டை அவற்றுக்கிடையே வேறுபடுத்த அனுமதிக்கிறது.

நிலை மாற்றங்களைக் கையாளுதல்

இப்போது நாம் நமது ஸ்டேட் மெஷினை வரையறுத்துவிட்டோம், நிலைகளுக்கு இடையில் மாறுவதற்கு ஒரு வழிமுறை தேவை. தற்போதைய நிலை மற்றும் ஒரு செயலை உள்ளீடாக எடுத்து புதிய நிலையைத் தரும் ஒரு `processOrder` செயல்பாட்டை உருவாக்குவோம்.


interface Action {
  type: string;
  payload?: any;
}

function processOrder(state: OrderState, action: Action): OrderState {
  switch (state.type) {
    case "pending":
      if (action.type === "startProcessing") {
        return {
          type: "processing",
          orderId: state.orderId,
          assignedAgent: action.payload.agentId,
        };
      }
      return state; // நிலை மாற்றம் இல்லை

    case "processing":
      if (action.type === "shipOrder") {
        return {
          type: "shipped",
          orderId: state.orderId,
          trackingNumber: action.payload.trackingNumber,
        };
      }
      return state; // நிலை மாற்றம் இல்லை

    case "shipped":
      if (action.type === "deliverOrder") {
        return {
          type: "delivered",
          orderId: state.orderId,
          deliveryDate: new Date(),
        };
      }
      return state; // நிலை மாற்றம் இல்லை

    case "delivered":
      // ஆர்டர் ஏற்கனவே டெலிவரி செய்யப்பட்டது, மேலும் செயல்கள் இல்லை
      return state;

    default:
      // முழுமையான சரிபார்ப்பு காரணமாக இது ஒருபோதும் நடக்கக்கூடாது
      return state; // அல்லது ஒரு பிழையை வீசவும்
  }
}

விளக்கம்

முழுமையான சரிபார்ப்பைப் பயன்படுத்துதல்

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

முழுமையான சரிபார்ப்பை இயக்க, நீங்கள் `never` வகையைப் பயன்படுத்தலாம். உங்கள் சுவிட்ச் அறிக்கையின் `default` வழக்கில், நிலையை `never` வகையின் ஒரு மாறிக்கு ஒதுக்கவும்.


function processOrder(state: OrderState, action: Action): OrderState {
  switch (state.type) {
    // ... (முந்தைய வழக்குகள்) ...

    default:
      const _exhaustiveCheck: never = state;
      return _exhaustiveCheck; // அல்லது ஒரு பிழையை வீசவும்
  }
}

`switch` அறிக்கை அனைத்து சாத்தியமான `OrderState` மதிப்புகளையும் கையாண்டால், `_exhaustiveCheck` மாறி `never` வகையாக இருக்கும் மற்றும் குறியீடு தொகுக்கப்படும். இருப்பினும், நீங்கள் `OrderState` யூனியனில் ஒரு புதிய நிலையைச் சேர்த்து, அதை `switch` அறிக்கையில் கையாள மறந்துவிட்டால், `_exhaustiveCheck` மாறி வேறு வகையாக இருக்கும், மேலும் டைப்ஸ்கிரிப்ட் ஒரு தொகுக்கும் நேர பிழையை வீசும், இது விடுபட்ட வழக்கைப் பற்றி உங்களை எச்சரிக்கும்.

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

டிஸ்கிரிமினேட்டட் யூனியன்கள் எளிய ஆர்டர் செயலாக்க அமைப்புகளுக்கு அப்பால் பரந்த அளவிலான சூழ்நிலைகளில் பொருந்தும்:

எடுத்துக்காட்டு: UI நிலை மேலாண்மை

ஒரு API இலிருந்து தரவைப் பெறும் ஒரு UI கூறுகளின் நிலையை நிர்வகிக்கும் ஒரு எளிய உதாரணத்தைக் கருத்தில் கொள்வோம். நாம் பின்வரும் நிலைகளை வரையறுக்கலாம்:


interface Initial {
  type: "initial";
}

interface Loading {
  type: "loading";
}

interface Success {
  type: "success";
  data: T;
}

interface Error {
  type: "error";
  message: string;
}

type UIState = Initial | Loading | Success | Error;

function renderUI(state: UIState): React.ReactNode {
  switch (state.type) {
    case "initial":
      return 

தரவை ஏற்ற பொத்தானைக் கிளிக் செய்யவும்.

; case "loading": return

ஏற்றுகிறது...

; case "success": return
{JSON.stringify(state.data, null, 2)}
; case "error": return

பிழை: {state.message}

; default: const _exhaustiveCheck: never = state; return _exhaustiveCheck; } }

இந்த எடுத்துக்காட்டு, ஒரு UI கூறுகளின் வெவ்வேறு நிலைகளை திறம்பட நிர்வகிக்க டிஸ்கிரிமினேட்டட் யூனியன்களை எவ்வாறு பயன்படுத்தலாம் என்பதைக் காட்டுகிறது, இது தற்போதைய நிலையின் அடிப்படையில் UI சரியாக வழங்கப்படுவதை உறுதி செய்கிறது. `renderUI` செயல்பாடு ஒவ்வொரு நிலையையும் பொருத்தமாக கையாளுகிறது, இது UI ஐ நிர்வகிக்க ஒரு தெளிவான மற்றும் வகை-பாதுகாப்பான வழியை வழங்குகிறது.

டிஸ்கிரிமினேட்டட் யூனியன்களைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

உங்கள் டைப்ஸ்கிரிப்ட் திட்டங்களில் டிஸ்கிரிமினேட்டட் யூனியன்களை திறம்பட பயன்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

மேம்பட்ட நுட்பங்கள்

நிபந்தனை வகைகள் (Conditional Types)

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


function getData(state: UIState): T | undefined {
  if (state.type === "success") {
    return state.data;
  }
  return undefined;
}

இந்த செயல்பாடு ஒரு எளிய `if` அறிக்கையைப் பயன்படுத்துகிறது, ஆனால் ஒரு குறிப்பிட்ட வகை எப்போதும் திரும்பப் பெறப்படுவதை உறுதிசெய்ய நிபந்தனை வகைகளைப் பயன்படுத்தி மேலும் வலுவானதாக மாற்றலாம்.

பயன்பாட்டு வகைகள் (Utility Types)

டைப்ஸ்கிரிப்டின் பயன்பாட்டு வகைகள், `Extract` மற்றும் `Omit` போன்றவை, டிஸ்கிரிமினேட்டட் யூனியன்களுடன் வேலை செய்யும் போது உதவியாக இருக்கும். `Extract` ஒரு நிபந்தனையின் அடிப்படையில் ஒரு யூனியன் வகையிலிருந்து குறிப்பிட்ட உறுப்பினர்களைப் பிரித்தெடுக்க உங்களை அனுமதிக்கிறது, அதே நேரத்தில் `Omit` ஒரு வகையிலிருந்து பண்புகளை அகற்ற உங்களை அனுமதிக்கிறது.


// UIState யூனியனிலிருந்து "success" நிலையைப் பிரித்தெடுக்கவும்
type SuccessState = Extract, { type: "success" }>;

// Error இடைமுகத்திலிருந்து 'message' பண்பை நீக்கவும்
type ErrorWithoutMessage = Omit;

பல்வேறு தொழில்களில் நிஜ-உலக எடுத்துக்காட்டுகள்

டிஸ்கிரிமினேட்டட் யூனியன்களின் சக்தி பல்வேறு தொழில்கள் மற்றும் பயன்பாட்டு களங்களில் பரவியுள்ளது:

முடிவுரை

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

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