diff --git a/components/slider/demos/basic.md b/components/slider/demos/basic.md
index bc3582ad7..ec0d64670 100644
--- a/components/slider/demos/basic.md
+++ b/components/slider/demos/basic.md
@@ -7,8 +7,7 @@ order: 0
 值不让它超出该范围
 
 ```vdt
-import {Slider} from 'kpc';
-import {Button} from 'kpc';
+import {Slider, Button} from 'kpc';
 
 <div>
     <Slider v-model="value1" min={this.get('min')} max={this.get('max')} unit="MB"/>
diff --git a/components/slider/demos/disabled.md b/components/slider/demos/disabled.md
index b96660e0a..013ddcfa0 100644
--- a/components/slider/demos/disabled.md
+++ b/components/slider/demos/disabled.md
@@ -10,6 +10,6 @@ import {Slider} from 'kpc';
 
 <div>
     <Slider disabled value={50} ref="__test" />
-    <Slider disabled isRange value={[55, 80]} min={50} max={100} />
+    <Slider disabled range value={[55, 80]} min={50} max={100} />
 </div>
 ```
diff --git a/components/slider/demos/dynamicStep.md b/components/slider/demos/dynamicStep.md
index e0fe31793..d65fef227 100644
--- a/components/slider/demos/dynamicStep.md
+++ b/components/slider/demos/dynamicStep.md
@@ -18,6 +18,6 @@ import {Slider} from 'kpc';
         '500': 50
     }}
     showTooltip
-    isShowStop
+    points 
 />
 ```
diff --git a/components/slider/demos/marks.md b/components/slider/demos/marks.md
index 9d45dbc5f..314712942 100644
--- a/components/slider/demos/marks.md
+++ b/components/slider/demos/marks.md
@@ -13,12 +13,12 @@ import {Slider} from 'kpc';
 
 <div>
     <Slider min={1} max={12} value={6} 
-        isShowInput={false}
+        showInput={false}
         marks={this.get('marks')}
     />
     <Slider min={1} max={12} value={[2, 6]} 
-        isShowInput={false}
-        isRange
+        showInput={false}
+        range
         marks={this.get('marks')}
     />
 </div>
diff --git a/components/slider/demos/points.md b/components/slider/demos/points.md
index 71583d3af..5af428625 100644
--- a/components/slider/demos/points.md
+++ b/components/slider/demos/points.md
@@ -10,9 +10,9 @@ order: 4
 import {Slider} from 'kpc';
 
 <div>
-    <Slider value={45} step={5} points isShowInput={false}/>
-    <Slider value={[0.3, 0.6]} min={0} max={1} step={0.1} isRange points />
-    <Slider value={45} step={5} isShowInput={false} 
+    <Slider value={45} step={5} points showInput={false}/>
+    <Slider value={[0.3, 0.6]} min={0} max={1} step={0.1} range points />
+    <Slider value={45} step={5} showInput={false} 
         points={[0, 35, 95, 100]}
     />
 </div>
diff --git a/components/slider/demos/range.md b/components/slider/demos/range.md
index b856e4bbc..c44914c81 100644
--- a/components/slider/demos/range.md
+++ b/components/slider/demos/range.md
@@ -3,12 +3,12 @@ title: 范围选择
 order: 3
 ---
 
-指定`isRange`使组件支持范围选择，此时`v-model`绑定的数据为数组，并且不会展示`input`输入框。
+指定`range`使组件支持范围选择，此时`v-model`绑定的数据为数组，并且不会展示`input`输入框。
 
 ```vdt
 import {Slider} from 'kpc';
 
-<Slider isRange v-model="values" ev-change={(v) => console.log(v)}/>
+<Slider range v-model="values" ev-change={(v) => console.log(v)}/>
 ```
 
 ```ts
diff --git a/components/slider/demos/step.md b/components/slider/demos/step.md
index c2ebe41b4..c8b0a67e6 100644
--- a/components/slider/demos/step.md
+++ b/components/slider/demos/step.md
@@ -12,7 +12,7 @@ order: 1
 import {Slider} from 'kpc';
 
 <div>
-    <Slider v-model="value1" step={5} isShowEnd={false} ref="__test" />
+    <Slider v-model="value1" step={5} showEnd={false} ref="__test" />
     <Slider v-model="value2" min={50} max={500} step={0.1} />
     <Slider value={0.234234} max={1} step={0} />
 </div>
diff --git a/components/slider/demos/tooltip.md b/components/slider/demos/tooltip.md
index 59f30fd53..448520872 100644
--- a/components/slider/demos/tooltip.md
+++ b/components/slider/demos/tooltip.md
@@ -3,7 +3,7 @@ title: 展示提示气泡
 order: 6
 ---
 
-给组件添加`isShowTooltip`可以在滑块上展示气泡提示，默认展示当前值，我们也可以通过`tooltip`扩展点自定义展示内容；
+给组件添加`showTooltip`可以在滑块上展示气泡提示，默认展示当前值，我们也可以通过`tooltip`扩展点自定义展示内容；
 当添加`always`属性时，将一直展示提示气泡。通过`tooltipProps`可以设置`Tooltip`的所有属性
 
 > `tooltip`扩展点和`Tooltip`组件的`content`扩展点行为一样，如果你传入空的内容，则不会展示气泡
@@ -12,12 +12,12 @@ order: 6
 import {Slider} from 'kpc';
 
 <div>
-    <Slider v-model="value1" min={50} max={500} isShowTooltip />
-    <Slider v-model="values" isRange isShowTooltip />
+    <Slider v-model="value1" min={50} max={500} showTooltip />
+    <Slider v-model="values" range showTooltip />
     <Slider v-model="value2" min={1} max={12}
-        isShowInput={false}
+        showInput={false}
         marks={this.get('marks')}
-        isShowTooltip
+        showTooltip
         always
     >
         <b:tooltip args="value">
@@ -25,7 +25,7 @@ import {Slider} from 'kpc';
         </b:tooltip>
     </Slider>
     <Slider v-model="value3" min={50} max={500}
-        isShowTooltip
+        showTooltip
         always
         tooltipProps={{'theme': 'light', 'size': 'small'}}
     />
