I want to use generic types for i18next.TranslationFunction

[tkow]

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

I want to use generic types for i18next.TranslationFunction

because t functions generic is useful, completion keys of dictionary keys ,

like

type TKeys = 'a.messageA'| 'a.messageB'

this.props.t<TKeys>('a.message',)
// can complete 'a.messageA or B'and emit error for not matching TKeys literal types.

Describe the solution you'd like

I want to change index.d.ts like that,

export interface TransProps {
  //...
   t?<TKeys extends string=string,TVals extends object =object,TResult=any>
  (key: TKeys | TKeys[], options?: i18next.TranslationOptions<TVals>):
   ReturnType<i18next.TranslationFunction<TResult,TVals,TKeys>>;
  //...
}

export interface I18nContextValues {
  //...
  t<TKeys extends string=string,TVals extends object =object,TResult=any>
    (key: TKeys | TKeys[], options?: i18next.TranslationOptions<TVals>):
     ReturnType<i18next.TranslationFunction<TResult,TVals,TKeys>>;
  //...
}

export interface NamespacesConsumerProps extends ReactI18NextOptions {
   //...
  children: (
    t: <TKeys extends string,TVals extends object,TResult>
      (key: TKeys | TKeys[], options?: i18next.TranslationOptions<TVals>)=>
      ReturnType<i18next.TranslationFunction<TResult,TVals,TKeys>>,
    options:  //...
  ) => React.ReactNode;
}

also function short-hand props can override in external modules then, if you want ,this definition can be overridden easily.

Describe alternatives you've considered
Inheritance generic t function prop is ideal , but I can't find solution to do this.

In Addition:

I can add new interface to external module and It may be enough for completion.

import i18next from 'i18next'
export * from 'react-i18next'
declare module 'react-i18next' {
  interface  WithTranslaterBase{
    i18n: i18next.i18n;
    t<TKeys extends TransLateKeys=TransLateKeys,TVals extends object =object,TResult=any>
    (key: TKeys | TKeys[], options?: i18next.TranslationOptions<TVals>):
     ReturnType<i18next.TranslationFunction<TResult,TVals,TKeys>>;
    defaultNS?: string;
    reportNS?: string;
    lng?: string;
  }
  interface WithI18nBase extends WithTranslaterBase {
    i18nOptions?: ReactI18NextOptions;
  }
  export interface WithTranslateProps extends WithI18nBase {
    tReady: boolean;
    initialI18nStore?: {};
    initialLanguage?: string;
  }
}

Additional context
If you have no idea about what I want, Try do this

type A = 'common.a'| 'common.b' | 'other.a'

type F = <T extends string,R>(arg:T) =>R;

interface Test { 
  t:<T extends string,R=any>(arg:T) =>R;
}

const z = (props: Test) => {
  props.t<A>('foo') 
  props.t<A>('common.a')   
  props.t<A>('other.a')   
  props.t('other.a')   
}

[jamuhl]

@schettino would be great if you could have a look at this

[tkow]

I pull-requested because it's not though. Please take it easy to merge or close after checking.

[jamuhl]

@tkow the point is i have never used typescript myself - so more or less all this is "not" javascript for me -> so always depend on reviews from the community.