fix(types): ref returns the correct interface

Author: manucorporat

src/compiler/types/generate-app-types.ts

@@ -66,6 +66,16 @@ export namespace Components {
   ${modules.map(m => `${m.component}`).join('\n').trim()}
 }
 
+declare global {
+  ${jsxElementGlobal}
+  ${modules.map(m => m.element).join('\n')}
+  interface HTMLElementTagNameMap {
+    ${modules.map(m => `'${m.tagName}': ${m.htmlElementName};`).join('\n')}
+  }
+
+  interface ElementTagNameMap extends HTMLElementTagNameMap {}
+}
+
 declare namespace LocalJSX {
   ${modules.map(m => `${m.jsx}`).join('\n').trim()}
 
@@ -77,18 +87,6 @@ declare namespace LocalJSX {
 export { LocalJSX as JSX };
 
 ${jsxAugmentation}
-
-declare global {
-  ${jsxElementGlobal}
-
-  ${modules.map(m => m.element).join('\n')}
-
-  interface HTMLElementTagNameMap {
-    ${modules.map(m => `'${m.tagName}': ${m.htmlElementName};`).join('\n')}
-  }
-
-  interface ElementTagNameMap extends HTMLElementTagNameMap {}
-}
 `;
 
   const typeImportString = Object.keys(typeImportData).reduce((finalString: string, filePath: string) => {

src/compiler/types/generate-component-types.ts

@@ -35,7 +35,7 @@ export function generateComponentTypes(cmp: d.ComponentCompilerMeta): d.TypesMod
     tagNameAsPascal,
     htmlElementName,
     component: `interface ${tagNameAsPascal} {${stencilComponentAttributes}}`,
-    jsx: `interface ${tagNameAsPascal} extends JSXBase.HTMLAttributes {${stencilComponentJSXAttributes}}`,
+    jsx: `interface ${tagNameAsPascal} extends JSXBase.HTMLAttributes<${htmlElementName}> {${stencilComponentJSXAttributes}}`,
     element: `
 interface ${htmlElementName} extends Components.${tagNameAsPascal}, HTMLStencilElement {}
 var ${htmlElementName}: {