Internationalization (i18n) in TypeScript: i18next Library

Internationalization (i18n) in TypeScript with the i18next Library

Internationalization (i18n) is the process of developing an application that can adapt to different languages and regional standards without changing the source code. For TypeScript applications, one of the most powerful and popular libraries is i18next. It supports all modern frameworks (React, Vue, Angular) and provides first-class TypeScript support, allowing you to create type-safe translations.

Installation and Basic Setup

First, install the i18next packages and necessary backends. The example below uses a file backend to load JSON translation files:

npm install i18next i18next-fs-backend# For React additionally:npm install react-i18next

Create a configuration file i18n.ts:

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

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

export default i18n;

Translation File Structure

Create a public/locales folder with subfolders for each language. For example:

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

Example content of the ru/translation.json file:

{  "greeting": "Привет, {{name}}!",  "items": "У вас {{count}} сообщение",  "items_plural": "У вас {{count}} сообщений",  "nested": {    "title": "Заголовок",    "description": "Описание"  }}

English version en/translation.json:

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

Typing Translations in TypeScript

One of the main advantages of i18next is strict typing. Create a file 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;        };      };    };  }}

Now TypeScript will check translation keys at compile time. If you try to use a non-existent key, you will get an error.

Usage in React Components

The react-i18next library provides the useTranslation hook and the Trans component:

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('ru')}>Русский</button>    </div>  );}

Pluralization and Interpolation

i18next supports complex plural rules. Russian has three forms (1, 2-4, 5+), English has two. The library automatically selects the correct form based on the number:

// In the translation file (ru):{  "apple": "{{count}} яблоко",  "apple_plural": "{{count}} яблока",  "apple_plural_2": "{{count}} яблок"}

// Usage:const