fix: types in $t

[cany748]

type fixes when using $t in templates

Checklist

• only relevant code is changed (make a diff before you submit the PR)
• run tests npm run test
• tests are included
• commit message and code follows the Developer's Certification of Origin

Checklist (for documentation change)

• [] only relevant documentation part is changed (make a diff before you submit the PR)
• [] motivation/reason is provided
• [] commit message and code follows the Developer's Certification of Origin

[kkuegler]

Hi @cany748,

I'd like to understand the type problem you are seeing. Locally I don't see any type problems for $t.
Which version of Vue, i18next, i18next-vue and TypeScript do you use?
Do you use CustomTypeOptions for i18next as described in https://www.i18next.com/overview/typescript#create-a-declaration-file?

Thanks!

[cany748]

Hello!
I've prepared a reproduction. https://github.com/cany748/i18next-vue-reproduction

In the App.vue file, you can see that types only work for the t() function, but not for $t()

Vue/i18next/i18next-vue/typescript: all have the latest versions.
Node.js: 22, pnpm: 9.15.4

[kkuegler]

Ah, the repo is super helpful!

Can you try changing the resources line in i18next.d.ts
from resources: { en: typeof en };
to resources: { translation: typeof en };?

As I understand the code, you don't care about the namespace and leave it at its default 'translation'.
The resources in interface CustomTypeOptions is supposed to have this namespace as the key and the actual translation types as the value (in the default language, because we only care about the keys).
See https://www.i18next.com/overview/typescript#create-a-declaration-file for some more info and examples.

So in your reproduction you currently have the following types:
$t is TFunction<DefaultNamespace> which resolves to TFunction<"translation"> in your repo, which was not a key in resources and thus it does not have any translation keys to suggest.
t is TFunction<Namespace> which resolves to the keys in resources i.e. "en" in your case. So we end up with TFunction<"en" | readonly "en"[]>. This makes the suggestions work regardless of the keys in resources.

To me it seems like a small setup problem in the repo, which is luckily easy to fix.

[cany748]

Correcting types to resources: { translation: typeof en }; fixes the situation, but there is still a difference in types between the $t() and t() functions.

$t() contains only keys without namespace
t() also contains duplicate keys specifying namespace

This PR evens out this behavior, although it's probably not a perfect solution.

[kkuegler]

Yes, aligning these two makes sense to me, too. Keys prefixed with a namespace are allowed at runtime for $t, too. So we should adopt the TS-types accordingly. I will merge your PR shortly.

One aspect that can be annoying with this is having keys twice and having a long block of 'some-namespace:...' keys appearing as IDE suggestions among non-prefixed keys, because suggestions are ordered alphabetically. But I think we can live with that.

Thanks for the PR!