为接口中的每个未知属性赋予特定类型并保留已定义属性的静态类型答案

【问题标题】：Give every unknown property in an interface a specific type and retain the static type of defined properties为接口中的每个未知属性赋予特定类型并保留已定义属性的静态类型
【发布时间】：2020-10-09 05:47:03
【问题描述】：

我有一个将选项对象作为参数的函数。

const newEvent = (option: Option): void => {
  // does something with the config
}

Option 应该有一些可选和非可选属性。

interface Option {
  host: string;
  date: Date;
  onStart?: () => any;
  pizza?: boolean;
  ...
}

它还应该具有至少 2 个附加属性，其属性名称是动态的，其值遵循 AttendeeOption 的形状。

interface AttendeeOption {
  vip: boolean;
  allergy?: string;
  address?: string;
}

直觉上，我试着把它们放在一起：

interface Option {
  host: string;
  date: Date;
  onStart?: () => any;
  pizza?: boolean;
  [name: string]: AttendeeOption
}

使用这样的字符串索引签名不起作用，因为现在所有属性都需要符合AttendeeOption 类型。

第二次尝试，我尝试让Option和Attendee相交：

interface Attendee {
  [name: string]: AttendeeOption
}

const newEvent = (option: Option & Attendee): void => {
  // does something with the config
}

界面错误暂时消失了，

newEvent({
  host: 'Professor Oak',
  date: new Date(2021, 1, 3),
  'Ash': {vip: true, address: 'Pallet Town'},
  'Brock': {vip: true, address: 'Pewter City'},
  'Misty': {vip: true, address: 'Cerulean City'},
})

当我测试它时，Ash、Brock、May 属性出现错误：Object literal may only specify known properties, and ''Ash'' does not exist in type 'Option'

任何关于如何解决此问题的想法将不胜感激。谢谢！

【问题讨论】：

你想要microsoft/TypeScript#17867，但它不是语言的一部分。您可以执行以下操作：
this
如果这对您有用，我可以扩展为答案；否则请详细说明。祝你好运！
@jcalz 我测试了它，它确实有效！（除了它还允许数字作为属性名称）。请将其扩展为答案，并请解释其工作原理。谢谢。

标签： javascript typescript interface

【解决方案1】：

我不知道这是不是你想要的。但你可以使用AttendeeOption的数组。你可以将名称添加到AttendeeOption。

选项界面

  interface Option {
  host: string;
  date: Date;
  onStart?: () => any;
  pizza?: boolean;
  Attendees: AttendeeOption[]

AttendeeOption 接口

interface AttendeeOption {
    name?: string;
  vip: boolean;
  allergy?: string;
  address?: string;
}

你的对象可以是这样的

{
  host: 'Professor Oak',
    date: new Date(2021, 1, 3),
      Attendees : [
        {name: 'name1',vip: true, address: 'Cerulean City'},
        {name: 'name2',vip: true, address: 'Cerulean City'},
        {name: 'name3',vip: true, address: 'Cerulean City'}
      ]

}

【讨论】：