TypeScript में अंतर्राष्ट्रीयकरण (i18n): i18next लाइब्रेरी

TypeScript में i18next लाइब्रेरी के साथ अंतर्राष्ट्रीयकरण (i18n)

अंतर्राष्ट्रीयकरण (i18n) एक ऐसी प्रक्रिया है जिसमें आप अपने ऐप को बिना सोर्स कोड बदले विभिन्न भाषाओं और क्षेत्रीय मानकों के अनुकूल बना सकते हैं। TypeScript ऐप के लिए सबसे शक्तिशाली और लोकप्रिय लाइब्रेरी i18next है। यह सभी आधुनिक फ्रेमवर्क (React, Vue, Angular) को सपोर्ट करती है और TypeScript के लिए बेहतरीन सपोर्ट प्रदान करती है, जिससे आप टाइप-सेफ अनुवाद बना सकते हैं।

इंस्टॉलेशन और बेसिक सेटअप

सबसे पहले i18next और ज़रूरी बैकएंड पैकेज इंस्टॉल करें। नीचे दिए गए उदाहरण में JSON फ़ाइलों से अनुवाद लोड करने के लिए फ़ाइल बैकएंड का उपयोग किया गया है:

npm install i18next i18next-fs-backend
# React के लिए अतिरिक्त:
npm install react-i18next

एक कॉन्फ़िगरेशन फ़ाइल i18n.ts बनाएं:

import i18n from 'i18next';
import Backend from 'i18next-fs-backend';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'hi',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });

export default i18n;

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

एक public/locales फ़ोल्डर बनाएं और हर भाषा के लिए अलग सबफ़ोल्डर बनाएं। उदाहरण के लिए:

• public/locales/hi/translation.json
• public/locales/en/translation.json

hi/translation.json फ़ाइल की सामग्री का उदाहरण:

{
  "greeting": "नमस्ते, {{name}}!",
  "items": "आपके पास {{count}} संदेश है",
  "items_plural": "आपके पास {{count}} संदेश हैं",
  "nested": {
    "title": "शीर्षक",
    "description": "विवरण"
  }
}

अंग्रेज़ी संस्करण en/translation.json:

{
  "greeting": "Hello, {{name}}!",
  "items": "You have {{count}} message",
  "items_plural": "You have {{count}} messages",
  "nested": {
    "title": "Title",
    "description": "Description"
  }
}

TypeScript में अनुवादों की टाइपिंग

i18next का सबसे बड़ा फायदा इसकी सख्त टाइपिंग है। एक फ़ाइल types/i18n.d.ts बनाएं:

import 'i18next';

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: 'translation';
    resources: {
      translation: {
        greeting: string;
        items: string;
        items_plural: string;
        nested: {
          title: string;
          description: string;
        };
      };
    };
  }
}

अब TypeScript कंपाइल टाइम पर अनुवाद कीज़ की जांच करेगा। अगर आप कोई गलत की का उपयोग करेंगे, तो एरर मिलेगी।

React कंपोनेंट्स में उपयोग

react-i18next लाइब्रेरी useTranslation हुक और Trans कंपोनेंट प्रदान करती है:

import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h2>{t('greeting', { name: 'राहुल' })}</h2>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('hi')}>हिंदी</button>
    </div>
  );
}

प्लुरलाइज़ेशन और इंटरपोलेशन

i18next जटिल बहुवचन नियमों को सपोर्ट करता है। हिंदी में दो रूप होते हैं (एकवचन और बहुवचन), जबकि अंग्रेज़ी में भी दो। लाइब्रेरी संख्या के आधार पर सही रूप चुनती है:

// अनुवाद फ़ाइल (hi) में:
{
  "apple": "{{count}} सेब",
  "apple_plural": "{{count}} सेब"
}

// उपयोग:
const message = t('apple', { count: 5 });
// परिणाम: "5 सेब"

इंटरपोलेशन आपको स्ट्रिंग में वेरिएबल डालने की सुविधा देता है।