Passing the returned function from useTranslations to other functions

[janoschherrmann]

Hey there,

I have a case where I want to access a certain subset of my translations in a component, which I then want to pass to another function. The reason for this is that otherwise, I would have a lot of markup inside my component (it's a big Footer) and I'd rather separate the "markup generation" from the component.

const t = useTranslations("path.to.my.translations");
 type GeneralTranslationsType = ReturnType<typeof useTranslations>;

 const getMessages = (t: GeneralTranslationsType) => {
  // return the markup including the correct translations
}

The problem is that the TypeScript type doesn't seem to accurate, as it doesn't take into account the path.to.my.translations, which means the autocomplete breaks. Another thing is that I would now have to define the function getMessages inside the component, as otherwise the TS type wouldn't be in scope.

Is there a way around this?