title: How to create interface for a function which creates a nested element structure in typescript?
body: <p>I am new to typescript. I am implementing a previously created function using javascript. The function takes in an object. Which have following properties</p>
  
  <ul>
  <li><code>tag</code>: which will be a <code>string</code>.</li>
  <li><code>children</code>: which is array of the same interface(i.e <code>ceProps</code> as shown below);</li>
  <li><code>style</code>: which will be object containing styles like (<code>color</code>, <code>fontSize</code> etc.)</li>
  <li>Any other keys could be added to this object.(Like <code>innerHTML</code>, <code>src</code> etc.)</li>
  </ul>
  
  <p>Here is by code.</p>
  
  <pre><code>interface Style { 
      [key : string ]: string;
  }
  
  interface ceProps {
      tag: string;
      style?: Style;
      children?: ceProps[];
      [key : string]: string;
  }
  
  const ce = ({tag, children, style, ...rest } : ceProps) =&gt; {
      const element = document.createElement(tag);
  
      //Adding properties
      for(let prop in rest){
          element[prop] = rest[prop];
      }
  
      //Adding children
      if(children){
          for(let child of children){
              element.appendChild(ce(child))     
          }
      }
  
      //Adding styles
      if(style){
          for(let prop in style){
              element.style[prop] = style[prop];
          }
      }
      return element;
  }
  </code></pre>
  
  <p>It shows error on the <code>style</code> and <code>children</code></p>
  
  <blockquote>
    <p>Property <code>'style'</code> of type <code>'Style | undefined'</code> is not assignable to string index type <code>'string'</code>.ts(2411)</p>
    
    <p>Property <code>'children'</code> of type <code>'ceProps[] | undefined'</code> is not assignable to string index type <code>'string'</code>.ts(2411)</p>
  </blockquote>
  
  <p>There is one more error one the line <code>element[prop] = rest[prop];</code> and same error on <code>element.style[prop] = style[prop];</code></p>
  
  <blockquote>
    <p>Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'HTMLElement'.
      No index signature with a parameter of type 'string' was found on type 'HTMLElement'</p>
  </blockquote>
  
  <p>Kindly explain each problem and its fix. </p>