{"id":288,"date":"2022-07-26T12:00:00","date_gmt":"2022-07-26T10:00:00","guid":{"rendered":"https:\/\/r3d-soft.de\/?p=288"},"modified":"2022-07-26T17:58:56","modified_gmt":"2022-07-26T15:58:56","slug":"existential-types-in-typescript","status":"publish","type":"post","link":"https:\/\/r3d-soft.de\/?p=288","title":{"rendered":"Existential Types in TypeScript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Aus Haskell kennen wir die sogenannten &#8218;Existential Types&#8216;. TypeScript bietet leider nicht von Haus aus, diese Funktionalit\u00e4t an. Demnach gibt es immer wieder Code wie diesen, der so nicht funktioniert:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">type Tuple&lt;T&gt; = {\n    left: T;\n    right: T;\n} \n\nconst listOfTuples: Tuple&lt;any&gt;[] = [\n    { left: \"Its a string\", right: \"String as well\" },\n    { left: 1337, right: \"This is not OK!!!\"} \/\/ Here is no error, but should be one.\n]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Der Code soll beim zweiten Array Element einen Fehler erzeugen, das passiert aber nicht, da <em><strong>any<\/strong><\/em> erlaubt ist und der TypeScript Compiler aktuell nicht wei\u00df, dass <em><strong>propTwo<\/strong><\/em> vom Typ <em><strong>number<\/strong><\/em> sein soll. Um das zu l\u00f6sen, braucht es <strong><em>Existential Types<\/em><\/strong>, welche wir \u00fcber einen Umweg codieren m\u00fcssen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Fangen wir an, das Beispiel etwas umzubauen. Aus der Variable wird eine Funktion welche wir aus Mangel an besseren Ideen einfach <em>getList<\/em> nennen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">type Tuple&lt;T&gt; = {\n    left: T,\n    right: T,\n}\n\nconst getList = (): Tuple&lt;unknown&gt;[] =&gt; {\n    return [ \/* TODO: Return actual tuples *\/ ];\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Per Pseudocode ausgedr\u00fcckt m\u00f6chten wir nun einen Typ haben f\u00fcr den folgendes gilt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">type TupleCreator = &lt;es exisiert ein R&gt;(left: R, right: R) =&gt; Tuple&lt;R&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das k\u00f6nnen wir in TypeScript mit einem Typ ausdr\u00fccken, welcher eine Funktion darstellt (wie oben zu erkennen). Demnach lautet unser Typ wie folgt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">type TupleCreator = &lt;R&gt;(left: R, right: R) =&gt; Tuple&lt;R&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Somit sieht der vollst\u00e4ndige Code so aus:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">type Tuple&lt;T&gt; = {\n    left: T,\n    right: T,\n}\n\ntype TupleCreator = &lt;R&gt;(left: R, right: R) =&gt; Tuple&lt;R&gt;\nconst createTuple: TupleCreator = (left, right) =&gt; ({left, right})\n\nconst getList = (): Tuple&lt;unknown&gt;[] =&gt; {\n\n    return [\n        createTuple(\"Its a string\", \"String as well\"),\n        createTuple(1337, \"This is not OK!!!\") \/\/ \ud83e\udd73 finally an error\n    ]\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Mit Hilfe des &#8218;TupleCreator&#8216; und der &#8218;createTuple&#8216; Funktion konnten wir einen Typ erzeugen, der uns genau das urspr\u00fcngliche Problem l\u00f6st. N\u00e4mlich die Abh\u00e4ngigkeit der zwei Generics T (left und right). Denn f\u00fcr diese haben wir gesagt gilt, dass beide Identisch sein m\u00fcssen, egal f\u00fcr welches T. Somit haben wir in einem einfachen Beispiel die Existential Types erfolgreich codiert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aus Haskell kennen wir die sogenannten &#8218;Existential Types&#8216;. TypeScript bietet leider nicht von Haus aus, diese Funktionalit\u00e4t an. Demnach gibt es immer wieder Code wie diesen, der so nicht funktioniert: Der Code soll beim zweiten Array Element einen Fehler erzeugen, das passiert aber nicht, da any erlaubt ist und der TypeScript Compiler aktuell nicht wei\u00df, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[2],"tags":[75,27,7],"class_list":["post-288","post","type-post","status-publish","format-standard","hentry","category-javascript-typescript","tag-existential-types","tag-generics","tag-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Existential Types in TypeScript - r3d-soft Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/r3d-soft.de\/?p=288\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Existential Types in TypeScript - r3d-soft Blog\" \/>\n<meta property=\"og:description\" content=\"Aus Haskell kennen wir die sogenannten &#8218;Existential Types&#8216;. TypeScript bietet leider nicht von Haus aus, diese Funktionalit\u00e4t an. Demnach gibt es immer wieder Code wie diesen, der so nicht funktioniert: Der Code soll beim zweiten Array Element einen Fehler erzeugen, das passiert aber nicht, da any erlaubt ist und der TypeScript Compiler aktuell nicht wei\u00df, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/r3d-soft.de\/?p=288\" \/>\n<meta property=\"og:site_name\" content=\"r3d-soft Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-26T10:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-26T15:58:56+00:00\" \/>\n<meta name=\"author\" content=\"r3dst0rm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"r3dst0rm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/?p=288#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/?p=288\"},\"author\":{\"name\":\"r3dst0rm\",\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/#\\\/schema\\\/person\\\/a1b4a7334c42a9d1c6082ba82eeb8074\"},\"headline\":\"Existential Types in TypeScript\",\"datePublished\":\"2022-07-26T10:00:00+00:00\",\"dateModified\":\"2022-07-26T15:58:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/?p=288\"},\"wordCount\":221,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/#organization\"},\"keywords\":[\"existential types\",\"generics\",\"typescript\"],\"articleSection\":[\"JavaScript \\\/ TypeScript\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/r3d-soft.de\\\/?p=288#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/?p=288\",\"url\":\"https:\\\/\\\/r3d-soft.de\\\/?p=288\",\"name\":\"Existential Types in TypeScript - r3d-soft Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/#website\"},\"datePublished\":\"2022-07-26T10:00:00+00:00\",\"dateModified\":\"2022-07-26T15:58:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/?p=288#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/r3d-soft.de\\\/?p=288\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/?p=288#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/r3d-soft.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Existential Types in TypeScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/#website\",\"url\":\"https:\\\/\\\/r3d-soft.de\\\/\",\"name\":\"r3d-soft Blog\",\"description\":\"Alles rund ums Coding\",\"publisher\":{\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/r3d-soft.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/#organization\",\"name\":\"Dominik\",\"url\":\"https:\\\/\\\/r3d-soft.de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/r3d-soft.de\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/cropped-ic_launcher-1.png\",\"contentUrl\":\"https:\\\/\\\/r3d-soft.de\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/cropped-ic_launcher-1.png\",\"width\":150,\"height\":145,\"caption\":\"Dominik\"},\"image\":{\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/r3d-soft.de\\\/#\\\/schema\\\/person\\\/a1b4a7334c42a9d1c6082ba82eeb8074\",\"name\":\"r3dst0rm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a934ec13ea5f6644fb25e876316fa607f1dfd067b9f73c0ab835dd1438b433d6?s=96&d=mm&r=pg\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a934ec13ea5f6644fb25e876316fa607f1dfd067b9f73c0ab835dd1438b433d6?s=96&d=mm&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a934ec13ea5f6644fb25e876316fa607f1dfd067b9f73c0ab835dd1438b433d6?s=96&d=mm&r=pg\",\"caption\":\"r3dst0rm\"},\"sameAs\":[\"http:\\\/\\\/blog.r3d-soft.de\"],\"url\":\"https:\\\/\\\/r3d-soft.de\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Existential Types in TypeScript - r3d-soft Blog","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:\/\/r3d-soft.de\/?p=288","og_locale":"de_DE","og_type":"article","og_title":"Existential Types in TypeScript - r3d-soft Blog","og_description":"Aus Haskell kennen wir die sogenannten &#8218;Existential Types&#8216;. TypeScript bietet leider nicht von Haus aus, diese Funktionalit\u00e4t an. Demnach gibt es immer wieder Code wie diesen, der so nicht funktioniert: Der Code soll beim zweiten Array Element einen Fehler erzeugen, das passiert aber nicht, da any erlaubt ist und der TypeScript Compiler aktuell nicht wei\u00df, [&hellip;]","og_url":"https:\/\/r3d-soft.de\/?p=288","og_site_name":"r3d-soft Blog","article_published_time":"2022-07-26T10:00:00+00:00","article_modified_time":"2022-07-26T15:58:56+00:00","author":"r3dst0rm","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"r3dst0rm","Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/r3d-soft.de\/?p=288#article","isPartOf":{"@id":"https:\/\/r3d-soft.de\/?p=288"},"author":{"name":"r3dst0rm","@id":"https:\/\/r3d-soft.de\/#\/schema\/person\/a1b4a7334c42a9d1c6082ba82eeb8074"},"headline":"Existential Types in TypeScript","datePublished":"2022-07-26T10:00:00+00:00","dateModified":"2022-07-26T15:58:56+00:00","mainEntityOfPage":{"@id":"https:\/\/r3d-soft.de\/?p=288"},"wordCount":221,"commentCount":0,"publisher":{"@id":"https:\/\/r3d-soft.de\/#organization"},"keywords":["existential types","generics","typescript"],"articleSection":["JavaScript \/ TypeScript"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/r3d-soft.de\/?p=288#respond"]}]},{"@type":"WebPage","@id":"https:\/\/r3d-soft.de\/?p=288","url":"https:\/\/r3d-soft.de\/?p=288","name":"Existential Types in TypeScript - r3d-soft Blog","isPartOf":{"@id":"https:\/\/r3d-soft.de\/#website"},"datePublished":"2022-07-26T10:00:00+00:00","dateModified":"2022-07-26T15:58:56+00:00","breadcrumb":{"@id":"https:\/\/r3d-soft.de\/?p=288#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/r3d-soft.de\/?p=288"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/r3d-soft.de\/?p=288#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/r3d-soft.de\/"},{"@type":"ListItem","position":2,"name":"Existential Types in TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/r3d-soft.de\/#website","url":"https:\/\/r3d-soft.de\/","name":"r3d-soft Blog","description":"Alles rund ums Coding","publisher":{"@id":"https:\/\/r3d-soft.de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/r3d-soft.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/r3d-soft.de\/#organization","name":"Dominik","url":"https:\/\/r3d-soft.de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/r3d-soft.de\/#\/schema\/logo\/image\/","url":"https:\/\/r3d-soft.de\/wp-content\/uploads\/2020\/04\/cropped-ic_launcher-1.png","contentUrl":"https:\/\/r3d-soft.de\/wp-content\/uploads\/2020\/04\/cropped-ic_launcher-1.png","width":150,"height":145,"caption":"Dominik"},"image":{"@id":"https:\/\/r3d-soft.de\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/r3d-soft.de\/#\/schema\/person\/a1b4a7334c42a9d1c6082ba82eeb8074","name":"r3dst0rm","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/a934ec13ea5f6644fb25e876316fa607f1dfd067b9f73c0ab835dd1438b433d6?s=96&d=mm&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/a934ec13ea5f6644fb25e876316fa607f1dfd067b9f73c0ab835dd1438b433d6?s=96&d=mm&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a934ec13ea5f6644fb25e876316fa607f1dfd067b9f73c0ab835dd1438b433d6?s=96&d=mm&r=pg","caption":"r3dst0rm"},"sameAs":["http:\/\/blog.r3d-soft.de"],"url":"https:\/\/r3d-soft.de\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/r3d-soft.de\/index.php?rest_route=\/wp\/v2\/posts\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/r3d-soft.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/r3d-soft.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/r3d-soft.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/r3d-soft.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=288"}],"version-history":[{"count":8,"href":"https:\/\/r3d-soft.de\/index.php?rest_route=\/wp\/v2\/posts\/288\/revisions"}],"predecessor-version":[{"id":309,"href":"https:\/\/r3d-soft.de\/index.php?rest_route=\/wp\/v2\/posts\/288\/revisions\/309"}],"wp:attachment":[{"href":"https:\/\/r3d-soft.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r3d-soft.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r3d-soft.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}