@@ -34,10 +34,10 @@ import {Slider} from 'kpc';
 
 ```ts
 interface Props {
-    value1: number
-    values: [number, number]
-    value2: number
-    value3: number
+    value1?: number
+    values?: [number, number]
+    value2?: number
+    value3?: number
 }
 
 export default class extends Component<Props> {
diff --git a/components/slider/index.md b/components/slider/index.md
index ef7ae3ac5..905c9de6e 100644
--- a/components/slider/index.md
+++ b/components/slider/index.md
@@ -12,14 +12,15 @@ sidebar: doc
 | min | 最小值 | `Number` | 0 |
 | max | 最大值 | `Number` | 100 |
 | value | 当前值，可用`v-model`双向绑定 | `Number` &#124; `Array` | `min` |
+| range | 是否是范围选择 | `Boolean` | `false` |
 | unit | 单位，用于刻度展示 | `String` | `""` |
-| isShowEnd | 是否展示最小值和最大值刻度 | `Boolean` | `true` |
-| isShowInput | 是否展示输入框 | `Boolean` | `true` |
+| showEnd | 是否展示最小值和最大值刻度 | `Boolean` | `true` |
+| showInput | 是否展示输入框 | `Boolean` | `true` |
 | step | 步长，支持动态步长，详见示例 | `Number` &#124; `Object` | `1` |
 | forceStep | 是否限制`value`除边界之外，满足`min + step * n`(`n`为整数) | `Boolean` | `true` |
 | points | 是否展示间隔点，或者指定哪些值展示间隔点 | `boolean` &#124; `number[]` | `false` |
 | marks | 标注刻度 | `Object` | `undefined` |
-| isShowTooltip | 是否展示提示气泡，默认不展示 | `Boolean` | `false` |
+| showTooltip | 是否展示提示气泡，默认不展示 | `Boolean` | `false` |
 | always | 当展示气泡时，是否一直展示 | `Boolean` | `false` |
 | animate | 滑块的移动是否使用缓动动画 | `Boolean` | `true` |
 | tooltipProps | 设置`Tooltip`的所有属性 | `Object` | `undefined` |
diff --git a/components/slider/index.ts b/components/slider/index.ts
index 87292b371..430fede14 100644
--- a/components/slider/index.ts
+++ b/components/slider/index.ts
@@ -17,15 +17,15 @@ export interface SliderProps {
     max?: number
     min?: number
     value?: Value
-    isRange?: boolean
+    range?: boolean
     unit?: string
-    isShowEnd?: boolean
-    isShowInput?: boolean
+    showEnd?: boolean
+    showInput?: boolean
     step?: number | StepObject | StepFunction
     points?: number[] | boolean
     marks?: Marks
     disabled?: boolean
-    isShowTooltip?: boolean
+    showTooltip?: boolean
     always?: boolean
     animate?: boolean
     tooltipProps?: TooltipProps
@@ -45,15 +45,15 @@ const typeDefs: Required<TypeDefs<SliderProps>> = {
     max: Number,
     min: Number,
     value: [Number, Array],
-    isRange: Boolean,
+    range: Boolean,
     unit: String,
-    isShowEnd: Boolean,
-    isShowInput: Boolean,
+    showEnd: Boolean,
+    showInput: Boolean,
     step: [Number, Object, Function],
     points: [Array, Boolean],
     marks: Object,
     disabled: Boolean,
-    isShowTooltip: Boolean,
+    showTooltip: Boolean,
     always: Boolean,
     animate: Boolean,
     tooltipProps: Object,
@@ -67,8 +67,8 @@ const defaults = (): Partial<SliderProps> => ({
     min: 0,
     value: 0,
     unit: '',
-    isShowEnd: true,
-    isShowInput: true,
+    showEnd: true,
+    showInput: true,
     step: defaultStep,
     animate: true,
     forceStep: true,
diff --git a/components/slider/index.vdt b/components/slider/index.vdt
index 0fa1ca211..cfd89fe45 100644
--- a/components/slider/index.vdt
+++ b/components/slider/index.vdt
@@ -6,10 +6,10 @@ import {makeStyles} from './styles';
 
 const {
     disabled, className, max,
-    min, unit, isShowInput,
-    isRange, step, value,
-    spinnerProps, isShowEnd,
-    isShowTooltip, animate, forceStep
+    min, unit, showInput,
+    range, step, value,
+    spinnerProps, showEnd,
+    showTooltip, animate, forceStep
 } = this.get();
 const {
     onStart, trackRef, dragging,
@@ -35,7 +35,7 @@ const createThumb = (thumbStyle, isFirst, ref, value, tooltipRef) => {
     return (
         <div class="k-slider-thumb-wrapper" style={thumbStyle}>
             <Tooltip
-                disabled={!isShowTooltip}
+                disabled={!showTooltip}
                 ref={tooltipRef}
                 {...tooltipProps}
                 class="k-slider-tooltip"
@@ -67,10 +67,10 @@ const marks = this.marks();
                     thumbFirstStyle,
                     true,
                     firstThumbRef,
-                    isRange ? value[0] : value,
+                    range ? value[0] : value,
                     firstTooltipRef,
                 )}
-                <template v-if={isRange}>
+                <template v-if={range}>
                     {createThumb(
                         thumbSecondStyle,
                         false,
@@ -92,12 +92,12 @@ const marks = this.marks();
                 class={{'k-active': $value.active}}
             >{$value.text}</span>
         </div>
-        <div class="k-slider-ends" v-else-if={isShowEnd}>
+        <div class="k-slider-ends" v-else-if={showEnd}>
             <span ev-click={linkEvent(min, setOneValue)}>{min + unit}</span>
             <span ev-click={linkEvent(max, setOneValue)}>{max + unit}</span>
         </div>
     </div>
-    <div class="k-slider-spinner" v-if={isShowInput && !isRange}>
+    <div class="k-slider-spinner" v-if={showInput && !range}>
         <Spinner
             disabled={disabled}
             max={max}
diff --git a/components/slider/useClick.ts b/components/slider/useClick.ts
index 20dff2864..6fa18d5ca 100644
--- a/components/slider/useClick.ts
+++ b/components/slider/useClick.ts
@@ -15,7 +15,7 @@ export function useClick(
         if (instance.get('disabled')) return;
 
         let newValue: Value = getSlidingValue(e.clientX);
-        if (instance.get('isRange')) {
+        if (instance.get('range')) {
             newValue = generateRangeValue(newValue);
         }
 
@@ -36,7 +36,7 @@ export function useClick(
         if (instance.get('disabled')) return;
 
         let newValue: Value = v;
-        if (instance.get('isRange')) {
+        if (instance.get('range')) {
             newValue = generateRangeValue(v);
         }
         showValue.set(newValue);
diff --git a/components/slider/useDraggable.ts b/components/slider/useDraggable.ts
index c241911d8..3707fde27 100644
--- a/components/slider/useDraggable.ts
+++ b/components/slider/useDraggable.ts
@@ -61,9 +61,9 @@ export function useDraggable(
     }
 
     function getNewValue(value: number): Value {
-        const {isRange, value: oldValue} = instance.get();
+        const {range, value: oldValue} = instance.get();
 
-        if (!isRange) return value;
+        if (!range) return value;
 
         const [min, max] = oldValue as [number, number];
         if (isFirst) {
diff --git a/components/slider/useKeyboard.ts b/components/slider/useKeyboard.ts
index b763de1df..91abff259 100644
--- a/components/slider/useKeyboard.ts
+++ b/components/slider/useKeyboard.ts
@@ -18,11 +18,11 @@ export function useKeyboard(
     function onKeydown({keyCode}: KeyboardEvent) {
         if (instance.get('disabled')) return;
 
-        let {value, isRange} = instance.get();
+        let {value, range} = instance.get();
         // remain the old value to detect whether it changed to trigger change event
         oldValue = value!;
 
-        if (isRange) {
+        if (range) {
             const [min, max] = value as [number, number];
             value = isFirst() ? min : max;
         }
diff --git a/components/slider/useMarks.ts b/components/slider/useMarks.ts
index 8957c2631..6822e00b5 100644
--- a/components/slider/useMarks.ts
+++ b/components/slider/useMarks.ts
@@ -45,9 +45,9 @@ export function useMarks() {
     instance.on('$change:value', addText);
 
     function addText() {
-        const {value, isRange} = instance.get();
+        const {value, range} = instance.get();
         marks.forEach(mark => {
-            const active = !isRange ?
+            const active = !range ?
                 mark.value === value as number :
                 (value as [number, number]).includes(mark.value);
 
diff --git a/components/slider/usePoints.ts b/components/slider/usePoints.ts
index 66e1c3e2c..9a4ad0413 100644
--- a/components/slider/usePoints.ts
+++ b/components/slider/usePoints.ts
@@ -71,10 +71,10 @@ export function usePoints(
     } 
 
     function addActive() {
-        const {isRange} = instance.get();
+        const {range} = instance.get();
         const value = showValue.value;
         points.forEach(point => {
-            point.active = !isRange ?
+            point.active = !range ?
                 point.value <= (value as number) :
                 point.value >= (value as [number, number])[0] &&
                 point.value <= (value as [number, number])[1];
diff --git a/components/slider/useStyles.ts b/components/slider/useStyles.ts
index e03f26fad..6fcc701fc 100644
--- a/components/slider/useStyles.ts
+++ b/components/slider/useStyles.ts
@@ -12,11 +12,11 @@ export function useStyles(showValue: State<Value>) {
     let thumbSecondStyle: Style;
 
     function updateStyle() {
-        const {max, min, isRange} = instance.get();
+        const {max, min, range} = instance.get();
         const total = max! - min!;
 
         if (total > 0) {
-            if (isRange) {
+            if (range) {
                 const [first, second] = showValue.value as [number, number];
                 barStyle = {
                     width: toPercent(Math.abs(second - first), total),
diff --git a/components/slider/useValue.ts b/components/slider/useValue.ts
index 85f34f446..6ed54c4e0 100644
--- a/components/slider/useValue.ts
+++ b/components/slider/useValue.ts
@@ -39,10 +39,10 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
     }
 
     function getFixedValue(value: Value): Value {
-        const {min, isRange} = instance.get();
+        const {min, range} = instance.get();
 
         let fixedValue: Value;
-        if (isRange) {
+        if (range) {
             if (!Array.isArray(value)) {
                 const tmp = fix(value);
                 fixedValue = [tmp, tmp];
diff --git a/components/spin/demos/basic.md b/components/spin/demos/basic.md
index 27754e478..c3bd5b56e 100644
--- a/components/spin/demos/basic.md
+++ b/components/spin/demos/basic.md
@@ -9,7 +9,7 @@ order: 0
 import {Spin} from 'kpc';
 
 <div>
-    <Spin v-for={['large', 'default', 'small', 'mini']}
+    <Spin v-for={this.get('sizes')}
         size={$value}
     />
 </div>
@@ -19,3 +19,14 @@ import {Spin} from 'kpc';
 .k-spin
     margin-right 16px
 ```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            sizes: ['large', 'default', 'small', 'mini'] as const
