TypeScript中访问interface内部的类型（可用于嵌套复杂的数据的interface的定义）

有如下的商品数据需要声明interface

"price": 2343,
"categoryView": {
  "category1Id": 2,
  "category1Name": "手机"
},
"spuSaleAttrList": [
  {
    "saleAttrName": "颜色",
    "spuSaleAttrValueList": [
      {
        "saleAttrName": "颜色",
        "saleAttrValueName": "青"
      }
        {
        "saleAttrName": "颜色",
        "saleAttrValueName": "蓝"
      }
    ]
  },
  {
    "saleAttrName": "版本",
    "spuSaleAttrValueList": [
      {
        "saleAttrName": "版本",
        "saleAttrValueName": "全网通"
      },
      {
        "saleAttrName": "版本",
        "saleAttrValueName": "电信"
      },
      {
        "saleAttrName": "版本",
        "saleAttrValueName": "移动"
      }
    ]
  }
],
"skuInfo": {
	"price":2343,
  "skuSaleAttrValueList": [
    {
      "saleAttrName": "颜色",
      "saleAttrValueName": "蓝"
    },
    {
      "saleAttrName": "版本",
      "saleAttrValueName": "全网通"
    }
  ]
}

interface声明

其中的price和categoryView都还好说，都是单层的，直接声明即可，而spuSaleAttrList则为数组内套对象，skuInfo为对象内套数组，然后数组内再套对象。

通常考虑可以将数组内的对象进行单独声明一个interface，然后再嵌套进去，不过不利于表现各层级数据间的嵌套关系，所以考虑只声明一个interface：

interface goodInfo {
  "price": number,
  "categoryView": {
    "category1Id": number,
    "category1Name": string
  },
  "spuSaleAttrList": Array<
    {
      "saleAttrName": string,
      "spuSaleAttrValueList": Array<{
        "saleAttrName": string,
        "saleAttrValueName": string
      }>
    }>
  ,
  "skuInfo": {
    "price": number,
    "skuSaleAttrValueList": Array<{ // 和上面的"spuSaleAttrValueList"的结构实际上是一样的
      "saleAttrName": string,
      "saleAttrValueName": string
    }>
  }
}

但是注意spuSaleAttrList[].spuSaleAttrValueList和skuInfo.skuSaleAttrValueList的结构实际上是完全一样的，则可以单独定义一个interface，然后这两处都设置为同一interface即可。不过我这里依然为了保证完整表现各层级数据的嵌套关系，依然不单独定义interface，而是直接让skuInfo.skuSaleAttrValueList访问并设置为和spuSaleAttrList[].spuSaleAttrValueList相同的interface：

interface goodInfo {
  "price": number,
  "categoryView": {
    "category1Id": number,
    "category1Name": string
  },
  "spuSaleAttrList": Array<
    {
      "saleAttrName": string,
      "spuSaleAttrValueList": Array<{
        "saleAttrName": string,
        "saleAttrValueName": string
      }>
    }>
  ,
  "skuInfo": {
    "price": number,
		// 通过 interface["属性名"] 和 array[0] 的形式即可访问到已经定义的interface内部属性和数组的类型
    "skuSaleAttrValueList": goodInfo["spuSaleAttrList"][0]['spuSaleAttrValueList'] 
  }
}

同样的，除了定义interface时可以这样做，在设置变量类型时也可以这样访问interface内部的类型：

const saleAttrName: goodInfo["spuSaleAttrList"][0]['spuSaleAttrValueList'][0]['saleAttrName'] = "saleAttrName"