如何在打字稿界面添加变量作为键名？

Question

这就是我的对象的样子。这是非常小的对象版本，我必须处理大对象。

const obj = {
    name: 'name_key',
    details: 'details_key',
    profile: 'profile_key',
}

因此，如果我们想在另一个对象中使用该对象的值，那么我们可以像这样使用它：

const newObj = {
    [obj.name]: 'some_value',
    [obj.details]: 'some_value',
    [obj.profile]: 'some_value',
}

所以，这里 newObj 会变成这样：

newObj = {
    'name_key': 'some_value',
    'details_key': 'some_value',
    'profile_key': 'some_value',
}

同样的方式，我想将它与界面一起使用，但我无法这样做。

interface User {
    [obj.name]: string;
    [obj.details]: DetailsInterface;
    [obj.profile]: ProfileInterface;
}

我已经尝试过这种方法，但它会抛出错误，例如“接口中的计算属性名称必须引用其类型为文字类型或“唯一符号”类型的表达式。” 这里DetailsInterface和ProfileInterface也是接口。

我尝试过联合方法，但它不起作用，因为所有键都有不同类型的接口或数据类型。

Answer 1

我找到了解决方案。我们定义的对象是可变的。所以如果我们使用 like

const obj = {
    name: 'name_key',
    details: 'details_key',
    profile: 'profile_key',
} as const;

它变得不可变，并且所有字段都有字符串值。 现在我们可以使用这个对象字段作为界面中的计算键名称，如下所示

interface User {
    [obj.name]: string;
    [obj.details]: DetailsInterface;
    [obj.profile]: ProfileInterface;
}

最终 User 界面变成了这样

interface User {
    name_key: string;
    details_key: DetailsInterface;
    profile_key: ProfileInterface;
}

Answer 2

您无法为运行时定义的内容创建强类型接口，这不是 TypeScript 的工作原理。

您可以做的是拥有一个更广泛的接口/类型定义来与之匹配

obj

，如下所示：

type User = Record<string, any>

---

但是如果

obj

是静态定义的，您可以从中生成一个接口，如下所示：

我不确定这是否是您正在寻找的。