TypeScript: ausgewählte Eigenschaften optional mit Partial & Omit

Wenn Sie das Dienstprogramm Partialfür einen Typ verwenden, werden alle Typeigenschaften optional. Mal sehen, wie wir dieses Dienstprogramm mit einem anderen zusammensetzen können Omit,, um nur bestimmte Eigenschaften dieses Typs optional zu machen. Wir werden schließlich einen Utility-Typ mit TypeScript-Generika erstellen, um dies auf jeden gewünschten Typ anzuwenden.

Machen Sie alle Eigenschaften eines Typs optional

Die Dienstprogramme Partialund sind im TypeScript -Bereich bekannt, da sie sehr praktisch sind, um sie schnell auf einen Typ anzuwenden und einen im Grunde genommen neuen Typ zu erhalten. konvertiert alle Schlüssel eines Typs in optionale Schlüssel. Wenn Sie zum Beispiel diesen Typ haben:OmitPartial<T>

interface Band {
    lead: string
    guitar: string
    bass: string
    drums: string
    keyboard: string
}

Alle Eigenschaften sind erforderlich, wenn etwas diesen Typ hat. Wenn Sie ein Objekt wie folgt zuweisen möchten:

const FooFighters: Band = {
    lead: 'Dave Grohl',
    guitar: 'Pat Smears',
    bass: 'Nate Mendel',
    drums: 'Taylor Williams',
}

es wird fehlschlagen, weil ihm die keyboardEigenschaft fehlt. Jetzt könnten wir diese Eigenschaft als optional markieren, und TypeScript ermöglicht uns dies problemlos. Der einfachste Weg, dies zu tun, besteht darin, ein Fragezeichen an den Namen anzuhängen. Wenn es in diesem Fall möglich ist, den Originaltyp zu bearbeiten, können Sie ihn aufrufen und wie folgt ändern:

interface Band {
    lead: string
    guitar: string
    bass: string
    drums: string
    keyboard?: string
}

Groß. Jetzt wird die vorherige Zuweisung erfolgreich sein, da keyboardsie nicht mehr benötigt wird. Was aber, wenn es aus welchen Gründen auch immer nicht möglich ist, den ursprünglichen Typ zu ändern? Was Sie in diesen Fällen schnell tun können, ist, sich Partialauf diesen Typ zu bewerben:

type NotAllTheBand = Partial

const FooFighters: NotAllTheBand = {
    lead: 'Dave Grohl',
    guitar: 'Pat Smears',
    bass: 'Nate Mendel',
    drums: 'Taylor Williams',
}

Dadurch werden alle Eigenschaften nicht mehr erzwungen, sodass alle optional sind. Vielleicht möchten wir das manchmal, aber was ist, wenn wir nur eine Eigenschaft optional machen und vermeiden möchten, den ursprünglichen Typ zu ändern?

Entfernen von Eigenschaften von einem Typ

Bevor wir uns damit befassen und sehen, wie es funktioniert, sehen wir uns ein anderes Dienstprogramm an, das uns dabei helfen wird: Omit. Dieser Hilfstyp entfernt Eigenschaften aus dem Typ, auf den er angewendet wird. Während Partialkeine anderen Argumente als der Typ Omitakzeptiert werden, werden der Typ und die Eigenschaften, die Sie entfernen möchten, akzeptiert: Omit<T, K>.

Es ist nicht so Partial, dass sie dadurch optional werden: Sie Omitwerden vollständig aus dem Typ gelöscht. Wenn Sie es verwenden Partial<Band>, ist es so, als hätten Sie Folgendes getan:

interface Band {
    lead?: string
    guitar?: string
    bass?: string
    drums?: string
    keyboard?: string
}

Wenn Sie jedoch verwenden Omit<Band, 'keyboard'>, ist es so, als hätten Sie Folgendes getan:

interface Band {
    lead: string
    guitar: string
    bass: string
    drums: string
}

