जावास्क्रिप्ट पैटर्न मिलान और टाइप सुरक्षा: कंपाइल-टाइम सत्यापन के लिए एक गाइड

कंपाइल-टाइम एक्सहॉस्टिवनेस चेकिंग लागू करना

अपने डिस्क्रिमिनेटेड यूनियन के साथ, अब हम एक ऐसा फ़ंक्शन लिख सकते हैं जिसे कंपाइलर द्वारा हर संभव आकार को संभालने की गारंटी दी जाती है। जादुई घटक टाइपस्क्रिप्ट का `never` प्रकार है, जो एक ऐसे मान का प्रतिनिधित्व करता है जो कभी नहीं होना चाहिए।

हम इसे लागू करने के लिए एक साधारण सहायक फ़ंक्शन लिख सकते हैं:

            
function assertUnreachable(x: never): never {
  throw new Error("Didn't expect to get here");
}

            

              
                Copy
              
            
          

अब, आइए एक मानक `switch` स्टेटमेंट का उपयोग करके अपने `calculateArea` फ़ंक्शन को फिर से लिखें। देखें कि `default` मामले में क्या होता है:

            
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      // TypeScript knows `shape` is a Circle here!
      return Math.PI * shape.radius ** 2;

    case 'square':
      // TypeScript knows `shape` is a Square here!
      return shape.sideLength ** 2;

    case 'rectangle':
      // TypeScript knows `shape` is a Rectangle here!
      return shape.width * shape.height;

    default:
      // If we've handled all cases, `shape` will be of type `never`
      return assertUnreachable(shape);
  }
}

            

              
                Copy
              
            
          

यह कोड पूरी तरह से संकलित होता है। प्रत्येक `case` ब्लॉक के अंदर, टाइपस्क्रिप्ट ने `shape` के प्रकार को `Circle`, `Square` या `Rectangle` तक सीमित कर दिया है, जिससे हम सुरक्षित रूप से `radius` जैसी संपत्तियों तक पहुंच सकते हैं।

अब जादुई क्षण के लिए। आइए अपने सिस्टम में एक नया आकार पेश करें:

            
interface Triangle {
  kind: 'triangle';
  base: number;
  height: number;
}

type Shape = Circle | Square | Rectangle | Triangle; // Add it to the union

            

              
                Copy
              
            
          

जैसे ही हम `Triangle` को `Shape` यूनियन में जोड़ते हैं, हमारा `calculateArea` फ़ंक्शन तुरंत एक कंपाइल-टाइम त्रुटि उत्पन्न करेगा:

            
// In the `default` block of `calculateArea`:

return assertUnreachable(shape);
//                      ~~~~~
// Argument of type 'Triangle' is not assignable to parameter of type 'never'.

            

              
                Copy
              
            
          

यह त्रुटि अविश्वसनीय रूप से मूल्यवान है। टाइपस्क्रिप्ट कंपाइलर हमें बता रहा है, "आपने हर संभव `Shape` को संभालने का वादा किया था, लेकिन आप `Triangle` के बारे में भूल गए। `shape` चर अभी भी डिफ़ॉल्ट मामले में एक `Triangle` हो सकता है, और वह `never` को असाइन करने योग्य नहीं है।"

त्रुटि को ठीक करने के लिए, हम बस लापता मामले को जोड़ते हैं। कंपाइलर हमारी सुरक्षा जाल बन जाता है, यह गारंटी देता है कि हमारा तर्क हमारे डेटा मॉडल के साथ सिंक में रहता है।

            
// ... inside the switch
    case 'triangle':
      return 0.5 * shape.base * shape.height;

    default:
      return assertUnreachable(shape);
// ... now the code compiles again!

            

              
                Copy
              
            
          

इस दृष्टिकोण के फायदे और नुकसान

• फायदे:
  • शून्य निर्भरता: यह केवल कोर टाइपस्क्रिप्ट सुविधाओं का उपयोग करता है।
  • अधिकतम टाइप सुरक्षा: लौह-क्लैड कंपाइल-टाइम गारंटी प्रदान करता है।
  • उत्कृष्ट प्रदर्शन: यह एक अत्यधिक अनुकूलित मानक जावास्क्रिप्ट `switch` स्टेटमेंट में संकलित होता है।
• नुकसान:
  • वर्बोसिटी: `switch`, `case`, `break`/`return` और `default` बॉयलरप्लेट बोझिल लग सकता है।
  • एक अभिव्यक्ति नहीं: एक `switch` स्टेटमेंट को सीधे लौटाया या एक चर को असाइन नहीं किया जा सकता है, जिससे अधिक अनिवार्य कोड शैलियाँ हो सकती हैं।

