Add type safety for i18next's T Function

[rithviknishad]

Refer: https://www.i18next.com/overview/typescript

[Utkarsh-Anandani]

can i work on this issue @rithviknishad

[rithviknishad]

Do comment how you are planning to solve this before taking it up.

[Karan-Palan]

Hi @rithviknishad , Do I understand the issue correctly?

Currently, the t function accepts any string as a key, which may lead to runtime errors if an invalid key (e.g., due to a typo) is passed. For example:

t("fitlers"); // Runtime error, no TypeScript warning.

We aim to make the t function type-safe so that only valid keys from the translation JSON files are allowed. This ensures that errors like typos are caught during development and autocomplete

I will write a script that extracts all valid keys from the translation JSON files (e.g., en.json) and generates a TypeScript type from the JSON files in public/locale

ex. from en.json Generate:

export type TranslationKeys =
  | "404_message"
  | "APPETITE__CANNOT_BE_ASSESSED"
  | "APPETITE__INCREASED"

Next

• I will use the generated TranslationKeys type to enforce type safety in the t function by extending the i18next.ts.
• This ensures only valid keys are accepted by the t function.
  After the changes, TypeScript will enforce valid keys at compile time:

t("filters"); // ✅ Valid
t("fitlers"); // ❌ TypeScript Error

I'd like to work on the issue if the approach seems right or I may correct my approach

[rajku-dev]

Can i take this up?
Approach

• Define a type that matches the structure of our translation files.
  Create a locales.d.ts file
• Extend i18next with Custom Types
  Create a i18next.d.ts file (in src/i18n folder)

[Utkarsh-Anandani]

Steps to add type safety for i18next's T Function:-

1. Creating a resource.d.ts file combining all the translation files for each language from public/locale.
2. OPTIONAL adding a script to generate the resource declaration file.
3. Creating a i18next declaration file with the custom type of resource from the above created resource declaration file.

Can I work on the issue if my approach seems right?

[kris70lesgo]

Hi @rithviknishad ,

Here’s my proposed approach to address the issue:

Objective
Make the t function type-safe to catch invalid keys at compile time and enable autocompletion.

Steps
Extract Keys from Translation Files:

Write a script to parse all JSON files in public/locales, flatten nested keys, and generate a translationKeys.d.ts file containing a TranslationKeys type.
Extend i18next:

Create a declaration file (src/i18n/i18next.d.ts) to extend i18next with TranslationKeys.
Automate Key Generation:

Add a script (generate-keys) to automate the creation of translationKeys.d.ts whenever translation files are updated.
Update Configuration:

Use the generated TranslationKeys in i18next to enforce type safety.