{"data":{"site":{"siteMetadata":{"title":"Lime Brains","description":"We are The Software House where business questions meet software answers.","url":"https://limebrains.com"}},"markdownRemark":{"html":"<h1>Problem 😱</h1>\n<p>You would like to create type for following object with dynamic property name:</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> gallery <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">homepage</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">'gallery-of-users'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">activeSlide</span><span class=\"token operator\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">feed</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">'gallery-of-posts'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">activeSlide</span><span class=\"token operator\">:</span> <span class=\"token number\">10</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<hr>\n<h1>Solution 🤓</h1>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">interface</span> <span class=\"token class-name\">IGalleryItem</span> <span class=\"token punctuation\">{</span>\n  key<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n  activeSlide<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">interface</span> <span class=\"token class-name\">IGallery</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token punctuation\">[</span>slideKeyWhichIsDynamic<span class=\"token operator\">:</span><span class=\"token builtin\">string</span><span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> IGalleryItem<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>Usage:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">const gallery: IGallery = {\n    ...\n}</code></pre></div>","excerpt":"Problem 😱 You would like to create type for following object with dynamic property name: Solution 🤓 Usage:","frontmatter":{"title":"How to define type in type-script for dynamic property name?","subtitle":"How to define type in type-script for dynamic property name?","date":"2018-01-08 14:35","seo":{"title":"How to define type in type-script for dynamic property name?","description":"How to define type in type-script for dynamic property name?","noindex":false}},"fields":{"slug":"/blog/2018-01-08T14:35-type-script-dynamic-property-type/"}}},"pageContext":{"slug":"/blog/2018-01-08T14:35-type-script-dynamic-property-type/","indexable":false}}