blink-typedi18next

typed-i18next

Type-safe translations generator for i18next.

Features

• Generates TypeScript declaration file.
• Check if generated declaration file is up-to-date (useful for CI).
• Support folder structure: [languageName]/**/[namespace].json.
• Support file structure: [languageName].json.
• Combine translations keys from different sources.
• 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.