typed-i18next

Type-safe translations generator for i18next.

Features

• [x] Generates TypeScript declaration file.
• [x] Check if generated declaration file is up-to-date (useful for CI).
• [x] Support folder structure: [languageName]/**/[namespace].json.
• [ ] Support file structure: [languageName].json.
• [ ] Combine translations keys from different sources.
• [x] Strictly typed const { t } = useTranslation() from react-i18next package. Example

Get started

Install typed-i18next package.

$ npm install typed-i18next

Latest dev build is published under canary tag.

$ npm install typed-i18next@canary

To start using the tool:

$ typed-i18next -h

Example

When generating TypeScript types:

$ typed-i18next -i ./src/i18next/translations -o ./src/i18next/translations.d.ts

During CI, declaration file can be checked if they are up-to-date with --check flag:

$ typed-i18next -i ./src/i18next/translations -o ./src/i18next/translations.d.ts --check

CLI Usage

$ typed-i18next -h

Configuration

| CLI Flag | Type | Description | Default | | ------------------------------ | ------------------------------------------------------------------ | --------------------------------------------------- | -------- | | -i, --input <path> | string | Location where translations are located. | | | -o, --outputFile <file-path> | string | Location where to generate definitions file. | | | --check [boolean] | boolean | Check if generated file up to date (useful for CI). | false | | --logLevel <level> | "silent", "error", "warning", "info", "debug", "trace" | Console log level. | "info" |

Translation file structures

Folder structure

Example translations file structure:

.
└── translations/
    ├── en/
    │   ├── commons.json
    │   ├── validation.json
    │   ├── glosarry.json
    │   └── pages/
    │       ├── login.json
    │       └── register.json
    └── lt/
        ├── commons.json
        ├── validation.json
        ├── glosarry.json
        └── pages/
            ├── login.json
            └── register.json

Library specific types

react-i18next

import { useTranslation } from "react-i18next";
import { StrictTypedTranslations } from "typed-i18next/react";
// Declaration file "translations.d.ts" that we generated with `typed-i18next` tool.
import { Translations } from "./translations";

export const useStrictTranslation = useTranslation as StrictTypedTranslations<typeof useTranslation, Translations>;

License

Released under the MIT license.