Mögliche Typen in Typescript erweitern?

153

Angenommen, ich habe den folgenden Typ:

type Event = {
   name: string;
   dateCreated: string;
   type: string;
}

Ich möchte diesen Typ jetzt erweitern, dh

type UserEvent extends Event = {
   UserId: string; 
}

Das funktioniert nicht. Wie kann ich das machen?

Kousha
quelle
3
Das typeSchlüsselwort wird verwendet, um Typaliasnamen zu definieren , keine Schnittstellen oder Klassen.
Heretic Monkey

Antworten:

281

Das Schlüsselwort extendskann nur für Schnittstellen und Klassen verwendet werden.

Wenn Sie nur einen Typ mit zusätzlichen Eigenschaften deklarieren möchten, können Sie den Schnittpunkttyp verwenden :

type UserEvent = Event & {UserId: string}

UPDATE für TypeScript 2.2 ist es jetzt möglich, eine Schnittstelle zu haben, die den objektähnlichen Typ erweitert , wenn der Typ einige Einschränkungen erfüllt:

type Event = {
   name: string;
   dateCreated: string;
   type: string;
}

interface UserEvent extends Event {
   UserId: string; 
}

Es funktioniert nicht umgekehrt - UserEventmuss als Schnittstelle deklariert werden, nicht als Schnittstelle, typewenn Sie extendsSyntax verwenden möchten .

Und es ist immer noch unmöglich, extend mit beliebigen Typen zu arbeiten - zum Beispiel funktioniert es nicht, wenn Eventes sich um einen Typparameter ohne Einschränkungen handelt.

artem
quelle
Ich verwende TS v3.5.2 und kann keine Schnittstelle verwenden, um einen Typ zu erweitern. interface A<T> extends B<T> {blar}Eine Schnittstelle kann einen Objekttyp oder eine Schnittmenge von Objekttypen nur mit statisch bekannten
Elementen erweitern
@WORMSS dies tut interface Identifiable<T> extends T { id: string }mir Fehler "Eine Schnittstelle kann nur einen Objekttyp oder Schnittpunkt von Objekttypen mit statisch bekannten Mitgliedern erweitern.ts (2312)"
maninak
22

Sie können Typen schneiden:

type TypeA = {
    nameA: string;
};
type TypeB = {
    nameB: string;
};
export type TypeC = TypeA & TypeB;

Irgendwo in Ihrem Code können Sie jetzt Folgendes tun:

const some: TypeC = {
    nameB: 'B',
    nameA: 'A',
};
Stanislav
quelle
6

Was Sie erreichen wollen, ist gleichbedeutend mit

interface Event {
   name: string;
   dateCreated: string;
   type: string;
}

interface UserEvent extends Event {
   UserId: string; 
}

Die Art und Weise, wie Sie die Typen definiert haben, ermöglicht keine Angabe der Vererbung. Sie können jedoch mithilfe von Schnittpunkttypen etwas Ähnliches erreichen, wie Artem hervorhob .

olydis
quelle
8
Ja, aber ich mag das Wort nicht, interfacewenn ich eigentlich atype
Kousha
Fair genug, dann sollte
Artems
-1

Möglicherweise ist der unten stehende Ansatz für jemanden mit TS mit Reaktionen hilfreich

interface Event {
   name: string;
   dateCreated: string;
   type: string;
}

interface UserEvent<T> extends Event<T> {
    UserId: string;
}
Jaison
quelle