Erstellen einen benutzerdefinierten Valueof ähnlich Keyof, um die Vereinigung von Eigenschaftswerttypen in TypeScript zurückzugeben

1. Union von Eigenschaftswerttypen mit valueof in TypeScript zurückgeben
2. Union von Eigenschaftswerttypen mit keyof und typeof in TypeScript zurückgeben
3. Abrufen des Eigenschaftswerttyps mithilfe der einzelnen Schlüssel in TypeScript
4. Überprüfen Sie den Schlüsselwert zum Zeitpunkt der Kompilierung mithilfe von Generika in TypeScript

In diesem Tutorial lernen wir die verschiedenen Methoden kennen, mit denen wir die Typen zurückgeben können, aus denen unsere Eigenschaft oder ein Objekt besteht.

Es gibt drei Möglichkeiten, wie wir diese Funktionalität realisieren können. Eine der Methoden nutzt Generika, um einen benutzerdefinierten Typ namens valueof zu erstellen, der alle Union-Typen der Eigenschaft zurückgibt.

Die zweite Methode verwendet die Typen keyof und typeof, um alle Union-Typen der Eigenschaft zurückzugeben. Die dritte Methode verwendet einzelne Schlüssel, um bei Bedarf einen einzelnen Typ zurückzugeben.

Wir werden auch lernen, die Schlüsselwerteinträge zur Kompilierzeit einzuschränken, wenn sie nicht vom gleichen Typ sind, indem wir generische und indizierte Zugriffstypen nutzen.

Union von Eigenschaftswerttypen mit valueof in TypeScript zurückgeben

Gehen Sie zu Visual Studio Code und erstellen Sie einen Ordner mit dem Namen typescript-types oder verwenden Sie einen beliebigen Namen. Erstellen Sie unter dem Ordner eine Datei namens value-types-using-valueof.ts.

Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei value-types-using-valueof.ts ein.

type ValueOf<T> = T[keyof T];

type Customer = {
    firstName: string,
    lastName: string,
    doB: Date,
}

type ValueOfCustomer = ValueOf<Customer>

let customer: Customer  ={
    firstName: 'john',
    lastName: 'doe',
    doB: new Date(2022,12,6),
}

function logDetails(customerInfo: ValueOfCustomer){
   console.log(customerInfo)
}

logDetails(customer.firstName)
logDetails(customer.lastName)
logDetails(customer.doB)
logDetails(500)// Error - The union does not include type number

Zuerst definieren wir einen generischen Typ ValueOf<T> und weisen ihn dem T[keyof T] zu. Das T bedeutet, dass an ValueOf ein beliebiger Typ übergeben werden kann, egal ob Property oder ein Objekt.

Der keyof gibt die Vereinigung aller Schlüsseltypen zurück, die zum übergebenen Typ gehören.

Wir haben das Objekt Customer erstellt, das die Eigenschaften firstName, lastName und doB enthält. Die ersten beiden Eigenschaften sind vom Typ Zeichenfolge, und die letzte Eigenschaft ist vom Typ Datum.

Als Nächstes haben wir einen Typ namens ValueOfCustomer erstellt, indem wir Customer an den generischen Typ ValueOf<Customer> übergeben haben. Der ValueOfCustomer ist unser neuer Typ, der sich aus der Vereinigung aller Schlüsselzeiten im Customer-Objekt zusammensetzt.

Das bedeutet, dass der ValueOfCustomer nur Werte vom Typ String und Datum annehmen kann.

Zur Überprüfung haben wir eine Methode namens logDetails() erstellt, die einen Parameter vom Typ ValueOfCustomer akzeptiert und ihn verwendet, um firstName, lastName und doB von Customer zu protokollieren.

Beachten Sie, dass wir einen Fehler erhalten, wenn wir versuchen, einen Wert zu übergeben, der nicht vom Typ Zeichenfolge oder Datum ist, z. B. eine Zahl in der Methode, da das Methodenargument nur eine Zeichenfolge oder eine Zahl akzeptiert.

Union von Eigenschaftswerttypen mit keyof und typeof in TypeScript zurückgeben

Erstellen Sie im selben Ordner eine Datei namens value-types-using-keyof-and-typeof.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

type Customer = {
    firstName: string,
    lastName: string,
    doB: Date,
}

const customer: Customer  ={
    firstName: 'john',
    lastName: 'doe',
    doB: new Date(2022,12,6),
} as const

type customertypes = typeof customer[keyof Customer]

function getCustomerInfo(theCustomerTypes: customertypes){
    console.log(theCustomerTypes)
}

getCustomerInfo(customer.firstName)
getCustomerInfo(customer.lastName)
getCustomerInfo(customer.doB)
getCustomerInfo(234)//Error - The union does not include type number

Im obigen Code haben wir unseren Typ Customer definiert, der die Eigenschaften firstName, lastName und doB enthält. Die ersten beiden Eigenschaften sind vom Typ Zeichenfolge, und die letzte Eigenschaft ist vom Typ Datum.

