التدويل (i18n) في TypeScript: مكتبة i18next

التدويل (i18n) في TypeScript باستخدام مكتبة i18next

\n\n

التدويل (i18n) هو عملية تطوير تطبيق يمكنه التكيف مع لغات ومعايير إقليمية مختلفة دون تغيير الكود المصدري. بالنسبة لتطبيقات TypeScript، تعد مكتبة i18next واحدة من أقوى وأشهر المكتبات. وهي تدعم جميع الأطر الحديثة (React، Vue، Angular) وتوفر دعمًا من الدرجة الأولى لـ TypeScript، مما يسمح بإنشاء ترجمات آمنة من حيث الأنواع.

\n\n

التثبيت والإعداد الأساسي

\n\n

للبدء، قم بتثبيت حزم i18next والواجهات الخلفية اللازمة. في المثال أدناه، يتم استخدام الواجهة الخلفية للملفات لتحميل ملفات JSON الخاصة بالترجمات:

\n\n

npm install i18next i18next-fs-backend\n# لـ React بشكل إضافي:\nnpm install react-i18next

\n\n

قم بإنشاء ملف الإعداد i18n.ts:

\n\n

import i18n from 'i18next';\nimport Backend from 'i18next-fs-backend';\nimport { initReactI18next } from 'react-i18next';\n\ni18n\n  .use(Backend)\n  .use(initReactI18next)\n  .init({\n    fallbackLng: 'ru',\n    debug: process.env.NODE_ENV === 'development',\n    interpolation: {\n      escapeValue: false,\n    },\n    backend: {\n      loadPath: '/locales/{{lng}}/{{ns}}.json',\n    },\n  });\n\nexport default i18n;

\n\n

هيكل ملفات الترجمة

\n\n

قم بإنشاء مجلد public/locales مع مجلدات فرعية لكل لغة. على سبيل المثال:

\n\n

\n
• public/locales/ru/translation.json
\n
• public/locales/en/translation.json
\n

\n\n

مثال على محتوى ملف ru/translation.json:

\n\n

{\n  "greeting": "مرحبًا، {{name}}!",\n  "items": "لديك {{count}} رسالة",\n  "items_plural": "لديك {{count}} رسائل",\n  "nested": {\n    "title": "العنوان",\n    "description": "الوصف"\n  }\n}

\n\n

النسخة الإنجليزية en/translation.json:

\n\n

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

\n\n

كتابة أنواع الترجمة في TypeScript

\n\n

إحدى المزايا الرئيسية لـ i18next هي كتابة الأنواع الصارمة. قم بإنشاء ملف types/i18n.d.ts:

\n\n

import 'i18next';\n\ndeclare module 'i18next' {\n  interface CustomTypeOptions {\n    defaultNS: 'translation';\n    resources: {\n      translation: {\n        greeting: string;\n        items: string;\n        items_plural: string;\n        nested: {\n          title: string;\n          description: string;\n        };\n      };\n    };\n  }\n}

\n\n

الآن سيقوم TypeScript بالتحقق من مفاتيح الترجمة في مرحلة التجميع. إذا حاولت استخدام مفتاح غير موجود، فستحصل على خطأ.

\n\n

الاستخدام في مكونات React

\n\n

توفر مكتبة react-i18next الخطاف useTranslation والمكون Trans:

\n\n

import { useTranslation } from 'react-i18next';\n\nfunction Welcome() {\n  const { t, i18n } = useTranslation();\n\n  const changeLanguage = (lng: string) => {\n    i18n.changeLanguage(lng);\n  };\n\n  return (\n    <div>\n      <h2>{t('greeting', { name: 'إيفان' })}</h2>\n      <button onClick={() => changeLanguage('en')}>English</button>\n      <button onClick={() => changeLanguage('ru')}>Русский</button>\n    </div>\n  );\n}

\n\n

الجمع والاستيفاء

\n\n

يدعم i18next قواعد الجمع المعقدة. في اللغة العربية هناك ثلاث صيغ (مفرد، مثنى، جمع)، وفي الإنجليزية صيغتان. تقوم المكتبة تلقائيًا باختيار الصيغة الصحيحة بناءً على الرقم:

\n\n

// في ملف الترجمة (ar):\n{\n  "apple": "تفاحة واحدة",\n  "apple_dual": "تفاحتان",\n  "apple_plural": "{{count}} تفاحة"\n}\n\n// الاستخدام:\nconst