title: Angular in Typescript: how to pass generic Type to function
body: <p>Using Typescript to write an Angular 5 unit tests, I have a function that will query the DOM and return an instance of the <code>MyComponent</code> class if found:</p>
  
  <pre><code>function getMyComponent(hostFixture: ComponentFixture&lt;any&gt;): MyComponent {
    const debugElement = hostFixture.debugElement.query(By.directive(MyComponent));
  
    return (debugElement &amp;&amp; debugElement.componentInstance) || null;
  }
  </code></pre>
  
  <p>This works flawlessly. Now I'd like to generalize the function so that it could query any Type on demand. I figured this could be done with generic typesThe function would be called like so:</p>
  
  <pre><code>const instance: MyComponent = getDirective&lt;MyComponent&gt;(fixture);
  </code></pre>
  
  <p>I can't get it working though; Here is the broken function:</p>
  
  <pre><code>function getDirective&lt;T&gt;(hostFixture: ComponentFixture&lt;any&gt;): T {
    const debugElement = hostFixture.debugElement.query(By.directive(T));
  
    return (debugElement &amp;&amp; debugElement.componentInstance) || null;
  }
  </code></pre>
  
  <p>The first line within the function throws the error:</p>
  
  <blockquote>
    <p>TS2693: 'T' only refers to a type, but is being used as a value here</p>
  </blockquote>
  
  <p>What is the right syntax here? The Angular function I'm calling -- <code>By.directive()</code> -- takes an argument of type <code>Type&lt;any&gt;</code>, and is <a href="https://angular.io/api/platform-browser/By#directive" rel="noreferrer">documented here</a></p>