是否可以声明一个动态接口？答案

【问题标题】：Is it possible to declare a dynamic interface?是否可以声明一个动态接口？
【发布时间】：2020-03-10 14:30:07
【问题描述】：

我目前正在将基于jss 的样式解决方案转换为typescript，但我遇到了以下情况。

考虑一下我的基本设置

import { useStyles } from './styles'

const styles = theme =>({
    root : { color: 'white' },
    foo : { backgroundColor: 'red' },
})

const Component = () =>{
    const classes = useStyles(styles)

    return <div className={classes.root} />
}

您将样式对象传递给useStyles，返回值是一个对象，其中包含在styles 中声明的所有键。所以我的classes 对象看起来像这样

{
    root : 'random-name123',
    foo : 'random-name124'
}

由于我不可能知道styles 将有哪些键，我当前的classes 接口只是一个字典

interface Classes {
    [index: string]: string
}

我的问题是：

我能否声明一个interface，使传递给styles 的所有键都声明为Classes 的一部分？这样当我输入classes. 时，我就能看到classes 的所有可能键？

换句话说，我希望组成Classes 的键是可预测的。这样，如果我通过 styles 这样的对象

{
    foo : {/*...*/},
    bar: {/*...*/}
}

我的Classes 界面看起来像

{
    foo : string,
    bar : string
}

【问题讨论】：

您能否编辑上述代码以构成minimal reproducible example，以便有人可以将其放入IDE 并给出他们可以先测试的答案？现在我的猜测是您希望useStyles 成为一个generic 函数，其输出类型取决于其输入类型。但是如果没有可用的示例代码，我不知道这是否是您真正想要的。祝你好运！
喜欢this 可能吗？但我不知道useStyles 实际做了什么，所以我不知道那个签名是否合适。
这能回答你的问题吗？ Interface type check with Typescript
@jcalz 问题是我有很多样板代码要在沙箱中重现。我已经更新了这个问题。这有帮助吗？案例还不够，我会尝试在沙箱中重现它
两个答案都对我有帮助。我仍然有一些问题，但与问题的范围无关。我只是在等待一点接受一个。希望大家多多点赞哈哈哈

标签： reactjs typescript

【解决方案1】：

在 Typescript 中，您可以使用 Record 实用程序类型将类型的联合映射到字典中的另一种类型。

要获取已定义对象的所有键，您可以使用keyof typeof object，在您的情况下，它会为您提供"root" | "foo"。

因此，如果要将所有键映射到字符串，请使用：

type Classes = Record<keyof typeof styles, string>

【讨论】：

【解决方案2】：

我希望这就是你的意思：

const styles = {
  root: 'value1',
  foo: 'value2'
};

type stylesType = typeof styles;

interface Classes extends stylesType {
  [x: string]: string;
}

现在，当一个对象被键入为 Classes 时，它将具有键 root 和 foo。

灵感来自Types from both keys and values of object in Typescript

【讨论】：