Créer une valeur personnalisée similaire à Keyof pour renvoyer l'union des types de valeur de propriété dans TypeScript

1. Retourner l’union des types de valeur de propriété à l’aide de valueof dans TypeScript
2. Retourner l’union des types de valeur de propriété à l’aide de keyof et typeof dans TypeScript
3. Obtenir le type de valeur de propriété à l’aide des clés individuelles dans TypeScript
4. Vérifier la valeur-clé au moment de la compilation à l’aide de génériques dans TypeScript

Dans ce tutoriel, nous allons apprendre les différentes manières que nous pouvons utiliser pour retourner les types qui composent notre propriété ou un objet.

Il existe trois façons que nous pouvons utiliser pour réaliser cette fonctionnalité. L’une des méthodes exploite les génériques pour créer un type personnalisé nommé valueof qui renvoie tous les types d’union de la propriété.

La deuxième méthode utilise les types keyof et typeof pour retourner tous les types d’union de la propriété. La troisième méthode utilise des clés individuelles pour renvoyer un seul type selon les besoins.

Nous apprendrons également à restreindre les entrées clé-valeur au moment de la compilation si elles ne sont pas du même type en tirant parti des génériques et des types d’accès indexés.

Retourner l’union des types de valeur de propriété à l’aide de valueof dans TypeScript

Accédez au code Visual Studio et créez un dossier nommé typescript-types ou utilisez le nom de votre choix. Créez un fichier nommé value-types-using-valueof.ts sous le dossier.

Copiez et collez le code suivant dans le fichier value-types-using-valueof.ts.

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

Tout d’abord, nous définissons un type générique ValueOf<T> et l’affectons au T[keyof T]. Le T signifie que n’importe quel type peut être passé à la ValueOf, qu’il s’agisse d’une propriété ou d’un objet.

La keyof renvoie l’union de tous les types de clé qui appartiennent au type passé.

Nous avons créé l’objet Customer qui contient les propriétés firstName, lastName et doB. Les deux premières propriétés sont de type chaîne et la dernière propriété est de type Date.

Ensuite, nous avons créé un type nommé ValueOfCustomer en passant Customer au type générique ValueOf<Customer>. La ValueOfCustomer est notre nouveau type composé de l’union de tous les temps clés dans l’objet Customer.

Cela signifie que ValueOfCustomer ne peut accepter que des valeurs de type chaîne et date.

Pour vérifier, nous avons créé une méthode nommée logDetails() qui accepte un paramètre de type ValueOfCustomer et l’a utilisé pour enregistrer le firstName, lastName et doB de Customer.

Notez que si nous essayons de passer une valeur qui n’est pas de type chaîne ou Date, comme un nombre dans la méthode, nous obtiendrons une erreur car l’argument de la méthode n’accepte qu’une chaîne ou un nombre.

Retourner l’union des types de valeur de propriété à l’aide de keyof et typeof dans TypeScript

Dans le même dossier, créez un fichier nommé value-types-using-keyof-and-typeof.ts. Copiez et collez le code suivant dans le fichier.

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

Dans le code ci-dessus, nous avons défini notre type Customer contenant les propriétés firstName, lastName et doB. Les deux premières propriétés sont de type chaîne et la dernière propriété est de type Date.

L’objet Customer est initialisé avec des valeurs concrètes pour chaque propriété de l’objet. Le type nommé customertypes a été créé et affecté à typeof customer[keyof customer].

Dans le dernier exemple, nous avons mentionné que keyof renvoie l’union de tous les types de clés. Et ceci a été appliqué à notre objet Customer pour faire de même.

Le typeof renverra tous les types obtenus à partir de l’objet Customer, qui est réalisé à l’aide de keyof, comme indiqué dans le code.

Pour vérifier cela, nous avons créé une méthode nommée getCustomerInfo() qui accepte un paramètre de type customertypes et l’a utilisé pour enregistrer les valeurs de notre objet Customer.

Notez que si nous essayons de passer une valeur qui n’est pas de type chaîne ou Date comme un nombre, dans la méthode, nous obtiendrons une erreur car le nouveau type ne contient pas de type numéro.

Obtenir le type de valeur de propriété à l’aide des clés individuelles dans TypeScript

Dans les deux exemples ci-dessus, nous avons expliqué comment récupérer l’union de tous les types de valeur, mais dans certains cas, vous ne serez peut-être intéressé que par un seul type d’objet.

Dans cet exemple, vous apprendrez à récupérer un seul type de valeur d’un objet à l’aide des clés individuelles.

Dans le même dossier, créez un fichier nommé individual-keys.ts. Copiez et collez le code suivant dans le fichier.

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

Dans cet exemple, nous avons réutilisé la même définition de client que dans les exemples précédents. Le type de date a été créé en référençant la clé doB de la définition du client en utilisant Customer['doB'].

Cela signifie que le nouveau type date est de type Date. Le getDateOfBirth() contient un seul paramètre de type date et a été utilisé pour vérifier que seuls les types de date peuvent lui être transmis, comme indiqué dans le code.

Si nous essayons de passer une valeur qui n’est pas de type date, comme un nombre, nous obtiendrons une erreur car le paramètre est restreint à un seul type.

Vérifier la valeur-clé au moment de la compilation à l’aide de génériques dans TypeScript

Comme vu dans les exemples précédents, un objet est composé d’une clé et d’une valeur. Parfois, nous pouvons être confrontés à la nécessité de modifier les valeurs d’un objet en fonction de ses clés.

Dans ce didacticiel, nous apprendrons à nous assurer que les valeurs que nous transmettons sont vérifiées au moment de la compilation pour s’assurer qu’elles sont du même type que les clés.

Créez un fichier nommé key-value-checking.ts dans le même dossier. Copiez et collez le code suivant dans le fichier.

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

Dans le code ci-dessus, nous avons défini un objet nommé Shipment contenant les paramètres containerItems, containerSerial et shipmentDate.

Les deux premières propriétés sont de type chaîne et la dernière propriété est de type Date. Nous avons défini une méthode générique nommée updateShipment().

La méthode updateShipment() accepte deux paramètres dont l’un est une clé et le second une valeur pour l’objet Shipment.

La clé doit être n’importe quel type des clés de l’objet Envoi, et celles-ci sont vérifiées en utilisant <K extends keyof Shipment> dans le paramètre des crochets angulaires.

Puisque nous avons la clé K, nous pouvons restreindre les valeurs passées à cette clé en indexant les clés de l’objet Shipment en utilisant Shipment[K]. Avec cette définition, chaque valeur que l’on saisit pour la clé doit être du même type que la clé.

Notez que si vous essayez de passer une valeur non définie dans l’objet Shipment, comme un nombre, le compilateur signale le problème.