+        }
+    }
+}
+```
diff --git a/components/spinner/demos/basic.md b/components/spinner/demos/basic.md
index 0a0d1fc7b..e84fd321c 100644
--- a/components/spinner/demos/basic.md
+++ b/components/spinner/demos/basic.md
@@ -18,3 +18,18 @@ import {Spinner} from 'kpc';
 .k-spinner
     margin-right 20px
 ```
+
+```ts
+interface Props {
+    value?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value: 0,
+        };
+    }
+}
+```
diff --git a/components/spinner/demos/dynamicStep.md b/components/spinner/demos/dynamicStep.md
index 0928683ba..5315a8957 100644
--- a/components/spinner/demos/dynamicStep.md
+++ b/components/spinner/demos/dynamicStep.md
@@ -19,3 +19,18 @@ import {Spinner} from 'kpc';
     '$': 5
 }} />
 ```
+
+```ts
+interface Props {
+    value1?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value1: 0,
+        };
+    }
+}
+```
diff --git a/components/spinner/demos/forceStep.md b/components/spinner/demos/forceStep.md
index 88562690b..bb5169825 100644
--- a/components/spinner/demos/forceStep.md
+++ b/components/spinner/demos/forceStep.md
@@ -18,3 +18,20 @@ import {Spinner} from 'kpc';
 .k-spinner
     margin-right 20px
 ```
+
+```ts
+interface Props {
+    value1?: number
+    value2?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value1: 0,
+            value2: 0
+        };
+    }
+}
+```
diff --git a/components/spinner/demos/formatter.md b/components/spinner/demos/formatter.md
index 789f37b69..3e9d861cb 100644
--- a/components/spinner/demos/formatter.md
+++ b/components/spinner/demos/formatter.md
@@ -33,12 +33,19 @@ import {Spinner} from 'kpc';
 ```
 
 ```ts
-export default class extends Component  {
+interface Props {
+    money?: number
+    percent?: number
+}
+
+export default class extends Component<Props>  {
     static template = template;
 
-    static defaults = () => ({
-        money: 1000,
-        percent: 78,
-    });
+    static defaults() {
+        return {
+            money: 1000,
+            percent: 78,
+        };
+    };
 }
 ```
diff --git a/components/spinner/demos/precision.md b/components/spinner/demos/precision.md
index 54a1d5018..a9d798e18 100644
--- a/components/spinner/demos/precision.md
+++ b/components/spinner/demos/precision.md
@@ -27,3 +27,20 @@ import {Spinner} from 'kpc';
 .k-spinner
     margin-right 20px
 ```
+
+```ts
+interface Props {
+    value1?: number
+    value2?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value1: 0,
+            value2: 0
+        };
+    }
+}
+```
diff --git a/components/spinner/demos/step.md b/components/spinner/demos/step.md
index 26f10c5f1..154f8803b 100644
--- a/components/spinner/demos/step.md
+++ b/components/spinner/demos/step.md
@@ -18,3 +18,20 @@ import {Spinner} from 'kpc';
 .k-spinner
     margin-right 20px
 ```
+
+```ts
+interface Props {
+    value1?: number
+    value2?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value1: 0,
+            value2: 0
+        };
+    }
+}
+```
diff --git a/components/split/demos/complex.md b/components/split/demos/complex.md
index c4f16c7f9..61d7fc058 100644
--- a/components/split/demos/complex.md
+++ b/components/split/demos/complex.md
@@ -20,14 +20,14 @@ import {Split, Table, TableColumn, Tabs, Tab, FormItem, Button, Icon} from 'kpc'
                 fixHeader
                 ref="table"
                 rowCheckable={false}
-                v-model:checkedKeys="checkedKeys"
+                checkedKeys={this.get('checkedKeys')}
                 ev-clickRow={this._onClickRow}
                 ev-$change:checkedKeys={this._togglePanel}
             >
                 <TableColumn title="名称" key="name" />
                 <TableColumn title="网段" key="ip" />
                 <TableColumn title="操作" key="op">
-                    <b:template params={[value, index]} >
+                    <b:template args="[value, index]" >
                         <a>删除</a> 
                     </b:template>
                 </TableColumn>
@@ -44,7 +44,7 @@ import {Split, Table, TableColumn, Tabs, Tab, FormItem, Button, Icon} from 'kpc'
                 <Tab value="data">流量统计</Tab>
                 <Tab value="tag">标签</Tab>
             </Tabs>
-            <div v-if={this.get('tab') === 'detail'} class="tab-panel">
+            <div v-if={this.get('tab') === 'detail' && this.get('selectedData')} class="tab-panel">
                 <FormItem label="创建时间：">2018-09-28 17:31:25</FormItem>
                 <FormItem label="弹性IP：">{this.get('selectedData.ip')}</FormItem>
                 <FormItem label="名称：">{this.get('selectedData.name')}</FormItem>
@@ -94,15 +94,15 @@ import {Split, Table, TableColumn, Tabs, Tab, FormItem, Button, Icon} from 'kpc'
         z-index 1
 ```
 ```ts
-import {range, bind} from 'kpc';
+import {range, bind} from 'kpc/components/utils';
 import {nextTick} from 'intact';
 
 interface Props {
     data: DataItem[]
-    tab: string
-    size: string
+    tab?: string
+    size?: string
     selectedData?: DataItem
-    checkedKeys: string[]
+    checkedKeys?: number[]
 }
 
 type DataItem = {
@@ -110,22 +110,24 @@ type DataItem = {
     ip: string
 }
 
+const data =  range(0, 10).map(item => {
+    return {
+        name: 'name ' + item,
+        ip: '127.0.0.' + item
+    };
+});
+
 export default class extends Component<Props> {
     static template = template;
 
     static defaults() {
         return {
-            data: range(0, 10).map(item => {
-                return {
-                    name: 'name ' + item,
-                    ip: '127.0.0.' + item
-                };
-            }),
+            data,
             tab: 'detail',
             size: '0px',
             selectedData: undefined,
             checkedKeys: [],
-        }
+        } as Props;
     }
 
     @bind
@@ -140,11 +142,14 @@ export default class extends Component<Props> {
     }
 
     @bind
-    _togglePanel(keys: string[]) {
-        if (keys.length === 1) {
+    _togglePanel(keys: number[] | undefined) {
+        if (keys!.length === 1) {
             // 只选中一行时，展开详情面板
             const data = this.refs.table.getCheckedData()[0];
-            this.set('selectedData', data);
+            this.set({
+                selectedData: data,
+                checkedKeys: keys,
+            });
             this._open();
         } else {
             this._close();
@@ -152,8 +157,8 @@ export default class extends Component<Props> {
     }
 
     @bind
-    _onClickRow(data: DataItem, index: number, key: string) {
-        let checkedKeys = this.get('checkedKeys');
+    _onClickRow(data: DataItem, index: number, key: number) {
+        let checkedKeys = this.get('checkedKeys')!;
         if (checkedKeys.length === 1 && checkedKeys[0] === key) {
             // 如果只选中了一行，再次点击当前行，则取消选中
             checkedKeys = [];
@@ -169,54 +174,19 @@ export default class extends Component<Props> {
 }
 ```
 
