التدويل (i18n) في TypeScript

التدويل (i18n) في TypeScript: نظرة عامة على الأدوات والممارسات

التدويل (i18n) هو عملية تصميم البرمجيات بحيث يمكن تكييفها مع لغات ومعايير إقليمية مختلفة دون تغيير في الكود المصدري. بالنسبة لتطبيقات TypeScript، يعد اختيار مكتبة i18n المناسبة أمرًا بالغ الأهمية: حيث تعتمد عليها سلامة أنواع الترجمات والأداء وسهولة الصيانة. في هذه المقالة، سنستعرض ثلاثة مناهج وأدوات رئيسية لتنفيذ i18n في TypeScript.

1. i18next — الحل الكلاسيكي

i18next هي المكتبة الأكثر شيوعًا للتدويل في نظام JavaScript/TypeScript البيئي. وهي تدعم العديد من الأطر (React، Vue، Angular) ولديها نظام بيئي واسع من الإضافات.

التثبيت:

npm install i18next i18next-browser-languagedetector

الإعداد الأساسي مع TypeScript:

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';

// كتابة موارد الترجمةdeclare module 'i18next' {  interface CustomTypeOptions {    defaultNS: 'common';    resources: {      common: typeof import('./locales/en/common.json');    };  }}

i18n.use(initReactI18next).init({  resources: {    en: { common: require('./locales/en/common.json') },    ru: { common: require('./locales/ru/common.json') },  },  lng: 'ru',  fallbackLng: 'en',  interpolation: { escapeValue: false },});

export default i18n;

مثال على الاستخدام في مكون:

import { useTranslation } from 'react-i18next';

function Greeting() {  const { t } = useTranslation();  const userName = 'آنا';    return (    <div>      <p>{t('greeting', { name: userName })}</p>      <p>{t('itemsCount', { count: 5 })}</p>    </div>  );}

المزايا:

مجتمع وتوثيق ضخم
دعم الجمع (pluralization)
إقحام المتغيرات
تحميل ديناميكي لموارد اللغة

العيوب:

عدم وجود كتابة صارمة "مباشرة من الصندوق"
الحاجة إلى إعداد إضافي لـ TypeScript لتحقيق سلامة الأنواع الكاملة
ملفات JSON للترجمة غير مكتوبة تلقائيًا

2. typesafe-i18n — كتابة صارمة

typesafe-i18n هي مكتبة تم إنشاؤها خصيصًا لـ TypeScript. ميزتها الرئيسية هي توليد الأنواع بناءً على ملفات الترجمة الخاصة بك.

التثبيت:

npm install typesafe-i18n

الإعداد والمثال:

// إنشاء ملف ترجمة: src/i18n/en/index.tsexport const en = {  greeting: 'مرحبًا {name}!',  itemsCount: 'لديك {count} عنصر | لديك {count} عناصر',} as const;

// توليد الأنواع (يتم تشغيله تلقائيًا)// npx typesafe-i18n

// الاستخدام في مكونimport { i18n } from './i18n/i18n-util';

function Profile() {  const LL = i18n();    return (    <div>      <p>{LL.greeting({ name: 'آنا' })}</p>      <p>{LL.itemsCount({ count: 5 })}</p>    </div>  );}

المزايا: