{"componentChunkName":"component---src-templates-post-js","path":"/blog/2019/02/02/dynamically-build-typescript-string-literal-type/","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://sung.codes"}},"mdx":{"id":"d66f8632-d9dd-5cfe-ba70-752112f0b3ee","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Dynamically build TypeScript string literal type\",\n  \"date\": \"2019-02-02\",\n  \"banner\": \"./images/featured-image-1.jpg\",\n  \"published_at\": \"2019-02-02T19:02:55.000Z\",\n  \"tags\": \"typescript\",\n  \"author\": \"Sung M. Kim\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Photo by\\xA0\"), mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://unsplash.com/photos/t3d22GqvUqs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\"\n  }), mdx(\"em\", {\n    parentName: \"a\"\n  }, \"Kevin Jarrett\")), mdx(\"em\", {\n    parentName: \"p\"\n  }, \"\\xA0on\\xA0\"), mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://unsplash.com/search/photos/type-build?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\"\n  }), mdx(\"em\", {\n    parentName: \"a\"\n  }, \"Unsplash\"))), mdx(\"p\", null, \"TypeScript has \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types\"\n  }), \"String Literal Types\"), \", which lets you specify what string value is allowed for a variable.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"You can specify the allowed literal values during type declaration.\"), mdx(\"p\", null, \"When you have dozens of strings to allow with possibility to grow, adding it isn't maintainable and error prone.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"TypeScript provides \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html\"\n  }), \"keyof\"), \" operator to extract keys of a type to restrict assignable values.\"), mdx(\"p\", null, \"Let me show you how it can be used and a limitation thereof.\"), mdx(\"h2\", null, \"\\uD83D\\uDE80 Intro\"), mdx(\"p\", null, \"I've had an issue where I wanted to restrict an allowable value for a function to accept only DOM type values in an array.\"), mdx(\"p\", null, \"This post is a workaround found after \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://spectrum.chat/typescript/general/solved-is-there-a-way-to-create-type-from-an-array~2317e93b-0c66-4088-a4a6-9d6ebbd257ea\"\n  }), \"days of frustration\"), \".\"), mdx(\"p\", null, \"I will show you how to create a type to allow only DOM type values.\"), mdx(\"h2\", null, \"\\uD83C\\uDF20 Getting Started\"), mdx(\"p\", null, \"You need to create an object (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"not\"), \" an array), which contains object keys you want to restrict a type with.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"I will show you why later why an array would not work.\")), mdx(\"p\", null, \"Suppose that you have an object with DOM as keys.\"), mdx(\"p\", null, mdx(\"div\", _extends({\n    parentName: \"p\"\n  }, {\n    \"id\": \"gist94414166\",\n    \"className\": \"gist\"\n  }), \"\\n    \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-file\"\n  }), \"\\n      \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-data\"\n  }), \"\\n        \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"js-gist-file-update-container js-task-list-container file-box\"\n  }), \"\\n  \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"id\": \"file-doms-js\",\n    \"className\": \"file my-2\"\n  }), \"\\n    \\n\\n  \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"itemProp\": \"text\",\n    \"className\": \"Box-body p-0 blob-wrapper data type-javascript\"\n  }), \"\\n      \\n\", mdx(\"table\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"highlight tab-size js-file-line-container\",\n    \"data-tab-size\": \"8\",\n    \"data-paste-markdown-skip\": \"\"\n  }), \"\\n      \", mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-L1\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"1\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-LC1\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-k\"\n  }), \"const\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s1\"\n  }), \"doms\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-c1\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"{\")), \"\\n      \"), \"\\n      \", mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-L2\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"2\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-LC2\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), \"  \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-c1\"\n  }), \"a\"), \": \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s\"\n  }), \"\\\"\\\"\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \",\")), \"\\n      \"), \"\\n      \", mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-L3\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"3\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-LC3\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), \"  \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-c1\"\n  }), \"div\"), \": \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s\"\n  }), \"\\\"\\\"\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \",\")), \"\\n      \"), \"\\n      \", mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-L4\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"4\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-LC4\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), \"  \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-c1\"\n  }), \"p\"), \": \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s\"\n  }), \"\\\"\\\"\")), \"\\n      \"), \"\\n      \", mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-L5\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"5\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms-js-LC5\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \";\")), \"\\n      \"))), \"\\n\\n\\n  \"), \"\\n\\n  \")), \"\\n\\n      \"), \"\\n      \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-meta\"\n  }), \"\\n        \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://gist.github.com/dance2die/6360ef553f47a015a38964bbacd329af/raw/be2f5361cc37da8bacdc05da42d88086805a6f50/doms.js\",\n    \"style\": {\n      \"cssFloat\": \"right\"\n    }\n  }), \"view raw\"), \"\\n        \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://gist.github.com/dance2die/6360ef553f47a015a38964bbacd329af#file-doms-js\"\n  }), \"doms.js\"), \"\\n        hosted with \\u2764 by \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://github.com\"\n  }), \"GitHub\"), \"\\n      \"), \"\\n    \"))), mdx(\"a\", {\n    href: \"https://gist.github.com/dance2die/6360ef553f47a015a38964bbacd329af\"\n  }, \"View this gist on GitHub\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Left out rest of DOM types for brevity.\")), mdx(\"p\", null, \"If you create a type like \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"type DOMS = typeof doms;\"), \", then a variable of such type will have \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"a\"), \" \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"div\"), \", and \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"p\"), \" as properties.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"You don't want to restrict the value, not the property.\")), mdx(\"p\", null, \"So you need to extract keys from the \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"doms\"), \" to restrict allowable values, using \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"keyof\"), \" operator.\"), mdx(\"p\", null, mdx(\"div\", _extends({\n    parentName: \"p\"\n  }, {\n    \"id\": \"gist94414549\",\n    \"className\": \"gist\"\n  }), \"\\n    \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-file\"\n  }), \"\\n      \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-data\"\n  }), \"\\n        \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"js-gist-file-update-container js-task-list-container file-box\"\n  }), \"\\n  \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"id\": \"file-domtype-js\",\n    \"className\": \"file my-2\"\n  }), \"\\n    \\n\\n  \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"itemProp\": \"text\",\n    \"className\": \"Box-body p-0 blob-wrapper data type-javascript\"\n  }), \"\\n      \\n\", mdx(\"table\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"highlight tab-size js-file-line-container\",\n    \"data-tab-size\": \"8\",\n    \"data-paste-markdown-skip\": \"\"\n  }), \"\\n      \", mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-domtype-js-L1\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"1\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-domtype-js-LC1\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s1\"\n  }), \"type\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-v\"\n  }), \"DOMType\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-c1\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s1\"\n  }), \"keyof\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-k\"\n  }), \"typeof\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s1\"\n  }), \"doms\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \";\")), \"\\n      \"))), \"\\n\\n\\n  \"), \"\\n\\n  \")), \"\\n\\n      \"), \"\\n      \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-meta\"\n  }), \"\\n        \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://gist.github.com/dance2die/f6f5a0cfd672f2940c895594faff7bff/raw/d011d4dd13e3bccfe725b42852f2cc8bd3d9a8b8/domtype.js\",\n    \"style\": {\n      \"cssFloat\": \"right\"\n    }\n  }), \"view raw\"), \"\\n        \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://gist.github.com/dance2die/f6f5a0cfd672f2940c895594faff7bff#file-domtype-js\"\n  }), \"domtype.js\"), \"\\n        hosted with \\u2764 by \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://github.com\"\n  }), \"GitHub\"), \"\\n      \"), \"\\n    \"))), mdx(\"a\", {\n    href: \"https://gist.github.com/dance2die/f6f5a0cfd672f2940c895594faff7bff\"\n  }, \"View this gist on GitHub\"), mdx(\"p\", null, \"DOMType declaration\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/5b3965b40530da8b97d4dd8927632ec9/assignment.gif\",\n    \"alt\": null\n  }))), mdx(\"p\", null, \"Example of leaving out \\\"keyof\\\".\"), mdx(\"p\", null, \"You can see that \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"a\"), \" has \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"a\"), \", \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"div\"), \", and \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"p\"), \" as properties while \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"b\"), \" is recognized as a string.\"), mdx(\"h2\", null, \"\\uD83D\\uDC7E Example Usage\"), mdx(\"p\", null, \"Suppose that you have a function that accepts a variable of type \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"DOMType\"), \".\"), mdx(\"p\", null, mdx(\"div\", _extends({\n    parentName: \"p\"\n  }, {\n    \"id\": \"gist94414386\",\n    \"className\": \"gist\"\n  }), \"\\n    \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-file\"\n  }), \"\\n      \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-data\"\n  }), \"\\n        \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"js-gist-file-update-container js-task-list-container file-box\"\n  }), \"\\n  \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"id\": \"file-printdom-js\",\n    \"className\": \"file my-2\"\n  }), \"\\n    \\n\\n  \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"itemProp\": \"text\",\n    \"className\": \"Box-body p-0 blob-wrapper data type-javascript\"\n  }), \"\\n      \\n\", mdx(\"table\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"highlight tab-size js-file-line-container\",\n    \"data-tab-size\": \"8\",\n    \"data-paste-markdown-skip\": \"\"\n  }), \"\\n      \", mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-printdom-js-L1\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"1\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-printdom-js-LC1\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-k\"\n  }), \"function\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-en\"\n  }), \"printDOM\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s1\"\n  }), \"dom\"), \": \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-v\"\n  }), \"DOMType\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \")\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"{\")), \"\\n      \"), \"\\n      \", mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-printdom-js-L2\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"2\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-printdom-js-LC2\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), \"  \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-smi\"\n  }), \"console\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-en\"\n  }), \"log\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s\"\n  }), \"`DOM value: \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"pl-s1\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"${\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"pl-s1\"\n  }), \"dom\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"}\")), \"`\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \";\")), \"\\n      \"), \"\\n      \", mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-printdom-js-L3\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"3\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-printdom-js-LC3\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"}\")), \"\\n      \"))), \"\\n\\n\\n  \"), \"\\n\\n  \")), \"\\n\\n      \"), \"\\n      \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-meta\"\n  }), \"\\n        \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://gist.github.com/dance2die/e3b0dc753d6975d30ec328f41000cb74/raw/a3508683813be82d949e087c9c171324152f23a4/printDOM.js\",\n    \"style\": {\n      \"cssFloat\": \"right\"\n    }\n  }), \"view raw\"), \"\\n        \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://gist.github.com/dance2die/e3b0dc753d6975d30ec328f41000cb74#file-printdom-js\"\n  }), \"printDOM.js\"), \"\\n        hosted with \\u2764 by \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://github.com\"\n  }), \"GitHub\"), \"\\n      \"), \"\\n    \"))), mdx(\"a\", {\n    href: \"https://gist.github.com/dance2die/e3b0dc753d6975d30ec328f41000cb74\"\n  }, \"View this gist on GitHub\"), mdx(\"p\", null, \"printDOM\"), mdx(\"p\", null, \"When you pass values other than \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"a\"), \", \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"div\"), \", \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"p\"), \", you get an error message during compiler time.\"), mdx(\"h2\", null, \"\\uD83E\\uDD14 Why no array?\"), mdx(\"p\", null, \"You might have declared a list of values as an array.\"), mdx(\"p\", null, mdx(\"div\", _extends({\n    parentName: \"p\"\n  }, {\n    \"id\": \"gist94415636\",\n    \"className\": \"gist\"\n  }), \"\\n    \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-file\"\n  }), \"\\n      \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-data\"\n  }), \"\\n        \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"js-gist-file-update-container js-task-list-container file-box\"\n  }), \"\\n  \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"id\": \"file-doms_array-js\",\n    \"className\": \"file my-2\"\n  }), \"\\n    \\n\\n  \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"itemProp\": \"text\",\n    \"className\": \"Box-body p-0 blob-wrapper data type-javascript\"\n  }), \"\\n      \\n\", mdx(\"table\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"highlight tab-size js-file-line-container\",\n    \"data-tab-size\": \"8\",\n    \"data-paste-markdown-skip\": \"\"\n  }), \"\\n      \", mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms_array-js-L1\",\n    \"className\": \"blob-num js-line-number\",\n    \"data-line-number\": \"1\"\n  })), \"\\n        \", mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"id\": \"file-doms_array-js-LC1\",\n    \"className\": \"blob-code blob-code-inner js-file-line\"\n  }), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-k\"\n  }), \"const\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s1\"\n  }), \"doms\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-c1\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s\"\n  }), \"'a'\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \",\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s\"\n  }), \"'div'\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \",\"), \" \", mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-s\"\n  }), \"'p'\"), mdx(\"span\", _extends({\n    parentName: \"td\"\n  }, {\n    \"className\": \"pl-kos\"\n  }), \"]\")), \"\\n      \"))), \"\\n\\n\\n  \"), \"\\n\\n  \")), \"\\n\\n      \"), \"\\n      \", mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gist-meta\"\n  }), \"\\n        \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://gist.github.com/dance2die/5ad09130defbd016a8b28afe00a5e030/raw/a7a27f8fc61d102fc8c49dc5cb78a5badda01672/doms_array.js\",\n    \"style\": {\n      \"cssFloat\": \"right\"\n    }\n  }), \"view raw\"), \"\\n        \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://gist.github.com/dance2die/5ad09130defbd016a8b28afe00a5e030#file-doms_array-js\"\n  }), \"doms_array.js\"), \"\\n        hosted with \\u2764 by \", mdx(\"a\", _extends({\n    parentName: \"div\"\n  }, {\n    \"href\": \"https://github.com\"\n  }), \"GitHub\"), \"\\n      \"), \"\\n    \"))), mdx(\"a\", {\n    href: \"https://gist.github.com/dance2die/5ad09130defbd016a8b28afe00a5e030\"\n  }, \"View this gist on GitHub\"), mdx(\"p\", null, \"But the current version of TypeScript (3.3.1) doesn't know how to infer types from an array passed as a variable.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Refer to\"), \" \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://stackoverflow.com/a/54061487/4035\"\n  }), mdx(\"em\", {\n    parentName: \"a\"\n  }, \"this Stack Overflow answer\")), mdx(\"em\", {\n    parentName: \"p\"\n  }, \".\")), mdx(\"p\", null, \"In the demo below, you can see that \", \"`\", \"printDOMType\\\" accepts any string without any errors.\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/qrrq24k7q\"\n  }), mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"src\": \"https://codesandbox.io/static/img/play-codesandbox.svg\",\n    \"alt\": \"Edit TypeScript - Array to Literal - Doesn't work\"\n  })))), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"584px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c85b11922d1592a093b7adc4fc5080b4/e05eb/array-literal.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"77.60617760617761%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAIAAACZeshMAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACQ0lEQVQoz42SWU/bQBCA/RNANMVxEgcHQg7HCYkdx3bwuT728HptJxxFAUHU8lCV///aGMpDW6CVPo1mV/o0M5rhIuSO7GQWpCr7qgCm2W4P0WFedHwq6LCufQSn2FHLoHJ40w+uJZOMLNAJaBflp4h1AlbXcH2O3mMnh6IFJZAeh6kUEMmjdTXhZzE/S3g1qWuvzOEb8omVNI1UdFjbyVo2a9m5YDDByOoGe+Y10cmLILxSyfvm3b7/tOd833N+7HtPB+f3z2xr5/e15f2nXbQfDpxvnxfl4Sw+1FBNw7t4uOtOQ9xZkI58Og7JJCnGIezZieK5U+Af+bgDWS8sT2w8AvTUJYNw3XXpxAE9Oz0NrkQr5fTQV/FmTm+X+ZdxSOWEjXB5lpV9tO6nF91o1cfFgBTHfjakxSAtZMDaBm5ZWUPHnIUDM2WTIJoGYBl7RgzM/HZ+86hfP46im11vvAZ5FVWJCqtcw/y8+qxm7i6jrgV6TiwayXAZS0ZytCRNNxMdIlmoocPGAjdMIuhvrWoaQhngMxAtUKgSb4LhgGxlvFXjzITh2I+PPCpFpWjSl2q/ye14JUargY26LuQjIIBAsvMJ3kzQXdtivwTtnSNparE4j6vHAjd10lxU+6xN49os+rvUn7KBgJN6JopkWspFOUhXbSurjkHHH5uV7BAvyh03BUpeyGzdtvLnq4T/A+fQMC4ClyVKcTkk17uywoI2TCoY/4Yzykt7vTLLq+HqQbnYKmTTCu5O4EPL34jB7cf8BEvG1TTcBfRpAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"array literal\",\n    \"title\": \"array literal\",\n    \"src\": \"/static/c85b11922d1592a093b7adc4fc5080b4/e05eb/array-literal.png\",\n    \"srcSet\": [\"/static/c85b11922d1592a093b7adc4fc5080b4/a2ead/array-literal.png 259w\", \"/static/c85b11922d1592a093b7adc4fc5080b4/6b9fd/array-literal.png 518w\", \"/static/c85b11922d1592a093b7adc4fc5080b4/e05eb/array-literal.png 584w\"],\n    \"sizes\": \"(max-width: 584px) 100vw, 584px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\\"printDOMType\\\" accepts any string\"), mdx(\"p\", null, \"A change is underway to enable array value to be inferred to be used as string literals in version 3.4.\\nFor now, you'd have to stick with an object.\"), mdx(\"h2\", null, \"\\uD83C\\uDF89 Parting Words\"), mdx(\"p\", null, \"I've started diving into the world of TypeScript and figuring this out took me roughly four days.\"), mdx(\"p\", null, \"TypeScript has been both good and bad and I consider this a part of learning process.\"), mdx(\"p\", null, \"I hope you don't go thru the same trouble with this issue.\"), mdx(\"h2\", null, \"\\uD83C\\uDFD4 Resources\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Official TypeScript Documentation\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types\"\n  }), \"String Literal Types\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html\"\n  }), \"keyof\"), \" operator\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://spectrum.chat/typescript/general/solved-is-there-a-way-to-create-type-from-an-array~2317e93b-0c66-4088-a4a6-9d6ebbd257ea\"\n  }), \"Four days of self-note\"), \" in Spectrum\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/vj4w899q55\"\n  }), \"CodeSandbox Demo\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Stack Overflow Question - \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://stackoverflow.com/a/54061487/4035\"\n  }), \"array to strin\"), mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://stackoverflow.com/a/54061487/4035\"\n  }), \"g\"), \" \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://stackoverflow.com/a/54061487/4035\"\n  }), \"literal type\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Dynamically build TypeScript string literal type","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M355%201v2l-3%202c-1%200-2%201-2%203s-2%204-3%202c0-2-1-2-2-1h-1c0-2%200-2-2-1-4%201-6%201-13-1l-7-3v2c0%206%2011%2012%2024%2014%205%200%208-1%2014-6l5-3%203-3%204-2c2-1%203-1%202-4%200-2%200-2-10-2l-9%201M136%205l-3%201-2%201c0%203%201%205%202%203%201-1%201-1%201%201l1%202%201%201-3%201-4%201h-6l6%202%208%203%2014%204v-3c-1-5-1-6%201-6s2%201%202%204%200%204%202%204c3%200%204-3%201-5l-3-4-3-2c-2%200-3-1-3-2%200-2%200-2-1-1h-2c-1-1-1%200-2%202-2%204-3%204-3-1%200-6-2-9-4-6m16%202l-2%202v2c0%201%203%201%203-1s2%200%202%203c1%203%201%203%206%203l5-1-2%204c-3%203-4%204-2%204%201%200%207-9%207-11l-2%201h-1v-2h-3l-3-2-1-1-1-2-3-1c-2%200-2%200-3%202m-42%2010c0%203-1%204-3%202-1-1-4%201-4%203l-3%202c-4%201-5%203-2%203%202%201%204%206%202%206v9l2-1h4l4-1c1-2%201-2-2-3-5-2-5-3-2-5%202-2%203-2%204-1%203%202%203%201%202-2-1-4%200-6%201-4s1%202%202%201h1c0%202%201%201%203-1%201-2%201-2-3-3l-4-3c0-4-1-4-2-5v3m64%2025c-1%201%200%201%201%201v1l1%201%204%201%203%201h-4l-7-2c-4-2-11-3-11%200h-6l-6%201-4%202c-3%200-2%201%204%202h4l-6%201c-4%200-7%202-9%203l-5%204v2h3l4%201c6-1%205%200-1%202l-5%202-1%201-4%203c-2%201-2%202-1%202l3%201-2%201c-2%200-3%200-2-1h-2c-2%200-2%200-1-2%202-2%202-4-1-3-4%202-6%207-2%206l3-1-3%202-2%203-1%201-1%207c1%206%200%208-1%207l-3-20v-1c-2%202-2%2011%200%2019%204%209%204%2012%201%2014-2%202-2%202-2%200s-3-6-3-5l-2%203c-1%203-1%203-2%202s-2%202-1%206c0%202%200%202-3%201-3-2-6%200-3%202%201%201%201%202-2%204-4%204-5%204-5%200-2-5-3-6-8-3-3%202-4%202-2%204%201%201%202%208%201%2012l-2%209-2%206-1%202-2%203-4%206c-1%204-2%205-4%203l-2%201-4%203c-1%201%200%201%203%203l5%204%204%201c3%200%203%200%202%201v3l2-2c0-3%205-3%206%200%201%201-1%209-3%2012l-5%207c-1%204-3%207-4%207l-1%201%202%201h6c5%200%207%200%2011%202l7%203%206%202c4%202%205%202%209%201h9c14%201%2034-7%2034-13%200-2%201-3%203-2%203%201%202%206-2%2010-6%207-7%2010-5%2014%200%202%202%203%204%204l4%202h4l3-1c5%201%205%201%201-3-2-2-2-2-1-5%201-2%203-3%204%200%201%202%203%201%204-2%200-2%201-3%202-3v5c-2%201-2%2010%200%2011%201%201%201%201-1%201-2-1-3-1-4%201l-7%201c-15%200-18-1-22-3l-6-2-4-1h-5a173%20173%200%2001-66-3c-4%200-12-4-15-7l-3-5c0-5-2-6-2-3-3%2013-3%2017%200%2022%202%202%2021%2014%2023%2014s7%203%2010%207l6%204c1-1%204%200%208%201%2011%203%2025%201%2032-4l4-2-7%207-5%204%201%201h-9l-4%201%205%201%205%202%205-3c3-1%205-3%205-4h2l5-1%203-2c-1-2-1-3%201-3l1%201%201%201%201-3c-1-3%204-5%207-3h4l1-1v-1c1%202%208%201%209%200l2-1%201-1c0-1%201-3%203-3l1-3%202-2%202-1%202-1c1%201%203%200%204-1s2-2%203-1l3-2%202-3%201-1%202-2%202-2%201-1v2c-2%206-1%2012%201%2012l3%201c1%201%202%202%204%201l2%201c0%201%201%202%202%201%202%200%203-2%201-2v-1h6c4%200%204-1%204-2l-1-4h-2l-1%203c1%202-2%203-3%201-2-1-2-5%200-5%203%200%206-1%208-3h4l1-1h2c3%200%204%201%200%203-2%201-2%202%201%203%202%201%202%200%201-1l1-2%201%201%203%208c2%200%203%202%202%205l-2%201c-2%200-3%202-2%203v1c0%202%203%202%205%201h6l-1-2v-1c1-1%203%200%204%202%202%203%205%203%206-2%200-2%201-3%202-3l-2-2-5-2c-1%201%201%203%203%203v1c-2%202-5%201-5%200v-3l-1%201-2%202c-4%200-4-2-1-3l3-2-3-1c-4-2-5-3-2-3l2%201%202%201c1-1%202%200%202%201l1%201v-3c0-4%200-4-3-3l-2-1c0-1%204-2%205-1l2-1-2-1-3-1h1l1-2c-1-3%200-3%202%200%201%202%201%202%202%201%202-1%202-1%203%201h2c3-2%202-3%200-3l-2-1-1-1-2-2h2v-4c-2%200-1-2%202-3s3-1%203%201l2%202c2%200%202-3%200-4-3-3-1-6%203-6h5l-1-1-2-1c0-1%203%200%205%202h3c2-1%200-3-3-5l-1-1c3%200%202-2%200-3-3-1-3-1-2%201%200%202%200%203-2%204l-3%201c-3%201-3%201-4-2-1-6-2-4-1%202%200%206%200%207-2%204-1-1-2-2-1-4%200-3%200-3-1-2-2%200-2%201-2%206%201%205%200%208-2%205l-2-2c-2%200-2%205-1%207v2h-2c1%203%200%202-3%200-2-3-2-3-1-6l1-4%201-1c2-1%202-3%200-3l-1-1c1-1-1-3-3-5-5-4-10-12-10-16v-3l-7-15-3-6-2-2%203-4%209-16%202-5%204-8%203-8c2-3%202-4%202-8a301%20301%200%2001-1-13l7-2-1-1-2-1c0-1-1-2-3-2l-3-2-1-3-2-3-1-2-2-4-4-7-3-5c1-1-1-3-3-2l-1%205-1%204-1-4-1-4-1-1-6-5-6-5c0-1-3-4-5-4l-3-1c0-2-7-3-8-1m-28%2012l1%201v1c0%202%203%206%209%2010%205%204%205%205%202%204-3%200-4%201-2%203l-1%201-3%201%202%201c2%200%202%201%201%201-3%200-3%204-1%204s2%200%200%201c-6%202-10-1-10-8-1-4-3-8-4-4l-3%201c-3%200-3-1%201-2%202-2%202-2%200-2l-7%203%203%202c2%200%203%201%203%202l1%201%201-1%201-1c1%201%200%207-1%209l6%208%206%207-2-1h-3v-1l-1-1c-1%201-2%200-3-3-2-3-4-4-4-1l2%203%201%202%201%201c2%200%203%200%203%202%201%201%201%202%202%201l1%202%201%202%201%201%205%201c10%202%2011%202%2010%204%200%203%203%202%206-1l4-2%202-2%201-2-7-2%203-4c2-2%203-3%201-4l-1-4-2-2c-2%200-2%200-1-1h4l4%201c2%200%201-3%200-4-2%200-1-2%201-2%203%200%209-3%208-4l3-2%202-2c-1-1%200-3%201-4%201-3%201-3-2-4-4-2-5-1-9%202-2%203-2%203%200%203%204-2%205-2%205-1-1%201%200%201%201%201v1c-4%204-6%204-9%203l-4-2-4-3-4-3-1-3c-1-3-5-5-9-3l-2%201%202%201c2%200%203%202%201%202v2l-4-2-2-2-1-5c0-3-1-3-3-3l-3%201m174%201v1l-1%202c-2%201-1%206%202%209l2%204c0%203%2011-2%2017-8%203-3%203-3-2-3l-4-1-7-3c-2%201-4%200-4-2%200-1-1-1-3%201m-17%2015l2%202v2l-1-1h-3l3%203c4%202%204%203%202%205v3c1%201%201%201%202-1s1-2%204-1l3%201c2-1%201-3-1-3l-2-2h5c1%201%201%201%202-2l1-4-3-1c-2%201-3%201-3-1h-11m-30%2018v3l-1%201c-4%200-3%2010%202%2014%202%203%203%203%207%203%206-1%206-1%206-7s-2-10-6-12l-3-2c-3-2-5-2-5%200m62%201c-1%201%200%202%203%203l1%208c-1%206%200%207%202%209s3%203%202%205c-1%201%200%202%201%202%201%201%200%201-2%201-10%202-12%203-15%207-2%205-3%207%200%2010l2%204c0%202%205%206%209%208l3%202c-2%201-8-2-10-4-1-2-2%200-1%203l1%204%206-1%2010%201c5%201%205%200%205-4-1-3-1-3-4-2l-7-2-4-2%203%201%205%201h2l3-1c2-1%203%200%204%202%201%203%204%205%208%205l4%203-1%201-4-2c-5%200-5%201-2%207l2%207%201%203%201%202%202%207a670%20670%200%20016%2014l-2%203v3c-1%200-4%206-4%2011-1%204-2%205-3%203h-7l-22%201h-3c-2%202%200%204%204%203l4%201%205%201%206%202%201%202c-4%200-4%200-2%202l2%202%207-2c7-3%2010-3%2011-1l-1%201h-1l1%201a330%20330%200%200013%2027l3-1v-7l-2-4c-2-2-7-14-6-15l1-3c0-2%201-3%204-1%201%201%202%200%203-1v2c0%201-1%202-2%201l-2%201%201%201h2c1%201%202%200%203-1l2-3c2-2%203-6%201-6s-1-1%201-4l5-2c5%200%206-1%206-6%200-6-1-8-4-6l-2-1-1-2c-2%200-1-2%203-4l4-1v-10l-1-10v-6l-1%201h-2c-1-2-3-2-12-3-11%200-13-1-11-2%203-2%202-6-1-6l-6-2-7-4c-4-2-4-3%200-2%202%200%202%200%201-1-2-1-2-2-1-3v-1l-1%201-2%201c-1%200-1-1%202-3s3-3%203-7c-1-6-8-13-14-13-2%200-2%200-1-1l1-2c0-1%201-2%208-1%2011%200%2018%201%2018%202h1c1-1%203%200%209%201l7%202-1%202c-2%203-1%204%201%201%202-2%202-2%206-1l4%201-4-2c-3-1-4-2-5-4l-2-2-1-2h5c5%200%207-1%207-4%200-2%200-2-2-1-1%202-1%202-2%201s0-5%203-5l1-1-6-1h-7c0-2-2-1-2%201-1%202-3%203-3%201v-2c-1-1-15%206-15%207l-1%201c-1-1-3%200-4%201-4%201-8%201-8-1h-2l-5%201c-6-2-7-3-6-7%201-8%201-9%203-9v-4h-4c-2%201-2%201-3-1h-2m-217%206c-1%205%200%2019%201%2021%202%203%202%204%201%204-1-1-2%200-2%201h2c2-1%202-1%202%202l1%203%207%206c7%207%2014%2010%2018%2010l6-1c2%200%202%200-11-11-7-6-7-6-9-5s-2%201-2-1l3-1c2%200%202-1%201-9v-1h1l1%201%201%202c2%200%201-4-1-5h-4v-2c2%200%201-2-1-2l-1-2c1-1%200-2-1-2-1-1-2-1-2-3%201-1%200-2-1-2l-1-1-1-2v2c0%202%200%203-2%203-2%201-2%200-4-3-2-4-2-4-2-2m-60%2015c-2%200-4%204-4%207%200%202%200%202-2%200l-3-2c-1%201-3%200-5-1-4-2-4-1-4%203%200%203%200%203-2%203l-4-1-2-1%202%203%203%203c-1%201%200%204%202%204l1%202%201%201%201%203c-1%202-1%202%201%202l3%201c0%201%207%204%208%203%202-1-1-4-3-4l-1-3c0-3%200-3%203-3s3%200%204-5c0-5%204-14%206-14l1-1h-6m172%204v8c1%207-1%2018-2%2023v5l1%204h6c5%200%207-1%206-2l1-1%201-1h-2c-3%200-6-2-5-5v-10l-2-2-1-9c0-8-1-12-3-10m-163%204l-4%207-2%203-1%202-2%205c-3%203-3%2013%200%2011l1-2%202-3%201-3%201-2c2%200%204-4%204-6l1-2%202-5%201-6c2-3-1-2-4%201m244-2v1l1%201h-1l-3%202%201%202%201%201-3-1-5-2c-1%200%203%204%206%205l3%203c-1%202%202%202%204%201%202-2%202-2-1-3-2%200-3-1-3-2s2-2%203-1c1%202%207%204%209%203%202-2%202-3-1-4-3%200-9-3-9-4%200-2-2-3-2-2M3%20134c0%202%200%203%202%202l1%202%201%202c1%200%203%206%202%207l1%201c3%200%204%200%203%202l1%202%201%201-1%201c-2-1-2%200-2%203%200%202%200%203%202%203l1%201-1%201c-4-2-1%202%2010%2012l5%206%203%203%207%206c4%204%204%204%207-9l4-16c3-8%203-15%201-16l-2-1h-1l-2%201-3%201h-5l-16-1c-3-1-10-9-10-10s-7-6-9-6v2m191%2024l-6%202c-2%200-3%200-2%202l-1%201-1-1-8%201-8%201c-2%200-1%203%201%205a1580%201580%200%200114%205h1c-1%202%201%204%204%204l2%202%202%201c2-1%203%201%201%203v4l1%203v-3l2-4%202-2%201-3c2-2%203-1%205%201%201%202%201%202%202%201h7c2%200-7-15-11-20l-5-5-3%202m144%2013a6403%206403%200%2000-15%204c-1%201%207%2019%209%2023l2%203c0%208%200%208%201%205h6l3-1c2%200%202%200%201%201s0%201%201%201c3%201%205%200%203-1h1c2%200%203-2%204-5s2-4%206-4l4-2-4-8-2-5-1-2v2l-2%201c-1%200-2%201-1%203l1%202%201%201h-3l-1-1%201-2h-2v-1c1-1%201-1-1-1-4%201-6-1-3-3v-2c-2-1-2-1%202-2h4l2%202c1-1%200-2-1-4l-1-4h-15m-131%2016c-2%202-3%203-5%203h-6l-2%201c-2%200-3%202-1%202v2c-2%201%204%206%207%205l2%201-3%201-3%201h-2c-2%200-2%200-1-1s0-3-1-3l-1%201-1%205v5l3%202c1%201%201%201-1%201-3-1-4%200-1%202%206%206%2017%208%2022%205%202-2%202-2%202%200-1%202-1%202%204%201l3-2c-2%200-3-2-1-2h-1l-3-1h-2v-2l1-4c-1-3%200-3%202-3%203%201%203-1%200-2-3%200-6%202-4%203v1c-2%200-2%200-1%201%202%202%200%203-3%202-6-2-8-6-3-5%202%201%203%200%204-1%203-2%203-2-4-5-4-1-5-2-3-2h4l3%202v-1c-2-1-3-7-1-7l4%205%201%201v2c-2%201%200%202%204%202l4%201h1c0-2-1-2-2-2l-3-3c-3-5-5-8-6-6h-1c-2-2-2-3%200-4h2c2%200%201-5-1-5-2-1-3-1-6%203m104%204c-2%202-3%203-2%204%201%203%202%203-4%206-7%205-8%205-10%202-3-2-6-3-7%200h-3c-4-2-10%201-8%204v3l2%201%202%201v2l3%202%201%201%201-2v-2c-1-2-1-2%201-3%203-2%208-4%209-3l-1%201-1%201-2%202c-2%201-2%201-1-1%201-1%201-1-1-1-1%200-2%201-2%203l-1%205-2%204c0%202%200%202-1%200l-2-2-1-1c0-2-6-7-7-6v1l-1%205c-2%203-1%204%201%202h1l-1%203-1%202c0%203-3%204-6%203-2-1%200-4%202-4h2l-1-1-1-2h-1l-2-1c0-3-2-2-2%200s0%202-2%202c-2-1-2-1-2%203l-2%206v4c2%201%202%202%202%203-1%202%201%203%203%201h1l3%202%203%201h3c1-1%201-1-1-1-3%200-2-7%202-11l2-3%201-2c2-1%203-2%202-3l1-1%201%202%202%201v1l-1%202-1%204v3l2-2%201-1%201%202v-1c0-3%202-2%203%200l2%201c2-1%201-4-1-4-2-1-1-2%203-3l3-1c1-1%202-2%204-1l2%201c-3%200-4%202-2%205%201%201%206%202%206%200l1-1%201%202-1%202-1%202-4%201c-5%200-8%201-9%205-1%202-1%202-3%202-1-1-2%200-3%201-2%203-1%204%202%204l4%202h1l1-2%201%202h7c3%200%204-1%202-5l-1-1c-1%202-5%202-8-1-3-2-1-4%205-5%205%200%207%201%206%204-1%202%200%203%203%203s4%202%201%203c-2%200-3%201-1%203%202%201%202%201%202-1l3-3c1-2%201-2-1-5-2-1-3-3-2-3l1-2%202-1%203%201v1l-1%202%202-1%205-1%208-2c2%200%203%200%203%202-1%204%203%203%204%200%202-5%200-5-7-4l-7%201h-2c0%202-6%200-8-2l-3-1-2-1%201-1%207-7c8-7%209-12%205-17l-1-5v-2l-1-4c0-5-4-8-9-4m80%2023l-1%206c-3%202-2%203%201%203%202%200%203%200%202%201l-3%201c-2-1-3%200-3%201l-2%201c-6%200-6%204-1%2010%203%202%203%203%201%204v1l2%203c0%202%201%203%204%204%209%204%208%204%209-14v-16l-4-1c-3-1-3-1%200-1%202%200%202%200%201-1-2-1-2-1%200-1%204%200%202-5-3-5-3%200-3%200-3%204m-119%2037c-2%203-2%203%200%204v1l-1%202%201%201h1c0%201-1%202-3%201h-1l1%201%201%201v1l1%202c0%202%200%202%202%200l3-6%202-3v3c0%202%200%203%202%203s2%200%202-6c1-2%203-4%203-2l2%202%202-2-2-2-3-2c-2-1-2-1-2%202l-2%203c-1-1-3%200-4%201l-3%201%202-2c3-3%204-4%201-4l-2-1-3%201m67%201c-4%203-4%203-1%206%202%201%203%202%204%201%202-2%2012%201%2012%203l3%201c4%200%204-2%200-2-1%200-3-1-3-3-2-2-4-3-5-2-2%202-3%201-2-1%200-1-3-5-5-5l-3%202m42%204v2c2%201-2%207-5%207l-3-1c0-1-1-2-3-2-3%200-3%200-3%202l1%202%207%201c5%200%206%200%206-2l2-1%201%202%204%201c4%200%204%200%202-1l-2-1h2c5%200%205-3%201-3-1-1-3-1-3-3-1-4-5-6-7-3'%20fill='%23FFC600'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.4953271028037383,"src":"/static/49a6eccf51eb5d7f1525ecfc689926ee/4fe8c/featured-image-1.jpg","srcSet":"/static/49a6eccf51eb5d7f1525ecfc689926ee/e75b5/featured-image-1.jpg 160w,\n/static/49a6eccf51eb5d7f1525ecfc689926ee/c01e2/featured-image-1.jpg 320w,\n/static/49a6eccf51eb5d7f1525ecfc689926ee/4fe8c/featured-image-1.jpg 600w","srcWebp":"/static/49a6eccf51eb5d7f1525ecfc689926ee/ad85c/featured-image-1.webp","srcSetWebp":"/static/49a6eccf51eb5d7f1525ecfc689926ee/578e8/featured-image-1.webp 160w,\n/static/49a6eccf51eb5d7f1525ecfc689926ee/8dbf3/featured-image-1.webp 320w,\n/static/49a6eccf51eb5d7f1525ecfc689926ee/ad85c/featured-image-1.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}}},"excerpt":"Photo by  Kevin Jarrett  on  Unsplash TypeScript has  String Literal Types , which lets you specify what string value is allowed for a…","fields":{"year":"2019","slug":"/blog/2019/02/02/dynamically-build-typescript-string-literal-type/"}}},"pageContext":{"id":"d66f8632-d9dd-5cfe-ba70-752112f0b3ee"}},"staticQueryHashes":["398935099"]}