TypeScript : propriétés sélectionnées facultatives avec Partial & Omit

Lorsque vous utilisez l’utilitaire Partialsur un type, toutes les propriétés du type seront facultatives. Voyons comment nous pouvons composer cet utilitaire avec un autre, Omit, pour ne rendre facultatives que certaines propriétés de ce type. Nous allons enfin créer un type utilitaire en utilisant les génériques TypeScript pour l’appliquer à n’importe quel type que nous voulons.

Rendre toutes les propriétés d’un type facultatives

Les utilitaires Partialet Omitsont bien connus dans le domaine TypeScript car ils sont très pratiques pour les appliquer rapidement à un type et obtenir ce qui est fondamentalement un nouveau type. Partial<T>convertira toutes les clés d’un type en option. Si par exemple vous avez ce type :

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

toutes les propriétés sont requises quand quelque chose a ce type. Si vous souhaitez affecter un objet comme celui-ci :

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

il échouera car il manque la keyboardpropriété. Maintenant, nous pourrions marquer cette propriété comme facultative et TypeScript nous permet facilement de le faire. La façon la plus simple de le faire est d’ajouter un point d’interrogation à son nom. Dans ce cas, s’il est possible de modifier le type d’origine, vous pouvez y accéder et le modifier comme ceci :

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

Super. Maintenant, l’affectation précédente réussira car elle keyboardn’est plus nécessaire. Mais que se passe-t-il s’il n’est pas possible de changer le type d’origine pour une raison quelconque? Ce que vous pouvez faire rapidement dans ces cas, c’est appliquer Partialà ce type :

type NotAllTheBand = Partial

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

Cela arrête d’appliquer toutes les propriétés, les rendant toutes facultatives. Peut-être que parfois nous voulons cela, mais que se passe-t-il si nous voulons juste rendre une seule propriété facultative et éviter de modifier le type d’origine ?

Supprimer des propriétés d’un type

Avant de passer à autre chose et de voir comment cela fonctionne, voyons un autre utilitaire qui nous aidera avec ceci: Omit. Ce type d’utilitaire supprime les propriétés du type auquel il est appliqué. While Partialne prend pas d’autres arguments que le type, Omitprend le type plus les propriétés que vous souhaitez supprimer : Omit<T, K>.

Ce n’est pas comme Partialsi cela les rend facultatifs : Omitcela les effacera complètement du type. Lorsque vous l’utilisez Partial<Band>, c’est comme si vous aviez fait ceci :

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

Cependant, lorsque vous utilisez Omit<Band, 'keyboard'>, c’est comme si vous aviez fait ceci :

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

Cela commence maintenant à avoir un sens, non ? Pouvez-vous imaginer ce que nous pourrions faire dans TypeScript si nous avions un type qui a toutes les propriétés de l’original défini sur optionnel et un autre type qui n’a que les propriétés que nous voulons exiger? Si seulement il y avait un moyen de… croiser ces types, n’est-ce pas ?

Types d’intersection

Oui, il existe un moyen dans TypeScript d’utiliser l’esperluette &, l’opérateur d’intersection de type. Cet opérateur, étant donné deux types, en construit un nouveau avec les propriétés qui appartiennent aux deux types :

interface SomeType {
    propA: string
    propB: number
}

interface AnotherType {
    propC: boolean
    propD: Array
}

type IntersectedType = SomeType & AnotherType

Vous l’avez probablement compris maintenant: nous allons croiser un type partialisé et un type dont nous avons supprimé certaines de ses propriétés.

Rendre facultatives les propriétés sélectionnées d’un type

Essayons de lui donner un sens. Il est important lors de l’apprentissage de TypeScript de rationaliser ce qui se passe avec nos types.

Nous allons saisir un type dont toutes les propriétés sont définies sur facultatives grâce à Partiall’application. Ensuite, nous allons l’intersecter avec un type dont les propriétés sélectionnées ont été supprimées par Omit. Voyons un exemple :

interface SomeType {
    propA: string
    propB: number
}

type OptionalPropB = Partial & Omit

Nous avons maintenant un nouveau type, sans modifier le type d’origine, qui ressemble à ceci :

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

Cela se produit parce que nous récupérons des propriétés propA?et propB?du type produit par Partialet que nous les croisons avec propAle type produit par Omit.

Utilitaires génériques TypeScript

Ok, maintenant notre nouveau type fonctionne et nous ne pouvons avoir que des propriétés sélectionnées marquées comme facultatives sans modifier le type d’origine. Cependant, cette ligne

type OptionalPropB = Partial & Omit

Est trop verbeux, assez moche et fastidieux à écrire à chaque fois. Plus important encore, cela ne fonctionnera pas pour un type différent, nous devrons le réécrire à chaque fois. Pouvons-nous le rendre plus court et plus joli, et le faire fonctionner pour n’importe quel type ? Oui, TypeScript nous permet d’utiliser des génériques ici et de créer notre propre type d’utilitaire :

type Optional = Partial & Omit

Et maintenant, nous avons notre propre type d’utilitaire TypeScript implémenté avec des génériques que nous pouvons utiliser pour rendre les propriétés de type sélectionnées facultatives dans n’importe quel type. Nous pouvons l’utiliser comme ceci :

type TypeWithOptionalProp = Optional

Vous remarquerez que la signature est similaire à Omit : cet utilitaire prend le type sur lequel opérer et les propriétés qui seront rendues facultatives. Si vous en avez plus, vous pouvez utiliser l’opérateur union :

type TypeWithOptionalProps = Optional

Mots de clôture

Vous pouvez désormais enregistrer ce type d’utilitaire générique dans un fichier et l’exporter pour l’utiliser dans l’ensemble de votre application. Voici un lien vers un terrain de jeu TypeScript où j’ai ajouté le code de cet article et l’ai commenté afin que vous puissiez voir ce qui se passe, en regardant Partial, Omitet notre type d’utilitaire générique.

Le monde des génériques et des utilitaires est fantastique dans TypeScript. Lancez-vous et commencez à expérimenter !