如何在 Typescript 中定义一个接受零个或多个动态命名属性的接口

Question

我有一个看起来像这样的界面：

export interface ReportingNodeConfig {
  template: string;
  dashboardName: string;
  dashboardDescription: string;
  reportUrlSelect: SelectProps.Option;
  platformSelect: SelectProps.Option;
}

什么是正确的模式来强制执行我上面定义的接口，同时允许匹配特定类型的附加动态属性？

换句话说，我如何定义一个接口以要求其中的所有属性都存在，但还允许零个或多个特定类型但动态键名的附加属性。

附加值可能遵循模式[key: string]: string

实际的 object 如下所示：

{
  template: "test",
  dashboardName: "foo",
  dashboardDescription: "bar"
  reportUrlSelect: "test1"
  platformSelect: "hello world",
  dynamicallyGeneratedAttr: "I might not always be here",
  anotherDynamicAttr: "I'm also not guaranteed to be here all the time"
}

我知道我可以扩展接口并且还阅读了有关接口的动态键的信息，但在这种情况下动态键不起作用。

谢谢你。

Answer 1

记录

Record<Keys, Type>构造一个 object 类型，其属性键为 Keys，其属性值为 Type。 此实用程序可用于将 map 一种类型的属性转换为另一种类型。

在TS Docs中有更好的解释。

解决方案

您可能想使用Record<string, string>

Answer 2

您可以合并索引签名：

type Foo = ReportingNodeConfig & { [key: string]: string | undefined }

测试它：

declare const foo: Foo

foo.template // string
foo.reportUrlSelect // SelectProps.Option

if (foo.someUnknownPropHere) {
    foo.someUnknownPropHere // string here
}

但是，您肯定希望它解析为带有undefined的联合，因为当您查找这些属性时，您无法确定它们是否真的存在。

操场

---

也就是说，如果您可以更改此数据 model，那么您可能应该这样做。 如果您有自由形式的属性名称，那么它们很可能是完全不同类型的数据，应该存储在嵌套的 object 中。

比如说：

export interface ReportingNodeConfig {
  template: string;
  dashboardName: string;
  dashboardDescription: string;
  reportUrlSelect: SelectProps.Option;
  platformSelect: SelectProps.Option;
  customData: Record<string, string | undefined>
}

现在，您可以在customData中填入您想要的任何内容，而不会污染可静态验证的属性名称。