{"id":3248,"date":"2020-07-13T08:52:00","date_gmt":"2020-07-13T08:52:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/generics-in-typescript\/"},"modified":"2026-04-24T11:39:03","modified_gmt":"2026-04-24T11:39:03","slug":"les-generiques-dans-les-scripts","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fr\/blog\/generics-in-typescript\/","title":{"rendered":"Produits g\u00e9n\u00e9riques en TypeScript"},"content":{"rendered":"<p>Les g\u00e9n\u00e9riques peuvent \u00eatre utilis\u00e9s avec les fonctions (cr\u00e9ation d'une fonction g\u00e9n\u00e9rique), les classes (cr\u00e9ation d'une classe g\u00e9n\u00e9rique) et les interfaces (cr\u00e9ation d'une interface g\u00e9n\u00e9rique).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Utilisation de base<\/h2>\n\n\n\n<p>Vous avez probablement d\u00e9j\u00e0 utilis\u00e9 des g\u00e9n\u00e9riques sans le savoir - l'utilisation la plus courante des g\u00e9n\u00e9riques est la d\u00e9claration d'un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">const myArray : string[] ;<\/code><\/pre>\n\n\n\n<p>Ce n'est pas tr\u00e8s sp\u00e9cial \u00e0 premi\u00e8re vue, nous d\u00e9clarons simplement <code>myArray<\/code> comme un tableau de cha\u00eenes de caract\u00e8res, mais c'est la m\u00eame chose qu'une d\u00e9claration g\u00e9n\u00e9rique :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">const myArray : Tableau ;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Garder les choses explicites<\/h2>\n\n\n\n<p>Commen\u00e7ons par un exemple tr\u00e8s simple : comment pourrions-nous porter cette vanille ? <a href=\"https:\/\/thecodest.co\/fr\/blog\/hire-vue-js-developers\/\">JS<\/a> \u00e0 la fonction <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/typescript-developer\/\">TypeScript<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">function getPrefiledArray(filler, length) {\n    return (new Array(length)).fill(filler) ;\n}<\/code><\/pre>\n\n\n\n<p>Cette fonction renvoie un tableau contenant la quantit\u00e9 donn\u00e9e de <code>bouche-trou<\/code>Ainsi <code>longueur<\/code> sera <code>nombre<\/code> et la fonction enti\u00e8re renverra un tableau de <code>bouche-trou<\/code> - mais qu'est-ce que le mastic ? \u00c0 ce stade, il peut s'agir de n'importe quoi. <code>tous<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">function getPrefiledArray(filler : any, length : number) : any[] {\n    return (new Array(length)).fill(filler) ;\n}<\/code><\/pre>\n\n\n\n<p>Utilisation <code>tous<\/code> est certainement g\u00e9n\u00e9rique - nous pouvons passer litt\u00e9ralement n'importe quoi, de sorte que \"travailler avec un certain nombre de types au lieu d'un seul type\" de la d\u00e9finition est enti\u00e8rement couvert, mais nous perdons la connexion entre <code>bouche-trou<\/code> et le type de retour. Dans ce cas, nous voulons renvoyer une chose commune, et nous pouvons explicitement d\u00e9finir cette chose commune comme \u00e9tant <strong>param\u00e8tre de type<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">function getPrefiledArray(filler : T, length : number) : T[] {\n    return (new Array(length)).fill(filler) ;\n}<\/code><\/pre>\n\n\n\n<p>et l'utiliser comme suit :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">const prefilledArray = getPrefiledArray(0, 10) ;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Contraintes g\u00e9n\u00e9riques<\/h2>\n\n\n\n<p>Examinons d'autres cas, probablement plus courants. Pourquoi utilise-t-on des types dans les fonctions ? Pour moi, c'est pour m'assurer que les arguments pass\u00e9s \u00e0 la fonction auront des propri\u00e9t\u00e9s avec lesquelles je veux interagir.<\/p>\n\n\n\n<p>Une fois de plus, essayons de porter une simple fonction JS vanille sur TS.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">function getLength(thing) {\n    return thing.length ;\n}<\/code><\/pre>\n\n\n\n<p>Nous nous trouvons face \u00e0 un probl\u00e8me non trivial : comment s'assurer que la chose poss\u00e8de une <code>longueur<\/code> et la premi\u00e8re id\u00e9e peut \u00eatre de faire quelque chose comme :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">function getLength(thing : typeof Array):number {\n    return thing.length ;\n}<\/code><\/pre>\n\n\n\n<p>et selon le contexte, cela peut \u00eatre correct, mais globalement nous sommes un peu g\u00e9n\u00e9riques - cela fonctionnera avec des tableaux de plusieurs types, mais que se passe-t-il si nous ne savons pas vraiment si la chose doit toujours \u00eatre un tableau - peut-\u00eatre que la chose est un terrain de football ou une peau de banane ? Dans ce cas, nous devons rassembler les propri\u00e9t\u00e9s communes de cette chose dans une construction qui peut d\u00e9finir les propri\u00e9t\u00e9s d'un objet - une interface :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">interface IThingWithLength {\n  length : nombre ;\n}<\/code><\/pre>\n\n\n\n<p>Nous pouvons utiliser <code>IThingWithLength<\/code> comme type de l'interface <code>chose<\/code> param\u00e8tre :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">function getLength(thing : IThingWithLength):number {\n    return thing.length ;\n}<\/code><\/pre>\n\n\n\n<p>franchement, dans cet exemple simple, cela conviendra parfaitement, mais si nous voulons garder ce type g\u00e9n\u00e9rique, et ne pas \u00eatre confront\u00e9s au probl\u00e8me du premier exemple, nous pouvons utiliser <strong>Contraintes g\u00e9n\u00e9riques<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">function getLength(thing : T):number {\n    return thing.length ;\n}<\/code><\/pre>\n\n\n\n<p>et l'utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">interface IBananaPeel {\n  \u00e9paisseur : nombre ;\n  longueur : nombre ;\n}\n\nconst bananaPeel : IBananaPeel = {\u00e9paisseur : 0,2, longueur : 3,14} ;\ngetLength(bananaPeel) ;<\/code><\/pre>\n\n\n\n<p>Utilisation <code>s'\u00e9tend<\/code> garantit que <code>T<\/code> contiendra des propri\u00e9t\u00e9s d\u00e9finies par <code>IThingWithLength<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Classes g\u00e9n\u00e9riques<\/h2>\n\n\n\n<p>Jusqu'\u00e0 pr\u00e9sent, nous avons travaill\u00e9 avec des fonctions g\u00e9n\u00e9riques, mais ce n'est pas le seul endroit o\u00f9 les g\u00e9n\u00e9riques brillent, voyons comment nous pouvons les incorporer dans les classes.<\/p>\n\n\n\n<p>Tout d'abord, essayons de stocker des bananes dans le panier \u00e0 bananes :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">class Banana {\n  constructeur(\n    public length : nombre,\n    public color : string,\n    public ionizingRadiation : number\n  ) {}\n}\n\nclass BananaBasket {\n  private bananas : Banana[] = [] ;\n\n  add(banana : Banana) : void {\n    this.bananas.push(banana) ;\n  }\n}\n\nconst bananaBasket = new BananaBasket() ;\nbananaBasket.add(new Banana(3.14, 'red', 10e-7)) ;<\/code><\/pre>\n\n\n\n<p>Essayons maintenant de cr\u00e9er un panier \u00e0 usage g\u00e9n\u00e9ral, pour des objets diff\u00e9rents ayant le m\u00eame type :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">class Basket {\n  private stuff : T[] = [] ;\n\n  add(thing : T) : void {\n    this.stuff.push(thing) ;\n  }\n}\n\nconst bananaBasket = new Basket() ;<\/code><\/pre>\n\n\n\n<p>Enfin, supposons que notre panier soit un conteneur de mati\u00e8res radioactives et que nous ne puissions stocker que des mati\u00e8res qui ont <code>Rayonnement ionisant<\/code> propri\u00e9t\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">interface IRadioactive {\n  ionizingRadiation : number ;\n}\n\nclass RadioactiveContainer {\n  private stuff : T[] = [] ;\n\n  add(thing : T) : void {\n    this.stuff.push(thing) ;\n  }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Interface g\u00e9n\u00e9rique<\/h2>\n\n\n\n<p>Enfin, essayons de rassembler toutes nos connaissances et de construire un empire radioactif en utilisant \u00e9galement des interfaces g\u00e9n\u00e9riques :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">\/\/ D\u00e9finir des attributs communs pour les conteneurs\ninterface IRadioactive {\n  ionizingRadiation : number ;\n}\n\n\n\/\/ D\u00e9finit quelque chose de radioactif\ninterface IBanana extends IRadioactive {\n  length : nombre ;\n  color : string ;\n}\n\n\/\/ D\u00e9finit quelque chose qui n'est pas radioactif\ninterface IDog {\n  weight : number ;\n}\n\n\/\/ D\u00e9finir une interface pour un conteneur qui ne peut contenir que des \u00e9l\u00e9ments radioactifs\ninterface IRadioactiveContainer {\n  add(thing : T) : void ;\n  getRadioactiveness():number ;\n}\n\n\/\/ D\u00e9finir une classe impl\u00e9mentant l'interface du conteneur radioactif\nclass RadioactiveContainer implements IRadioactiveContainer {\n  private stuff : T[] = [] ;\n\n  add(thing : T) : void {\n    this.stuff.push(thing) ;\n  }\n\n  getRadioactiveness() : number {\n      return this.stuff.reduce((a, b) =&gt; a + b.ionizingRadiation, 0)\n  }\n}\n\n\/\/ ERREUR ! Le type 'IDog' ne satisfait pas la contrainte 'IRadioactive'\n\/\/ Et c'est un peu brutal de stocker des chiens dans un conteneur radioactif\nconst dogsContainer = new RadioactiveContainer() ;\n\n\/\/ Tout va bien, fam !\nconst radioactiveContainer = new RadioactiveContainer() ;\n\n\/\/ N'oubliez pas de trier vos d\u00e9chets radioactifs - cr\u00e9ez une poubelle s\u00e9par\u00e9e pour les bananes uniquement\nconst bananasContainer = new RadioactiveContainer() ;<\/code><\/pre>\n\n\n\n<p>C'est tout !<\/p>","protected":false},"excerpt":{"rendered":"<p>Les g\u00e9n\u00e9riques fournissent des \u00e9l\u00e9ments de code r\u00e9utilisables qui fonctionnent avec un certain nombre de types au lieu d'un seul. Les g\u00e9n\u00e9riques permettent de traiter le type comme une variable et de le sp\u00e9cifier lors de l'utilisation, \u00e0 l'instar des param\u00e8tres de fonction.<\/p>","protected":false},"author":2,"featured_media":3249,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3248","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Generics in TypeScript - The Codest<\/title>\n<meta name=\"description\" content=\"Generics provide reusable bits of code that work with a number of types instead of a single type. Generics provide a way to treat type as a variable and specify it on usage, similar to function parameters.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/fr\/blog\/les-generiques-dans-les-scripts\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generics in TypeScript\" \/>\n<meta property=\"og:description\" content=\"Generics provide reusable bits of code that work with a number of types instead of a single type. Generics provide a way to treat type as a variable and specify it on usage, similar to function parameters.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/fr\/blog\/les-generiques-dans-les-scripts\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-13T08:52:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-24T11:39:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-75.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Generics in TypeScript\",\"datePublished\":\"2020-07-13T08:52:00+00:00\",\"dateModified\":\"2026-04-24T11:39:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/\"},\"wordCount\":516,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-75.jpg\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/\",\"name\":\"Generics in TypeScript - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-75.jpg\",\"datePublished\":\"2020-07-13T08:52:00+00:00\",\"dateModified\":\"2026-04-24T11:39:03+00:00\",\"description\":\"Generics provide reusable bits of code that work with a number of types instead of a single type. Generics provide a way to treat type as a variable and specify it on usage, similar to function parameters.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-75.jpg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-75.jpg\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/generics-in-typescript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generics in TypeScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/fr\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Produits g\u00e9n\u00e9riques en TypeScript - The Codest","description":"Les g\u00e9n\u00e9riques fournissent des \u00e9l\u00e9ments de code r\u00e9utilisables qui fonctionnent avec un certain nombre de types au lieu d'un seul. Les g\u00e9n\u00e9riques permettent de traiter le type comme une variable et de le sp\u00e9cifier lors de l'utilisation, \u00e0 l'instar des param\u00e8tres de fonction.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/fr\/blog\/les-generiques-dans-les-scripts\/","og_locale":"fr_FR","og_type":"article","og_title":"Generics in TypeScript","og_description":"Generics provide reusable bits of code that work with a number of types instead of a single type. Generics provide a way to treat type as a variable and specify it on usage, similar to function parameters.","og_url":"https:\/\/thecodest.co\/fr\/blog\/les-generiques-dans-les-scripts\/","og_site_name":"The Codest","article_published_time":"2020-07-13T08:52:00+00:00","article_modified_time":"2026-04-24T11:39:03+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-75.jpg","type":"image\/jpeg"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Generics in TypeScript","datePublished":"2020-07-13T08:52:00+00:00","dateModified":"2026-04-24T11:39:03+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/"},"wordCount":516,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-75.jpg","articleSection":["Software Development"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/generics-in-typescript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/","url":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/","name":"Produits g\u00e9n\u00e9riques en TypeScript - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-75.jpg","datePublished":"2020-07-13T08:52:00+00:00","dateModified":"2026-04-24T11:39:03+00:00","description":"Les g\u00e9n\u00e9riques fournissent des \u00e9l\u00e9ments de code r\u00e9utilisables qui fonctionnent avec un certain nombre de types au lieu d'un seul. Les g\u00e9n\u00e9riques permettent de traiter le type comme une variable et de le sp\u00e9cifier lors de l'utilisation, \u00e0 l'instar des param\u00e8tres de fonction.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/generics-in-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-75.jpg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-75.jpg","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/generics-in-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Generics in TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/fr\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/comments?post=3248"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3248\/revisions"}],"predecessor-version":[{"id":7822,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3248\/revisions\/7822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/media\/3249"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/media?parent=3248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/categories?post=3248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/tags?post=3248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}