Typing of 't' function when used as parameter inside a function

[fitimbytyqi]

Is your feature request related to a problem? Please describe.

Currently, I have a function that accepts the t function from useTranslations.

e.x const columns = (t: 'some type') => [...data];

The type of t was a bit difficult to find because it's not exported from the package as far as am aware?

Describe the solution you'd like

What I would want to have is an exported type from the package which is easier to be found for beginners of this package.

e.x const columns = (t: TFunction) => [...data];

Describe alternatives you've considered

Right now, I have created my own interface which extends from the package which looks like this.

I can also make a pull request if needed for this solution, please let me know ;)

export interface TFunction<
  NestedKey extends NamespaceKeys<
    IntlMessages,
    NestedKeyOf<IntlMessages>
  > = never
> {
  <
    TargetKey extends MessageKeys<
      NestedValueOf<
        {
          '!': IntlMessages;
        },
        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
      >,
      NestedKeyOf<
        NestedValueOf<
          {
            '!': IntlMessages;
          },
          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
        >
      >
    >
 ... more lines ....

[amannn]

This is currently not supported by design, please see these previous discussions:

• Export the returned function/object type of useTranslations hook #128
• Export return type of useTranslations #92
• [Docs]: Update Typescript Integration docs  #950

[adarshaacharya]

export interface TFunction<
NestedKey extends NamespaceKeys<
IntlMessages,
NestedKeyOf

= never
{
<
TargetKey extends MessageKeys<
NestedValueOf<
{
'!': IntlMessages;
},
[NestedKey] extends [never] ? '!' : !.${NestedKey}
>,
NestedKeyOf<
NestedValueOf<
{
'!': IntlMessages;
},
[NestedKey] extends [never] ? '!' : !.${NestedKey}
>
>
>

@fitimbytyqi can you share your whole interface of this.

export type TFunction<
  NestedKey extends NamespaceKeys<
    IntlMessages,
    NestedKeyOf<IntlMessages>
  > = never,
> = ReturnType<
  typeof useTranslations<
    NestedKey extends never ? NestedKeyOf<IntlMessages> : NestedKey
  >
>;

Here's what I'm using currently but its not that good.

[fitimbytyqi]

export interface TFunction<
NestedKey extends NamespaceKeys<
IntlMessages,
NestedKeyOf

= never
{
<
TargetKey extends MessageKeys<
NestedValueOf<
{
'!': IntlMessages;
},
[NestedKey] extends [never] ? '!' : !.${NestedKey}

,
NestedKeyOf<
NestedValueOf<
{
'!': IntlMessages;
},
[NestedKey] extends [never] ? '!' : !.${NestedKey}

@fitimbytyqi can you share your whole interface of this.

export type TFunction<
  NestedKey extends NamespaceKeys<
    IntlMessages,
    NestedKeyOf<IntlMessages>
  > = never,
> = ReturnType<
  typeof useTranslations<
    NestedKey extends never ? NestedKeyOf<IntlMessages> : NestedKey
  >
>;

Here's what I'm using currently but its not that good.

Sure, here is the long version of it.

import { ReactElement, ReactNode } from 'react';
import {
  Formats,
  MessageKeys,
  NamespaceKeys,
  NestedKeyOf,
  NestedValueOf,
  RichTranslationValues,
  TranslationValues,
} from 'next-intl';

export interface TFunction<
  NestedKey extends NamespaceKeys<
    IntlMessages,
    NestedKeyOf<IntlMessages>
  > = never,
> {
  <
    TargetKey extends MessageKeys<
      NestedValueOf<
        {
          '!': IntlMessages;
        },
        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
      >,
      NestedKeyOf<
        NestedValueOf<
          {
            '!': IntlMessages;
          },
          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
        >
      >
    >,
  >(
    key: TargetKey,
    values?: TranslationValues,
    formats?: Partial<Formats>
  ): string;
  rich<
    TargetKey extends MessageKeys<
      NestedValueOf<
        {
          '!': IntlMessages;
        },
        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
      >,
      NestedKeyOf<
        NestedValueOf<
          {
            '!': IntlMessages;
          },
          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
        >
      >
    >,
  >(
    key: TargetKey,
    values?: RichTranslationValues,
    formats?: Partial<Formats>
  ): string | ReactElement | ReactNode;
  raw<
    TargetKey extends MessageKeys<
      NestedValueOf<
        {
          '!': IntlMessages;
        },
        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
      >,
      NestedKeyOf<
        NestedValueOf<
          {
            '!': IntlMessages;
          },
          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
        >
      >
    >,
  >(
    key: TargetKey
  ): any;
}

[adarshaacharya]

export interface TFunction<
NestedKey extends NamespaceKeys<
IntlMessages,
NestedKeyOf

= never
{
<
TargetKey extends MessageKeys<
NestedValueOf<
{
'!': IntlMessages;
},
[NestedKey] extends [never] ? '!' : !.${NestedKey}

,
NestedKeyOf<
NestedValueOf<
{
'!': IntlMessages;
},
[NestedKey] extends [never] ? '!' : !.${NestedKey}

@fitimbytyqi can you share your whole interface of this.

export type TFunction<
  NestedKey extends NamespaceKeys<
    IntlMessages,
    NestedKeyOf<IntlMessages>
  > = never,
> = ReturnType<
  typeof useTranslations<
    NestedKey extends never ? NestedKeyOf<IntlMessages> : NestedKey
  >
>;

Here's what I'm using currently but its not that good.

Sure, here is the long version of it.

import { ReactElement, ReactNode } from 'react';
import {
  Formats,
  MessageKeys,
  NamespaceKeys,
  NestedKeyOf,
  NestedValueOf,
  RichTranslationValues,
  TranslationValues,
} from 'next-intl';

export interface TFunction<
  NestedKey extends NamespaceKeys<
    IntlMessages,
    NestedKeyOf<IntlMessages>
  > = never,
> {
  <
    TargetKey extends MessageKeys<
      NestedValueOf<
        {
          '!': IntlMessages;
        },
        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
      >,
      NestedKeyOf<
        NestedValueOf<
          {
            '!': IntlMessages;
          },
          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
        >
      >
    >,
  >(
    key: TargetKey,
    values?: TranslationValues,
    formats?: Partial<Formats>
  ): string;
  rich<
    TargetKey extends MessageKeys<
      NestedValueOf<
        {
          '!': IntlMessages;
        },
        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
      >,
      NestedKeyOf<
        NestedValueOf<
          {
            '!': IntlMessages;
          },
          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
        >
      >
    >,
  >(
    key: TargetKey,
    values?: RichTranslationValues,
    formats?: Partial<Formats>
  ): string | ReactElement | ReactNode;
  raw<
    TargetKey extends MessageKeys<
      NestedValueOf<
        {
          '!': IntlMessages;
        },
        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
      >,
      NestedKeyOf<
        NestedValueOf<
          {
            '!': IntlMessages;
          },
          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
        >
      >
    >,
  >(
    key: TargetKey
  ): any;
}

thanks !

I think this type utility should be exported from library itself, very useful and typesafe.

[fitimbytyqi]

@adarshaacharya You are welcome, that would be nice but they don't plan on doing it, so we can use this as an alternative.