<h3 dir="auto">Version</h3>
<p dir="auto">2.7.4</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://sfc.vuejs.org/#eNp9kEFvgzAMhf+KlQubVGC7Moo07bJdd84lBReoQhLFptOo+O9zSrXDJlXKIe/F+ezni3oNoTjPqCpVUxvHwGCN6/daMWnVaNd6RwzLUsHHO3P4RAriYE0cR9c3sIeLdgDiz5YreNol1Rk2FWTUHeVkYq0vG8lbLKzvH7JlyXZCfRS/LrfG0kwE4xSsYRQFUA/PzZtxDDMh8IDQW38wFvg7IEGHrTXR8OiFIZWQWL//1U6NU/CR88mE4kTeScbrrPr2IAGrbfrkyRKS1mqQmFSVJR3btJkTFT72pdyKODseJyyQpvwQ/RdhFLBW18w3RinmGWMe0XUYMd5j/in9x03YVZan1h8FAZLe" rel="nofollow">sfc.vuejs.org/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Step1.  create the project with @vue/cli 5.0.8; <code class="notranslate">vue create vue27-ts-mini</code>,</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="        ?  Please pick a preset: Manually select features
	? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
	? Choose a version of Vue.js that you want to start the project with 2.x
	? Use class-style component syntax? Yes
	? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 
	Yes
	? Use history mode for router? (Requires proper server setup for index fallback in production) Yes     
	? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
	? Pick a linter / formatter config: Prettier
	? Pick additional lint features: Lint on save
	? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files"><pre class="notranslate"><code class="notranslate">        ?  Please pick a preset: Manually select features
	? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
	? Choose a version of Vue.js that you want to start the project with 2.x
	? Use class-style component syntax? Yes
	? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 
	Yes
	? Use history mode for router? (Requires proper server setup for index fallback in production) Yes     
	? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
	? Pick a linter / formatter config: Prettier
	? Pick additional lint features: Lint on save
	? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
</code></pre></div>
<p dir="auto">Step2.   <code class="notranslate">mkdir types &amp;&amp;  mv src/*.d.ts types/  &amp;&amp; pnpm i</code></p>
<p dir="auto">Step3.  edit shims-tsx.d.ts, add interface to global</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Vue, { VNode } from &quot;vue&quot;;

declare global {
  namespace JSX {
    interface Element extends VNode { }
    interface ElementClass extends Vue { }
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }

  interface IHttpResponse&lt;T&gt; {
    Result: number
    Reason?: string
    ErrCode?: number
    // ErrCode?:number
    data?: T

  }

}"><pre class="notranslate"><code class="notranslate">import Vue, { VNode } from "vue";

declare global {
  namespace JSX {
    interface Element extends VNode { }
    interface ElementClass extends Vue { }
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }

  interface IHttpResponse&lt;T&gt; {
    Result: number
    Reason?: string
    ErrCode?: number
    // ErrCode?:number
    data?: T

  }

}
</code></pre></div>
<p dir="auto">Step4.  edit <code class="notranslate">.eslintrc.js </code>add <code class="notranslate"> "prettier/prettier": 0,</code>  to rules section<br>
Step5.   add this code to main.ts and src/views/HomeView.vue</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" const zz: IHttpResponse&lt;string&gt; = {
        Result: 0,
        data: 'sdfsdf',
      };
      console.log('zz', zz);"><pre class="notranslate"><code class="notranslate"> const zz: IHttpResponse&lt;string&gt; = {
        Result: 0,
        data: 'sdfsdf',
      };
      console.log('zz', zz);
</code></pre></div>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">No Warning</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">the main.ts does not has any error.</p>
<p dir="auto">the src/views/HomeView.vue has an no-undef warning:<br>
[{<br>
"resource": "/D:/Playground/vue2.7-ts/vue2.7-ts/src/views/HomeView.vue",<br>
"owner": "eslint",<br>
"code": {<br>
"value": "no-undef",<br>
"target": {<br>
"$mid": 1,<br>
"external": "https://eslint.org/docs/rules/no-undef",<br>
"path": "/docs/rules/no-undef",<br>
"scheme": "https",<br>
"authority": "eslint.org"<br>
}<br>
},<br>
"severity": 8,<br>
"message": "'IHttpResponse' is not defined.",<br>
"source": "eslint",<br>
"startLineNumber": 11,<br>
"startColumn": 11,<br>
"endLineNumber": 11,<br>
"endColumn": 24<br>
}]</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3477901/178397452-6e13e61d-841b-4722-ba8e-b3676dd3e8c2.png"><img src="https://user-images.githubusercontent.com/3477901/178397452-6e13e61d-841b-4722-ba8e-b3676dd3e8c2.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">The <code class="notranslate">&lt;slot&gt;</code> functionality is really useful, however I wonder if having a <code class="notranslate">vm.$slots</code> instance property could be useful. Much like <a href="http://forum.vuejs.org/topic/927/using-v-show-if-with-named-slots" rel="nofollow">this thread</a>, I'd like to show/hide parts of a component depending on whether a particular named slot was passed through. Although the thread was answered, I think having an instance property could make things much cleaner.</p>
<p dir="auto">I don't really know much about Vue's internals, but it looks like a list is already compiled as <code class="notranslate">vm._slotContents</code> <a href="https://github.com/vuejs/vue/blob/1af06013c69e77fa9f6545243aa282bcd8453771/src/compiler/resolve-slots.js#L20">here</a>. Perhaps this was purposefully not exposed as a public API, but being able to perform actions based on whether certain slots were provided seems quite useful to me.</p>
<p dir="auto">I imagine it'd be similar to <code class="notranslate">vm.$els</code>, where each key is the slot's name and each value is its element.</p>
<p dir="auto">Let me know what you think. Thanks!</p>