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

更新：由于已完成的版本，可在此处找到：

我正在为React/React Native开发一个翻译库，但我无法使类型正常工作

您可以按以下方式创建翻译

// 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',
})

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

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

它不会自动完成类型

库代码（简化）

type val=（…参数：any[]）=>T
类型val1=T
类型转换={
[组：字符串]：{
[键：字符串]：val | val1
},
}
类型TranslationObject={
翻译：翻译，
使用：（）=>翻译；
}
导出函数createTranslations（t:Translations）：TranslationObject

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

问题就在这里

类型转换={
[组：字符串]：{
[键：字符串]：val | val1
},
}

由于索引器声明，TypeScript对内部结构一无所知。如果希望有更多强类型，请选择以下选项：

type val=（…参数：any[]）=>T
类型val1=T
类型TranslationGroup='homeScreen'|'personalCabinet'；
类型转换={
[TranslationGroup中的组]：{
[键：字符串]：val | val1
}
}
类型TranslationObject={
翻译：翻译，
使用：（）=>翻译；
}
导出函数createTranslations（t:Translations）：TranslationsObject{}
const test=createTranslations（{主屏幕：{test:'4'}，personalCabinet:{test:'6'}）；
const x=test.use（）.personalCabinet

当然，您可以声明子组的类型

---

希望这有帮助

所以，您希望允许TypeScript自己定义接口。在这种情况下，您需要使用更多的泛型。大概是这样的：

type ValueOf=T[keyof T]；
类型转换={
[group in keyof TGroup]：{[key in keyof ValueOf]：ValueOf[key]}
}
类型TranslationObject={
翻译：翻译，
使用：（）=>翻译；
}
导出函数createTranslations（数据：TGroup）：TranslationsObject{}
const test=createTranslations({
主屏幕：{
yesText：{
nl:‘Ja’，
fr:'是'，
是‘是’，
},
welcomeText:（{firstName}:{firstName:string}）=>({
nl:`Hoi${firstName}`，
fr:`Hello${firstName}`，
be:`Hello${firstName}`，
}),
}
});
const x=test.use（）.homeScreen.yesText

目前，类型检查应该可以正常工作。这个好看吗

---

更新了注释中的代码

这看起来不错！但是我想自动创建这个组，因为我不想让我的typescript用户自己定义它。在这种情况下（如果我理解正确的话），看起来您需要一个更通用的组。如果你不介意的话，我会再给你一个答案，因为这个问题有点不同。没问题，我真的很感谢你的帮助！我想我会让它工作的！非常感谢，我添加了一个功能，可以编辑答案“type ValueOf=T[keyof T]；类型翻译={[group in keyof TGroup]：{[key in keyof ValueOf]：val | val1}````@RichardLindhout看起来很棒！我已经更新了答案。工作几乎完美，但它还不理解welcomeText:（{firstName}：它说：不是所有类型“string | val”的成分都是可调用的。类型“string”没有调用签名。我怀疑这是否可行，因为：我刚刚发布了软件包的第1版。感谢帮助！很高兴提供帮助：）您的第一个链接返回404:（现已修复主分支已更改为主分支

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>