爲什麼Javascript對象顯示如此多層次的層次結構？如何正確聲明和訪問它？

Question

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); 

然後初始化狀態複製到渠道， 各地申報的替代方法的任何建議是也歡迎，但請注意我必須保持上述兩個作爲接口比類能夠與觀測使用。

然後在控制檯時，我嘗試使用：

Answer 1

接口是打字稿的，使強大的工具，靜態類型檢查，並表達的API在一個乾淨的聲明的方式能力的編譯時間功能。像TypeScript的所有方面一樣，它們不會在編譯後的輸出中顯示出來。輸出只是JavaScript。

此外，你有什麼是分層的數據結構。它是Object s的Array。調試器允許擴展數組的內容，然後使用方便的基於樹的可視化方法擴展每個對象的內容。只需使用成員訪問符號 - .property或['property']即可在沒有調試器的情況下獲得相同的信息。

減少這種嵌套的唯一方法是嵌套到較小程度。

但是，我不確定爲什麼你想這樣做。

您擁有的代碼看起來非常合理。你的界面名稱顯示不好的風格，Interface後綴應該放棄，因爲它是非常單一的，但除此之外，我沒有看到具體的理由。

有一點值得注意的是，它似乎有一個額外的財產築巢的水平。這使得API使用起來有些尷尬。沒有看到更多的代碼很難說，但你可能有像

const channels = { nowChannelList: initialState }; 

某處。

這可以被改寫爲

const channels = { nowChannelList: initialState.nowChannelList }; 

渠道本身就可以簡化成

const channels = initialState.nowChannelList; 

，但我相信你寫的是有原因的這種方式。

以下是較少嵌套代碼的一個例子，只是爲了闡明

const initialState = { 
 
    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 
 
    } 
 
    ] 
 
}; 
 

 
const channels = initialState.nowChannelList; 
 

 
console.log(channels);