types: improve generated component typing (#8308)

src/utils/index.ts

@@ -1,6 +1,6 @@
 export * from './base';
 export * from './create';
-export * from './installable';
+export * from './with-install';
 export * from './format/unit';
 export * from './format/number';
 export * from './format/string';

src/utils/with-install.ts

@@ -0,0 +1,17 @@
+import { App } from 'vue';
+import { camelize } from './format/string';
+
+export type WithInstall<T> = T & {
+  install(app: App): void;
+};
+
+// using any here because tsc will generate some weird results when using generics
+export function withInstall<T>(options: any): WithInstall<T> {
+  (options as Record<string, unknown>).install = (app: App) => {
+    const { name } = options as any;
+    app.component(name, options);
+    app.component(camelize(`-${name}`), options);
+  };
+
+  return options;
+}