{"id":232057,"date":"2023-01-08T11:59:00","date_gmt":"2023-01-08T08:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232057"},"modified":"2022-11-10T07:26:07","modified_gmt":"2022-11-10T04:26:07","slug":"typescript-proprietes-selectionnees-facultatives-avec-partial-omit","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/typescript-proprietes-selectionnees-facultatives-avec-partial-omit\/","title":{"rendered":"TypeScript\u00a0: propri\u00e9t\u00e9s s\u00e9lectionn\u00e9es facultatives avec Partial & Omit"},"content":{"rendered":"\n

Lorsque vous utilisez l’utilitaire Partial<\/code>sur un type, toutes les propri\u00e9t\u00e9s du type seront facultatives. Voyons comment nous pouvons composer cet utilitaire avec un autre, Omit<\/code>, pour ne rendre facultatives que certaines propri\u00e9t\u00e9s de ce type. Nous allons enfin cr\u00e9er un type utilitaire en utilisant les g\u00e9n\u00e9riques TypeScript pour l’appliquer \u00e0 n’importe quel type que nous voulons.<\/p>\n

Rendre toutes les propri\u00e9t\u00e9s d’un type facultatives<\/h2>\n

Les utilitaires Partial<\/code>et Omit<\/code>sont bien connus dans le domaine TypeScript<\/a> car ils sont tr\u00e8s pratiques pour les appliquer rapidement \u00e0 un type et obtenir ce qui est fondamentalement un nouveau type. Partial<T><\/code>convertira toutes les cl\u00e9s d’un type en option. Si par exemple vous avez ce type :<\/p>\n

interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard: string\n}<\/code><\/pre>\n
toutes les propri\u00e9t\u00e9s sont requises quand quelque chose a ce type. Si vous souhaitez affecter un objet comme celui-ci\u00a0:<\/p>\n
const FooFighters: Band = {\n    lead: 'Dave Grohl',\n    guitar: 'Pat Smears',\n    bass: 'Nate Mendel',\n    drums: 'Taylor Williams',\n}<\/code><\/pre>\n
il \u00e9chouera car il manque la keyboard<\/code>propri\u00e9t\u00e9. Maintenant, nous pourrions marquer cette propri\u00e9t\u00e9 comme facultative et TypeScript nous permet facilement de le faire. La fa\u00e7on la plus simple de le faire est d’ajouter un point d’interrogation \u00e0 son nom. Dans ce cas, s’il est possible de modifier le type d’origine, vous pouvez y acc\u00e9der et le modifier comme ceci\u00a0:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard?: string\n}<\/code><\/pre>\n
Super. Maintenant, l’affectation pr\u00e9c\u00e9dente r\u00e9ussira car elle keyboard<\/code>n’est plus n\u00e9cessaire. 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<\/code>\u00e0 ce type :<\/p>\n
type NotAllTheBand = Partial\n\nconst FooFighters: NotAllTheBand = {\n    lead: 'Dave Grohl',\n    guitar: 'Pat Smears',\n    bass: 'Nate Mendel',\n    drums: 'Taylor Williams',\n}<\/code><\/pre>\n
Cela arr\u00eate d’appliquer toutes les propri\u00e9t\u00e9s, les rendant toutes facultatives. Peut-\u00eatre que parfois nous voulons cela, mais que se passe-t-il si nous voulons juste rendre une seule propri\u00e9t\u00e9 facultative et \u00e9viter de modifier le type d’origine ?<\/p>\n
Supprimer des propri\u00e9t\u00e9s d’un type<\/h2>\n
Avant de passer \u00e0 autre chose et de voir comment cela fonctionne, voyons un autre utilitaire qui nous aidera avec ceci: Omit<\/code>. Ce type d’utilitaire supprime les propri\u00e9t\u00e9s du type auquel il est appliqu\u00e9. While Partial<\/code>ne prend pas d’autres arguments que le type, Omit<\/code>prend le type plus les propri\u00e9t\u00e9s que vous souhaitez supprimer\u00a0: Omit<T, K><\/code>.<\/p>\n
Ce n’est pas comme Partial<\/code>si cela les rend facultatifs\u00a0: Omit<\/code>cela les effacera compl\u00e8tement du type. Lorsque vous l’utilisez Partial<Band><\/code>, c’est comme si vous aviez fait ceci\u00a0:<\/p>\n
interface Band {\n    lead?: string\n    guitar?: string\n    bass?: string\n    drums?: string\n    keyboard?: string\n}<\/code><\/pre>\n
Cependant, lorsque vous utilisez Omit<Band, 'keyboard'><\/code>, c’est comme si vous aviez fait ceci :<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n}<\/code><\/pre>\n
Cela commence maintenant \u00e0 avoir un sens, non\u00a0? Pouvez-vous imaginer ce que nous pourrions faire dans TypeScript si nous avions un type qui a toutes les propri\u00e9t\u00e9s de l’original d\u00e9fini sur optionnel et un autre type qui n’a que les propri\u00e9t\u00e9s que nous voulons exiger? Si seulement il y avait un moyen de\u2026 croiser ces types, n’est-ce pas ?<\/p>\n
Types d’intersection<\/h2>\n
Oui, il existe un moyen dans TypeScript d’utiliser l’esperluette &<\/code>, l’op\u00e9rateur d’intersection de type. Cet op\u00e9rateur, \u00e9tant donn\u00e9 deux types, en construit un nouveau avec les propri\u00e9t\u00e9s qui appartiennent aux deux types\u00a0:<\/p>\n
interface SomeType {\n    propA: string\n    propB: number\n}\n\ninterface AnotherType {\n    propC: boolean\n    propD: Array\n}\n\ntype IntersectedType = SomeType & AnotherType\n<\/code><\/pre>\n
Vous l’avez probablement compris maintenant: nous allons croiser un type partialis\u00e9 et un type dont nous avons supprim\u00e9 certaines de ses propri\u00e9t\u00e9s.<\/p>\n
Rendre facultatives les propri\u00e9t\u00e9s s\u00e9lectionn\u00e9es d’un type<\/h2>\n
Essayons de lui donner un sens. Il est important lors de l’apprentissage de TypeScript de rationaliser ce qui se passe avec nos types.<\/p>\n
Nous allons saisir un type dont toutes les propri\u00e9t\u00e9s sont d\u00e9finies sur facultatives gr\u00e2ce \u00e0 Partial<\/code>l’application. Ensuite, nous allons l’intersecter avec un type dont les propri\u00e9t\u00e9s s\u00e9lectionn\u00e9es ont \u00e9t\u00e9 supprim\u00e9es par Omit<\/code>. Voyons un exemple\u00a0:<\/p>\n
interface SomeType {\n    propA: string\n    propB: number\n}\n\ntype OptionalPropB = Partial & Omit<\/code><\/pre>\n
Nous avons maintenant un nouveau type, sans modifier le type d’origine, qui ressemble \u00e0 ceci\u00a0:<\/p>\n
type OptionalPropB = {\n    propA: string\n    propB?: string\n}<\/code><\/pre>\n
Cela se produit parce que nous r\u00e9cup\u00e9rons des propri\u00e9t\u00e9s propA?<\/code>et propB?<\/code>du type produit par Partial<\/code>et que nous les croisons avec propA<\/code>le type produit par Omit<\/code>.<\/p>\n
Utilitaires g\u00e9n\u00e9riques TypeScript<\/h2>\n
Ok, maintenant notre nouveau type fonctionne et nous ne pouvons avoir que des propri\u00e9t\u00e9s s\u00e9lectionn\u00e9es marqu\u00e9es comme facultatives sans modifier le type d’origine. Cependant, cette ligne<\/p>\n
type OptionalPropB = Partial & Omit<\/code><\/pre>\n
Est trop verbeux, assez moche et fastidieux \u00e0 \u00e9crire \u00e0 chaque fois. Plus important encore, cela ne fonctionnera pas pour un type diff\u00e9rent, nous devrons le r\u00e9\u00e9crire \u00e0 chaque fois. Pouvons-nous le rendre plus court et plus joli, et le faire fonctionner pour n’importe quel type\u00a0? Oui, TypeScript nous permet d’utiliser des g\u00e9n\u00e9riques ici et de cr\u00e9er notre propre type d’utilitaire\u00a0:<\/p>\n
type Optional = Partial & Omit<\/code><\/pre>\n
Et maintenant, nous avons notre propre type d’utilitaire TypeScript impl\u00e9ment\u00e9 avec des g\u00e9n\u00e9riques que nous pouvons utiliser pour rendre les propri\u00e9t\u00e9s de type s\u00e9lectionn\u00e9es facultatives dans n’importe quel type. Nous pouvons l’utiliser comme ceci :<\/p>\n
type TypeWithOptionalProp = Optional<\/code><\/pre>\n
Vous remarquerez que la signature est similaire \u00e0 Omit\u00a0: cet utilitaire prend le type sur lequel op\u00e9rer et les propri\u00e9t\u00e9s qui seront rendues facultatives. Si vous en avez plus, vous pouvez utiliser l’op\u00e9rateur union\u00a0:<\/p>\n
type TypeWithOptionalProps = Optional<\/code><\/pre>\n
Mots de cl\u00f4ture<\/h2>\n
Vous pouvez d\u00e9sormais enregistrer ce type d’utilitaire g\u00e9n\u00e9rique dans un fichier et l’exporter pour l’utiliser dans l’ensemble de votre application. Voici un lien vers un terrain de jeu TypeScript<\/a> o\u00f9 j’ai ajout\u00e9 le code de cet article et l’ai comment\u00e9 afin que vous puissiez voir ce qui se passe, en regardant Partial<\/code>, Omit<\/code>et notre type d’utilitaire g\u00e9n\u00e9rique.<\/p>\n
Le monde des g\u00e9n\u00e9riques et des utilitaires est fantastique dans TypeScript. Lancez-vous et commencez \u00e0 exp\u00e9rimenter !<\/p>\n
Source d’enregistrement:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Utilisez Partial & Omit pour ne rendre facultatives que certaines propri\u00e9t\u00e9s d’un type.<\/p>\n","protected":false},"author":1,"featured_media":236900,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,717,728,748,841,862],"tags":[1167],"class_list":["post-232057","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-javascript-3","category-open-source-projektmanagement-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=232057"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232057\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/236900"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=232057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=232057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=232057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}