तकनीक 2: आधुनिक पुस्तकालयों के साथ एर्गोनोमिक एपीआई

जबकि एक `switch` स्टेटमेंट के साथ डिस्क्रिमिनेटेड यूनियन नींव है, इसका बॉयलरप्लेट थकाऊ हो सकता है। इससे शानदार ओपन-सोर्स पुस्तकालयों का उदय हुआ है जो सुरक्षा के लिए टाइपस्क्रिप्ट के कंपाइलर का लाभ उठाते हुए पैटर्न मिलान के लिए अधिक कार्यात्मक, अभिव्यंजक और एर्गोनोमिक एपीआई प्रदान करते हैं।

`ts-pattern` का परिचय

इस स्थान में सबसे लोकप्रिय और शक्तिशाली पुस्तकालयों में से एक `ts-pattern` है। यह आपको `switch` स्टेटमेंट को एक धाराप्रवाह, श्रृंखला योग्य एपीआई से बदलने की अनुमति देता है जो एक अभिव्यक्ति के रूप में काम करता है।

आइए `ts-pattern` का उपयोग करके अपने `calculateArea` फ़ंक्शन को फिर से लिखें:

            
import { match } from 'ts-pattern';

function calculateAreaWithTsPattern(shape: Shape): number {
  return match(shape)
    .with({ kind: 'circle' }, (s) => Math.PI * s.radius ** 2)
    .with({ kind: 'square' }, (s) => s.sideLength ** 2)
    .with({ kind: 'rectangle' }, (s) => s.width * s.height)
    .with({ kind: 'triangle' }, (s) => 0.5 * s.base * s.height)
    .exhaustive(); // This is the key to compile-time safety
}

            

              
                Copy
              
            
          

आइए देखें कि क्या हो रहा है:

• `match(shape)`: यह पैटर्न मिलान अभिव्यक्ति शुरू करता है, मिलान किए जाने वाले मान को लेता है।
• `.with({ kind: '...' }, handler)`: प्रत्येक `.with()` कॉल एक पैटर्न को परिभाषित करता है। `ts-pattern` दूसरे तर्क (`handler` फ़ंक्शन) के प्रकार का अनुमान लगाने के लिए पर्याप्त स्मार्ट है। पैटर्न `{ kind: 'circle' }` के लिए, यह जानता है कि हैंडलर को इनपुट `s` `Circle` प्रकार का होगा।
• `.exhaustive()`: यह विधि हमारी `assertUnreachable` ट्रिक के बराबर है। यह `ts-pattern` को बताता है कि सभी संभावित मामलों को संभाला जाना चाहिए। यदि हम `.with({ kind: 'triangle' }, ...)` लाइन को हटा देते हैं, तो `ts-pattern` `.exhaustive()` कॉल पर कंपाइल-टाइम त्रुटि को ट्रिगर करेगा, जो हमें बताता है कि मिलान संपूर्ण नहीं है।

`ts-pattern` की उन्नत सुविधाएँ

`ts-pattern` साधारण संपत्ति मिलान से कहीं आगे जाता है:

• `.when()` के साथ विधेय मिलान: एक शर्त के आधार पर मिलान करें।

              
  match(input)
    .when(isString, (str) => `It's a string: ${str}`)
    .when(isNumber, (num) => `It's a number: ${num}`)
    .otherwise(() => 'It is something else');
  
              
  
                
                  Copy
                
              
            

• गहरे तौर पर नेस्टेड पैटर्न: जटिल ऑब्जेक्ट संरचनाओं पर मिलान करें।

              
  match(user)
    .with({ address: { city: 'Paris' } }, () => 'User is in Paris')
    .otherwise(() => 'User is elsewhere');
  
              
  
                
                  Copy
                
              
            

• वाइल्डकार्ड और विशेष चयनकर्ता: एक पैटर्न के भीतर एक मान को कैप्चर करने के लिए `P.select()` का उपयोग करें, या किसी निश्चित प्रकार के किसी भी मान से मिलान करने के लिए `P.string`, `P.number` का उपयोग करें।

              
  import { match, P } from 'ts-pattern';
  
  match(event)
    .with({ type: 'USER_LOGIN', user: { name: P.select() } }, (name) => {
      console.log(`${name} logged in.`);
    })
    .otherwise(() => {});
  
              
  
                
                  Copy
                
              
            

