Workaround typesafe translations with useTranslation hook

[Cmoen11]

I've written a hook that provides type safe strings with . seperated translations with the useTranslation hook

So instead of importing from react-i18next, you just import this instead. and you will have typesafe translations :)

import { useTranslation as _useTranslation } from "react-i18next";
import translationEN from "../../public/locales/en/common.json";

type KeysUnion<T, Cache extends string = ""> = T extends PropertyKey
	? Cache
	: {
			[P in keyof T]: P extends string
				? Cache extends ""
					? KeysUnion<T[P], `${P}`>
					: Cache | KeysUnion<T[P], `${Cache}.${P}`>
				: never;
	  }[keyof T];

export default function useTranslation() {
	const translation = _useTranslation();
	const t = (str: KeysUnion<typeof translationEN>) => translation.t(str);

	return { ...translation, t };
}

[melodyclue]

@Cmoen11
When there are multiple locales, the keys of the objects need to correspond to each language in the same way, right?

[sergiodxa]

You can achieve the same if you add this to a .ts or .d.ts file imported by your app:

import type * as resources from "../config/locales/en";

declare module "i18next" {
	interface CustomTypeOptions {
		resources: typeof resources;
	}
}

The resources here is an object with all of your namespaces.

Then when you call useTranslation hook or getFixedT from RemixI18Next class you will get type safety on the list of namespaces and the keys you can use.

[CHR-onicles]

Thanks for the handy hook @Cmoen11! I also use the <Trans> component a lot and decided to add type safety to it's i18nKey prop!

import { useTranslation as _useTranslation, Trans as OriginalTrans, } from "react-i18next";

export const Trans = ({
  i18nKey,
  ...props
}: Omit<React.ComponentProps<typeof OriginalTrans>, "i18nKey"> & {
  i18nKey: KeysUnion<typeof translationEN>;
}) => {
  return <OriginalTrans i18nKey={i18nKey} {...props} />;
};

Also, I noticed you don't pass the options from the t() function to make use of things like context, count etc while translating, so I tweaked your hook a bit:

import { TOptionsBase } from "i18next";
import { $Dictionary } from "node_modules/i18next/typescript/helpers";

  const t = (
    str: KeysUnion<typeof translationEN>,
    options?: (TOptionsBase & $Dictionary) | undefined
  ) => translation.t(str, options);