diff --git a/packages/cdk/utils/typeof.ts b/packages/cdk/utils/typeof.ts
index de4c8fea8..416404c79 100644
--- a/packages/cdk/utils/typeof.ts
+++ b/packages/cdk/utils/typeof.ts
@@ -1,17 +1,26 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/** The method checks whether the given value is a Numeric value or not and returns the corresponding boolean value. */
+
 const _toString = Object.prototype.toString
 
-export function isNumeric(value: unknown): boolean {
-  return !isNaN(parseFloat(value as string)) && isFinite(value as number)
+/** The method checks whether the given value is a Numeric value or not and returns the corresponding boolean value. */
+export function isNumeric(val: unknown): boolean {
+  return !isNaN(parseFloat(val as string)) && isFinite(val as number)
+}
+
+export function isUndefined(val: unknown): val is undefined {
+  return typeof val === 'undefined'
 }
 
-export function isNil(value: unknown): value is null | undefined {
-  return typeof value === 'undefined' || value === null
+export function isNull(val: unknown): val is null {
+  return val === null
 }
 
-export function isNonNil<T>(value: T): value is NonNullable<T> {
-  return typeof value !== 'undefined' && value !== null
+export function isNil(val: unknown): val is null | undefined {
+  return isUndefined(val) || isNull(val)
+}
+
+export function isNonNil<T>(val: T): val is NonNullable<T> {
+  return !isNil(val)
 }
 
 export function isNumber(val: unknown): val is number {
@@ -26,14 +35,6 @@ export function isString(val: unknown): val is string {
   return typeof val === 'string'
 }
 
-export function isUndefined(val: unknown): val is undefined {
-  return typeof val === 'undefined'
-}
-
-export function isNull(val: unknown): val is null {
-  return val === null
-}
-
 export function isSymbol(val: unknown): val is symbol {
   return typeof val === 'symbol'
 }
diff --git a/packages/components/badge/src/types.ts b/packages/components/badge/src/types.ts
index 89e2a6aef..1aa10e696 100644
--- a/packages/components/badge/src/types.ts
+++ b/packages/components/badge/src/types.ts
@@ -1,3 +1,5 @@
+import type { DefineComponent } from 'vue'
+
 export interface BadgeProps {
   // Badge显示的数字
   readonly count: number | string
@@ -15,5 +17,4 @@ export interface SlotsExist {
   count: boolean
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IxBadgeComponent extends BadgeProps {}
+export type IxBadgeComponent = InstanceType<DefineComponent<BadgeProps>>
diff --git a/packages/components/button/index.ts b/packages/components/button/index.ts
index 6994c2202..3ae4559b6 100644
--- a/packages/components/button/index.ts
+++ b/packages/components/button/index.ts
@@ -6,4 +6,4 @@ IxButton.install = installComponent(IxButton)
 IxButtonGroup.install = installComponent(IxButtonGroup)
 
 export { IxButton, IxButtonGroup }
-export type { ButtonComponent, ButtonGroupComponent } from './src/types'
+export type { IxButtonComponent, IxButtonGroupComponent } from './src/types'
diff --git a/packages/components/button/src/types.ts b/packages/components/button/src/types.ts
index ad3d4e8e5..762841ab4 100644
--- a/packages/components/button/src/types.ts
+++ b/packages/components/button/src/types.ts
@@ -1,3 +1,4 @@
+import type { DefineComponent } from 'vue'
 import type { ButtonMode, ComponentSize } from '@idux/components/core/types'
 
 export type ButtonShape = 'circle' | 'round'
@@ -13,8 +14,7 @@ export interface ButtonProps {
   readonly icon?: string
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ButtonComponent extends ButtonProps {}
+export type IxButtonComponent = InstanceType<DefineComponent<ButtonProps>>
 
 export interface ButtonGroupProps {
   readonly mode?: ButtonMode
@@ -22,5 +22,4 @@ export interface ButtonGroupProps {
   readonly shape?: ButtonShape
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ButtonGroupComponent extends ButtonGroupProps {}
+export type IxButtonGroupComponent = InstanceType<DefineComponent<ButtonGroupProps>>
diff --git a/packages/components/divider/src/types.ts b/packages/components/divider/src/types.ts
index d96c7c2a4..ce3bff72b 100644
--- a/packages/components/divider/src/types.ts
+++ b/packages/components/divider/src/types.ts
@@ -1,3 +1,4 @@
+import type { DefineComponent } from 'vue'
 import type { DividerPosition, DividerType } from '@idux/components/core/types'
 
 export interface DividerProps {
@@ -11,5 +12,4 @@ export interface DividerProps {
   type?: DividerType
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IxDividerComponent extends DividerProps {}
+export type IxDividerComponent = InstanceType<DefineComponent<DividerProps>>
diff --git a/packages/components/icon/index.ts b/packages/components/icon/index.ts
index 51e8c3612..f78769174 100644
--- a/packages/components/icon/index.ts
+++ b/packages/components/icon/index.ts
@@ -8,4 +8,4 @@ addIconDefinitions(innerStaticIcons)
 IxIcon.install = installComponent(IxIcon)
 
 export { IxIcon, addIconDefinitions, fetchFromIconfont }
-export type { IconComponent, IconDefinition } from './src/types'
+export type { IxIconComponent, IconDefinition } from './src/types'
diff --git a/packages/components/icon/src/types.ts b/packages/components/icon/src/types.ts
index 75aadf20a..82b91f4e4 100644
--- a/packages/components/icon/src/types.ts
+++ b/packages/components/icon/src/types.ts
@@ -1,11 +1,12 @@
+import type { DefineComponent } from 'vue'
+
 export interface IconProps {
   readonly name?: string
   readonly rotate?: boolean | number | string
   readonly iconfont?: boolean
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IconComponent extends IconProps {}
+export type IxIconComponent = InstanceType<DefineComponent<IconProps>>
 
 export interface IconDefinition {
   name: string
diff --git a/packages/components/image/src/types.ts b/packages/components/image/src/types.ts
index 79a9a63d5..955fb2454 100644
--- a/packages/components/image/src/types.ts
+++ b/packages/components/image/src/types.ts
@@ -1,3 +1,5 @@
+import type { DefineComponent } from 'vue'
+
 export interface ImageProps {
   readonly src?: string
   readonly width?: string | number
@@ -12,5 +14,4 @@ export interface ImagePreviewProps {
 }
 export type ImageStatus = 'loading' | 'loaded' | 'failed'
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IxImageComponent extends ImageProps {}
+export type IxImageComponent = InstanceType<DefineComponent<ImageProps>>
diff --git a/scripts/gen/index.ts b/scripts/gen/index.ts
index fe744b81c..c74ad4e70 100644
--- a/scripts/gen/index.ts
+++ b/scripts/gen/index.ts
@@ -63,9 +63,9 @@ if (moduleName === 'components') {
   // 这里都是硬编码，有没有更好的实现方式？
   let currIndexContent = readFileSync(indexFilePath, 'utf-8')
   currIndexContent = currIndexContent
-    .replace('\n\n', `\nimport { Ix${upperFirstComponentName} } from './${compName}'\n\n`)
+    .replace('\n\n', `\n\nimport { Ix${upperFirstComponentName} } from './${compName}'\n\n`)
     .replace(']', `, Ix${upperFirstComponentName}]`)
-  currIndexContent += `export * from './${compName}'\n`
+  currIndexContent += `\nexport * from './${compName}'\n`
   writeFileSync(indexFilePath, currIndexContent)
 
   const currLess = readFileSync(componentsLessPath, 'utf-8')
@@ -84,5 +84,5 @@ if (moduleName === 'components') {
 const docsZhTemplate = getDocsZhTemplate(upperFirstComponentName, moduleName)
 writeFileSync(`${componentDirname}/docs/index.zh.md`, docsZhTemplate)
 
-const domeTemplate = getDomeTemplate(upperFirstComponentName, moduleName)
+const domeTemplate = getDomeTemplate(compName)
 writeFileSync(`${componentDirname}/demo/basic.md`, domeTemplate)
diff --git a/scripts/gen/template.ts b/scripts/gen/template.ts
index 27f03ac88..9ca2ff941 100644
--- a/scripts/gen/template.ts
+++ b/scripts/gen/template.ts
@@ -10,12 +10,13 @@ export function getLessTemplate(compName: string): string {
 }
 
 export function getTypesTemplate(compName: string): string {
-  return `export interface ${compName}Props {
+  return `import type { DefineComponent } from 'vue'
+
+export interface ${compName}Props {
   // please add readonly for every prop
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface Ix${compName}Component extends ${compName}Props {}
+export type Ix${compName}Component = InstanceType<DefineComponent<${compName}Props>>
 `
 }
 
@@ -120,7 +121,7 @@ cover:
 `
 }
 
-export function getDomeTemplate(compName: string, moduleName: string): string {
+export function getDomeTemplate(compName: string): string {
   return `---
 order: 0
 title:
@@ -139,6 +140,20 @@ title:
 ## demo
 
 \`\`\`html
+<template>
+  <ix-${compName} />
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    
+  }
+})
+</script>
+<style lang="less" scoped>
+</style>
 \`\`\`
 
 `