Ich versuche eine Schnittstelle zu erstellen, die haben könnte

export interface MenuItem {
  title: string;
  component?: any;
  click?: any;
  icon: string;
}

1. Gibt es eine Möglichkeit zu fordern componentoder eingestellt clickzu werden
2. Gibt es eine Möglichkeit zu verlangen, dass nicht beide Eigenschaften festgelegt werden können?

Nicht mit einer einzelnen Schnittstelle, da Typen keine bedingte Logik haben und nicht voneinander abhängen können, aber Sie können die Schnittstellen aufteilen:

export interface BaseMenuItem {
  title: string;
  icon: string;
}

export interface ComponentMenuItem extends BaseMenuItem {
  component: any;
}

export interface ClickMenuItem extends BaseMenuItem {
    click: any;
}

export type MenuItem = ComponentMenuItem | ClickMenuItem;

Mit Hilfe des Excludein TypeScript 2.8 hinzugefügten Typs wird eine verallgemeinerbare Möglichkeit bereitgestellt, mindestens eine von mehreren Eigenschaften zu benötigen:

type RequireAtLeastOne<T, Keys extends keyof T = keyof T> =
    Pick<T, Exclude<keyof T, Keys>> 
    & {
        [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
    }[Keys]

Und ein teilweiser, aber nicht absoluter Weg, um zu verlangen, dass nur einer bereitgestellt wird, ist:

type RequireOnlyOne<T, Keys extends keyof T = keyof T> =
    Pick<T, Exclude<keyof T, Keys>>
    & {
        [K in Keys]-?:
            Required<Pick<T, K>>
            & Partial<Record<Exclude<Keys, K>, undefined>>
    }[Keys]

Hier ist ein TypeScript-Spielplatz-Link, der beide in Aktion zeigt.

Die Einschränkung RequireOnlyOnebesteht darin, dass TypeScript zur Kompilierungszeit nicht immer alle Eigenschaften kennt, die zur Laufzeit vorhanden sind. Es kann also offensichtlich RequireOnlyOnenichts unternommen werden, um zusätzliche Eigenschaften zu verhindern, von denen es nichts weiß. Ich habe RequireOnlyOneam Ende des Spielplatz-Links ein Beispiel gegeben, wie man Dinge übersehen kann.

Ein kurzer Überblick über die Funktionsweise anhand des folgenden Beispiels:

interface MenuItem {
  title: string;
  component?: number;
  click?: number;
  icon: string;
}

type ClickOrComponent = RequireAtLeastOne<MenuItem, 'click' | 'component'>

1. Pick<T, Exclude<keyof T, Keys>>from RequireAtLeastOnewird { title: string, icon: string}, das sind die unveränderten Eigenschaften der Schlüssel, die nicht in enthalten sind'click' | 'component'

2. { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys]aus RequireAtLeastOnewird

   { 
       component: Required<{ component?: number }> & { click?: number }, 
       click: Required<{ click?: number }> & { component?: number } 
   }[Keys]
   

   Welches wird

   {
       component: { component: number, click?: number },
       click: { click: number, component?: number }
   }['component' | 'click']
   

   Welches wird schließlich

   {component: number, click?: number} | {click: number, component?: number}
   

3. Der Schnittpunkt der Schritte 1 und 2 oben

   { title: string, icon: string} 
   & 
   ({component: number, click?: number} | {click: number, component?: number})
   

   vereinfacht zu

   { title: string, icon: string, component: number, click?: number} 
   | { title: string, icon: string, click: number, component?: number}
   

Es ist nicht erforderlich, komplexe bedingte Typen zu verwenden . Wir können es einfacher machen:

1. Gibt es eine Möglichkeit, die Einstellung einer Komponente oder eines Klicks zu verlangen? (inklusive OR)

type MenuItemOr = {
    title: string;
    icon: string;
} & ({ component: object } | { click: boolean }) 
// brackets are important here: "&" has precedence over "|"

let testOr: MenuItemOr;
testOr = { title: "t", icon: "i" } // error, none are set
testOr = { title: "t", icon: "i", component: {} } // ✔
testOr = { title: "t", icon: "i", click: true } // ✔
testOr = { title: "t", icon: "i", click: true, component: {} } // ✔

Ein Vereinigungstyp ( |) entspricht inklusive OR. Es wird mit den nicht bedingten Eigenschaften geschnitten .

2. Gibt es eine Möglichkeit zu verlangen, dass nicht beide Eigenschaften festgelegt werden können? (Exklusiv OR/ XOR)

type MenuItemXor = {
    title: string;
    icon: string;
} & (
        | { component: object; click?: never }
        | { component?: never; click: boolean }
    )

let testXor: MenuItemXor;
testXor = { title: "t", icon: "i" } // error, none are set
testXor = { title: "t", icon: "i", component: {} } // ✔
testXor = { title: "t", icon: "i", click: true } // ✔
testXor = { title: "t", icon: "i", click: true, component: {} } // error, both are set

Grundsätzlich sollte entweder component oder click kann eingestellt werden, das andere sollte niemals gleichzeitig hinzugefügt werden. TS kann einen diskriminierten Vereinigungstyp daraus machen MenuItemXor, was entspricht XOR.

Hinweis : Diese XORBedingung für MenuItemXorist bei akzeptierter Antwort nicht möglich .

Codebeispiel zum Herumspielen

Eine Alternative ohne mehrere Schnittstellen ist

export type MenuItem = {
  title: string;
  component: any;
  icon: string;
} | {
  title: string;
  click: any;
  icon: string;
};

const item: MenuItem[] = [
  { title: "", icon: "", component: {} },
  { title: "", icon: "", click: "" },
  // Shouldn't this error out because it's passing a property that is not defined
  { title: "", icon: "", click: "", component: {} },
  // Does error out :)
  { title: "", icon: "" }
];

Ich habe eine ähnliche Frage unter Erstellen eines Partial-like gestellt, für die eine einzelne Eigenschaft festgelegt werden muss

Das Obige könnte vereinfacht werden, aber es kann leichter zu lesen sein oder auch nicht

export type MenuItem = {
  title: string;
  icon: string;
} & (
 {component: any} | {click: string}
)

Beachten Sie, dass keines dieser Elemente Sie daran hindert, beide hinzuzufügen, da TypeScript zusätzliche Eigenschaften für Objekte zulässt, die AND / OR verwenden. Siehe https://github.com/Microsoft/TypeScript/issues/15447

Am Ende tat ich:

export interface MenuItem {
  title: string;
  icon: string;
}

export interface MenuItemComponent extends MenuItem{
  component: any;
}

export interface MenuItemClick extends MenuItem{
  click: any;
}

Dann habe ich verwendet:

 appMenuItems: Array<MenuItemComponent|MenuItemClick>;

Ich hatte jedoch gehofft, dass es eine Möglichkeit gibt, es mit einer einzigen Schnittstelle zu modellieren.

Ich verwende gerne Pickzusammen mit einem Basistyp, der alle Eigenschaften enthält, um diese Art von bedingten Anforderungen festzulegen.

interface MenuItemProps {
  title: string;
  component: any;
  click: any;
  icon: string;
}

export interface MenuItem =
  Pick<MenuItemProps, "title" | "icon" | "component"> |
  Pick<MenuItemProps, "title" | "icon" | "click">

Das ist sauber und auch flexibel. Sie können mit Ihren Anforderungen beliebig komplex werden, indem Sie Dinge wie "entweder alle Eigenschaften, nur diese beiden Eigenschaften oder nur diese eine Eigenschaft erfordern" usw. behaupten, während Sie Ihre Deklaration einfach und lesbar halten.

Ich benutze das:

type RequireField<T, K extends keyof T> = T & Required<Pick<T, K>>

Verwendung:

let a : RequireField<TypeA, "fieldA" | "fieldB">;

Dies macht fieldAund fieldB erforderlich .

Um nur auf die coolen Antworten oben zu erweitern! Und für die Leute, die hier landen, während sie nach einer Teilversion suchen, die Fähigkeiten erfordert! Hier ein Ausschnitt, den ich gemacht habe!

PartialReq

Sie möchten einen Teil einer Schnittstelle haben, benötigen aber in der Zwischenzeit einige Felder! Hier, wie es gemacht wird

export type PartialReq<T, Keys extends keyof T = keyof T> =
    Pick<Partial<T>, Exclude<keyof T, Keys>>
    & {
        [K in Keys]: T[K]
    };

Verwenden Sie ein Beispiel

export interface CacheObj<SigType = any, ValType = any> {
    cache: Map<SigType, ValType>,
    insertionCallback: InsertionCallback<SigType, ValType> // I want this to be required
}

// ...

export class OneFlexibleCache<SigType = any, ValType = any> {
    private _cacheObj: CacheObj<SigType, ValType>;

    constructor(
        cacheObj: PartialReq<CacheObj<SigType, ValType>, 'insertionCallback'> // <-- here
                                                                           //  i used it
    ) {
        cacheObj = cacheObj || {};

        this._cacheObj = {

// ...

// _______________ usage
this._caches.set(
    cacheSignature,
    new OneFlexibleCache<InsertionSigType, InsertionValType>({
        insertionCallback // required need to be provided
    })
);

Hier können Sie sehen, dass es perfekt funktioniert

Wenn das nicht zur Verfügung gestellt wird

UPDATE: Für die Verwendung, die ich oben angedeutet habe, hier eine bessere Antwort

Ich ging einfach zum Arzt und fand Omit .

https://www.typescriptlang.org/docs/handbook/utility-types.html#omittk

Ich bin gekommen, um es hinzuzufügen. Aber bevor ich es tue, habe ich gerade diese coole Antwort gesehen. Es deckt alles ab:

https://stackoverflow.com/a/48216010/7668448

Probieren Sie es einfach aus! Es zeigt, wie es für die verschiedenen Versionen von Typescript geht! Und um nicht zu wiederholen! Geh und überprüfe!