लेगसी कोड का TypeScript में रिफैक्टरिंग: A से Z तक

लेगसी कोड का TypeScript में रिफैक्टरिंग: A से Z तक

विरासत (लेगसी) कोड के साथ काम करना कई डेवलपर्स के लिए एक अपरिहार्य वास्तविकता है। अक्सर ऐसे प्रोजेक्ट बिना टाइप के "सादे" JavaScript में लिखे जाते हैं, जिनमें उलझी हुई निर्भरताएँ और टेस्ट की कमी होती है। TypeScript ऐसे कोड को धीरे-धीरे बेहतर बनाने के लिए शक्तिशाली उपकरण प्रदान करता है, जिससे यह सुरक्षित, अधिक पठनीय और रखरखाव योग्य बनता है। इस लेख में, हम पुराने कोड के विश्लेषण से लेकर एक स्वच्छ, टाइप की गई आर्किटेक्चर बनाने तक की यात्रा करेंगे।

1. तैयारी और रणनीति: कहाँ से शुरू करें?

कोड बदलने से पहले, एक "सुरक्षा कवच" बनाना आवश्यक है। रिफैक्टरिंग का मुख्य नियम: काम करने वाले कोड को मत तोड़ो। पर्यावरण सेट करके शुरू करें।

1.1. TypeScript आरंभीकरण और सख्त मोड

TypeScript इंस्टॉल करें और एक कॉन्फ़िगरेशन फ़ाइल tsconfig.json बनाएँ। शुरुआत में, त्रुटियों में न डूबने के लिए सख्त जाँचों को बंद किया जा सकता है, लेकिन धीरे-धीरे उन्हें चालू करना होगा।

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true, // false से शुरू करें, फिर धीरे-धीरे चालू करें    "noImplicitAny": true,    "strictNullChecks": true,    "outDir": "./dist",    "rootDir": "./src",    "allowJs": true, // JS और TS को मिलाने की अनुमति दें    "checkJs": false // अभी JS फ़ाइलों की जाँच न करें  },  "include": ["src/**/*"]}

1.2. स्वचालन और परीक्षण

एक लिंटर (ESLint) और फ़ॉर्मेटर (Prettier) जोड़ें। यदि परीक्षण नहीं हैं, तो कम से कम महत्वपूर्ण भागों के लिए एकीकरण परीक्षण (इंटीग्रेशन टेस्ट) लिखें। यह प्रतिगमन (regressions) के खिलाफ आपका बीमा है।

• ESLint TypeScript प्लगइन के साथ तार्किक त्रुटियों को पकड़ेगा।
• मॉड्यूलर परीक्षण के लिए Jest या Vitest।
• प्री-कमिट हुक (Husky) सेट करें ताकि कमिट से पहले कोड की जाँच हो सके।

2. चरण-दर-चरण माइग्रेशन: JS से TS तक

सब कुछ एक साथ फिर से लिखने की कोशिश न करें। पुनरावृत्तीय दृष्टिकोण का उपयोग करें। यहाँ सबसे अच्छा उपकरण tsconfig में allowJs: true है। यह TypeScript से JavaScript फ़ाइलों को शामिल करने की अनुमति देता है।

2.1. फ़ाइलों का नाम बदलना और बुनियादी टाइपिंग

सबसे सरल फ़ाइलों utils.js या helpers.js का नाम बदलकर .ts करके शुरू करें। कंपाइलर अंतर्निहित any पर आपत्ति करना शुरू कर देगा। आपका कार्य फ़ंक्शन सिग्नेचर का वर्णन करना है।

पहले (JavaScript):

function calculateDiscount(price, percent) {  return price - (price * percent / 100);}

बाद में (TypeScript):

function calculateDiscount(price: number, percent: number): number {  return price - (price * percent / 100);}

2.2. "any" और "unknown" के साथ काम करना

लेगसी कोड में बहुत सारे अंतर्निहित any होते हैं। सब कुछ एकदम सही टाइप करने की कोशिश न करें। अस्थायी समाधान के रूप में any का उपयोग करें, लेकिन इसे TODO से चिह्नित करें। बाहरी स्रोतों (API, localStorage) से डेटा के लिए, प्रकार की जाँच के साथ unknown का उपयोग करना बेहतर है।

// अस्थायी समाधानfunction processData(data: any) {  // TODO: सही प्रकार जोड़ें  console.log(data.name);}

// बाहरी डेटा के लिए सही दृष्टिकोणfunction processUserData(data: unknown) {  if (typeof data === 'object' && data !== null && 'id' in data) {    const user = data as { id: number; name: string };    console.log(user.name);  }}

3. जटिल संरचनाओं का रिफैक्टरिंग

जब बुनियादी टाइपिंग तैयार हो जाए, तो आर्किटेक्चर में सुधार करने की ओर बढ़ें। लेगसी कोड अक्सर "दैवीय ऑब्जेक्ट्स" और उलझी हुई कॉल श्रृंखलाओं से ग्रस्त होता है।

3.1. इंटरफ़ेस और प्रकारों को अलग करना

अज्ञात संरचना वाले ऑब्जेक्ट्स को पास करने के बजाय, इंटरफ़ेस बनाएँ। इससे कोड स्व-दस्तावेजीकरण बन जाता है।

// बुराfunction saveUser(user: any) {  // यह स्पष्ट नहीं है कि user में कौन से फ़ील्ड हैं}

// अच्छा