feat(Checkbox): upgrade checkbox ts

components/checkbox/__docs__/demo/all-check/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Checkbox, Divider } from '@alifd/next';
+import type { CheckboxProps, GroupProps } from '@alifd/next/lib/checkbox';
 
 const CheckboxGroup = Checkbox.Group;
 
@@ -12,13 +13,13 @@ const App = () => {
     const [indeterminate, setIndeterminate] = React.useState(true);
     const [checkAll, setCheckAll] = React.useState(false);
 
-    const onChange = list => {
+    const onChange: GroupProps['onChange'] = (list: string[]) => {
         setCheckedList(list);
         setIndeterminate(!!list.length && list.length < plainOptions.length);
         setCheckAll(list.length === plainOptions.length);
     };
 
-    const onCheckAllChange = (checked, e) => {
+    const onCheckAllChange: CheckboxProps['onChange'] = (checked, e) => {
         setCheckedList(e.target.checked ? plainOptions : []);
         setIndeterminate(false);
         setCheckAll(e.target.checked);

components/checkbox/__docs__/demo/control/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Checkbox } from '@alifd/next';
+import { type GroupProps } from '@alifd/next/lib/checkbox';
 
 const list = [
     {
@@ -18,26 +19,16 @@ const list = [
 ];
 
 class ControlApp extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value: 'orange',
-        };
-
-        this.onChange = this.onChange.bind(this);
-    }
+    state = {
+        value: 'orange',
+    };
 
-    onChange(value) {
+    onChange: GroupProps['onChange'] = value => {
         this.setState({
             value: value,
         });
         console.log('onChange', value);
-    }
-
-    onClick(e) {
-        console.log('onClick', e);
-    }
+    };
 
     render() {
         return (

components/checkbox/__docs__/demo/dataSource/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Checkbox } from '@alifd/next';
+import { type GroupProps } from '@alifd/next/lib/checkbox';
 
 const list = [
     {
@@ -20,28 +21,19 @@ const list = [
 ];
 
 class App extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value: 'apple',
-        };
-    }
+    state = {
+        value: 'apple',
+    };
 
-    onChange = value => {
+    onChange: GroupProps['onChange'] = value => {
         this.setState({
             value: value,
         });
     };
 
     render() {
         return (
-            <Checkbox.Group
-                dataSource={list}
-                size="small"
-                value={this.state.value}
-                onChange={this.onChange}
-            />
+            <Checkbox.Group dataSource={list} value={this.state.value} onChange={this.onChange} />
         );
     }
 }

components/checkbox/__docs__/demo/group/index.tsx

@@ -1,23 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Checkbox } from '@alifd/next';
+import { type GroupProps } from '@alifd/next/lib/checkbox';
 
 class App extends React.Component {
-    constructor(props) {
-        super(props);
+    state = {
+        value: 'orange',
+    };
 
-        this.state = {
-            value: 'orange',
-        };
-
-        this.onChange = this.onChange.bind(this);
-    }
-
-    onChange(value) {
+    onChange: GroupProps['onChange'] = value => {
         this.setState({
             value: value,
         });
-    }
+    };
 
     render() {
         return (

components/checkbox/__docs__/demo/indeterminate/index.tsx

@@ -3,15 +3,11 @@ import ReactDOM from 'react-dom';
 import { Checkbox, Button } from '@alifd/next';
 
 class IndeterminateApp extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            checked: false,
-            indeterminate: true,
-            disabled: false,
-        };
-    }
+    state = {
+        checked: false,
+        indeterminate: true,
+        disabled: false,
+    };
 
     toggle = () => {
         if (this.state.indeterminate) {

components/checkbox/__docs__/demo/isPreview/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Checkbox, Switch } from '@alifd/next';
+import { type CheckboxProps, type GroupProps } from '@alifd/next/lib/checkbox';
 
 class App extends React.Component {
     state = {
@@ -20,10 +21,10 @@ class App extends React.Component {
         });
     };
 
-    renderChecked = (checked, props) =>
+    renderChecked: CheckboxProps['renderPreview'] = (checked, props) =>
         checked ? <span>{props.children}</span> : <span>null</span>;
 
-    renderPreview = (previewed, props) =>
+    renderPreview: GroupProps['renderPreview'] = previewed =>
         previewed.length
             ? previewed.map((Item, index) => (
                   <span key={`${index}-checkbox`} style={{ marginRight: 10 }}>

components/checkbox/__docs__/demo/uncontrol/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Checkbox } from '@alifd/next';
+import { type GroupProps } from '@alifd/next/lib/checkbox';
 
 const { Group: CheckboxGroup } = Checkbox;
 const list = [
@@ -21,15 +22,9 @@ const list = [
 ];
 
 class UnControlApp extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.onChange = this.onChange.bind(this);
-    }
-
-    onChange(selectedItems) {
+    onChange: GroupProps['onChange'] = selectedItems => {
         console.log('onChange callback', selectedItems);
-    }
+    };
 
     render() {
         return (