Heim > Web-Frontend > js-Tutorial > Hauptteil

Optional vs. undefiniert: So prüfen Sie, ob optionale Eigenschaften vorhanden sind

WBOY
Freigeben: 2024-07-28 02:36:43
Original
449 Leute haben es durchsucht

Optional vs. Undefined: How To Check for Optional Properties

In TypeScript gilt eine Eigenschaft als optional, wenn sie in einem Objekt weggelassen werden kann, was bedeutet, dass sie entweder undefiniert oder überhaupt nicht bereitgestellt werden kann. Optionale Eigenschaften werden mit dem ? gekennzeichnet. Suffix auf dem Eigenschaftsschlüssel. Es kann ziemlich schwierig sein, festzustellen, ob eine Eigenschaft optional oder explizit mit undefiniert als Typ definiert ist.

Betrachten wir das folgende Beispiel mit fünf möglichen Kombinationen:

type Example = {
    required: number;
    optional?: number;
    requiredAsUndefined: undefined;
    requiredWithUndefined: number | undefined;
    optionalWithUndefined?: number | undefined;
}
Nach dem Login kopieren

Die letzten vier Eigenschaften dürfen undefiniert sein, aber nur die zweite und fünfte sind tatsächlich optional. Interessanterweise werden die Eigenschaften „optional“, „requiredWithUndefined“ und „optionalWithUndefined“ alle in die gleiche Union-Typ-Nummer | aufgelöst undefiniert.

Was wir also wollen, ist ein Typ, der für optional und optionalWithUndefiniert „true“ und für den Rest „false“ zurückgibt. So kann ein solcher Dienstprogrammtyp aussehen:

type IsOptional<T, K extends keyof T> = undefined extends T[K]
    ? ({} extends Pick<T, K> ? true : false)
    : false;

type Required = IsOptional<Example, 'required'>;  // false
type Optional = IsOptional<Example, 'optional'>;  // true
type RequiredAsUndefined = IsOptional<Example, 'requiredAsUndefined'>;  // false
type RequiredWithUndefined = IsOptional<Example, 'requiredWithUndefined'>;  // false
type OptionalWithUndefined = IsOptional<Example, 'optionalWithUndefined'>;  // true
Nach dem Login kopieren

Bei diesem Dienstprogrammtyp gibt es zwei Einschränkungen. Die erste Einschränkung, undefiniert erweitert T[K], prüft, ob undefiniert Teil des Typs sein kann, auf den T[K] zugreift. Im Wesentlichen wird gefragt, ob der Typ T[K] undefiniert enthalten kann. Die zweite Einschränkung {} erweitert Pick ? true : false, stellt sicher, dass der Typ {} (ein leeres Objekt) einem Typ zugewiesen werden kann, bei dem die Eigenschaft K ausgewählt wird, was bedeutet, dass die Eigenschaft optional ist.

Aus diesem Dienstprogrammtyp können wir einen neuen zugeordneten Typ erstellen, der nur optionale Eigenschaften auswählt. Die nicht optionalen Eigenschaften werden auf nie gesetzt:

type OptionalProperties<T> = {
    [K in keyof T]: IsOptional<T, K> extends true 
        ? T[K] 
        : never
}

type OnlyOptionals = OptionalProperties<Example>;
// type OnlyOptionals = {
//     required: never;
//     optional?: number;
//     requiredAsUndefined: never;
//     requiredWithUndefined: never;
//     optionalWithUndefined?: number | undefined;
// }
Nach dem Login kopieren

Für die Typsicherheit reicht es normalerweise aus, die Eigenschaften mit dem Typ nie zu haben, aber falls wir diese Eigenschaften aus stilistischen Gründen wirklich weglassen möchten, können wir die IsOptional erweitert die wahre Einschränkung in die eckigen Klammern. Dies ist ein netter kleiner Trick, da dadurch der Schlüssel nicht optionaler Eigenschaften auf „Nie“ gesetzt wird, die dann von TypeScript automatisch weggelassen werden.

type OnlyOptionals<T> = {
    [K in keyof T as IsOptional<T, K> extends true ? K : never]: T[K]
} 
type OnlyOptionals = OnlyOptionals<Example>;
// type OnlyOptionals = {
//    optional?: number;
//    optionalWithUndefined?: number | undefined;
// }
Nach dem Login kopieren

Hier ist der Playground zum Ausprobieren direkt im Browser: TypeScript Playground

Das obige ist der detaillierte Inhalt vonOptional vs. undefiniert: So prüfen Sie, ob optionale Eigenschaften vorhanden sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!