Das Objekt Customer wird mit konkreten Werten für jede Eigenschaft im Objekt initialisiert. Der Typ namens customertypes wurde erstellt und typeof customer[keyof customer] zugewiesen.

Im letzten Beispiel haben wir erwähnt, dass keyof die Vereinigung aller Schlüsseltypen zurückgibt. Und dies wurde auf unser Objekt Customer angewendet, um dasselbe zu tun.

Das typeof gibt alle Typen aus dem Customer-Objekt zurück, das mit Hilfe von keyof realisiert wird, wie im Code gezeigt.

Um dies zu überprüfen, haben wir eine Methode namens getCustomerInfo() erstellt, die einen Parameter vom Typ customertypes akzeptiert und ihn verwendet, um die Werte unseres Customer-Objekts zu protokollieren.

Beachten Sie, dass wir, wenn wir versuchen, einen Wert zu übergeben, der nicht vom Typ Zeichenfolge oder Datum ist, wie z. B. eine Zahl, in der Methode einen Fehler erhalten, da der neue Typ keine Typnummer enthält.

Abrufen des Eigenschaftswerttyps mithilfe der einzelnen Schlüssel in TypeScript

In den beiden obigen Beispielen haben wir behandelt, wie die Vereinigung aller Werttypen abgerufen wird, aber in einigen Fällen sind Sie möglicherweise nur an einem Objekttyp interessiert.

In diesem Beispiel erfahren Sie, wie Sie einen einzelnen Werttyp eines Objekts mithilfe der einzelnen Schlüssel abrufen.

Erstellen Sie im selben Ordner eine Datei namens individual-keys.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

type Customer = {
    firstName: string,
    lastName: string,
    doB: Date,
}

type date = Customer['doB']

function getDateOfBirth(doB: date): Date{
    return doB;
}

let customer: Customer  ={
    firstName: 'john',
    lastName: 'doe',
    doB: new Date(2022,12,6),
}

getDateOfBirth(customer.doB)
getDateOfBirth(123)//Error - Method accepts a single parameter of type date

In diesem Beispiel haben wir dieselbe Kundendefinition wie in den vorherigen Beispielen wiederverwendet. Der Datumstyp wurde erstellt, indem der Schlüssel doB aus der Kundendefinition mit Customer['doB'] referenziert wurde.

Das bedeutet, dass der neue Typ date vom Typ Date ist. Das getDateOfBirth() enthält einen einzelnen Parameter vom Typ date und wurde verwendet, um zu überprüfen, dass nur Datumstypen an ihn übergeben werden können, wie im Code gezeigt.

Wenn wir versuchen, einen Wert zu übergeben, der nicht vom Typ date ist, wie z. B. eine Zahl, erhalten wir einen Fehler, weil der Parameter auf einen einzigen Typ beschränkt ist.

Überprüfen Sie den Schlüsselwert zum Zeitpunkt der Kompilierung mithilfe von Generika in TypeScript

Wie in den vorherigen Beispielen zu sehen ist, besteht ein Objekt aus einem Schlüssel und einem Wert. Manchmal werden wir möglicherweise mit der Anforderung konfrontiert, die Werte eines Objekts basierend auf seinen Schlüsseln zu ändern.

In diesem Tutorial lernen wir, sicherzustellen, dass die übergebenen Werte zur Kompilierzeit überprüft werden, um sicherzustellen, dass sie vom gleichen Typ wie die Schlüssel sind.

Erstellen Sie im selben Ordner eine Datei namens key-value-checking.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

type Shipment = {
    containerItems: string,
    containerSerial: string
    shipmentDate: Date
}

declare function updateShipment<K extends keyof Shipment>(key: K, value: Shipment[K]): void;

updateShipment('containerItems','flowers')
updateShipment('containerSerial','def456');
updateShipment('shipmentDate',new Date(2018,3,14))
updateShipment('shipmentDate',1337)// Error- Shipment object does not contain type number

Im obigen Code haben wir ein Objekt namens Shipment definiert, das die Parameter containerItems, containerSerial und shipmentDate enthält.

Die ersten beiden Eigenschaften sind vom Typ Zeichenfolge, und die letzte Eigenschaft ist vom Typ Datum. Wir haben eine generische Methode namens updateShipment() definiert.

Die Methode updateShipment() akzeptiert zwei Parameter, von denen einer ein Schlüssel und der zweite ein Wert für das Shipment-Objekt ist.

Der Schlüssel muss ein beliebiger Typ des Shipment-Objektschlüssels sein, und diese werden mit <K extends keyof Shipment> im Parameter in spitzen Klammern überprüft.

Da wir den Schlüssel K haben, können wir die an diesen Schlüssel übergebenen Werte einschränken, indem wir die Schlüssel für das Objekt Shipment mit Shipment[K] indizieren. Mit dieser Definition muss jeder Wert, den wir für den Schlüssel eingeben, vom gleichen Typ wie der Schlüssel sein.

Beachten Sie, dass der Compiler das Problem anzeigt, wenn Sie versuchen, einen Wert zu übergeben, der nicht im Shipment-Objekt definiert ist, z. B. eine Zahl.