reactjs - 强制对象数组中的每个对象都具有相同的形状

Question

我使用的是 TypeScript 3.2.2，我有一个接受对象数组的 React 组件。这些对象是通用的，但有一些异常(exception):它们不能嵌套，并且必须都是相同的形状。例如:

const entries = [
    {title: "foo", description: "bar", message: "hello"},
    {title: "something", description: "a thing", message: "thing"},
    {title: "hello", description: "greeting", message: "greetings!!"}
]

除此之外，我不关心对象的内容。他们可以拥有任意数量的属性，属性可以有任何名称，它们的值可以是任何类型。但是，如果其中一个对象缺少一个条目或有一个额外的条目，或者它包含另一个对象，组件就会中断。

有没有办法在 TypeScript 类型系统中表达这种需求？

Answer 1

你可以这样做:

interface MyObject {
  [key: string]: string | number | boolean | undefined | null
}

基本上允许任何键的原始值，只要该键是字符串类型。这确保没有嵌套对象或数组(尽管您可以将 Array 作为类型包含在内)

您还可以显式定义您可能期望的属性，以便从智能感知中获益并获得一些额外的类型安全性:

interface MyObject {
  [key: string]: string | number | boolean | undefined | null;
  title?: string;
  description?: string;
  message?: string;
}

既然您已经将对象表示为接口(interface)，那么可以通过两种方式将任何值声明为这种类型的数组:

Array<MyObject>

或

MyObject[]

我更喜欢后者，有些人更喜欢前者。这只是一个品味问题，因为它们都表达了给定值是仅包含指定类型成员的数组的想法。