react-i18next: TS error with multiple namespace when passing the namespace as an option to t
đ Bug Report
I am referring to this comment:
https://github.com/i18next/react-i18next/issues/1396#issuecomment-961345092
@pedrodurek have you updated the TS docs to reflect that? I donât see any reference to that.
Also, I have a similar but slightly different scenario than on #1396 , and I want to know if it is supposed to be supported or not.
function App() {
const { t } = useTranslation();
return (
<div className="App">
<p>{t("key.on.ns1")}</p> {/*No TS error */}
<p>{t("otherKey.present.inNs2", { ns: "ns2" })}</p> {/* TS error */}
</div>
);
}
As you can see, if I donât provide the namespace the tFunction is not able to understand that in the second case it should compare against the keys of ns2
and it fails, because it only compares agains keys on ns1.
I can workaround this using to different t
functions configuring each one for each namespace, so this works fine:
function App() {
const { t } = useTranslation();
const { t:t2 } = useTranslation('ns2');
return (
<div className="App">
<p>{t("key.on.ns1")}</p> {/*No TS error */}
<p>{t("otherKey.present.inNs2")}</p> {/*No TS error */}
</div>
);
}
To my understanding, and reading the docs, if you donât provide any namespace to the useTranslation function you can access any namespace using the { ns }
option, but seems that such feature does not apply to TS?
Also, I see that is it not possible to provide more than one namespace and then use the { ns }
option. If you provide two namespaces like useTranslation(['ns1','ns2'])
the only way to use a namespace is with t('ns2:theKey')
. Anything else will not typecheck. Is that expected?
Your Environment
- runtime version: browser
- i18next version: 11.14.3
- os: Mac
- TS: 4.4.4
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 10
- Comments: 28 (5 by maintainers)
Same issue here, the TS type-safe feature should be updated
example:
@pedrodurek I know you are good in this type of issues đ
this. Also should support the fact that the first element in array is the default type so we only specify the namespace for the second namespace.
I agree with both of youâŚuse what ever suits you bestâŚthatâs the flexibility i18next likes to give.
But - my personal preference - is not using natural language for keys out of following reasons:
In general the complete signature calls for the t function have been updatedâŚt(âkeyâ, { ns: âappâ }) and t(âapp:keyâ) should both work
https://github.com/i18next/i18next/blob/master/test/typescript/custom-types/t.test.ts#L40
Have you tried with the new i18next and react-i18next versions? https://www.i18next.com/overview/typescript
I found a possible solution thatâs working fine with react-i18next v11.
useTranslation
expectsns?: N | Readonly<N>
, so usingas const
will do the trick and namespace will be inferred correctly.I have similar errors.
The access via ânotification:â is not found with Typescript but is working.
âtypescriptâ: â^4.6.3â âreact-i18nextâ: â^11.16.2â,
I think ânotificationsâ should be listed too, but is not the caseâŚ
Quite aggressive stale bot⌠Can this be unflagged?
Hello @pedrodurek , I got that option from this places: https://react.i18next.com/latest/usetranslation-hook#loading-namespaces https://react.i18next.com/guides/multiple-translation-files
And I think some other place I donât remember