TS接口静态名称和[key:string]答案

【问题标题】：TS interface static name and [key: string]TS接口静态名称和[key:string]
【发布时间】：2021-07-09 11:53:14
【问题描述】：

interface P{
  data: {
    sub: number
    [key: string]: {
      arr: Array<number>
    }
  }
}

我的数据可能是

data = { 
  sub: 1,
  DYNAMIC1: [1,2,3],
  DYNAMIC2: [3,4,5]
}

或

data = { 
  sub: 1,
  RANDOM1: [3],
  DYNAMIC1: [9,0,0]
}

我的 IDE 抛出此错误消息

'number' 类型的属性 'sub' 不能分配给字符串索引类型 '{ arr: number[]; }'.ts(2411)

如何才能同时使用静态属性名和动态

添加

我已经使用了|，但另一个代码仍然出错。

{
  data[key].map((num:number, index:number)=> ...) // key can not be `sub`. key always be the type `Array<number>`
}

上面的代码抛出这个错误信息

类型“数字”上不存在属性“地图”|数字[]'。类型 'number'.ts(2339) 上不存在属性 'map'

【问题讨论】：

【解决方案1】：

您正在定义一个索引签名，它强制所有属性的返回类型与索引签名返回类型相匹配。但是，您可以使用联合运算符来修复它，例如

interface P {
  data: {
    [key: string]: number | Array<number>;
  };
}

如果要将sub 保留为定义的属性，则必须使用number 的具体类型扩展索引，例如

interface P{
  data: {
    sub: number
    [key: string]: Array<number> | number
  }
}

【讨论】：

我尝试添加|，但无法使用。我会补充我的问题。
@zynkn 这是一个不同的错误。您不能在number 上致电.map()。您必须输入检查您的data[key]，例如hasOwnProperty("map")
是的，我知道我不能在 number 类型上调用 map() 我不想这样做。我想我需要稍微修改一下我的代码。

【解决方案2】：

您可以使用Type Intersection，如下所示：

type P = {
  data: {
    [key: string]: number | Array<number>;
  } & {
    sub: number
  };
}

【讨论】：