fix trans component type safe #1881
There are no files selected for viewing
codomposer marked this conversation as resolved.
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment. Testing this in a real app: There is an issue with import { Trans } from "react-i18next";
export function TranCmp() {
const someCondition = true;
return (
<div>
<Trans
ns="ns1"
i18nKey={($) => $.food}
context="pizza"
values={{ test: "a" }}
/>
<Trans
ns="ns1"
i18nKey={($) => $.food}
context={someCondition ? "pizza" : undefined}
values={{ test: "a" }}
/>
</div>
);
}with this translation file: {
"food": "food",
"food_pizza": "pizza"
}
You can find the code here: https://github.com/marcalexiei/i18next-playground/tree/main/examples/react-trans-component-type-safe-selector 
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,6 +9,8 @@ import type { | |
| TypeOptions, | ||
| TOptions, | ||
| TFunction, | ||
| TFunctionReturn, | ||
| InterpolationMap, | ||
| } from 'i18next'; | ||
| import * as React from 'react'; | ||
|
|
||
|
|
@@ -18,6 +20,62 @@ type _EnableSelector = TypeOptions['enableSelector']; | |
| type TransChild = React.ReactNode | Record<string, unknown>; | ||
| type $NoInfer<T> = [T][T extends T ? 0 : never]; | ||
|
|
||
| /** | ||
| * Extracts interpolation variable names from a translation string | ||
| * Examples: | ||
| * - ExtractInterpolationKeys<"Hello {{name}}!"> = ["name"] | ||
| * - ExtractInterpolationKeys<"{{count}} items from {{sender}}"> = ["count", "sender"] | ||
| * - ExtractInterpolationKeys<"No variables"> = [] | ||
| */ | ||
| type ExtractInterpolationKeys<S extends string> = S extends '' | ||
| ? [] | ||
| : S extends `${infer _Start}{{${infer Variable}}}${infer Rest}` | ||
| ? [Variable, ...ExtractInterpolationKeys<Rest>] | ||
| : []; | ||
|
|
||
| /** | ||
| * Converts an array of keys to a union type | ||
| * Example: KeysToUnion<["name", "age"]> = "name" | "age" | ||
| */ | ||
| type KeysToUnion<T extends readonly string[]> = T[number]; | ||
|
|
||
| /** | ||
| * Helper type to check if an object has all required keys | ||
| * This creates a type that requires all keys to be present | ||
| */ | ||
| type RequireKeys<T extends string> = T extends never | ||
| ? Record<string, never> | undefined | ||
| : { [K in T]: unknown }; | ||
|
|
||
| /** | ||
| * Creates a Record type from extracted interpolation keys | ||
| * If no keys are extracted, returns an empty object type or undefined | ||
| * Otherwise, returns a required Record with the extracted keys | ||
| */ | ||
| type InterpolationRecord<S extends string> = | ||
| ExtractInterpolationKeys<S> extends infer Keys | ||
| ? Keys extends [] | ||
| ? Record<string, never> | undefined // No interpolation variables | ||
| : Keys extends readonly string[] | ||
| ? RequireKeys<KeysToUnion<Keys>> | ||
| : never | ||
| : never; | ||
|
|
||
| /** | ||
| * Distributive version of InterpolationMap that works correctly with union types | ||
| * This ensures each key is processed individually rather than creating an intersection | ||
| * | ||
| * This type extracts interpolation variables from translation strings and creates | ||
| * a type-safe Record that only accepts the correct variable names. | ||
| */ | ||
| type TransInterpolationMap<Ns extends Namespace, Key, TOpt extends TOptions> = Key extends any | ||
|
Contributor
There was a problem hiding this comment.
Contributor
Author
There was a problem hiding this comment. I added it as a fix for test failures,
Contributor
There was a problem hiding this comment. I checkout your branch and I'm unable to get any autocomplete information within test files: 
I'm also getting different result from what is stated in the comments 
even calling using tsx syntax: 
Am I missing something?
Contributor
Author
There was a problem hiding this comment. I think the type is exported but doesn't parse {{variable}} syntax from translation strings, and can't provide intellisense.
Contributor
There was a problem hiding this comment. The purpose of the PR is to make
If I'm not mistaken this feature is present for Besides I think you should also add test cases for the selector API created by @ahrjarrett. |
||
| ? TFunctionReturn<Ns, Key, TOpt> extends infer TranslationString | ||
| ? TranslationString extends string | ||
| ? InterpolationRecord<TranslationString> | ||
| : InterpolationMap<TFunctionReturn<Ns, Key, TOpt>> // Fallback to i18next's InterpolationMap | ||
| : never | ||
| : never; | ||
|
|
||
| export type TransProps< | ||
| Key extends ParseKeys<Ns, TOpt, KPrefix>, | ||
| Ns extends Namespace = _DefaultNamespace, | ||
|
|
@@ -36,7 +94,7 @@ export type TransProps< | |
| ns?: Ns; | ||
| parent?: string | React.ComponentType<any> | null; // used in React.createElement if not null | ||
| tOptions?: TOpt; | ||
| values?: TransInterpolationMap<Ns, Key, TOpt>; | ||
| shouldUnescape?: boolean; | ||
| t?: TFunction<Ns, KPrefix>; | ||
| }; | ||
|
|
@@ -71,7 +129,7 @@ export interface TransSelectorProps< | |
| ns?: Ns; | ||
| parent?: string | React.ComponentType<any> | null; // used in React.createElement if not null | ||
| tOptions?: TOpt; | ||
| values?: TransInterpolationMap<Ns, Key, TOpt>; | ||
| shouldUnescape?: boolean; | ||
| t?: TFunction<Ns, KPrefix>; | ||
| } | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,6 +11,11 @@ declare module 'i18next' { | |
|
|
||
| some: 'some'; | ||
| some_me: 'some context'; | ||
|
|
||
| // Test interpolation | ||
| title: 'Title: <strong>{{appName}}</strong>'; | ||
| greeting: 'Hello {{name}}!'; | ||
| message: 'You have {{count}} messages from {{sender}}'; | ||
| }; | ||
|
|
||
| alternate: { | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.