Typesafe Interpolation Variables

[CreativeTechGuy]

🚀 Feature Proposal

Enable opt-in typesafe interpolation variables. Given that the user is already using #1504, this will add additional intellisense based on the contents of the string, finding any variable placeholders and requiring values to be passed for each.

Motivation

It's easy to miss passing required interpolation variables when translating a string. This will ensure that developers get both real-time Type errors and auto complete for variable names to avoid mistakes at runtime.

Example

Example TypeScript sandbox. I wrote this code to make typesafe URL path variables and realized it could be used with very minor tweaks here too. It'd be amazing if this could be integrated into the core library.

Notes

• I know the variable placeholders can be extremely complex. This feature would only be usable for those with simple placeholders ({{name}}) and nothing more. As a result, it needs to be opt-in as it won't work for everyone. I believe this is still valuable as simple placeholders covers a majority of users.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[CreativeTechGuy]

Not stale

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[CreativeTechGuy]

Still not stale

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[CreativeTechGuy]

Not stale

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[CreativeTechGuy]

Still not stale

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[CreativeTechGuy]

Not stale

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[CreativeTechGuy]

Not stale

[Lesik]

Resolved by #1911?

[adrai]

@CreativeTechGuy @Lesik you might want to help here: #1911 (comment)

[adrai]

Please try with i18next v23.0.1 and react-i18next v13.0.0

[adrai]

should work....
proof here: https://github.com/locize/i18next-typescript-examples/blob/main/2/index.ts

#1953 (comment)