reactjs - 基于输入对象的返回类型 Typescript 自动完成

Question

更新:感谢https://stackoverflow.com/users/5575595/drag13完整版本可以在这里找到:https://github.com/web-ridge/react-ridge-translations/blob/main/src/index.ts

我正在开发 React/React Native 的翻译库，但我无法让这些类型工作。

https://github.com/web-ridge/react-ridge-translations

您可以通过以下方式创建翻译

// first describe which languages are allowed/required (Typescript)
type TranslationLanguages = {
    nl: string
    fr: string
    en: string
}

// create a translation object with your translations
export default const translate = createTranslations<TranslationLanguages>({
  homeScreen:{
    yesText: {
      nl: 'Ja',
      fr: 'Oui',
      be: 'Yes',
    },
    welcomeText: ({ firstName }: { firstName: string }) => ({
      nl: `Hoi ${firstName}`,
      fr: `Hello ${firstName}`,
      be: `Hello ${firstName}`,
    }),
  }
}, {
    language: 'nl',
    fallback: 'en',
})

库将对象更改为以下内容

{
  homeScreen:{
    yesText: 'Ja',
    welcomeText: ({ firstName }: { firstName: string }) => `Hoi ${firstName}`,
  }
}

在您的组件中，您将以这种方式使用类型

  const {yesText,welcomeText} = translate.use().appScreen

它不会自动完成类型。

库代码(简化)

type val<T> = (...params: any[]) => T
type val1<T> = T

type Translations<T> = {
    [group: string]: {
        [key: string]:  val<T> | val1<T>
    },
}
type TranslationsObject<T> = {
    translations: Translations<string>,
    use: () => Translations<string>;
}
export function createTranslations<T>(t: Translations<T>): TranslationsObject<T> 

如何让 Typescript 了解它需要自动完成？

Answer 1

因此，您希望允许 TypeScript 自己定义接口(interface)。在这种情况下，您需要使用更多的泛型。像这样的事情:

type ValueOf<T> = T[keyof T]; 
type Translations<TGroup> = {
   [group in keyof TGroup]: { [key in keyof ValueOf<TGroup>]: ValueOf<TGroup>[key] }
}

type TranslationsObject<TGroup> = {
    translations: Translations<TGroup>,
    use: () => Translations<TGroup>;
}

export function createTranslations<TGroup>(data: TGroup): TranslationsObject<TGroup> { }


const test = createTranslations({
  homeScreen:{
    yesText: {
      nl: 'Ja',
      fr: 'Oui',
      be: 'Yes',
    },
    welcomeText: ({ firstName }: { firstName: string }) => ({
      nl: `Hoi ${firstName}`,
      fr: `Hello ${firstName}`,
      be: `Hello ${firstName}`,
    }),
  }
});

const x  = test.use().homeScreen.yesText

类型检查目前应该可以正常工作。这个看起来不错吗？

使用评论中的代码进行更新