Próbuję stworzyć interfejs, który mógłby mieć

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

1. Czy istnieje sposób, aby wymagać componentlub clickzostać ustawione
2. Czy istnieje sposób, aby wymagać, aby nie można było ustawić obu właściwości?

Nie z pojedynczym interfejsem, ponieważ typy nie mają logiki warunkowej i nie mogą od siebie zależeć, ale możesz podzielić interfejsy:

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;

Przy pomocy Excludetypu, który został dodany w TypeScript 2.8, można uogólnić sposób wymagania co najmniej jednej z zestawu właściwości:

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]

Częściowym, ale nie absolutnym sposobem wymagania, aby jeden i tylko jeden był zapewniony, jest:

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]

Oto link do placu zabaw TypeScript pokazujący oba w akcji.

Zastrzeżenie RequireOnlyOnepolega na tym, że TypeScript nie zawsze zna w czasie kompilacji każdą właściwość, która będzie istniała w czasie wykonywania. Więc oczywiście RequireOnlyOnenie można nic zrobić, aby zapobiec dodatkowym właściwościom, o których nie wie. Podałem przykład tego, jak RequireOnlyOnemożna przeoczyć rzeczy na końcu linku do placu zabaw.

Krótkie omówienie tego, jak to działa na poniższym przykładzie:

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

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

1. Pick<T, Exclude<keyof T, Keys>>from RequireAtLeastOnestaje się { title: string, icon: string}, czyli niezmienionymi właściwościami kluczy nieuwzględnionych w'click' | 'component'

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

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

   Który staje się

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

   Który w końcu się staje

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

3. Punkt przecięcia kroków 1 i 2 powyżej

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

   upraszcza do

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

Nie ma potrzeby używania złożonych typów warunkowych . Możemy to uprościć:

1. Czy istnieje sposób, aby ustawić wymaganie komponentu lub kliknięcie? (włącznie 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: {} } // ✔

Union Typ ( |) odpowiada włącznie OR. Jest przecięte z właściwościami non-warunkowych.

2. Czy istnieje sposób, aby wymagać, aby nie można było ustawić obu właściwości? (Wyłącznie 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

Zasadniczo jedno component lub drugieclick można ustawić, inne nigdy nie powinny być dodawane w tym samym czasie. TS może wyodrębnić z unii dyskryminowany typMenuItemXor , który odpowiada XOR.

Uwaga : ten XORwarunek MenuItemXornie jest możliwy przy zaakceptowanej odpowiedzi .

Przykładowy kod do zabawy

Alternatywą bez wielu interfejsów jest

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

Zadałem podobne pytanie w temacie Jak utworzyć element podobny do częściowego, który wymaga ustawienia jednej właściwości

Powyższe można uprościć, ale może być łatwiejsze do odczytania lub nie

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

Zauważ, że żadna z nich nie uniemożliwia dodania obu, ponieważ TypeScript zezwala na dodatkowe właściwości obiektów używających AND / OR Zobacz https://github.com/Microsoft/TypeScript/issues/15447

Skończyło się na zrobieniu:

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

export interface MenuItemComponent extends MenuItem{
  component: any;
}

export interface MenuItemClick extends MenuItem{
  click: any;
}

Wtedy użyłem:

 appMenuItems: Array<MenuItemComponent|MenuItemClick>;

Miałem jednak nadzieję, że istnieje sposób na modelowanie go za pomocą jednego interfejsu.

Lubię używać Pickrazem z typem podstawowym, który zawiera wszystkie właściwości, aby ustalić tego rodzaju wymagania warunkowe.

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

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

To jest czyste, a także elastyczne. Możesz dowolnie skomplikować swoje wymagania, twierdząc, że „wymagaj wszystkich właściwości, tylko tych dwóch lub tylko tej jednej właściwości” i tak dalej, zachowując prostą i czytelną deklarację.

Używam tego:

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

Stosowanie:

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

To sprawia, że fieldAi fieldB wymagane .

Aby tylko rozszerzyć powyższe fajne odpowiedzi! I dla ludzi, którzy lądują tutaj w poszukiwaniu częściowej wersji z wymagającymi możliwościami! Oto fragment, który zrobiłem!

PartialReq

Chcesz mieć część interfejsu, ale w międzyczasie potrzebujesz niektórych pól! Oto jak to się robi

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

Użyj przykładu

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
    })
);

Tutaj widać, że działa idealnie

Jeśli wymagane nie podano

AKTUALIZACJA: W przypadku użycia, który zasugerowałem powyżej, lepsza odpowiedź

Właśnie poszedłem do lekarza i znalazłem Omit .

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

Przyszedłem to dodać. Ale zanim to zrobię, właśnie zobaczyłem tę fajną odpowiedź. Obejmuje wszystko:

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

Po prostu to sprawdź! Pokazuje, jak to zrobić dla wszystkich różnych wersji Typescript! I żeby się nie powtarzać! Idź i sprawdź!