-```vue-data
-data() {
-    return {
-        data: range(0, 10).map(item => {
-            return {
-                name: 'name ' + item,
-                ip: '127.0.0.' + item
-            };
-        }),
-        tab: 'detail',
-        size: '0px',
-        selectedData: {},
-        checkedKeys: [],
-    }
-},
-```
-
 ```react-methods
-constructor(props) {
-    super(props);
-    this.state = {
-        data: range(0, 10).map(item => {
-            return {
-                name: 'name ' + item,
-                ip: '127.0.0.' + item
-            };
-        }),
-        tab: 'detail',
-        size: '0px',
-        selectedData: {},
-        checkedKeys: [],
-    };
-    this._classNames = this._classNames.bind(this);
-    this._close = this._close.bind(this);
-    this._open = this._open.bind(this);
-    this._togglePanel = this._togglePanel.bind(this);
+@bind
+_onClickRow(data: DataItem, index: number, key: number) {
+    let checkedKeys = this.state.checkedKeys!;
+    if (checkedKeys.length === 1 && checkedKeys[0] === key) {
+        // 如果只选中了一行，再次点击当前行，则取消选中
+        checkedKeys = [];
+    } else {
+        // 否则只选中当前行
+        checkedKeys = [key];
+    }
+    this.setState({checkedKeys}, () => {
+        this._togglePanel(checkedKeys);
+    });
 }
 ```
-
-```angular-properties
-private data = range(0, 10).map(item => {
-    return {
-        name: 'name ' + item,
-        ip: '127.0.0.' + item
-    };
-});
-private tab = 'detail';
-private size = '0px';
-private selectedData = {};
-private checkedKeys = [];
-```
diff --git a/components/steps/demos/basic.md b/components/steps/demos/basic.md
index c16930719..af32c9fab 100644
--- a/components/steps/demos/basic.md
+++ b/components/steps/demos/basic.md
@@ -6,8 +6,7 @@ order: 0
 `Steps`嵌套`Step`即可实现步骤条，用`v-model`双向绑定当前指向哪一步，索引从`0`开始
 
 ```vdt
-import {Steps, Step} from 'kpc';
-import {Button} from 'kpc';
+import {Steps, Step, Button} from 'kpc';
 
 <div>
     <Steps v-model="index">
@@ -33,7 +32,7 @@ import {Button} from 'kpc';
 import {bind} from 'kpc';
 
 interface Props {
-    index: number
+    index?: number
 }
 
 export default class extends Component<Props> {
@@ -47,12 +46,12 @@ export default class extends Component<Props> {
 
     @bind
     previous() {
-        this.set('index', this.get('index') - 1);
+        this.set('index', this.get('index')! - 1);
     }
 
     @bind
     next() {
-        this.set('index', this.get('index') + 1);
+        this.set('index', this.get('index')! + 1);
     }
 }
 ```
diff --git a/components/steps/demos/clickable.md b/components/steps/demos/clickable.md
index feb72a9ac..61c203995 100644
--- a/components/steps/demos/clickable.md
+++ b/components/steps/demos/clickable.md
@@ -6,8 +6,7 @@ order: 0.1
 添加`clickable`属性，即可实现点击【已完成】的步骤快速切换到相应步骤的功能
 
 ```vdt
-import {Steps, Step} from 'kpc';
-import {Button} from 'kpc';
+import {Steps, Step, Button} from 'kpc';
 
 <div>
     <Steps v-model="index" clickable>
@@ -33,7 +32,7 @@ import {Button} from 'kpc';
 import {bind} from 'kpc';
 
 interface Props {
-    index: number
+    index?: number
 }
 
 export default class extends Component<Props> {
@@ -47,12 +46,12 @@ export default class extends Component<Props> {
 
     @bind
     previous() {
-        this.set('index', this.get('index') - 1);
+        this.set('index', this.get('index')! - 1);
     }
 
     @bind
     next() {
-        this.set('index', this.get('index') + 1);
+        this.set('index', this.get('index')! + 1);
     }
 }
 ```
diff --git a/components/steps/demos/line.md b/components/steps/demos/line.md
index b4853fd12..5ece3f480 100644
--- a/components/steps/demos/line.md
+++ b/components/steps/demos/line.md
@@ -6,8 +6,7 @@ order: 2
 设置`type`属性值为`line`，可以展示时间轴样式的步骤条
 
 ```vdt
-import {Steps, Step} from 'kpc';
-import {Button} from 'kpc';
+import {Steps, Step, Button} from 'kpc';
 
 <div>
     <Steps v-model="index" type="line">
@@ -40,7 +39,7 @@ import {Button} from 'kpc';
 import {bind} from 'kpc';
 
 interface Props {
-    index: number
+    index?: number
 }
 
 export default class extends Component<Props> {
@@ -54,12 +53,12 @@ export default class extends Component<Props> {
 
     @bind
     previous() {
-        this.set('index', this.get('index') - 1);
+        this.set('index', this.get('index')! - 1);
     }
 
     @bind
     next() {
-        this.set('index', this.get('index') + 1);
+        this.set('index', this.get('index')! + 1);
     }
 }
 ```
diff --git a/components/steps/demos/simple.md b/components/steps/demos/simple.md
index 45b0749da..fd7ff85e1 100644
--- a/components/steps/demos/simple.md
+++ b/components/steps/demos/simple.md
@@ -6,8 +6,7 @@ order: 3
 设置`type`属性值为`simple`，可以展示简洁样式的步骤条
 
 ```vdt
-import {Steps, Step} from 'kpc';
-import {Button} from 'kpc';
+import {Steps, Step, Button} from 'kpc';
 
 <div>
     <Steps v-model="index" type="simple">
@@ -40,7 +39,7 @@ import {Button} from 'kpc';
 import {bind} from 'kpc';
 
 interface Props {
-    index: number
+    index?: number
 }
 
 export default class extends Component<Props> {
@@ -54,12 +53,12 @@ export default class extends Component<Props> {
 
     @bind
     previous() {
-        this.set('index', this.get('index') - 1);
+        this.set('index', this.get('index')! - 1);
     }
 
     @bind
     next() {
-        this.set('index', this.get('index') + 1);
+        this.set('index', this.get('index')! + 1);
     }
 }
 ```
diff --git a/components/switch/demos/basic.md b/components/switch/demos/basic.md
index a8a2a7568..46e6ae984 100644
--- a/components/switch/demos/basic.md
+++ b/components/switch/demos/basic.md
@@ -18,3 +18,14 @@ import {Switch} from 'kpc';
 .k-switch
     margin-right 20px
 ```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            value: false,
+        };
+    }
+}
+```
diff --git a/components/switch/demos/value.md b/components/switch/demos/value.md
index 6e6e32d75..112a83899 100644
--- a/components/switch/demos/value.md
+++ b/components/switch/demos/value.md
@@ -15,8 +15,28 @@ import {Switch} from 'kpc';
         {JSON.stringify(this.get('value1'))}
     </div>
     <div>