`ts-pattern` जैसे पुस्तकालय का उपयोग करके, आपको दोनों दुनिया के सर्वश्रेष्ठ मिलते हैं: टाइपस्क्रिप्ट की `never` चेकिंग की मजबूत कंपाइल-टाइम सुरक्षा, एक स्वच्छ, घोषणात्मक और अत्यधिक अभिव्यंजक एपीआई के साथ संयुक्त।

भविष्य: TC39 पैटर्न मिलान प्रस्ताव

जावास्क्रिप्ट भाषा स्वयं देशी पैटर्न मिलान प्राप्त करने के रास्ते पर है। भाषा में `match` अभिव्यक्ति जोड़ने के लिए TC39 (जावास्क्रिप्ट को मानकीकृत करने वाली समिति) में एक सक्रिय प्रस्ताव है।

प्रस्तावित सिंटैक्स

सिंटैक्स संभवतः इस तरह दिखेगा:

            
// This is proposed JavaScript syntax and might change
const getMessage = (response) => {
  return match (response) {
    when ({ status: 200, body: b }) { return `Success with body: ${b}`; }
    when ({ status: 404 }) { return 'Not Found'; }
    when ({ status: s if s >= 500 }) { return `Server Error: ${s}`; }
    default { return 'Unknown response'; }
  }
};

            

              
                Copy
              
            
          

टाइप सुरक्षा के बारे में क्या?

यह हमारी चर्चा के लिए महत्वपूर्ण प्रश्न है। अपने आप से, एक देशी जावास्क्रिप्ट पैटर्न मिलान सुविधा अपनी जांच रनटाइम पर करेगी। यह आपके टाइपस्क्रिप्ट प्रकारों के बारे में नहीं जान पाएगा।

हालांकि, यह लगभग निश्चित है कि टाइपस्क्रिप्ट टीम इस नए सिंटैक्स के शीर्ष पर स्थिर विश्लेषण बनाएगी। जिस तरह टाइपस्क्रिप्ट टाइप संकीर्ण करने के लिए `if` स्टेटमेंट और `switch` ब्लॉक का विश्लेषण करता है, उसी तरह यह `match` अभिव्यक्तियों का विश्लेषण करेगा। इसका मतलब है कि हमें अंततः सर्वोत्तम संभव परिणाम मिल सकता है:

1. देशी, प्रदर्शनकारी सिंटैक्स: पुस्तकालयों या ट्रांसपाइलेशन ट्रिक्स की कोई आवश्यकता नहीं है।
2. पूर्ण कंपाइल-टाइम सुरक्षा: टाइपस्क्रिप्ट `switch` के लिए आज की तरह, एक डिस्क्रिमिनेटेड यूनियन के खिलाफ एक्सहॉस्टिवनेस के लिए `match` अभिव्यक्ति की जांच करेगा।

जबकि हम इस सुविधा के प्रस्ताव चरणों के माध्यम से और ब्राउज़रों और रनटाइम में अपना रास्ता बनाने की प्रतीक्षा करते हैं, हमने आज डिस्क्रिमिनेटेड यूनियनों और पुस्तकालयों के साथ जिन तकनीकों पर चर्चा की है, वे उत्पादन के लिए तैयार, अत्याधुनिक समाधान हैं।

व्यावहारिक अनुप्रयोग और सर्वोत्तम अभ्यास

आइए देखें कि ये पैटर्न सामान्य, वास्तविक दुनिया के विकास परिदृश्यों पर कैसे लागू होते हैं।

स्टेट मैनेजमेंट (रेडक्स, ज़ुस्टैंड, आदि)

कार्रवाइयों के साथ स्टेट का प्रबंधन करना डिस्क्रिमिनेटेड यूनियनों के लिए एक आदर्श उपयोग का मामला है। कार्रवाई प्रकारों के लिए स्ट्रिंग स्थिरांक का उपयोग करने के बजाय, सभी संभावित कार्यों के लिए एक डिस्क्रिमिनेटेड यूनियन को परिभाषित करें।

            
// Define actions
interface IncrementAction { type: 'counter/increment'; payload: number; }
interface DecrementAction { type: 'counter/decrement'; payload: number; }
interface ResetAction { type: 'counter/reset'; }

type CounterAction = IncrementAction | DecrementAction | ResetAction;

// A type-safe reducer
function counterReducer(state: number, action: CounterAction): number {
  return match(action)
    .with({ type: 'counter/increment' }, (act) => state + act.payload)
    .with({ type: 'counter/decrement' }, (act) => state - act.payload)
    .with({ type: 'counter/reset' }, () => 0)
    .exhaustive();
}

            

              
                Copy
              
            
          

