Autocompletion and type-safe with typescript

[bryanprimus]

Just checked next-intl library and amazed that it has support for typescript integration and autocompletion out of the box

https://next-intl-docs.vercel.app/docs/usage/typescript

so that we can have type-safe and autocompletion in our t Function t("home.title")

I'm not sure if next-i18next supports this already or not, because I couldn't find any step on how to do this in next-i18next issues or description.

Is there some way to do this? or even maybe this case isn't necessary? Because I think it would be convenient to have this

[adrai]

related: https://github.com/i18next/react-i18next/issues/1530 https://github.com/i18next/react-i18next/issues/1500 https://github.com/i18next/react-i18next/issues/1333

[adrai]

fyi: @pedrodurek, seems also next-i18next would benefit from this...

[stale[bot]]

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.

[TrebuhD]

This should do the trick (next-i18next.d.ts)

// import the original type declarations
import "react-i18next";

// import all namespaces (for the default language, only)
import type en from "@public/locales/en/common.json";

declare module "react-i18next" {
  // and extend them!
  interface CustomTypeOptions {
    // custom resources type
    resources: {
      common: typeof en;
    };
  }
}

[bryanprimus]

• I use pnpm, so react-i18next will not be installed with next-i18next. Is there a way to use

import "next-i18next";

declare module "next-i18next"

directly instead of importing react-i18next?

This should do the trick (next-i18next.d.ts)

• Also with the implementation, how do we work with interpolation https://www.i18next.com/translation-function/interpolation for typescript type safe ? nvm I suppose that is not possible yet https://github.com/i18next/react-i18next/pull/1193#issuecomment-778032161

• if we set baseUrl "./" in tsconfig.json . the solution won't work

[stale[bot]]

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.

[klis87]

I solved this issue with https://github.com/klis87/i18next-ts-loader , unfortunately I suppose it will not work with next js by default. We could think if this could be worth integrating, then maybe we could have first-class TS citizen here too.

[KrokoYR]

Is there any progress on this issue? I've met the same problem

[ricardo-rp]

I have also spent the last 3 days looking for a way to do this. Since both i18next and react-i18next can be made fully type-safe by overriding their interfaces, one would expect the same of this lib. It was honestly very confusing to find out this isn't supported. Might be worth it adding to the docs.

As I understand, this lib is built on top of react-i18next. I thought overriding the react-i18next interfaces would be enough for the typescript changes to propagate to this lib's useTranslation why do they not do that?

[adrai]

Have you tried with v13?

[ricardo-rp]

Just tried it now. Sadly, upgrading to v13 doesnt solve the issue.

[adrai]

Did you follow: https://github.com/i18next/next-i18next/blob/master/UPGRADING.md ? If so can you create a reproducible example?

[ricardo-rp]

@adrai thank you! v13 is very easy to make fully type-safe!

[ricardo-rp]

@adrai may I make a PR adding a typesafety section to the readme?

[adrai]

@adrai may I make a PR adding a typesafety section to the readme?

@belgattitude what do you think?

[belgattitude]

+1

[getvega]

For anyone looking there is a good example there.