-        <Switch v-model="value2" trueValue={1} falseValue="1" />
+        <Switch v-model="value2"
+            trueValue={1}
+            falseValue="1"
+        />
         {JSON.stringify(this.get('value2'))}
     </div>
 </div>
 ```
+
+```ts
+interface Props {
+    value1?: boolean 
+    value2?: number | string
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value1: false,
+            value2: '1'
+        } as Props;
+    }
+}
+```
diff --git a/components/switch/index.ts b/components/switch/index.ts
index c4b60e4e3..14e3a5be9 100644
--- a/components/switch/index.ts
+++ b/components/switch/index.ts
@@ -5,13 +5,13 @@ import {bind} from '../utils';
 import {useDraggable} from './useDraggable';
 import type {Events} from '../types';
 
-export interface SwitchProps {
+export interface SwitchProps<True = any, False = any> {
     name?: string
     on?: string 
     off?: string 
-    value?: boolean
-    trueValue?: any
-    falseValue?: any
+    value?: True | False 
+    trueValue?: True 
+    falseValue?: False 
     width?: number | string
     height?: number | string
     size?: Sizes
@@ -57,7 +57,7 @@ interface MouseEventWithIgnore extends MouseEvent {
     _switchIgnore?: boolean
 }
 
-export class Switch extends Component<SwitchProps, SwitchEvents, SwitchBlocks> {
+export class Switch<True = true, False = false> extends Component<SwitchProps<True, False>, SwitchEvents, SwitchBlocks> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
diff --git a/components/table/demos/draggable.md b/components/table/demos/draggable.md
index fd17d4967..7212a9e88 100644
--- a/components/table/demos/draggable.md
+++ b/components/table/demos/draggable.md
@@ -72,26 +72,3 @@ export default class extends Component<Props> {
     }
 }
 ```
-
-```vue-data
-data() {
-    return {
-        data
-    }
-},
-```
-
-```react-methods
-constructor(props) {
-    super(props);
-    this.state = {
-        data
-    };
-    this._remove = this._remove.bind(this);
-    this._onDragEnd = this._onDragEnd.bind(this);
-}
-```
-
-```angular-properties
-private data = data;
-```
diff --git a/components/table/demos/empty.md b/components/table/demos/empty.md
index 9e402f34c..135808aaa 100644
--- a/components/table/demos/empty.md
+++ b/components/table/demos/empty.md
@@ -8,14 +8,12 @@ order: 16
 ```vdt
 import {Table, TableColumn} from 'kpc';
 
-const data = [];
-
 <div>
-    <Table data={data}>
+    <Table data={[]}>
         <TableColumn key="a" title="表头1" />
         <TableColumn key="b" title="表头2" />
     </Table>
-    <Table data={data}>
+    <Table data={undefined}>
         <TableColumn key="a" title="表头1" />
         <TableColumn key="b" title="表头2" />
         <b:empty>
@@ -29,40 +27,3 @@ const data = [];
 .k-table
     margin-bottom 10px
 ```
-
-```vue-data
-data() {
-    return {
-        scheme: {a: '表头1', b: '表头2'},
-        data: [],
-        tip: <div>这里没有数据(自定义版本)</div>,
-    }
-},
-```
-
-```angular
-// import {Component} from '@angular/core';
-// 
-// @Component({
-//     selector: 'app-demo',
-//     template: `
-//         <div class='no-data-template'>
-//             <k-table [scheme]="scheme" [data]="data"></k-table>
-//             <k-table [scheme]="scheme" [data]="data" [noDataTemplate]="tip"></k-table>
-//             <k-table [scheme]="scheme" [data]="data">
-//                 <ng-template #no_data>
-//                     <div style="color: red">没有数据</div>
-//                 </ng-template>
-//             </k-table>
-//             <ng-template #tip>
-//                 <div>这里没有数据(自定义版本)</div>
-//             </ng-template>
-//         </div>
-//     `,
-//     styleUrls: ['./index.styl'],
-// })
-// export class AppDemoComponent {
-//     private scheme = {a: '表头1', b: '表头2'};
-//     private data = [];
-// }
-```
diff --git a/components/table/demos/fixColumn.md b/components/table/demos/fixColumn.md
index 9cdaa823a..79acf086e 100644
--- a/components/table/demos/fixColumn.md
+++ b/components/table/demos/fixColumn.md
@@ -12,19 +12,8 @@ order: 14
 ```vdt
 import {Table, TableColumn} from 'kpc';
 
-const data = [
-    {name: 'John'},
-    {name: 'Tom'},
-    {name: 'Javey'},
-].map(item => {
-    for (let i = 0; i < 4; i++) {
-        item[`column${i + 1}`] = 'test';
-    }
-    return item;
-});
-
 <div>
-    <Table data={data} resizable stickHeader="64">
+    <Table data={this.get('data')} resizable stickHeader="64">
         <TableColumn fixed="left" key="name" title="Name" width="200" class="name" />
         <TableColumn key="column1" title="Column1" width="300">
             <b:title>
@@ -40,7 +29,7 @@ const data = [
             </b:template>
         </TableColumn>
     </Table>
-    <Table data={data} fixHeader="150" resizable ref="__test" type="grid" stickHeader="64">
+    <Table data={this.get('data')} fixHeader="150" resizable ref="__test" type="grid" stickHeader="64">
         <TableColumn fixed="left" key="name" title="Name" width="200" />
         <TableColumn key="column1" title="Column1" width="300" />
         <TableColumn key="column2" title="Column2" width="300" />
@@ -60,32 +49,23 @@ const data = [
     margin-bottom 20px
 ```
 
-```vue-data
-data() {
-    return {
-        data: [
-            {name: 'John'},
-            {name: 'Tom'},
-            {name: 'Javey'},
-        ].map(item => {
-            for (let i = 0; i < 4; i++) {
-                item[`column${i + 1}`] = 'test';
-            }
-            return item;
-        })
-    }
-},
-```
+```ts
 
-```angular-properties
-private data = [
+const data = [
     {name: 'John'},
     {name: 'Tom'},
     {name: 'Javey'},
-].map(item => {
+].map((item: any) => {
     for (let i = 0; i < 4; i++) {
         item[`column${i + 1}`] = 'test';
     }
     return item;
 });
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {data};
+    }
+}
 ```
diff --git a/components/table/demos/group.md b/components/table/demos/group.md
index 36d2110d8..7269c7f93 100644
--- a/components/table/demos/group.md
+++ b/components/table/demos/group.md
@@ -18,7 +18,7 @@ import {Table, TableColumn} from 'kpc';
 
 <div class='tables'>
     <Table data={this.get('data')} 
-        v-model:group="group"
+        group={this.get('group')}
         ev-$change:group={this._onChangeGroup}
         ref="__test1"
         rowKey={row => row.name}
@@ -31,14 +31,14 @@ import {Table, TableColumn} from 'kpc';
                 {label: '已关闭', value: 'stopped'}
             ]}
         >
-            <b:template args="data">
+            <b:template args="[data]">
                 <span>{data.status === 'active' ? '运行中' : '已关闭'}</span>
             </b:template>
         </TableColumn>
     </Table>
 
     <Table data={this.get('multipleData')} 
-        v-model:group="multipleGroup"
+        group={this.get('multipleGroup')}
         ev-$change:group={this._onChangeMultipleGroup}
         ref="__test2"
         rowKey={row => row.name}
@@ -51,7 +51,7 @@ import {Table, TableColumn} from 'kpc';
             ]}
             multiple
         >
-            <b:template args="data">
+            <b:template args="[data]">
                 <span>{data.status === 'active' ? '运行中' : '已关闭'}</span>
             </b:template>
         </TableColumn>
@@ -71,8 +71,8 @@ import {bind, TableGroupValue} from 'kpc';
 interface Props {
     data: DataItem[]
     multipleData: DataItem[]
-    group: TableGroupValue
-    multipleGroup: TableGroupValue
+    group?: TableGroupValue
+    multipleGroup?: TableGroupValue
 }
 
 type DataItem = {
@@ -94,16 +94,16 @@ export default class extends Component<Props> {
             group: {status: ''},
             multipleData: oData,
             multipleGroup: {status: []},
-        }
+        } as Props;
     }
 
     @bind
