title: TypeScript iterating over object and creating a new one
body: <p>I have two objects of the same interface.</p>
  <pre><code>interface SizeFilter {
    key: string | undefined
  }
  
  const defaultFilter = {
      key: undefined,
  } as SizeFilter; 
  </code></pre>
  <p>I have a function which basically checks if there is a key set in a state and accordingly get filter options:</p>
  <pre><code>const { filters } = useSelector(({ sizeCurves }) =&gt; sizeCurves);
  
  
  // Get FilterOptions for filtering on the page.
  const getSelectedFilters = () =&gt; {
      const pageFilter = defaultFilter;
      // TODO: add an Object loop to check all properties and define value.
      pageFilter.sizeCurveKey = filters.sizeCurveKey ?? undefined ;
      return pageFilter;
  };
  </code></pre>
  <p>I have to decide whether I should take a filter value from the filters or from a default filter. And for that, I am setting <code>pageFilter</code> in the <code>getSelectedFilters</code> function.</p>
  <p>When I try to iterate over <code>defaultFilter</code> using <code>Object.Keys().map</code>,</p>
  <pre><code>Object.keys(defaultFilter).map(key =&gt;{
               const pageFilter[item] = (defaultFilter[ key ])? defaultFilter[ key ] : undefined;
          });
  </code></pre>
  <p>My editor throws warning on <code>defaultFilter[ key ]</code></p>
  <blockquote>
  <p>Element implicitly has an 'any' type because expression of type
  'string' can't be used to index type 'SizeFilter'.   No index
  signature with a parameter of type 'string' was found on type
  'SizeFilter'.</p>
  </blockquote>
  <p>I am not sure how to fix this issue.</p>