title: Is there a way to add a type assertion / annotation to a template input variable?
body: <h1>Background</h1>
  <p>I have a template that looks like this (I'm using some component that uses this as the basis for a repeated item, it's the <code>&lt;p-pickList&gt;</code>, but the question is not specific about that component, just as an example)</p>
  <p>For background, let's say I have a type <code>Foo</code> and my component has a <code>foos: Foo[]</code>, I'm feeding it to the <code>&lt;p-pickList&gt;</code> component under the <code>[source]</code> attribute and its doing the internal <code>*ngFor</code> for it, all I have to do is provide a template</p>
  <pre class="lang-html prettyprint-override"><code> &lt;ng-template let-foo pTemplate=&quot;item&quot;&gt;
     ...
     {{ foo.anythingGoesHereWithNoWarningAndNoAutocomplete }}
  </code></pre>
  <p>However, the type information on <code>foo</code> seems to be lost.</p>
  <p>I'm a big fan of type safety and I like that Intellij (or any other editor) can show me a warning if inside the template I do something like specifying an invalid attribute of <code>foo</code></p>
  <p>If I had a regular <code>*ngFor</code>, it would infer the type of <code>foo</code></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor=&quot;let foo of foos&quot;&gt;
    {{ foo.autoCompleteWorksInMostIDEsAsWellAsWarningIfInvalidProp }}
  </code></pre>
  <h1>Questions:</h1>
  <ol>
  <li><p>Is there any syntax that will allow me to hint the type of <code>let-foo</code>? (and hopefully most IDE's will recognize).</p>
  </li>
  <li><p>If I don't want to rely on IDE's, is there a way to have the ng compiler type check <code>foo</code> (declared by let-foo)?</p>
  </li>
  </ol>
  <p>tl;dr is there a syntax that let me type annotate the template input variable?
  e.g. something like this made up syntax?</p>
  <p><code>let-foo=&quot;$implicit as Foo&quot;</code> or <code>let-foo-type=&quot;Foo&quot;</code>?</p>
  <h1>Workaround</h1>
  <p>One silly idea is to have an identity function in my component, e.g.</p>
  <pre class="lang-js prettyprint-override"><code>identity(foo: Foo): Foo {
    return foo;
  }
  </code></pre>
  <p>But doing</p>
  <pre class="lang-html prettyprint-override"><code>{{ identity(foo).fooProp }}
  </code></pre>
  <p>Is not a big improvement over</p>
  <pre class="lang-html prettyprint-override"><code>{{ (foo as Foo).fooProp }}`
  </code></pre>