title: Typescript Error: type 'string' can't be used to index type X
body: <p>I have a simple code:</p>
  <pre><code>const allTypes = { jpg: true, gif: true, png: true, mp4: true };
  const mediaType = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
  return Boolean(allTypes[mediaType]);
  </code></pre>
  <p>TypeScript is complaining:</p>
  <pre><code>Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ jpg: boolean; gif: boolean; png: boolean; mp4: boolean; }'.
    No index signature with a parameter of type 'string' was found on type '{ jpg: boolean; gif: boolean; png: boolean; mp4: boolean; }'.  TS7
  </code></pre>
  <p>I think I need to treat <code>mediaType</code> as <code>keyof typeof allTypes</code>, but don't know how.</p>
  <p>For sake of completion, the complete code is:</p>
  <pre><code>// these are all the types of media we support
  const allTypes = { jpg: true, gif: true, png: true, mp4: true };
  
  const MediaGallery = () =&gt; {
      const classes = useStyles();
      const [ filters, setFilters ] = useState(allTypes);
      return (
          &lt;div className={classes.root}&gt;
              {mediaList
                  .filter(({ url }) =&gt; {
                      const type = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
                      return Boolean(filters[type]);
                  })
                  .map(({ url, caption, hash }) =&gt; &lt;Media url={url} caption={caption} key={hash} /&gt;)}
              &lt;FiltersPanel onFiltersChanged={(newFilters: any) =&gt; setFilters(newFilters)} /&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>