Support TypeScript

[dsonet]

🚀 Feature Proposal

Ref: When I use i18next react, it supports TypeScript. Could this vue version also add TypeScript support for the $t interface?

https://react.i18next.com/latest/typescript

Motivation

Add translation key validation/auto-completion support during dev.

Example

//similar usage as react version. const { t } = useTranslation('settings')//namespace support, load namespace if it's not loaded

t('TranslationKey')//can be validated by TypeScript

[kkuegler]

The type definitions used by react-i18next are quite lengthy and complex, and that's not something I'd like to duplicate and maintain separately for i18next-vue.

There seem to be efforts of extracting the types to the core library, see https://github.com/i18next/i18next/issues/1504. When that works out, I think using (and possibly slightly augmenting) the types sounds like a good idea.

[adrai]

@pedrodurek interesting... also others are looking for it 😉

[kendallroth]

It looks like the linked issue has been merged; is this something that could be re-evaluated at this point?

[adrai]

https://github.com/i18next/i18next/issues/1884

[kkuegler]

I look into this in the near future and see how to integrate the types best.

We'll probably not publish a new version with this right away, but wait a bit for the "dust to settle". As @adrai's linked ticket shows, there are still quite some type-related changes and fixes going on in i18next itself.

[kkuegler]

We plan to include this in i18next-vue v3. In fact, you can try it in the alpha version already: https://github.com/i18next/i18next-vue/releases/tag/v3.0.0-alpha.0

The syntax is like in your example

const { t } = useTranslation('settings');

This should work as good as the types for i18next.getFixedT().

See https://github.com/i18next/i18next-vue/issues/16 for other changes planned for version 3.

[kkuegler]

As outlined above, this is implemented in v3.