Viele Entwickler sind verwirrt, wenn sie zwischen einer TypeScript-Schnittstelle und einem Typ wählen müssen. Das liegt wahrscheinlich daran, dass sie sich mit kleinen Unterschieden sehr ähnlich sind.
Lassen Sie uns einige sinnvolle Praktiken und Vorgaben erkunden, während wir einige versteckte Juwelen in der TypeScript-Sprache aufdecken und die Frage „Soll ich eine Schnittstelle oder einen Typ verwenden?“
Wenn Sie fertig sind, lesen Sie meinen anderen Artikel über TypeScript-Schnittstellen vs. Klassen!
Hier ist meine Regel: Für Anwendungsfälle wie das Erstellen neuer Typen durch Dinge wie Primitive, Union-Typen und Tupel-Typen verwende ich lieber das type-Schlüsselwort. Für alles andere (Objekte/Arrays) ist es ein interface.
Ein interface ist extrem hilfreich, wenn man es mit Datenstrukturen zu tun hat, da sie eine sehr visuelle Darstellung sind (obwohl es type auch ist, ist das normalerweise meine Präferenz). Es ist völlig in Ordnung, ein type für Ihre Objekte und Arrays zu wählen.
Lassen Sie uns dennoch etwas mehr über Typen vs. Schnittstellen in TypeScript herausfinden, damit Sie eine fundiertere Entscheidung treffen können.
Objekte: Typ vs. Schnittstelle
Typischerweise würden wir eine Datenstruktur definieren, um einen Typ gegen unsere beabsichtigten Variablen und Funktionsargumente zu modellieren. Meistens ist eine Datenstruktur ein Array oder ein Objekt, das ein paar Methoden enthalten kann.
Lassen Sie uns ein Objekt als Schnittstelle erstellen (empfohlener Ansatz):
interface Milkshake { name: string; price: number; getIngredients(): string;}Hier bevorzuge ich die Verwendung einer Schnittstelle, weil es klar ist, dass es sich um eine Schnittstelle und nicht um eine Variable mit zugewiesenen Daten handelt – ein schöner Gewinn an Lesbarkeit. Wir verwenden name und price, um das Setzen von Datensätzen zu ermöglichen, und getIngredients als unseren Methodenaufruf.
🎉 Download it free!
Bereit, über ForEach hinauszugehen? Werden Sie sicher mit fortgeschrittenen Methoden – Reduce, Find, Filter, Every, Some und Map.
-
Verstehen Sie, wie man JavaScript-Datenstrukturen mit unveränderlichen Operationen verwaltet - 31 Seiten mit tiefgehender Syntax, praktischen Beispielen, Tipps und Tricks
- Schreiben Sie innerhalb von 3 Stunden eine sauberere und besser strukturierte Programmierlogik
Als zusätzlichen Bonus schicken wir dir noch ein paar zusätzliche Goodies in ein paar weiteren E-Mails.
Wenn wir das mit einem Typ vergleichen – es könnte aufgrund der Zuordnung = leicht als ein tatsächliches Objekt verwechselt werden:
type Milkshake = { name: string; price: number; getIngredients(): string;};Das ist nur meine kleine Vorliebe für die Wahl eines interface gegenüber der Verwendung eines type hier – aber es steht Ihnen frei, das type-Schlüsselwort zu verwenden, wenn Sie möchten.
Intersecting: Typ vs. Schnittstelle
Intersecting bedeutet einfach, einen oder mehrere Typen zu kombinieren! Dieses Muster kann sowohl mit einem interface als auch mit einem type erreicht werden.
Lassen Sie uns die folgenden Schnittstellen annehmen, ich zeige Ihnen, wie wir ein interface und ein type überschneiden können:
interface MilkshakeProps { name: string; price: number;}interface MilkshakeMethods { getIngredients(): string;}Bei einer Schnittstelle würden wir mit dem Schlüsselwort extends überschneiden. Ich verwende mehrere Schnittstellen, um Ihnen zu zeigen, wie Sie zu einer endgültigen Milkshake-Schnittstelle erweitern (erben) können, die alle an anderer Stelle definierten Eigenschaften und Methoden enthält:
// { name: string, price: number, getIngredients(): string }interface Milkshake extends MilkshakeProps, MilkshakeMethods {}Wir können nun Milkshake überall verwenden, wo wir wollen, und profitieren davon, dass wir name, price und getIngredients in nur einer Schnittstellenreferenz haben.
So würden wir das Gleiche mit einem type machen und die Typen über & schneiden:
// { name: string, price: number, getIngredients(): string }type Milkshake = MilkshakeProps & MilkshakeMethods;Ich würde empfehlen, ein type anstelle eines interface zu verwenden, wenn man Typen schneiden will. Die Verwendung von extends fühlt sich etwas langatmiger an und ist nicht so klar zu lesen, und ich denke, dafür ist das Schlüsselwort type gedacht.
Es ist auch super einfach, mehrere Typen mit type zu kombinieren. Ich finde, der Code ist klarer als mit extends mit Interfaces.
Interfaces sind auch begrenzt – der type Alias kann für komplexere Typen wie Tupel, Primitive, Unions und andere mehr verwendet werden:
// { name: string, price: number, getIngredients(): string }type Milkshake = MilkshakeProps & { getIngredients(): string };Primitive: Typ vs. Schnittstelle
Lassen Sie uns über primitive Typen sprechen. Ja, Strings, Zahlen usw. Sie können einen primitiven Typ nur einem type-Alias zuordnen:
type MilkshakeName = string;interface Milkshake { name: MilkshakeName; price: number;}Wenn Sie einen primitiven Typ verwenden müssen, verwenden Sie einen type. Interfaces sind hier ein No-Go für nur einen einzigen Wert, da die Syntax dies nicht unterstützt.
🎉 Download it free!
Bereit, über ForEach hinauszugehen? Werden Sie sicher mit fortgeschrittenen Methoden – Reduce, Find, Filter, Every, Some und Map.
- Verstehen Sie, wie man JavaScript-Datenstrukturen mit unveränderlichen Operationen verwaltet
- 31 Seiten mit tiefgehender Syntax, praktischen Beispielen, Tipps und Tricks
- Schreiben Sie innerhalb von 3 Stunden eine sauberere und besser strukturierte Programmierlogik
Als zusätzlichen Bonus schicken wir dir noch ein paar zusätzliche Goodies in ein paar weiteren E-Mails.
In den meisten Fällen ist es jedoch einfacher, einfach den primitiven Wert direkt zu verwenden:
interface Milkshake { name: string; price: number;}Verkomplizieren Sie Ihren Code nicht zu sehr!
Klassen: Typ vs. Schnittstelle
Ob Sie sich für ein type oder interface entschieden haben, die Art und Weise, wie wir es mit einer Klasse verwenden, ist die gleiche:
type Size = { size: string};interface Milkshake { name: string; price: number; getIngredients(): string;}class Order implements Size, Milkshake { // Size size = 'large'; // Milkshake name = 'Vanilla'; price = 399; getIngredients() { return ; }}Klassen unterstützen keine Implementierung/Erweiterung von Union-Typen, da sie als statische Blaupausen betrachtet werden. Das bedeutet, dass Sie jeden Typ, den Sie implementieren, sehr genau beschreiben müssen, da er aufgrund der TypeScript-Einschränkungen nicht dynamisch sein oder sich ändern kann.
Erfahren Sie mehr über TypeScript Interfaces vs. Klassen!
Funktionen: Type vs. Interface
Typischerweise würde ich eine Funktion mit dem type-Alias erstellen, da wir meistens eine anonyme Funktion schreiben wollen:
type IngredientsFn = () => string;const getIngredients: IngredientsFn = () => ;Wenn Sie jedoch ein interface für diese Funktion verwenden möchten, sehen Sie hier, wie Sie das machen:
interface IngredientsFn { () => string;}Es fühlt sich nur ein wenig seltsam an, verglichen mit der Verwendung von type, aber auch hier sind beide völlig gültig TypeScript und es gibt keinen Unterschied, wenn der Code kompiliert wird.
Wann sollte man keinen Typ verwenden
Nachdem wir die verschiedenen Vergleiche und empfohlenen Ansätze untersucht haben, ist es an der Zeit, über Declaration Merging zu sprechen, eine Funktion in TypeScript, die nur für interface gilt und ein Grund wäre, einen interface einem type vorzuziehen.
Um Typen mit type zu verschmelzen, müssten wir etwa so vorgehen und ein neues finales type erstellen:
type MilkshakeProps = { name: string; price: number;};type MilkshakeMethods = { getIngredients(): string;};type Milkshake = MilkshakeProps & MilkshakeMethods;Unser type Milkshake ist jetzt ein Typ-Alias von MilkshakeProps und MilkshakeMethods. Man beachte, dass wir, um dieses Verhalten zu erreichen, Milkshake erstellen mussten, was uns 3 individuelle Typ-Aliase beschert.
Bei Schnittstellen gibt es in der Tat einen klügeren Ansatz (manche würden sagen, ein bisschen zu klug), der sich Deklarationszusammenführung nennt.
Wir können eine Deklarationsverschmelzung erreichen, indem wir einfach dasselbe interface zweimal im selben Bereich deklarieren (dies kann entweder durch den Import der Schnittstelle aus einem anderen Modul oder durch die lokale Deklaration neben einer anderen Schnittstelle geschehen):
// declared once...interface Milkshake { name: string; price: number;}// declared again the same, it works!interface Milkshake { getIngredients(): string;}// { name: string, price: number, getIngredients(): string }const milkshake: Milkshake = { name: 'Banana', price: 399, getIngredients() {...}};Milkshake enthält nun name, price und getIngredients! Aber ist die Zusammenlegung von Erklärungen eine gute Sache? Ich bin ehrlich gesagt kein Fan davon, und ich habe das Gefühl, dass es mehr schaden als nützen könnte. Ich würde die Typen eher durch type zusammensetzen, als die Deklarationszusammenführung zu benutzen – aber wenigstens kennst du jetzt die Hauptunterschiede.
Schlussfolgerung
So, da hast du es! Die Hauptunterschiede zwischen Typen und Interfaces in TypeScript.
Zusammenfassend und mit einigen persönlichen Vorlieben würde ich bei einem interface für Objekte bleiben und das type Alias-Schlüsselwort verwenden, um neue Typen spontan zu komponieren. Diese neuen Typen könnten sogar aus Schnittstellen oder anderen Typen wie Tupeln, Unions und Schnittpunkttypen bestehen. Es gibt viele Möglichkeiten, aber wenn wir die Ansätze verstehen, können wir das richtige Werkzeug auswählen.
Im Großen und Ganzen sind Schnittstellen und Typen ziemlich gleich, abgesehen von ein paar Unterschieden, die hier behandelt werden. Ich hoffe, die Lektüre hat Ihnen Spaß gemacht!
Wenn Sie es mit Ihren TypeScript-Kenntnissen ernst meinen, ist Ihr nächster Schritt, einen Blick auf meine TypeScript-Kurse zu werfen, sie werden Ihnen die vollen Sprachgrundlagen im Detail sowie viele fortgeschrittene Anwendungsfälle beibringen, die Sie in der täglichen TypeScript-Entwicklung benötigen!
Viel Spaß beim Programmieren!
