title: What is the difference between `keyof T` and `Extract<keyof T, string>` when using extended generics?
body: <p>Let's say I have an interface that defines valid values for a set of data:</p>
  
  <pre class="lang-js prettyprint-override"><code>interface Foo {
    bar: boolean;
  }
  </code></pre>
  
  <p>And I want a class to be able to expose that data with a method. I'm finding that it works fine if I use <code>keyof T</code> to define the keys:</p>
  
  <pre class="lang-js prettyprint-override"><code>abstract class Getter&lt;T&gt; {
    private data: T;
  
    get&lt;K extends keyof T&gt;(key: K): T[K] {
      return this.data[key];
    }
  
    abstract use(): void;
  }
  
  class ExtendedGetter&lt;T extends Foo&gt; extends Getter&lt;T&gt; {
    use() {
      this.get('bar'); // OK
    }
  }
  </code></pre>
  
  <p>However, restricting the keys to only accept strings with <code>Extract&lt;keyof T, string&gt;</code> causes an error:</p>
  
  <pre class="lang-js prettyprint-override"><code>abstract class Getter&lt;T&gt; {
    private data: T;
  
    get&lt;K extends Extract&lt;keyof T, string&gt;&gt;(key: K): T[K] {
      return this.data[key];
    }
  
    abstract use(): void;
  }
  
  class ExtendedGetter&lt;T extends Foo&gt; extends Getter&lt;T&gt; {
    use() {
      this.get('bar'); // ERROR
    }          ~~~~~
  }
  </code></pre>
  
  <blockquote>
    <p>Argument of type '"bar"' is not assignable to parameter of type 'Extract&lt;keyof T, string&gt;'. ts(2345)</p>
  </blockquote>
  
  <p>It's also worth noting that, in the second scenario, no error is thrown if <code>Foo</code> is used directly instead of using an extended generic:</p>
  
  <pre class="lang-js prettyprint-override"><code>class ExtendedGetter extends Getter&lt;Foo&gt; { ... }
  </code></pre>
  
  <p>Why does this happen?</p>
  
  <p>What is the difference between <code>Extract&lt;keyof T, string&gt;</code> and <code>keyof T</code> that causes the error?</p>