TypeScript अनुप्रयोगों का अंतर्राष्ट्रीयकरण: उदाहरणों के साथ पूर्ण गाइड

डरना छोड़ें और स्थानीयकरण शुरू करें: TypeScript अनुप्रयोगों का अंतर्राष्ट्रीयकरण

क्या आपने कभी सोचा है कि कुछ प्रोजेक्ट अंतर्राष्ट्रीय स्तर पर क्यों पहुँच जाते हैं, जबकि अन्य "हिंदी भाषी स्टार्टअप" बने रहते हैं? अक्सर इसका उत्तर सरल है: स्थानीयकरण। हाँ, वही डरावना संक्षिप्त नाम i18n, जिससे कई डेवलपर्स को घबराहट होने लगती है। लेकिन आइए ईमानदार रहें: TypeScript एप्लिकेशन का अंतर्राष्ट्रीयकरण करना कोई rocket science नहीं है। यह सही दृष्टिकोण और उपकरणों का एक सेट मात्र है। आज हम इसे व्यावहारिक रूप से, जीवंत कोड उदाहरणों के साथ, बिना अनावश्यक बातों और जटिल सिद्धांतों के समझेंगे।

TypeScript i18n के लिए आदर्श उम्मीदवार क्यों है?

TypeScript हमें वह देता है जो सामान्य JavaScript में कमी है: स्थैतिक टाइपिंग। जब अनुवाद की बात आती है, तो यह एक सुपरपावर बन जाता है। कल्पना करें: आप एक अनुवाद कुंजी बदलते हैं, और TypeScript एप्लिकेशन चलने से पहले ही चिल्लाता है: "अरे, तुम स्पेनिश स्थानीयकरण में अनुवाद अपडेट करना भूल गए!" मानिए, यह प्रोडक्शन में बग पकड़ने से बेहतर है।

इसके अलावा, TypeScript में i18n के लिए आधुनिक लाइब्रेरीज़ अनुवाद फ़ाइलों से सीधे टाइप जनरेट करने की अनुमति देती हैं। इसका मतलब है कि IDE में ऑटो-कम्प्लीशन घड़ी की तरह काम करेगा। कोई जादुई स्ट्रिंग नहीं, कोई टाइपिंग त्रुटि नहीं। केवल स्वच्छ, सुरक्षित कोड।

लाइब्रेरी चुनना: i18next बनाम react-intl

बाजार में दो मुख्य खिलाड़ी हैं: i18next और react-intl (FormatJS का हिस्सा)। दोनों TypeScript के साथ बढ़िया काम करते हैं, लेकिन दृष्टिकोण अलग हैं।

\n
• i18next — अंतर्राष्ट्रीयकरण का स्विस आर्मी चाकू। बहुवचन, इंटरपोलेशन, संदर्भ, आलसी लोडिंग का समर्थन करता है। बड़े प्रोजेक्ट्स के लिए उपयुक्त।
\n
• react-intl — अधिक हल्का, React के लिए अनुकूलित। कम्पोनेंट-आधारित दृष्टिकोण (<FormattedMessage>) और शक्तिशाली ICU MessageFormat प्रणाली का उपयोग करता है।
\n

इस लेख में हम आधिकारिक React एडाप्टर react-i18next के साथ i18next का उपयोग करेंगे। क्यों? क्योंकि यह सबसे लोकप्रिय स्टैक है और अधिकतम नियंत्रण प्रदान करता है।

चरण-दर-चरण सेटअप: शून्य से पहले अनुवाद तक

चलिए सीधे काम पर आते हैं। निर्भरताएँ स्थापित करें:

npm install i18next react-i18next i18next-browser-languagedetector

अब एक कॉन्फ़िगरेशन फ़ाइल बनाएँ। यह हमारे TypeScript एप्लिकेशन के अंतर्राष्ट्रीयकरण का हृदय है।

// i18n.ts\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\n\nimport enTranslation from './locales/en/translation.json';\nimport ruTranslation from './locales/ru/translation.json';\n\ni18n\n  .use(LanguageDetector) // ब्राउज़र भाषा का स्वतः पता लगाना\n  .use(initReactI18next) // React के साथ एकीकरण\n  .init({\n    resources: {\n      en: { translation: enTranslation },\n      ru: { translation: ruTranslation },\n    },\n    fallbackLng: 'en', // यदि अनुवाद नहीं मिलता\n    interpolation: {\n      escapeValue: false, // React पहले से ही एस्केप करता है\n    },\n  });\n\nexport default i18n;\n

fallbackLng पर ध्यान दें। यह उपयोगकर्ता अनुभव के लिए महत्वपूर्ण है: यदि उपयोगकर्ता स्वाहिली भाषा वाले ब्राउज़र से आता है, तो हम खाली स्क्रीन के बजाय अंग्रेज़ी संस्करण दिखाएंगे।

अनुवाद फ़ाइलों की संरचना

locales फ़ोल्डर बनाएँ और उसके अंदर प्रत्येक भाषा के लिए उप-फ़ोल्डर बनाएँ। यहाँ en/translation.json फ़ाइल का एक उदाहरण है:

{\n  "welcome": "हमारे एप्लिकेशन में आपका स्वागत है!",\n  "description": "यह i18n समर्थन के साथ एक {{framework}} एप्लिकेशन है।",\n  "items": {\n    "zero": "कोई आइटम नहीं",\n    "one": "एक आइटम",\n    "other": "{{count}} आइटम"\n  }\n}\n

और यहाँ इसका हिंदी संस्करण है:

{\n  "welcome": "हमारे एप्लिकेशन में आपका स्वागत है!",\n  "description": "यह i18n समर्थन के साथ एक {{framework}} एप्लिकेशन है।",\n  "items": {\n    "zero": "कोई आइटम नहीं",\