Typescript, was ist der beste Ansatz, um ein verschachteltes Objekt mit verschiedenen Typen zu deklarieren?

Question

Ich habe dieses Objekt JS und ich möchte die Portierung auf Typoskript:

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" 
      } 
     } 
     } 
    }]; 

was ist der beste Ansatz, diesen Objekttyp zu erklären? soll ich die Typen für jedes Feld aufschreiben? Oder erstellen Sie einen benutzerdefinierten Typ? Irgendwelche anderen Vorschläge?

Answer 1

Ich weiß nicht, ob es der "beste" Weg ist, aber ich werde Ihnen ein Beispiel geben, wie ich das mache.

Ich werde versuchen, meine Regel zu erklären, nicht nur für verschachtelte Objekte:

Für alle Eigenschaften, die Basistyp sind (string, number, boolean oder ein Array von etwas) Sie können sie so verlassen, aber Für jede andere komplexe Eigenschaft/verschachteltes Objekt, die ich von nun an 'Komplexe Eigenschaft' nennen werde (weil es für mich mehr Sinn macht), machst du eine Schnittstelle, die der Typ der Eigenschaft sein wird.

Beispiel: In Ihrem Fall ist die Eigenschaft val eine 'komplexe' Eigenschaft, also teilen wir sie, beginnend von unten nach oben.

Die kleinste komplexe Eigenschaft im val Eigenschaft ist target, so dass Sie eine Schnittstelle namens Ziel machen (oder ITarget ist es nicht gerade eine Konvention, die in ts zu tun) Ziel etwas sein wie:

interface Target { 
    raw: number, 
    display: string 
} 

Sie Machen Sie dasselbe für die "komplexe" Eigenschaft achieved.

Jetzt können Sie eine Ebene höher gehen. Today Eigenschaft ist auch eine 'komplexe', so muss es einen Typ haben, der wahrscheinlich eine Art von Schnittstelle sein wird. Dank unserer bisherigen Arbeit wird die Schnittstelle wie folgt aussehen:

interface Day { 
    target: Target, 
    achieved: Achieved 
} 

Sie wahrscheinlich fragen sich, warum die Schnittstelle Tag aufgerufen wird und nicht heute auch der Grund ist, dass Sie herausfinden müssen, was die Art des yesterday ist ' komplexe Eigenschaft. Wie Sie sehen, können Sie sehen, dass es sich um den gleichen Typ wie die today-Eigenschaft handelt, da sie dieselben Eigenschaften aufweist.

So endlich die val Eigenschaft, dass es unser Ziel war, wird seine eigene Schnittstelle, die so etwas wie sein:

interface Val { 
    today: Day, 
    yesterday: Day 
} 

Weiter Sie die gleiche Sache für jede andere ‚komplexe‘ Eigenschaft zu tun.

Jetzt können Sie diejenigen in Ihrem Hauptobjekt verwenden, die wahrscheinlich eine Klasse sein wird und seine Eigenschaften werden diese Schnittstellen sein.

Vergessen Sie nicht, dass die Schnittstelle in ts (und nicht nur) nur ein "helfendes" Werkzeug ist, das nur hilft, Ihr Code-Design zu organisieren. Jede Schnittstelle sollte die meiste Zeit über eine Klasse haben, die diese Schnittstelle implementiert. Und das sind die Klassen, die Sie verwenden werden, um einige Werte für diese Eigenschaften festzulegen.