TypeScript: Maps को Enums पर क्यों प्राथमिकता दें?

TypeScript में enum एक निश्चित मूल्यों के समूह को प्रस्तुत करने के लिए एक स्वाभाविक विकल्प लग सकता है। हालांकि, इनमें महत्वपूर्ण सीमाएं हैं जो कोड की रखरखाव क्षमता और प्रदर्शन को प्रभावित कर सकती हैं। आइए देखें कि Map अक्सर एक बेहतर विकल्प क्यों है।

Enums की समस्या

जटिल एप्लिकेशन विकसित करते समय Enums में कई प्रमुख कमियां सामने आती हैं:

1. कठोरता: गतिशील रूप से संशोधित नहीं किया जा सकता
2. प्रदर्शन: वर्बोस JavaScript कोड जनरेट करता है
3. जटिल टाइपिंग: इंट्रोस्पेक्शन और टाइप यूनियन में कठिनाइयां
4. बंडल आकार: अंतिम कोड आकार पर प्रभाव

एक उदाहरण देखें:

typescript
1// TypeScript कोड
2enum Status {
3  Active = 'ACTIVE',
4  Inactive = 'INACTIVE',
5}
6
7// ट्रांसपाइल्ड JavaScript कोड
8var Status = {
9  Active: 'ACTIVE',
10  Inactive: 'INACTIVE',
11  ACTIVE: 'Active',
12  INACTIVE: 'Inactive',
13};
14(function (Status) {
15  Status['Active'] = 'ACTIVE';
16  Status['Inactive'] = 'INACTIVE';
17})(Status || (Status = {}));

यह ट्रांसपाइल्ड कोड उत्पन्न करता है:

• दर्पण गुणों (key ↔ value) वाला एक ऑब्जेक्ट
• एक अनावश्यक IIFE (Immediately Invoked Function Expression)
• प्रत्येक मान के लिए दोहरा संदर्भ
• अतिरिक्त कोड जो प्रदर्शन को प्रभावित करता है

Maps के साथ समाधान

Map और TypeScript ऑब्जेक्ट्स एक अधिक सुरुचिपूर्ण और लचीला दृष्टिकोण प्रदान करते हैं:

typescript
1// const और types के साथ समाधान
2const Status = {
3  Active: 'ACTIVE',
4  Inactive: 'INACTIVE',
5} as const;
6
7// स्वचालित रूप से अनुमानित टाइप
8type Status = (typeof Status)[keyof typeof Status];
9
10// सरल और कुशल ट्रांसपाइल्ड कोड
11const Status = {
12  Active: 'ACTIVE',
13  Inactive: 'INACTIVE',
14};

Maps के लाभ

1. टाइप-सुरक्षा

typescript
1function processStatus(status: Status) {
2  // अमान्य स्थिति पर कम्पाइलेशन त्रुटि
3  console.log(status);
4}
5
6// रनटाइम सत्यापन
7const isValidStatus = (status: string): status is Status =>
8  Object.values(Status).includes(status as Status);

2. विस्तारशीलता

typescript
1// डायनामिक जोड़ना संभव
2const ExtendedStatus = {
3  ...Status,
4  Pending: 'PENDING' as const,
5};

3. उन्नत पैटर्न

typescript
1// संबद्ध कॉन्फ़िगरेशन
2const StatusConfig = {
3  [Status.Active]: {
4    color: 'green',
5    label: 'सक्रिय',
6    icon: 'check',
7  },
8  [Status.Inactive]: {
9    color: 'red',
10    label: 'निष्क्रिय',
11    icon: 'cross',
12  },
13} as const;
14
15// उपयोगिता टाइप
16type StatusConfig = {
17  [K in Status]: {
18    color: string;
19    label: string;
20    icon: string;
21  };
22};
23
24// टाइप की गई हेल्पर फ़ंक्शन
25function getStatusConfig(status: Status) {
26  return StatusConfig[status];
27}

व्यावहारिक उपयोग के मामले

1. API एंडपॉइंट्स

typescript
1const ApiEndpoints = {
2  Users: '/api/users',
3  Products: '/api/products',
4  Orders: '/api/orders',
5} as const;
6
7type Endpoint = (typeof ApiEndpoints)[keyof typeof ApiEndpoints];
8
9// स्वचालित URL टाइपिंग
10function fetchData(endpoint: Endpoint) {
11  return fetch(endpoint);
12}

2. स्टेट प्रबंधन

typescript
1const LoadingState = {
2  Idle: 'IDLE',
3  Loading: 'LOADING',
4  Success: 'SUCCESS',
5  Error: 'ERROR',
6} as const;
7
8type LoadingState = typeof LoadingState[keyof typeof LoadingState];
9
10function handleState(state: LoadingState) {
11  switch (state) {
12    case LoadingState.Loading:
13      return <Spinner />;
14    case LoadingState.Error:
15      return <ErrorMessage />;
16    // TypeScript पूर्णता की जांच करता है
17  }
18}

विस्तृत तुलनात्मक तालिका

Enums और Maps के बीच एक विस्तृत तुलना:

टाइप-सुरक्षा

• Enum: बेसिक (✓)
• Map: टाइप अनुमान के साथ उन्नत (✓✓)

रनटाइम प्रदर्शन

• Enum: कम कुशल (✗)
• Map: अधिक कुशल (✓)

बंडल आकार

• Enum: बड़ा (✗)
• Map: छोटा (✓)

विस्तारशीलता

• Enum: विस्तार करना कठिन (✗)
• Map: आसानी से विस्तार योग्य (✓)

इंट्रोस्पेक्शन

• Enum: सीमित क्षमताएं
• Map: पूर्ण क्षमताएं

TypeScript strict संगतता

• Enum: संगत (✓)
• Map: अधिक सुविधाओं के साथ पूर्ण संगत (✓✓)

रखरखाव

• Enum: रखरखाव में जटिल
• Map: रखरखाव में आसान

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

1. स्पष्ट नामकरण

typescript
1// पसंदीदा
2const HttpStatus = {
3  Ok: 200,
4  NotFound: 404,
5  ServerError: 500,
6} as const;
7
8// बचें
9const Status = {
10  a: 200,
11  b: 404,
12  c: 500,
13} as const;

2. यूनियन टाइप्स

typescript
1// टाइप-सेफ यूनियन बनाना
2type HttpSuccessStatus = 200 | 201 | 204;
3type HttpErrorStatus = 400 | 401 | 404 | 500;
4type HttpStatus = HttpSuccessStatus | HttpErrorStatus;

3. रनटाइम सत्यापन

typescript
1function isHttpSuccess(status: number): status is HttpSuccessStatus {
2  return [200, 201, 204].includes(status);
3}

निष्कर्ष

Maps, enums की तुलना में एक अधिक मजबूत विकल्प प्रदान करते हैं:

• अधिक सटीक और लचीला टाइपिंग
• बेहतर रनटाइम प्रदर्शन
• सरलीकृत रखरखाव
• JavaScript इकोसिस्टम के साथ बेहतर संगतता

इन अवधारणाओं को गहराई से समझने के लिए देखें:

• TypeScript दस्तावेज़ीकरण
• TypeScript हैंडबुक
• TypeScript डीप डाइव

अपने अनुभव साझा करके इस लेख में योगदान करने में संकोच न करें!