-    _onChangeGroup(group: TableGroupValue) {
+    _onChangeGroup(group?: TableGroupValue) {
         console.log(group);
         const data = oData.filter(item => {
             let matched = true;
-            for (let key in group) {
-                const value = group[key];
+            for (let key in group!) {
+                const value = group![key];
                 if (value && item[key as keyof DataItem] !== value) {
                     matched = false;
                     break;
@@ -112,16 +112,16 @@ export default class extends Component<Props> {
             return matched;
         });
 
-        this.set('data', data);
+        this.set({data, group});
     }
 
     @bind
-    _onChangeMultipleGroup(group: TableGroupValue) {
+    _onChangeMultipleGroup(group?: TableGroupValue) {
         console.log(group);
         const data = oData.filter(item => {
             let matched = true;
-            for (let key in group) {
-                const value = group[key];
+            for (let key in group!) {
+                const value = group![key];
                 if (value.length && value.indexOf(item[key as keyof DataItem]) === -1) {
                     matched = false;
                     break;
@@ -130,71 +130,7 @@ export default class extends Component<Props> {
             return matched;
         });
 
-        this.set('multipleData', data);
+        this.set({multipleData: data, multipleGroup: group});
     }
 }
 ```
-
-```vue-data
-data() {
-    return {
-        data: oData, 
-        group: {status: ''},
-        multipleData: oData,
-        multipleGroup: {status: []},
-        scheme: {
-            name: '名称',
-            status: {
-                title: '状态',
-                template: function(data) {
-                    return <span>{data.status === 'active' ? '运行中' : '已关闭'}</span>
-                },
-                group: [
-                    {label: '全部', value: ''},
-                    {label: '运行中', value: 'active'},
-                    {label: '已关闭', value: 'stopped'},
-                ]
-            }
-        },
-    }
-},
-```
-
-```react-methods
-constructor(props) {
-    super(props);
-    this.state = {
-        "data": oData,
-        "group": {
-            "status": ""
-        },
-        "multipleData": oData,
-        "multipleGroup": {
-            "status": []
-        }
-    };
-    this._onChangeGroup = this._onChangeGroup.bind(this);
-    this._onChangeMultipleGroup = this._onChangeMultipleGroup.bind(this);
-}
-```
-
-```angular-properties
-private data = oData;
-private group = {status: ''};
-private multipleData = oData;
-private multipleGroup = {status: []};
-private scheme = {
-    name: '名称',
-    status: {
-        title: '状态',
-        template: function(data) {
-            return data.status === 'active' ? '运行中' : '已关闭';
-        },
-        group: [
-            {label: '全部', value: ''},
-            {label: '运行中', value: 'active'},
-            {label: '已关闭', value: 'stopped'},
-        ]
-    }
-};
-```
diff --git a/components/table/demos/groupHeader.md b/components/table/demos/groupHeader.md
index 51405f71c..1bc5c00aa 100644
--- a/components/table/demos/groupHeader.md
+++ b/components/table/demos/groupHeader.md
@@ -60,20 +60,3 @@ export default class extends Component {
     }
 }
 ```
-
-```vue-data
-data() {
-    return {data};
-}
-```
-
-```react-methods
-constructor(props) {
-    super(props);
-    this.state = {data};
-}
-```
-
-```angular-properties
-private data = data;
-```
diff --git a/components/table/demos/mergeCell.md b/components/table/demos/mergeCell.md
index 3114a648b..874a52b9e 100644
--- a/components/table/demos/mergeCell.md
+++ b/components/table/demos/mergeCell.md
@@ -97,7 +97,7 @@ type DataItem = {
     class5: string
     class6: string
     class7: string
-    foreoonTime: string
+    forenoonTime: string
     afternoonTime: string
 }
 
@@ -184,7 +184,7 @@ export default class extends Component<Props> {
     }
 
     @bind
-    merge(row: DataItem, column: TableColumnProps, rowIndex: number, columnIndex: number) {
+    merge(row: DataItem, column: TableColumnProps | null, rowIndex: number, columnIndex: number) {
         if (columnIndex === 0) {
             // is check column
             if (rowIndex === 0) {
@@ -205,7 +205,7 @@ export default class extends Component<Props> {
         }
 
         const data = this.get('data');
-        if (column.key === 'forenoonTime' || column.key === 'afternoonTime') {
+        if (column!.key === 'forenoonTime' || column!.key === 'afternoonTime') {
             return {
                 rowspan: data.length,
                 colspan: 1,
@@ -217,8 +217,8 @@ export default class extends Component<Props> {
         for (let i = 1; i <= 7; i++) columns.push(`class${i}` as keyof DataItem);
 
         let colspan = 1;
-        const value = row[column.key as keyof DataItem];
-        for (let i = columns.indexOf(column.key as keyof DataItem) + 1; i < 7; i++) {
+        const value = row[column!.key as keyof DataItem];
+        for (let i = columns.indexOf(column!.key as keyof DataItem) + 1; i < 7; i++) {
             const nextValue = row[columns[i]];
             if (nextValue !== value) break;
             colspan++;
diff --git a/components/table/demos/rowExpandable.md b/components/table/demos/rowExpandable.md
index 464f5ac62..bf1feb816 100644
--- a/components/table/demos/rowExpandable.md
+++ b/components/table/demos/rowExpandable.md
@@ -92,7 +92,7 @@ export default class extends Component<Props> {
                 {name: 'Javey', email: 'jiawei23716@sina.com'}, 
                 {name: 'Jiawei', email: 'zoujiawei@gmail.com'}
             ],
-        };
+        } as Props;
     }
 
     @bind
diff --git a/components/table/demos/scrollToRow.md b/components/table/demos/scrollToRow.md
index d04a1ace4..d9454cbd1 100644
--- a/components/table/demos/scrollToRow.md
+++ b/components/table/demos/scrollToRow.md
@@ -9,8 +9,7 @@ order: 25
 > 需要`fixHeader`固定表头才能生效
 
 ```vdt
-import {Table, TableColumn} from 'kpc';
-import {Button, ButtonGroup} from 'kpc';
+import {Table, TableColumn, Button, ButtonGroup} from 'kpc';
 
 <div class="wrapper">
     <ButtonGroup>
@@ -68,26 +67,3 @@ export default class extends Component {
     }
 }
 ```
-
-```vue-data
-data() {
-    return {
-        data
-    }
-},
-```
-
-```react-methods
-constructor(props) {
-    super(props);
-    this.state = {
-        data
-    };
-    this.scrollToRowByIndex = this.scrollToRowByIndex.bind(this);
-    this.scrollToRowByKey = this.scrollToRowByKey.bind(this);
-}
-```
-
-```angular-properties
-private data = data;
-```
diff --git a/components/table/demos/sort.md b/components/table/demos/sort.md
index 2fcde6b51..1fce8359f 100644
--- a/components/table/demos/sort.md
+++ b/components/table/demos/sort.md
@@ -53,17 +53,17 @@ export default class extends Component<Props> {
     }
 
     @bind
-    _onSort(sort: TableSortValue<'name' | 'age'>) {
+    _onSort(sort: TableSortValue<'name' | 'age'> | undefined) {
         console.log(sort);
         const data = oData.slice(0);
-        if (sort.type) {
+        if (sort!.type) {
             data.sort((a, b) => {
-                return sort.type === 'desc' ? 
-                    (a[sort.key!] > b[sort.key!] ? -1 : 1) : 
-                    (a[sort.key!] > b[sort.key!] ? 1 : -1);
+                return sort!.type === 'desc' ? 
+                    (a[sort!.key!] > b[sort!.key!] ? -1 : 1) : 
+                    (a[sort!.key!] > b[sort!.key!] ? 1 : -1);
             });
         }
-        this.set({data, sort});
+        this.set({data, sort: sort!});
     }
 }
 ```
diff --git a/components/table/demos/stickScrollbar.md b/components/table/demos/stickScrollbar.md
index 5bd8de9aa..ed6b007ef 100644
--- a/components/table/demos/stickScrollbar.md
+++ b/components/table/demos/stickScrollbar.md
@@ -13,18 +13,7 @@ order: 13
 ```vdt
 import {Table, TableColumn} from 'kpc';
 
-const data = [
-    {name: 'John'},
-    {name: 'Tom'},
-    {name: 'Javey'},
-].map(item => {
-    for (let i = 0; i < 4; i++) {
-        item[`column${i + 1}`] = 'test';
-    }
-    return item;
-});
-
-<Table data={data} resizable stickScrollbar>
+<Table data={this.get('data')} resizable stickScrollbar>
     <TableColumn key="name" title="Name" width="200" />
     <TableColumn key="column1" title="Column1" width="300" />
     <TableColumn key="column2" title="Column2" width="300" />
@@ -38,32 +27,23 @@ const data = [
 </Table>
 ```
 
-```vue-data
-data() {
-    return {
-        data: [
-            {name: 'John'},
-            {name: 'Tom'},
-            {name: 'Javey'},
-        ].map(item => {
-            for (let i = 0; i < 4; i++) {
-                item[`column${i + 1}`] = 'test';
-            }
-            return item;
-        })
-    }
-},
-```
-
-```angular-properties
-private data = [
+```ts
+const data = [
     {name: 'John'},
     {name: 'Tom'},
     {name: 'Javey'},
-].map(item => {
+].map((item: any) => {
     for (let i = 0; i < 4; i++) {
         item[`column${i + 1}`] = 'test';
     }
     return item;
 });
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data
+        }
+    }
+}
 ```
diff --git a/components/table/table.ts b/components/table/table.ts
index 05f22f2a2..9dbabd94b 100644
--- a/components/table/table.ts
+++ b/components/table/table.ts
@@ -1,4 +1,4 @@
-import {Component, TypeDefs, Props, createRef, mount, findDomFromVNode} from 'intact';
+import {Component, TypeDefs} from 'intact';
 import template from './table.vdt';
 import {useColumns} from './useColumns';
 import {useFixedColumns} from './useFixedColumns';
@@ -7,7 +7,6 @@ import {bind} from '../utils';
 import {useChecked} from './useChecked';
 import {useDisableRow} from './useDisableRow';
 import {useSortable} from './useSortable';
-import type {TableColumnProps} from './column';
 import {useMerge, TableMerge} from './useMerge';
 import {useExpandable} from './useExpandable';
 import {useSelected} from './useSelected';
@@ -22,30 +21,38 @@ import {useWidth} from './useWidth';
 import {useScroll} from './useScroll';
 import type {Events} from '../types';
 
-export interface TableProps<T = any> {
+type CheckType = 'checkbox' | 'radio' | 'none'
+
+export interface TableProps<
+    T = any,
+    C extends CheckType = 'checkbox',
+    K extends TableRowKey = number,
+    S extends string = string,
+    G extends TableGroupValue = TableGroupValue
+> {
     data?: T[]
     fixHeader?: boolean | string | number 
     stickHeader?: boolean | string | number
     stickScrollbar?: boolean | string | number
-    checkType?: 'checkbox' | 'radio' | 'none'
-    checkedKeys?: TableRowKey[]
-    rowKey?: (value: T, index: number) => TableRowKey
+    checkType?: C
+    checkedKeys?: K[]
+    rowKey?: (value: T, index: number) => K 
     rowCheckable?: boolean
-    disableRow?: (value: T, index: number, key: TableRowKey) => boolean
+    disableRow?: (value: T, index: number, key: K) => boolean
     type?: 'default' | 'border' | 'grid'
     stripe?: boolean
-    rowClassName?: (value: T, index: number, key: TableRowKey) => string | undefined
-    group?: TableGroupValue
-    sort?: TableSortValue 
+    rowClassName?: (value: T, index: number, key: K) => string | undefined
+    group?: G
+    sort?: TableSortValue<S>
     loading?: boolean
-    merge?: TableMerge<T>
-    expandedKeys?: TableRowKey[]
+    merge?: TableMerge<T, C>
+    expandedKeys?: K[]
     rowExpandable?: boolean
-    selectedKeys?: TableRowKey[]
+    selectedKeys?: K[]
     rowSelectable?: boolean | 'single' | 'multiple'
     childrenKey?: string
     indent?: number
-    spreadKeys?: TableRowKey[]
+    spreadKeys?: K[]
     tooltipPosition?: TooltipProps['position']
     tooltipContainer?: TooltipProps['container']
     keepStatus?: boolean
@@ -55,10 +62,10 @@ export interface TableProps<T = any> {
     widthStoreKey?: string
 }
 
-export interface TableEvents<T = any> {
-    clickRow: [T, number, TableRowKey]
-    dragstart: [{key: TableRowKey, from: number}]
-    dragend: [{key: TableRowKey, from: number, to: number}]
+export interface TableEvents<T = any, K extends TableRowKey = number> {
+    clickRow: [T, number, K]
+    dragstart: [{key: K, from: number}]
+    dragend: [{key: K, from: number, to: number}]
 }
 
 export interface TableBlocks<T = unknown> {
@@ -73,7 +80,7 @@ export type TableSortValue<T = string> = {
     type?: 'desc' | 'asc'
 }
 
-export type TableGroupValue<T extends string | number | symbol = string> = Record<T, any | any[]> 
+export type TableGroupValue<T extends string | number | symbol = string | number | symbol> = Record<T, any | any[]> 
 
 const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     data: Array,
@@ -124,7 +131,13 @@ const events: Events<TableEvents> = {
     dragend: true,
 };
 
-export class Table<T = any> extends Component<TableProps<T>, TableEvents<T>> {
+export class Table<
+    T = any,
+    C extends CheckType = CheckType,
+    K extends TableRowKey = TableRowKey,
+    S extends string = string,
+    G extends TableGroupValue = TableGroupValue
+> extends Component<TableProps<T, C, K, S, G>, TableEvents<T, K>, TableBlocks<T>> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
@@ -247,7 +260,7 @@ export class Table<T = any> extends Component<TableProps<T>, TableEvents<T>> {
     }
 
     @bind
-    private clickRow(data: any, index: number, key: string | number) {
+    private clickRow(data: T, index: number, key: K) {
         this.trigger('clickRow', data, index, key);
     }
     
diff --git a/components/table/useMerge.ts b/components/table/useMerge.ts
index 27df9cbc1..b93a7007a 100644
--- a/components/table/useMerge.ts
+++ b/components/table/useMerge.ts
@@ -2,9 +2,9 @@ import {useInstance, Props} from 'intact';
 import type {Table, TableRowKey} from './table';
 import type {TableColumnProps} from './column';
 
-export type TableMerge<T = any> = (
+export type TableMerge<T = any, CheckType = 'checkbox'> = (
     row: T,
-    column: Props<TableColumnProps> | null,
+    column: CheckType extends 'none' ? Props<TableColumnProps> : Props<TableColumnProps> | null,
     rowIndex: number,
     columnIndex: number
 ) => TableMergeConfig | undefined
diff --git a/components/tabs/demos/closable.md b/components/tabs/demos/closable.md
index 258d3a6b3..2a12acb2c 100644
--- a/components/tabs/demos/closable.md
+++ b/components/tabs/demos/closable.md
@@ -45,7 +45,7 @@ import {Tabs, Tab, Button, ButtonGroup} from 'kpc';
 import {bind, TabsProps} from 'kpc';
 
 interface Props {
-    tab: number | null
+    tab?: number
     tabs: TabItem[]
     size: TabsProps['size'] 
     types: TabsProps['type'][]
@@ -83,7 +83,7 @@ export default class extends Component<Props> {
         let tab = this.get('tab');
         if (value === tab) {
             const item = tabs[index] || tabs[index - 1];
-            tab = item ? item.value : null;
+            tab = item ? item.value : undefined;
         }
 
         this.set({tabs, tab});
diff --git a/components/tabs/demos/disabled.md b/components/tabs/demos/disabled.md
index 11db1b3b4..914d53ac7 100644
--- a/components/tabs/demos/disabled.md
+++ b/components/tabs/demos/disabled.md
@@ -30,7 +30,7 @@ import {Tabs, Tab} from 'kpc';
 
 ```ts
 interface Props {
-    tab: string | null
+    tab?: string | null
 }
 
 export default class extends Component {
diff --git a/components/tabs/index.ts b/components/tabs/index.ts
index 24e8b13af..0c2d2f143 100644
--- a/components/tabs/index.ts
+++ b/components/tabs/index.ts
@@ -8,17 +8,17 @@ import {useScroll} from './useScroll';
 import type {Events} from '../types';
 export * from './tab';
 
-export interface TabsProps {
-    value?: any
+export interface TabsProps<T = any> {
+    value?: T
     vertical?: boolean
     size?: Sizes
     type?: 'default' | 'card' | 'border-card' | 'no-border-card'
     closable?: boolean
-    beforeChange?: (value: any) => boolean | Promise<boolean>
+    beforeChange?: (value: T) => boolean | Promise<boolean>
 }
 
-export interface TabsEvents {
-    remove: [any]
+export interface TabsEvents<T = any> {
+    remove: [T]
 }
 
 const typeDefs: Required<TypeDefs<TabsProps>> = {
@@ -39,7 +39,7 @@ const events: Events<TabsEvents> = {
     remove: true,
 }
 
-export class Tabs extends Component<TabsProps, TabsEvents> {
+export class Tabs<T = any> extends Component<TabsProps<T>, TabsEvents<T>> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
@@ -69,7 +69,7 @@ export class Tabs extends Component<TabsProps, TabsEvents> {
         }
     }
     
-    public remove(value: any) {
+    public remove(value: T) {
         this.trigger('remove', value);
     }
 }
diff --git a/components/tree/demos/draggable.md b/components/tree/demos/draggable.md
index 6cb1926e1..dbe4f3b1a 100644
--- a/components/tree/demos/draggable.md
+++ b/components/tree/demos/draggable.md
@@ -23,7 +23,7 @@ import {Tree, Input} from 'kpc';
 ```
 
 ```ts
-import {Message, TreeDataItem, TreeNode} from 'kpc';
+import {Message, TreeDataItem, TreeNode, TreeDragEndData} from 'kpc';
 
 interface Props {
     data?: TreeDataItem<string>[]
@@ -92,7 +92,7 @@ export default class extends Component<Props> {
         };
     }
 
-    onDragEnd(data: TreeDataItem<string>[]) {
+    onDragEnd(data: TreeDragEndData<string>) {
         console.log(data);
     }
 
diff --git a/components/tree/index.ts b/components/tree/index.ts
index 6e0b32468..d9ca64c7e 100644
--- a/components/tree/index.ts
+++ b/components/tree/index.ts
@@ -50,6 +50,8 @@ type DragEndData<K extends Key> = {
     mode: Mode
 }
 
+export type TreeDragEndData<K extends Key = Key> = DragEndData<K>
+
 type Filter<K extends Key> = (data: DataItem<K>, node: Node<K>) => boolean;
 
 const typeDefs: Required<TypeDefs<TreeProps<Key>>> = {
diff --git a/components/utils.ts b/components/utils.ts
index ef5b1b9fc..ff1932522 100644
--- a/components/utils.ts
+++ b/components/utils.ts
@@ -264,7 +264,7 @@ export function isComponentVNode<T extends ComponentConstructor>(o: any, tag: T)
     return o.tag === tag; 
 }
 
-export function range(start: number, end: number) {
+export function range(start: number, end: number): number[] {
     return Array.apply(null, {length: end - start + 1} as any)
         .map((v, i) => i + start);
 }
diff --git a/scripts/doc/generate.js b/scripts/doc/generate.js
index afba6dbd9..286ef2b29 100644
--- a/scripts/doc/generate.js
+++ b/scripts/doc/generate.js
@@ -13,7 +13,7 @@ const NUMS = os.cpus().length;
 const globExp = resolvePath('./@(docs|components)/**/*.md');
 // const globExp = resolvePath('./@(components)/**/*.md');
 // const globExp = resolvePath('./@(docs|components)/card/**/*.md');
-// const globExp = resolvePath('./@(docs|components)/transfer/demos/basic.md');
+// const globExp = resolvePath('./@(docs|components)/tag/demos/size.md');
 
 function prepare() {
     return new Promise(resolve => {
diff --git a/scripts/doc/intact2react.js b/scripts/doc/intact2react.js
index 23f504833..0cf9eb01a 100644
--- a/scripts/doc/intact2react.js
+++ b/scripts/doc/intact2react.js
@@ -148,19 +148,26 @@ function parse(vdt, js, reactMethods, hasStylus, properties) {
     }
 }
 
-const delimitersRegExp = /\b([^\s]*?)=\{\{\s+([\s\S]*?)\s+}}/g;
+const delimitersRegExp = /\b([^\s]*?)=\{\s*([\s\S]*?)\s*(\})?\}/g;
 function parseProperty(template, properties, methods) {
     // specical for Editable validate string
     template = template.replace('"\\d+"', '"\\\\d+"');
-    return template.replace(delimitersRegExp, (match, name, value) => {
+    return template.replace(delimitersRegExp, (match, name, value, isObject) => {
+        if (isObject) value += isObject;
         value = parseGet(value, properties);
         if (name.substring(0, 3) === 'ev-') {
             if (name === 'ev-contextmenu') {
                 name = 'onContextMenu';
             } else {
-                name = `on${name.substring(3, 4).toUpperCase()}${name.substring(4).replace(':', '-')}`;
+                let type = name.substring(3);
+                if (type.startsWith('$change')) {
+                    type = `Change` + upperFirst(type.substring(`$change-`.length));
+                } else {
+                    type = upperFirst(type);
+                }
+                name = `on${type.replace(':', '-')}`;
             }
-            const matches = value.match(/self\.(\w+)(\.bind\(self, (.*?)\))?/);
+            const matches = value.match(/this\.(\w+)(\.bind\(this, (.*?)\))?/);
             if (matches) {
                 if (matches[2]) {
                     if (matches[1] === 'set') {
@@ -169,7 +176,7 @@ function parseProperty(template, properties, methods) {
                     // value = `${matches[1]}(${matches[3]})`;
                     value = `this.${matches[1]}.bind(this, ${matches[3]})`;
                 } else {
-                    value = `this.${matches[1]}`;
+                    // value = `this.${matches[1]}`;
                 }
             }
         } else if (name === 'v-model') {
@@ -189,8 +196,8 @@ function parseProperty(template, properties, methods) {
             }
             return `value={this.state[${value}]} on$change-value={(c, v) => this.setState({[${value}]: v})}`;
         } else if (name === 'className') {
-            methods._classNames = [
-                `_classNames(classNames) {`,
+            methods.classNames = [
+                `private classNames(classNames: Record<string, any>) {`,
                 ...indent([
                     `const ret = [];`,
                     `for (let key in classNames) {`,
@@ -208,9 +215,9 @@ function parseProperty(template, properties, methods) {
                 `}`,
                 ``
             ].join('\n');
-            value = `this._classNames(${value})`;
+            value = `this.classNames(${value})`;
         } else {
-            value = value.replace(/self/g, 'this');
+            value = value.replace(/this/g, 'this');
         }
 
         return `${name}={${value}}`;
diff --git a/scripts/doc/intact2vue.js b/scripts/doc/intact2vue.js
index 6b92efe9c..8dd71cfb2 100644
--- a/scripts/doc/intact2vue.js
+++ b/scripts/doc/intact2vue.js
@@ -221,12 +221,13 @@ function parseJS(js, vueData) {
     };
 }
 
-const delimitersRegExp = /\b([^\s]*?)=\{\s*([\s\S]*?)\s*}/g;
+const delimitersRegExp = /\b([^\s]*?)={\s*([\s\S]*?)\s*(})?}/g;
 const getRegExp = /this\.get\(['"](.*?)['"]\)/g;
 function parseProperty(template, properties, methods) {
     // specical for Editable validate string
     template = template.replace('"\\d+"', '"\\\\d+"');
-    return template.replace(delimitersRegExp, (match, name, value) => {
+    return template.replace(delimitersRegExp, (match, name, value, isObject) => {
+        if (isObject) value += isObject;
         value = value.replace(getRegExp, (nouse, name) => {
             properties[name] = null;
             return name;
diff --git a/tsconfig.json b/tsconfig.json
index 8f9de8ea9..6354369e3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -51,6 +51,7 @@
         "kpc/*": ["*"],
         "kpc": ["./"],
         "kpc-react": ["./packages/kpc-react"],
+        "kpc-react/*": ["./packages/kpc-react/*"],
         "kpc-vue": ["./packages/kpc-vue"],
         "kpc-vue/*": ["./packages/kpc-vue/*"],
         "kpc-vue-next": ["./packages/kpc-vue-next"],