type t returned from useTranslations

[abhion]

I have a component:

const t = useTranslations("side-nav");
  const navItems = useMemo(() => getSideNavItems(t), [t]);

How to type t in Typescript?

I tried:

import {MessageKeys} from "next-intl"
import en from "../en.json"
export const getSideNavItems = (t: MessageKeys<en, "side-nav">) => {
  return [];
};

but it doesn't work

[damien-schneider]

I have the same question, I have functions that passes t as prop but I cannot find how to properly define the type.

Isn't it possible to make the type of t accessible from anywhere ?

(I'm passing t as prop sometimes because I cannot access to useTranslations in a non react component but sometimes I need it, I have for example a function that returns error messages, so I need to access to the translation but I can't. :/

[amannn]

t depends on the namespace that's passed to useTranslations/getTranslations. It's a bit hard to type manually, therefore the API encourages users to use t where it was retrieved.

There's btw. an example regarding error messages in the docs: Server Actions.

[Hadeel-13]

export type MessageKey = Parameters<ReturnType<typeof useTranslations<never>>>[0];

export type TFunction = ReturnType<typeof useTranslations<never>>;

MessageKey: Represents the type of the first argument (key) passed to the translation function. It extracts the valid keys from the specified namespace.
TFunction: Represents the return type of useTranslations, which is the translation function.

with name space

export type MessageKey = Parameters<ReturnType<typeof useTranslations<"side-nav">>>[0];

export type TFunction = ReturnType<typeof useTranslations<"side-nav">>;

export const getSideNavItems = (t: TFunction) => {
  return [];
};

[zacol]

I found a solution that works both with and without a namespace set :)

import { createTranslator, Messages, NamespaceKeys, NestedKeyOf } from 'next-intl';

export type TFunction<NestedKey extends NamespaceKeys<Messages, NestedKeyOf<Messages>> = never> =
  ReturnType<typeof createTranslator<Messages, NestedKey>>;