So organisieren Sie TypeScript-Schnittstellen [geschlossen]


75

Ich würde gerne wissen, wie die Schnittstellendefinitionen in Typoskript empfohlen werden. In meinem Projekt habe ich viele verschiedene Klassen. Jede Klasse kann eine Konfigurationsschnittstelle haben. Derzeit habe ich alle diese Schnittstellendefinitionen in einer Datei zusammengefasst Interfaces.tsund verweise von verschiedenen Speicherorten auf die Datei.

Gibt es einen besseren Weg?

Beispiel: https://github.com/blendsdk/blendjs/blob/devel/blend/src/common/Interfaces.ts


5
Bis so etwas wie StyleCop für TypeScript existiert, gilt wahrscheinlich das Argument für "persönliche Präferenz" (solange Ihr Code kompiliert wird). Meine persönliche Präferenz ist es, alles in eine eigene Datei aufzuteilen, dh die Schnittstelle IValidatable würde in IValidatable.ts gespeichert. Ja, Sie haben im Wesentlichen eine ganze Reihe von Dateien, aber dies sollte die Wartbarkeit im Laufe der Zeit verbessern.
Matthew Layton

Antworten:


73

Global

Das TypeScript-Team verwendet eine Datei mit dem Namen types.ts: https://github.com/Microsoft/TypeScript/blob/master/src/compiler/types.ts

Ich mache dasselbe in meinem Projekt, zB https://github.com/alm-tools/alm/blob/master/src/common/types.ts

Alternative

Es ist in Ordnung , wenn Teile mit hoher Wiederverwendung dazugehören types, verschmutzen Sie sie jedoch nicht mit bestimmten Typen. Bestimmte Typen können (sollten) näher an ihrer Referenz sein, z. B. Requisiten für Reaktionsstile gehören neben (in derselben Datei wie) der Reaktionskomponente.

React Component Prop Type / React Component


16
Danke, das war wirklich hilfreich! Ich frage mich, ob Sie die Typdefinitionen types.tsin den globalen Namespace einfügen oder auf types.tsjede Datei verweisen , die ihre Typen verwendet.
Rotareti

1
@basarat irgendein Update zu Rotaretis Frage? Ich bin neugierig, das auch zu wissen.
Chasen Bettinger

6
do you reference types.ts from every file that uses its typesBevorzugen Sie immer Referenz. Globals skalieren nie 🌹
Basarat

8
Ist dies wirklich eine bessere Möglichkeit, Typen zu organisieren? Eine Datei mit mehr als 6000 Zeilen und allen Typen sieht nicht sehr wartbar aus. Vielleicht ist es besser, sie nach Komponenten aufzuteilen.
Chris

1
Bei allem Respekt @basarat bin ich nicht damit einverstanden, Typen auf diese Weise zu organisieren. Sicher, wir sind alle in der Lage, STRG + F zu verwenden, aber warum nicht diese genauer organisieren? Verwenden Sie einfach eine Typdatei für jedes Feature oder jeden Abschnitt des Projekts. Immer wenn ich eine Datei mit mehr als 700 Codezeilen sehe, fühle ich mich schlecht für den armen Entwickler, der alles durchgehen muss.
jmkmay

22

Ich mag es, meine Apps so zu strukturieren:

|-- app
    |-- components
    |-- directives
    |-- services
    |-- interfaces
        |-- <feature/component name>
            |-- <interface name>.interface.ts

5
Dieser Ansatz kann sehr schwierig zu skalieren sein. Eine bessere Option könnte der Colocation-Ansatz sein . Um eine wartbarere Codebasis zu ermöglichen, sollten wir unsere Typ- / Schnittstellendateien zusammen mit der Datei oder Gruppe von Dateien suchen, die sie implementieren.
Cristian Flórez

9

Meine Projekte sind so aufgebaut

src/
└── ts
    ├── enums
    │   ├── app_enums.ts
    │   └── db_enums.ts
    ├── interfaces
    │   ├── app_interfaces.ts
    │   ├── db_interfaces.ts
    │   └── global_interfaces.ts
    └── types
        └── app_types.ts

2
Was ist der Unterschied zwischen dem Ordner interfacesund types?
lion_bash

@lion_bash Verzeichnisnamen drücken ihren Zweck gut aus. interfacesVerzeichnis enthält alle Schnittstellen und Typen Verzeichnis enthält alle Typ-Aliase, die Sie in Ihrem Projekt verwenden. Sie können diese Verzeichnisse zusammenführen, wenn Sie möchten, aber ich fand, dass die semantische und strukturelle Aufteilung von Typen bei der Verwaltung großer Codebasen sehr hilfreich ist. Versuchen Sie herauszufinden, was für Sie am besten funktioniert. Es gibt keine goldene Regel, wenn es um die Struktur des
Projektverzeichnisses geht
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.