为什么Javascript对象显示了这么多层次结构？如何正确声明和访问它？

然后将initialState复制到通道， 任何关于声明的替代方法的建议都是受欢迎的，但请注意，我必须将以上两个作为接口而不是类，以便能够将其用于可观察对象

然后在控制台中，当我尝试使用：

---

接口是typescript的编译时功能，支持强大的工具、静态类型检查和以干净的声明方式表达API的能力。与TypeScript的所有方面一样，它们不在编译输出中显示。输出只是JavaScript

此外，您拥有的是分层数据结构。它是

对象的
数组
。调试器允许扩展数组的内容，然后使用方便的基于树的可视化方法扩展每个对象的内容。只要使用成员访问符号-
.property
或
['property']
，就可以在没有调试器的情况下获得相同的信息

减少这种嵌套的唯一方法是将嵌套程度降低

然而，我不知道你为什么要这样做

您拥有的代码看起来非常合理。您的接口名称风格不佳，应该删除
接口
后缀，因为它非常不符合风格，但除此之外，我看不出有什么特别的原因值得关注

值得注意的一点是，您似乎有一个额外的属性嵌套级别。这使得API使用起来有点笨拙。如果看不到更多的代码，很难说出来，但您可能有类似的代码

export interface NowChannelInterface {
  id: number;
  name: string;
  isSelected: Boolean;
}

export interface NowChannellistInterface {
  nowChannelList: NowChannelInterface[];
}

const initialState: NowChannellistInterface = {
  nowChannelList: [
    {
      id: 0,
      name: 'CNN',
      isSelected: true
    },
    {
      id: 1,
      name: 'BBC',
      isSelected: true
    },
    {
      id: 2,
      name: 'NDTV',
      isSelected: true
    },
    {
      id: 3,
      name: 'QTV',
      isSelected: true
    }
  ]
};

state: NowChannellistInterface = initialState;
const chx: any = { id: 1, name: 'BBC', isSelected: true};
cur_channel: NowChannelInterface = chx;
channels: any = state
console.log(channels);

某处

这可以改写为

const channels = { nowChannelList: initialState };

频道本身可以简化为

const channels = { nowChannelList: initialState.nowChannelList };

但我想你这样写是有原因的

下面是一个嵌套较少的代码示例，只是为了澄清一下


const initialState={
现在频道列表：[
{
id:0，
姓名:"CNN",，
是的
},
{
id:1，
姓名：“BBC”，
是的
},
{
id:2，
名称：'NDTV'，
是的
},
{
id:3，
名称：“QTV”，
是的
}
]
};
const channels=initialState.nowChannelList；
控制台日志（通道）接口是typescript的编译时功能，支持强大的工具、静态类型检查和以干净的声明方式表达API的能力。与TypeScript的所有方面一样，它们不在编译输出中显示。输出只是JavaScript

此外，您拥有的是分层数据结构。它是
对象的
数组
。调试器允许扩展数组的内容，然后使用方便的基于树的可视化方法扩展每个对象的内容。只要使用成员访问符号-
.property
或
['property']
，就可以在没有调试器的情况下获得相同的信息

减少这种嵌套的唯一方法是将嵌套程度降低

然而，我不知道你为什么要这样做

您拥有的代码看起来非常合理。您的接口名称风格不佳，应该删除
接口
后缀，因为它非常不符合风格，但除此之外，我看不出有什么特别的原因值得关注

值得注意的一点是，您似乎有一个额外的属性嵌套级别。这使得API使用起来有点笨拙。如果看不到更多的代码，很难说出来，但您可能有类似的代码

export interface NowChannelInterface {
  id: number;
  name: string;
  isSelected: Boolean;
}

export interface NowChannellistInterface {
  nowChannelList: NowChannelInterface[];
}

const initialState: NowChannellistInterface = {
  nowChannelList: [
    {
      id: 0,
      name: 'CNN',
      isSelected: true
    },
    {
      id: 1,
      name: 'BBC',
      isSelected: true
    },
    {
      id: 2,
      name: 'NDTV',
      isSelected: true
    },
    {
      id: 3,
      name: 'QTV',
      isSelected: true
    }
  ]
};

state: NowChannellistInterface = initialState;
const chx: any = { id: 1, name: 'BBC', isSelected: true};
cur_channel: NowChannelInterface = chx;
channels: any = state
console.log(channels);

某处

这可以改写为

const channels = { nowChannelList: initialState };

频道本身可以简化为

const channels = { nowChannelList: initialState.nowChannelList };

但我想你这样写是有原因的

下面是一个嵌套较少的代码示例，只是为了澄清一下


const initialState={
现在频道列表：[
{
id:0，
姓名:"CNN",，
是的
},
{
id:1，
姓名：“BBC”，
是的
},
{
id:2，
名称：'NDTV'，
是的
},
{
id:3，
名称：“QTV”，
是的
}
]
};
const channels=initialState.nowChannelList；
控制台日志（通道）我首先不明白这个层次结构是如何生成的，
nowChannelList>nowChannelList>nowChannelList>nowChannelList
。我刚刚做了
channels=initialState
您希望
channels
包含什么？如果你不想筑巢，就不要筑巢。即写入
channels=initialState.nowChannelList。听起来你好像有个bug，正在编写
channels={nowChannelList:initialState}这是获得输出的唯一方法。我添加了更多的代码，简化的非类型js工作得很好，正如您所看到的，但是typescript中的类型分配和类型转换会把事情搞砸。找到问题了。chrome正在缓存过去的状态。即使是硬加载也不起作用。以匿名模式打开服务器解决了这个问题。现在也没有对象的层次结构。它是由浏览器缓存的一些初始代码引入的。我一开始不理解这个层次结构是如何生成的，
nowChannelList>nowChannelList>nowChannelList>nowChannelList
。我刚刚做了
channels=initialState
您希望
channels
包含什么？如果你不想筑巢，就不要筑巢。即写入
channels=initialState.nowChannelList。听起来你好像有个bug，正在编写
channels={nowChannelList:initialState}这是获得输出的唯一方法。我添加了更多的代码，简化的非类型js工作得很好，正如您所看到的，但是typescript中的类型分配和类型转换会把事情搞砸。找到问题了。chrome正在缓存过去的状态。即使是硬加载也不起作用。以匿名模式打开服务器解决了这个问题。现在也没有对象的层次结构。它是由浏览器缓存的一些初始代码引入的。