Das macht jetzt langsam Sinn, oder? Können Sie sich vorstellen, was wir in TypeScript tun könnten, wenn wir einen Typ haben, der alle Eigenschaften des Originals auf optional gesetzt hat, und einen anderen Typ, der nur die Eigenschaften hat, die wir benötigen? Wenn es nur eine Möglichkeit gäbe, diese Typen zu kreuzen, richtig?

Sich überschneidende Typen

Ja, in TypeScript gibt es eine Möglichkeit, das kaufmännische Und zu verwenden &, den Operator für die Typüberschneidung. Dieser Operator konstruiert bei zwei gegebenen Typen einen neuen mit den Eigenschaften, die zu beiden Typen gehören:

interface SomeType {
    propA: string
    propB: number
}

interface AnotherType {
    propC: boolean
    propD: Array
}

type IntersectedType = SomeType & AnotherType

Inzwischen haben Sie es wahrscheinlich herausgefunden: Wir werden einen partiellen Typ und einen Typ schneiden, bei dem wir einige seiner Eigenschaften entfernt haben.

Ausgewählte Eigenschaften eines Typs optional machen

Versuchen wir, es zu verstehen. Beim Erlernen von TypeScript ist es wichtig, zu rationalisieren, was mit unseren Typen passiert.

Wir werden uns einen Typ schnappen, dessen Eigenschaften dank der PartialAnwendung auf optional gesetzt sind. Als Nächstes überschneiden wir es mit einem Typ, bei dem ausgewählte Eigenschaften von entfernt wurden Omit. Sehen wir uns ein Beispiel an:

interface SomeType {
    propA: string
    propB: number
}

type OptionalPropB = Partial & Omit

Wir haben jetzt einen neuen Typ, ohne den ursprünglichen Typ zu ändern, der wie folgt aussieht:

type OptionalPropB = {
    propA: string
    propB?: string
}

Dies geschieht, weil wir Eigenschaften propA?und propB?von dem Typ erfassen, der von erzeugt wird, Partialund sie mit propAvon dem Typ schneiden, der von erzeugt wird Omit.

Generische TypeScript-Dienstprogramme

Ok, jetzt funktioniert unser neuer Typ und wir können nur ausgewählte Eigenschaften als optional markieren, ohne den ursprünglichen Typ zu ändern. Allerdings diese Zeile

type OptionalPropB = Partial & Omit

Ist zu ausführlich, ziemlich hässlich und jedes Mal mühsam zu schreiben. Noch wichtiger ist, dass es für einen anderen Typ nicht funktioniert, wir müssen es jedes Mal neu schreiben. Können wir es kürzer und schöner machen und es für jeden Typ funktionieren lassen? Ja, TypeScript ermöglicht es uns, hier Generika zu verwenden und unseren eigenen Hilfstyp zu erstellen:

type Optional = Partial & Omit

Und jetzt haben wir unseren eigenen TypeScript-Hilfstyp, der mit Generika implementiert ist, die wir verwenden können, um ausgewählte Typeigenschaften in jedem Typ optional zu machen. Wir können es so verwenden:

type TypeWithOptionalProp = Optional

Sie werden feststellen, dass die Signatur Omit ähnelt: Dieses Dienstprogramm übernimmt den Typ, mit dem gearbeitet werden soll, und die Eigenschaften, die optional gemacht werden. Wenn Sie mehr haben, können Sie den Union-Operator verwenden:

type TypeWithOptionalProps = Optional

Schlussworte

Sie können diesen generischen Dienstprogrammtyp jetzt in einer Datei speichern und exportieren, um ihn in Ihrer gesamten App zu verwenden. Hier ist ein Link zu einem TypeScript Playground, wo ich den Code aus diesem Artikel hinzugefügt und kommentiert habe, damit Sie sehen können, was vor sich geht, indem Sie Partialsich, Omitund unseren generischen Hilfstyp ansehen.

Die Welt der Generika und Dienstprogramme ist in TypeScript fantastisch. Steigen Sie ein und fangen Sie an zu experimentieren!