Typescript，聲明不同類型的嵌套對象的最佳方法是什麼？

Question

我有這樣的JS對象，我想將它移植到打字稿：

var items = [{ 
     style: 'activity-8', 
     color: '#a32c62', 
     id: 8, 
     done : false, 
     label : { 
     short :'999 m', 
     long :'walk 999m', 
     statstime :'yesterday' 
     }, 
     val : { 
     today : { 
      target : { 
      raw : 0, 
      display :"11" 
      }, 
      achieved : { 
      raw : 0, 
      display :"22" 
      } 
     }, 
     yesterday : { 
      target : { 
      raw : 0, 
      display :"33" 
      }, 
      achieved : { 
      raw : 0, 
      display :"44" 
      } 
     } 
     } 
    },{ 
     style: 'activity-7', 
     color: '#ec575d', 
     id: 7, 
     done : true, 
     label : { 
     short :'walk 555m', 
     long :'walk 555m', 
     statstime :'yesterday' 
     }, 
     val : { 
     today : { 
      target : { 
      raw : 0, 
      display :"0" 
      }, 
      achieved : { 
      raw : 0, 
      display :"0" 
      } 
     }, 
     yesterday : { 
      target : { 
      raw : 0, 
      display :"0" 
      }, 
      achieved : { 
      raw : 0, 
      display :"0" 
      } 
     } 
     } 
    }]; 

什麼聲明此對象類型的最佳方法？我應該寫下每個領域的類型嗎？或者創建一個自定義類型？任何其他建議？

Answer 1

我不知道這是否是「最好」的方式，但我會舉例說明我的做法。

我會盡量解釋我的一般規則不僅對嵌套對象：

對於所有這些基本類型（字符串，數字，布爾或某物的一些陣列）可以讓他們像這樣的屬性，但對於每一個複雜的屬性/嵌套對象，從現在開始，我將稱之爲「複雜屬性」（因爲它對我來說更有意義），您將創建一個接口，它將是屬性的類型。

例如：在你的情況下，val屬性是一個'複雜'屬性，所以讓我們分割它，從下到上。

在Val屬性的最小複雜屬性是target，所以你創建一個名爲目標的接口（或ITarget它不完全是一個慣例做，在TS）目標將是這樣的：

interface Target { 
    raw: number, 
    display: string 
} 

你對achieved'複雜'屬性做同樣的事情。

現在你可以上一層了。 Today屬性也是一個'複雜'屬性，所以它必須有一個類型，可能會是某種類型的接口。由於我們以前的工作，界面看起來像：

interface Day { 
    target: Target, 
    achieved: Achieved 
} 

你可能想知道爲什麼接口被稱爲天，而不是今天，很好的原因是，你必須找出什麼是yesterday'的類型複雜「的財產。如您所見，您可以看到它與today屬性的屬性相同，因爲它具有相同的屬性。

所以最後val財產，這是我們的目標將有它自己的界面，將是這樣的：你每一個其他「複雜」屬性做同樣的事情

interface Val { 
    today: Day, 
    yesterday: Day 
} 

下一步。

現在你可以在你的主對象中使用那些可能是一個類，它的屬性類型將是那些接口。

不要忘記，ts中的接口（不僅僅是）只是幫助組織代碼設計的'幫助'工具。大多數情況下，每個接口都必須有一個實現該接口的類。這些是您將用於實際設置一些值到這些屬性的類。