अब, यदि आप `CounterAction` यूनियन में एक नई कार्रवाई जोड़ते हैं, तो टाइपस्क्रिप्ट आपको रिड्यूसर को अपडेट करने के लिए मजबूर करेगा। कोई और भूली हुई कार्रवाई हैंडलर नहीं!

एपीआई प्रतिक्रियाओं को संभालना

एक एपीआई से डेटा लाने में कई राज्य शामिल होते हैं: लोडिंग, सफलता और त्रुटि। डिस्क्रिमिनेटेड यूनियन के साथ इसका मॉडलिंग आपके यूआई तर्क को बहुत अधिक मजबूत बनाता है।

            
// Model the async data state
type RemoteData =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: E };

// In your UI component (e.g., React)
function UserProfile({ userId }: { userId: string }) {
  const [userState, setUserState] = useState>({ status: 'idle' });

  // ... useEffect to fetch data and update state ...

  return match(userState)
    .with({ status: 'idle' }, () => 
Click a button to load the user.
)
    .with({ status: 'loading' }, () => )
    .with({ status: 'success' }, (state) => )
    .with({ status: 'error' }, (state) => )
    .exhaustive();
}

            

              
                Copy
              
            
          

यह दृष्टिकोण गारंटी देता है कि आपने अपने डेटा लाने की हर संभव स्थिति के लिए एक यूआई लागू किया है। आप गलती से लोडिंग या त्रुटि मामले को संभालना नहीं भूल सकते हैं।

सर्वोत्तम अभ्यास सारांश

• डिस्क्रिमिनेटेड यूनियनों के साथ मॉडल: जब भी आपके पास कोई ऐसा मान हो जो कई अलग-अलग आकारों में से एक हो सकता है, तो एक डिस्क्रिमिनेटेड यूनियन का उपयोग करें। यह टाइपस्क्रिप्ट में टाइप-सुरक्षित पैटर्न की आधारशिला है।
• हमेशा एक्सहॉस्टिवनेस लागू करें: चाहे आप `switch` स्टेटमेंट के साथ `never` ट्रिक का उपयोग करें या पुस्तकालय की `.exhaustive()` विधि का उपयोग करें, कभी भी पैटर्न मिलान को खुला न छोड़ें। यहीं से सुरक्षा आती है।
• सही टूल चुनें: साधारण मामलों के लिए, एक `switch` स्टेटमेंट ठीक है। जटिल तर्क, नेस्टेड मिलान या अधिक कार्यात्मक शैली के लिए, `ts-pattern` जैसा पुस्तकालय पठनीयता में काफी सुधार करेगा और बॉयलरप्लेट को कम करेगा।
• पैटर्न को पठनीय रखें: लक्ष्य स्पष्टता है। अत्यधिक जटिल, नेस्टेड पैटर्न से बचें जिन्हें एक नज़र में समझना मुश्किल हो। कभी-कभी, एक मैच को छोटे कार्यों में तोड़ना एक बेहतर दृष्टिकोण होता है।

निष्कर्ष: सुरक्षित जावास्क्रिप्ट का भविष्य लिखना

पैटर्न मिलान केवल सिंटैक्टिक चीनी से अधिक है; यह एक प्रतिमान है जो अधिक घोषणात्मक, पठनीय और - सबसे महत्वपूर्ण - अधिक मजबूत कोड की ओर ले जाता है। जबकि हम जावास्क्रिप्ट में इसके देशी आगमन का बेसब्री से इंतजार कर रहे हैं, हमें इसके लाभों को प्राप्त करने के लिए इंतजार नहीं करना होगा।

टाइपस्क्रिप्ट की स्थिर टाइप प्रणाली की शक्ति का उपयोग करके, विशेष रूप से डिस्क्रिमिनेटेड यूनियनों के साथ, हम ऐसे सिस्टम बना सकते हैं जिन्हें कंपाइल टाइम पर सत्यापित किया जा सकता है। यह दृष्टिकोण मौलिक रूप से बग का पता लगाने को रनटाइम से विकास समय में स्थानांतरित करता है, डिबगिंग के अनगिनत घंटों की बचत करता है और उत्पादन की घटनाओं को रोकता है। `ts-pattern` जैसे पुस्तकालय इस ठोस नींव पर निर्माण करते हैं, जो एक सुरुचिपूर्ण और शक्तिशाली एपीआई प्रदान करते हैं जो टाइप-सुरक्षित कोड लिखने को एक खुशी बनाता है।

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