docs: feat components TS demo (#34742)

* docs: add general components TS demo

* docs: add layout components TS demo

* docs: add navigation components TS demo

* docs: add data entry components TS demo

* chore(deps): add types for qs

* docs: add data display TS demo

* docs: add feedback components TS demo

* docs: add other components TS demo

* chore(deps): add types

* docs: unified demo code style

* docs: fix lint error

* docs: add demo TS type

* docs: fix demo TS type

* test: update snapshot

* docs: fix TS demo

* feat: update Rate character type

* docs: fix lint error

* feat: update Rate character type

* feat: update Rate character type

components/affix/demo/basic.md

@@ -17,7 +17,7 @@ The simplest usage.
 import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
 
-const Demo: React.FC = () => {
+const App: React.FC = () => {
   const [top, setTop] = useState(10);
   const [bottom, setBottom] = useState(10);
 
@@ -38,5 +38,5 @@ const Demo: React.FC = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```

components/affix/demo/debug.md

@@ -18,8 +18,9 @@ DEBUG
 import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
 
-const Demo: React.FC = () => {
+const App: React.FC = () => {
   const [top, setTop] = useState(10);
+
   return (
     <div style={{ height: 10000 }}>
       <div>Top</div>
@@ -35,5 +36,5 @@ const Demo: React.FC = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```

components/affix/demo/on-change.md

@@ -14,11 +14,14 @@ title:
 Callback with affixed state.
 
 ```tsx
+import React from 'react';
 import { Affix, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
     <Button>120px to affix top</Button>
   </Affix>
 );
+
+export default App;
 ```

components/affix/demo/target.md

@@ -17,8 +17,9 @@ Set a `target` for 'Affix', which is listen to scroll event of target element (d
 import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
 
-const Demo: React.FC = () => {
+const App: React.FC = () => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
   return (
     <div className="scrollable-container" ref={setContainer}>
       <div className="background">
@@ -30,7 +31,7 @@ const Demo: React.FC = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
 
 <style>

components/alert/demo/action.md

@@ -17,7 +17,7 @@ Custom action.
 import React from 'react';
 import { Alert, Button, Space } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       message="Success Tips"
@@ -71,6 +71,8 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
 
 <style>

components/alert/demo/banner.md

@@ -15,9 +15,10 @@ title:
 Display Alert as a banner at top of page.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert message="Warning text" banner />
     <br />
@@ -32,4 +33,6 @@ export default () => (
     <Alert type="error" message="Error text" banner />
   </>
 );
+
+export default App;
 ```

components/alert/demo/basic.md

@@ -14,9 +14,12 @@ title:
 The simplest usage for short messages.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => <Alert message="Success Text" type="success" />;
+const App: React.FC = () => <Alert message="Success Text" type="success" />;
+
+export default App;
 ```
 
 <style>

components/alert/demo/closable.md

@@ -14,13 +14,14 @@ title:
 To show close button.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');
 };
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@@ -37,4 +38,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/close-text.md

@@ -14,7 +14,10 @@ title:
 Replace the default icon with customized text.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => <Alert message="Info Text" type="info" closeText="Close Now" />;
+const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;
+
+export default App;
 ```

components/alert/demo/custom-icon.md

@@ -15,12 +15,13 @@ title:
 A relevant icon makes information clearer and more friendly.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
 const icon = <SmileOutlined />;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert icon={icon} message="showIcon = false" type="success" />
     <Alert icon={icon} message="Success Tips" type="success" showIcon />
@@ -57,4 +58,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/description.md

@@ -14,9 +14,10 @@ title:
 Additional description for alert message.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       message="Success Text"
@@ -40,4 +41,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/error-boundary.md

@@ -34,9 +34,11 @@ const ThrowError: React.FC = () => {
   );
 };
 
-export default () => (
+const App: React.FC = () => (
   <ErrorBoundary>
     <ThrowError />
   </ErrorBoundary>
 );
+
+export default App;
 ```

components/alert/demo/icon.md

@@ -14,9 +14,10 @@ title:
 A relevant icon will make information clearer and more friendly.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert message="Success Tips" type="success" showIcon />
     <Alert message="Informational Notes" type="info" showIcon />
@@ -49,4 +50,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/loop-banner.md

@@ -14,11 +14,12 @@ title:
 Show a loop banner by using with [react-text-loop-next](https://npmjs.com/package/react-text-loop-next) or [react-fast-marquee](https://npmjs.com/package/react-fast-marquee).
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 import { TextLoop } from 'react-text-loop-next';
 import Marquee from 'react-fast-marquee';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert
       banner
@@ -41,4 +42,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```

components/alert/demo/smooth-closed.md

@@ -19,9 +19,11 @@ import { Alert } from 'antd';
 
 const App: React.FC = () => {
   const [visible, setVisible] = useState(true);
+
   const handleClose = () => {
     setVisible(false);
   };
+
   return (
     <div>
       {visible ? (

components/alert/demo/style.md

@@ -14,9 +14,10 @@ title:
 There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 
 ```tsx
+import React from 'react';
 import { Alert } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Alert message="Success Text" type="success" />
     <Alert message="Info Text" type="info" />
@@ -24,6 +25,8 @@ export default () => (
     <Alert message="Error Text" type="error" />
   </>
 );
+
+export default App;
 ```
 
 <style>

components/anchor/demo/basic.md

@@ -14,11 +14,12 @@ title:
 The simplest usage.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-export default () => (
+const App: React.FC = () => (
   <Anchor>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -28,6 +29,8 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```
 
 <style>

components/anchor/demo/customizeHighlight.md

@@ -14,13 +14,14 @@ title:
 Customize the anchor highlight.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
 const getCurrentAnchor = () => '#components-anchor-demo-static';
 
-export default () => (
+const App: React.FC = () => (
   <Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -30,4 +31,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```

components/anchor/demo/onChange.md

@@ -14,6 +14,7 @@ title:
 Listening for anchor link change.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
@@ -22,7 +23,7 @@ const onChange = (link: string) => {
   console.log('Anchor:OnChange', link);
 };
 
-export default () => (
+const App: React.FC = () => (
   <Anchor affix={false} onChange={onChange}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -32,4 +33,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```

components/anchor/demo/onClick.md

@@ -14,6 +14,7 @@ title:
 Clicking on an anchor does not record history.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
@@ -29,7 +30,7 @@ const handleClick = (
   console.log(link);
 };
 
-export default () => (
+const App: React.FC = () => (
   <Anchor affix={false} onClick={handleClick}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -39,4 +40,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```

components/anchor/demo/static.md

@@ -14,11 +14,12 @@ title:
 Do not change state when page is scrolling.
 
 ```tsx
+import React from 'react';
 import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-export default () => (
+const App: React.FC = () => (
   <Anchor affix={false}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -28,4 +29,6 @@ export default () => (
     </Link>
   </Anchor>
 );
+
+export default App;
 ```

components/anchor/demo/targetOffset.md

@@ -19,11 +19,13 @@ import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-const AnchorExample: React.FC = () => {
+const App: React.FC = () => {
   const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
+
   useEffect(() => {
     setTargetOffset(window.innerHeight / 2);
   }, []);
+
   return (
     <Anchor targetOffset={targetOffset}>
       <Link href="#components-anchor-demo-basic" title="Basic demo" />
@@ -36,5 +38,5 @@ const AnchorExample: React.FC = () => {
   );
 };
 
-export default () => <AnchorExample />;
+export default App;
 ```

components/auto-complete/demo/basic.md

@@ -17,23 +17,28 @@ Basic Usage, set data source of autocomplete with `options` property.
 import React, { useState } from 'react';
 import { AutoComplete } from 'antd';
 
-const mockVal = (str: string, repeat: number = 1) => ({
+const mockVal = (str: string, repeat = 1) => ({
   value: str.repeat(repeat),
 });
-const Complete: React.FC = () => {
+
+const App: React.FC = () => {
   const [value, setValue] = useState('');
   const [options, setOptions] = useState<{ value: string }[]>([]);
+
   const onSearch = (searchText: string) => {
     setOptions(
       !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
     );
   };
+
   const onSelect = (data: string) => {
     console.log('onSelect', data);
   };
+
   const onChange = (data: string) => {
     setValue(data);
   };
+
   return (
     <>
       <AutoComplete
@@ -58,5 +63,5 @@ const Complete: React.FC = () => {
   );
 };
 
-export default () => <Complete />;
+export default App;
 ```

components/auto-complete/demo/certain-category.md

@@ -14,6 +14,7 @@ title:
 Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.
 
 ```tsx
+import React from 'react';
 import { Input, AutoComplete } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
@@ -63,7 +64,7 @@ const options = [
   },
 ];
 
-const Complete: React.FC = () => (
+const App: React.FC = () => (
   <AutoComplete
     dropdownClassName="certain-category-search-dropdown"
     dropdownMatchSelectWidth={500}
@@ -74,7 +75,7 @@ const Complete: React.FC = () => (
   </AutoComplete>
 );
 
-export default () => <Complete />;
+export default App;
 ```
 
 ```css

components/auto-complete/demo/custom.md

@@ -19,8 +19,9 @@ import { AutoComplete, Input } from 'antd';
 
 const { TextArea } = Input;
 
-const Complete: React.FC = () => {
+const App: React.FC = () => {
   const [options, setOptions] = useState<{ value: string }[]>([]);
+
   const handleSearch = (value: string) => {
     setOptions(
       !value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],
@@ -52,5 +53,5 @@ const Complete: React.FC = () => {
   );
 };
 
-export default () => <Complete />;
+export default App;
 ```

components/auto-complete/demo/form-debug.md

@@ -7,6 +7,7 @@ debug: true
 ---
 
 ```tsx
+import React from 'react';
 import { Input, AutoComplete, Form, TreeSelect, Button } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
@@ -21,7 +22,7 @@ const formItemLayout = {
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <Form style={{ margin: '0 auto' }} {...formItemLayout}>
     <Form.Item label="单独 AutoComplete">
       <AutoComplete />
@@ -69,4 +70,6 @@ export default () => (
     </Form.Item>
   </Form>
 );
+
+export default App;
 ```

components/auto-complete/demo/non-case-sensitive.md

@@ -14,6 +14,7 @@ title:
 A non-case-sensitive AutoComplete
 
 ```tsx
+import React from 'react';
 import { AutoComplete } from 'antd';
 
 const options = [
@@ -22,7 +23,7 @@ const options = [
   { value: 'Wall Street' },
 ];
 
-const Complete: React.FC = () => (
+const App: React.FC = () => (
   <AutoComplete
     style={{ width: 200 }}
     options={options}
@@ -33,5 +34,5 @@ const Complete: React.FC = () => (
   />
 );
 
-export default () => <Complete />;
+export default App;
 ```

components/auto-complete/demo/options.md

@@ -19,8 +19,9 @@ import { AutoComplete } from 'antd';
 
 const { Option } = AutoComplete;
 
-const Complete: React.FC = () => {
+const App: React.FC = () => {
   const [result, setResult] = useState<string[]>([]);
+
   const handleSearch = (value: string) => {
     let res: string[] = [];
     if (!value || value.indexOf('@') >= 0) {
@@ -30,6 +31,7 @@ const Complete: React.FC = () => {
     }
     setResult(res);
   };
+
   return (
     <AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
       {result.map((email: string) => (
@@ -41,5 +43,5 @@ const Complete: React.FC = () => {
   );
 };
 
-export default () => <Complete />;
+export default App;
 ```

components/auto-complete/demo/status.md

@@ -18,10 +18,11 @@ Add status to AutoComplete with `status`, which could be `error` or `warning`.
 import React, { useState } from 'react';
 import { AutoComplete, Space } from 'antd';
 
-const mockVal = (str: string, repeat: number = 1) => ({
+const mockVal = (str: string, repeat = 1) => ({
   value: str.repeat(repeat),
 });
-const ValidateInputs: React.FC = () => {
+
+const App: React.FC = () => {
   const [options, setOptions] = useState<{ value: string }[]>([]);
 
   const onSearch = (searchText: string) => {
@@ -38,5 +39,5 @@ const ValidateInputs: React.FC = () => {
   );
 };
 
-export default () => <ValidateInputs />;
+export default App;
 ```

components/auto-complete/demo/uncertain-category.md

@@ -18,9 +18,7 @@ import React, { useState } from 'react';
 import { Input, AutoComplete } from 'antd';
 import type { SelectProps } from 'antd/es/select';
 
-function getRandomInt(max: number, min: number = 0) {
-  return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
-}
+const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
 
 const searchResult = (query: string) =>
   new Array(getRandomInt(5))
@@ -53,7 +51,7 @@ const searchResult = (query: string) =>
       };
     });
 
-const Complete: React.FC = () => {
+const App: React.FC = () => {
   const [options, setOptions] = useState<SelectProps<object>['options']>([]);
 
   const handleSearch = (value: string) => {
@@ -77,5 +75,5 @@ const Complete: React.FC = () => {
   );
 };
 
-export default () => <Complete />;
+export default App;
 ```

components/avatar/demo/badge.md

@@ -14,10 +14,11 @@ title:
 Usually used for reminders and notifications.
 
 ```tsx
+import React from 'react';
 import { Avatar, Badge } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <span className="avatar-item">
       <Badge count={1}>
@@ -31,6 +32,8 @@ export default () => (
     </span>
   </>
 );
+
+export default App;
 ```
 
 ```css

components/avatar/demo/basic.md

@@ -14,10 +14,11 @@ title:
 Three sizes and two shapes are available.
 
 ```tsx
+import React from 'react';
 import { Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <div>
       <Avatar size={64} icon={<UserOutlined />} />
@@ -33,6 +34,8 @@ export default () => (
     </div>
   </>
 );
+
+export default App;
 ```
 
 <style>

components/avatar/demo/dynamic.md

@@ -21,19 +21,22 @@ const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
 const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
 const GapList = [4, 3, 2, 1];
 
-const Autoset: React.FC = () => {
+const App: React.FC = () => {
   const [user, setUser] = useState(UserList[0]);
   const [color, setColor] = useState(ColorList[0]);
   const [gap, setGap] = useState(GapList[0]);
+
   const changeUser = () => {
     const index = UserList.indexOf(user);
     setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);
     setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
   };
+
   const changeGap = () => {
     const index = GapList.indexOf(gap);
     setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]);
   };
+
   return (
     <>
       <Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large" gap={gap}>
@@ -53,5 +56,5 @@ const Autoset: React.FC = () => {
   );
 };
 
-export default () => <Autoset />;
+export default App;
 ```

components/avatar/demo/fallback.md

@@ -15,9 +15,10 @@ debug: true
 图片不存在时，如果 `src` 本身是个 ReactElement，会尝试回退到 `src`，否则尝试回退到 `icon`，最后回退到显示 `children`。
 
 ```tsx
+import React from 'react';
 import { Avatar } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
       A
@@ -27,4 +28,6 @@ export default () => (
     </Avatar>
   </>
 );
+
+export default App;
 ```

components/avatar/demo/group.md

@@ -14,10 +14,11 @@ title:
 Avatar group display.
 
 ```tsx
+import React from 'react';
 import { Avatar, Divider, Tooltip } from 'antd';
 import { UserOutlined, AntDesignOutlined } from '@ant-design/icons';
 
-const Demo = () => (
+const App: React.FC = () => (
   <>
     <Avatar.Group>
       <Avatar src="https://joeschmoe.io/api/v1/random" />
@@ -66,5 +67,5 @@ const Demo = () => (
   </>
 );
 
-export default Demo;
+export default App;
 ```

components/avatar/demo/responsive.md

@@ -14,13 +14,16 @@ title:
 Avatar size can be automatically adjusted based on the screen size.
 
 ```tsx
+import React from 'react';
 import { Avatar } from 'antd';
 import { AntDesignOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Avatar
     size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
     icon={<AntDesignOutlined />}
   />
 );
+
+export default App;
 ```

components/avatar/demo/toggle-debug.md

@@ -19,10 +19,12 @@ import React, { useState } from 'react';
 import { Avatar, Button } from 'antd';
 
 type SizeType = 'large' | 'small' | 'default' | number;
+
 const App: React.FC = () => {
   const [hide, setHide] = useState(true);
   const [size, setSize] = useState<SizeType>('large');
   const [scale, setScale] = useState(1);
+
   const toggle = () => {
     setHide(!hide);
   };

components/avatar/demo/type.md

@@ -14,10 +14,11 @@ title:
 Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
 
 ```tsx
+import React from 'react';
 import { Avatar, Image } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Avatar icon={<UserOutlined />} />
     <Avatar>U</Avatar>
@@ -28,6 +29,8 @@ export default () => (
     <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
   </>
 );
+
+export default App;
 ```
 
 <style>

components/back-top/demo/basic.md

@@ -13,10 +13,11 @@ title:
 
 The most basic usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { BackTop } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <BackTop />
     Scroll down to see the bottom-right
@@ -24,6 +25,8 @@ export default () => (
     button.
   </>
 );
+
+export default App;
 ```
 
 ```css

components/back-top/demo/custom.md

@@ -14,10 +14,11 @@ title:
 
 You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
 
-```jsx
+```tsx
+import React from 'react';
 import { BackTop } from 'antd';
 
-const style = {
+const style: React.CSSProperties = {
   height: 40,
   width: 40,
   lineHeight: '40px',
@@ -28,7 +29,7 @@ const style = {
   fontSize: 14,
 };
 
-export default () => (
+const App: React.FC = () => (
   <div style={{ height: '600vh', padding: 8 }}>
     <div>Scroll to bottom</div>
     <div>Scroll to bottom</div>
@@ -42,4 +43,6 @@ export default () => (
     </BackTop>
   </div>
 );
+
+export default App;
 ```

components/badge/demo/basic.md

@@ -13,11 +13,12 @@ title:
 
 Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Avatar } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge count={5}>
       <Avatar shape="square" size="large" />
@@ -30,6 +31,8 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```
 
 <style>

components/badge/demo/change.md

@@ -13,14 +13,14 @@ title:
 
 The count will be animated as it changes.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Badge, Button, Switch, Divider, Avatar } from 'antd';
 import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
 
 const ButtonGroup = Button.Group;
 
-export default () => {
+const App: React.FC = () => {
   const [count, setCount] = useState(5);
   const [show, setShow] = useState(true);
 
@@ -29,20 +29,20 @@ export default () => {
   };
 
   const decline = () => {
-    let countValue = count - 1;
-    if (countValue < 0) {
-      countValue = 0;
+    let newCount = count - 1;
+    if (newCount < 0) {
+      newCount = 0;
     }
-    setCount(countValue);
+    setCount(newCount);
   };
 
   const random = () => {
-    const countValue = Math.floor(Math.random() * 100);
-    setCount(countValue);
+    const newCount = Math.floor(Math.random() * 100);
+    setCount(newCount);
   };
 
-  const onChange = isShow => {
-    setShow(isShow);
+  const onChange = (checked: boolean) => {
+    setShow(checked);
   };
 
   return (
@@ -69,4 +69,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```

components/badge/demo/colorful.md

@@ -13,7 +13,8 @@ title:
 
 We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Divider } from 'antd';
 
 const colors = [
@@ -32,7 +33,7 @@ const colors = [
   'lime',
 ];
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Presets</Divider>
     <div>
@@ -54,6 +55,8 @@ export default () => (
     </>
   </>
 );
+
+export default App;
 ```
 
 ```css

components/badge/demo/dot.md

@@ -13,11 +13,12 @@ title:
 
 This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge } from 'antd';
 import { NotificationOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge dot>
       <NotificationOutlined style={{ fontSize: 16 }} />
@@ -27,4 +28,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/badge/demo/link.md

@@ -13,14 +13,17 @@ title:
 
 The badge can be wrapped with `a` tag to make it linkable.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Avatar } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <a href="#">
     <Badge count={5}>
       <Avatar shape="square" size="large" />
     </Badge>
   </a>
 );
+
+export default App;
 ```

components/badge/demo/mix.md

@@ -14,10 +14,11 @@ debug: true
 
 Using `count/dot` with custom `stauts/color`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Avatar } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge count={5} status="success">
       <Avatar shape="square" size="large" />
@@ -45,4 +46,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/badge/demo/no-wrapper.md

@@ -15,12 +15,13 @@ title:
 
 Used in standalone when children is empty.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Badge, Space, Switch } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-const Demo = () => {
-  const [show, setShow] = React.useState(true);
+const App: React.FC = () => {
+  const [show, setShow] = useState(true);
 
   return (
     <Space>
@@ -36,5 +37,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```

components/badge/demo/offset.md

@@ -13,12 +13,15 @@ title:
 
 Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Avatar } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Badge count={5} offset={[10, 10]}>
     <Avatar shape="square" size="large" />
   </Badge>
 );
+
+export default App;
 ```

components/badge/demo/overflow.md

@@ -13,10 +13,11 @@ title:
 
 `${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Avatar } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge count={99}>
       <Avatar shape="square" size="large" />
@@ -32,4 +33,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/badge/demo/ribbbon.md

@@ -13,10 +13,11 @@ title:
 
 Use ribbon badge.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Card } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge.Ribbon text="Hippies">
       <Card title="Pushes open the window" size="small">
@@ -60,6 +61,8 @@ export default () => (
     </Badge.Ribbon>
   </>
 );
+
+export default App;
 ```
 
 ```css

components/badge/demo/ribbon-debug.md

@@ -14,10 +14,11 @@ Buggy!
 
 Buggy!
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Card, Space } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <Badge.Ribbon text="啦啦啦啦">
       <Card>推开窗户举起望远镜</Card>
@@ -36,4 +37,6 @@ export default () => (
     </Badge.Ribbon>
   </Space>
 );
+
+export default App;
 ```

components/badge/demo/size.md

@@ -13,10 +13,11 @@ title:
 
 Set size of numeral Badge.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Avatar } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge size="default" count={5}>
       <Avatar shape="square" size="large" />
@@ -26,4 +27,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/badge/demo/status.md

@@ -13,10 +13,11 @@ title:
 
 Standalone badge with status.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge status="success" />
     <Badge status="error" />
@@ -35,4 +36,6 @@ export default () => (
     <Badge status="warning" text="Warning" />
   </>
 );
+
+export default App;
 ```

components/badge/demo/title.md

@@ -14,10 +14,11 @@ debug: true
 
 The badge will display `title` when hovered over, instead of `count`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Badge, Avatar } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Badge count={5} title="Custom hover text">
       <Avatar shape="square" size="large" />
@@ -27,4 +28,6 @@ export default () => (
     </Badge>
   </>
 );
+
+export default App;
 ```

components/breadcrumb/demo/basic.md

@@ -13,10 +13,11 @@ title:
 
 The simplest use.
 
-```jsx
+```tsx
+import React from 'react';
 import { Breadcrumb } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb>
     <Breadcrumb.Item>Home</Breadcrumb.Item>
     <Breadcrumb.Item>
@@ -28,4 +29,6 @@ export default () => (
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/breadcrumb/demo/overlay.md

@@ -13,13 +13,15 @@ title:
 
 Breadcrumbs support drop down menu.
 
-```jsx
+```tsx
+import React from 'react';
 import { Breadcrumb, Menu } from 'antd';
 
 const menu = (
   <Menu
     items={[
       {
+        key: '1',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
             General
@@ -27,6 +29,7 @@ const menu = (
         ),
       },
       {
+        key: '2',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
             Layout
@@ -34,6 +37,7 @@ const menu = (
         ),
       },
       {
+        key: '3',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
             Navigation
@@ -44,7 +48,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb>
     <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
     <Breadcrumb.Item>
@@ -56,4 +60,6 @@ export default () => (
     <Breadcrumb.Item>Button</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/breadcrumb/demo/react-router.md

@@ -15,7 +15,8 @@ title:
 
 Used together with `react-router@6+`.
 
-```jsx
+```tsx
+import React from 'react';
 import { HashRouter, Route, Routes, Link, useLocation } from 'react-router-dom';
 import { Breadcrumb, Alert } from 'antd';
 
@@ -30,16 +31,18 @@ const Apps = () => (
   </ul>
 );
 
-const breadcrumbNameMap = {
+const breadcrumbNameMap: Record<string, string> = {
   '/apps': 'Application List',
   '/apps/1': 'Application1',
   '/apps/2': 'Application2',
   '/apps/1/detail': 'Detail',
   '/apps/2/detail': 'Detail',
 };
-const Home = props => {
+
+const Home = () => {
   const location = useLocation();
   const pathSnippets = location.pathname.split('/').filter(i => i);
+
   const extraBreadcrumbItems = pathSnippets.map((_, index) => {
     const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
     return (
@@ -48,11 +51,13 @@ const Home = props => {
       </Breadcrumb.Item>
     );
   });
+
   const breadcrumbItems = [
     <Breadcrumb.Item key="home">
       <Link to="/">Home</Link>
     </Breadcrumb.Item>,
   ].concat(extraBreadcrumbItems);
+
   return (
     <div className="demo">
       <div className="demo-nav">
@@ -69,11 +74,13 @@ const Home = props => {
   );
 };
 
-export default () => (
+const App: React.FC = () => (
   <HashRouter>
     <Home />
   </HashRouter>
 );
+
+export default App;
 ```
 
 ```css

components/breadcrumb/demo/separator-component.md

@@ -13,10 +13,11 @@ title:
 
 The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Breadcrumb } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb separator="">
     <Breadcrumb.Item>Location</Breadcrumb.Item>
     <Breadcrumb.Separator>:</Breadcrumb.Separator>
@@ -27,4 +28,6 @@ export default () => (
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/breadcrumb/demo/separator.md

@@ -13,10 +13,11 @@ title:
 
 The separator can be customized by setting the separator property: `separator=">"`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Breadcrumb } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb separator=">">
     <Breadcrumb.Item>Home</Breadcrumb.Item>
     <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
@@ -24,4 +25,6 @@ export default () => (
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/breadcrumb/demo/withIcon.md

@@ -13,11 +13,12 @@ title:
 
 The icon should be placed in front of the text.
 
-```jsx
+```tsx
+import React from 'react';
 import { Breadcrumb } from 'antd';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Breadcrumb>
     <Breadcrumb.Item href="">
       <HomeOutlined />
@@ -29,4 +30,6 @@ export default () => (
     <Breadcrumb.Item>Application</Breadcrumb.Item>
   </Breadcrumb>
 );
+
+export default App;
 ```

components/button/demo/basic.md

@@ -13,10 +13,11 @@ title:
 
 There are `primary` button, `default` button, `dashed` button, `text` button and `link` button in antd.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary">Primary Button</Button>
     <Button>Default Button</Button>
@@ -26,4 +27,6 @@ export default () => (
     <Button type="link">Link Button</Button>
   </>
 );
+
+export default App;
 ```

components/button/demo/block.md

@@ -13,10 +13,11 @@ title:
 
 `block` property will make the button fit to its parent width.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary" block>
       Primary
@@ -30,4 +31,6 @@ export default () => (
     </Button>
   </>
 );
+
+export default App;
 ```

components/button/demo/danger.md

@@ -13,10 +13,11 @@ title:
 
 `danger` is a property of button after antd 4.0.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary" danger>
       Primary
@@ -33,4 +34,6 @@ export default () => (
     </Button>
   </>
 );
+
+export default App;
 ```

components/button/demo/disabled.md

@@ -13,10 +13,11 @@ title:
 
 To mark a button as disabled, add the `disabled` property to the `Button`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary">Primary</Button>
     <Button type="primary" disabled>
@@ -67,6 +68,8 @@ export default () => (
     </div>
   </>
 );
+
+export default App;
 ```
 
 ```css

components/button/demo/ghost.md

@@ -13,10 +13,11 @@ title:
 
 `ghost` property will make button's background transparent, it is commonly used in colored background.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <div className="site-button-ghost-wrapper">
     <Button type="primary" ghost>
       Primary
@@ -30,6 +31,8 @@ export default () => (
     </Button>
   </div>
 );
+
+export default App;
 ```
 
 ```css

components/button/demo/icon.md

@@ -17,11 +17,12 @@ title:
 
 If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, Tooltip } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Tooltip title="search">
       <Button type="primary" shape="circle" icon={<SearchOutlined />} />
@@ -81,4 +82,6 @@ export default () => (
     <Button icon={<SearchOutlined />} size="large" href="https://www.google.com" />
   </>
 );
+
+export default App;
 ```

components/button/demo/legacy-group.md

@@ -14,28 +14,28 @@ Debug usage
 
 Debug usage
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, Tooltip } from 'antd';
 import { DownloadOutlined } from '@ant-design/icons';
+import type { ButtonGroupProps } from 'antd/es/button';
 
-function getGroup(props) {
-  return (
-    <div>
-      <Button.Group {...props}>
-        <Button type="primary">Button 1</Button>
-        <Button type="primary">Button 2</Button>
-        <Tooltip title="Tooltip">
-          <Button type="primary" icon={<DownloadOutlined />} disabled />
-        </Tooltip>
-        <Tooltip title="Tooltip">
-          <Button type="primary" icon={<DownloadOutlined />} />
-        </Tooltip>
-      </Button.Group>
-    </div>
-  );
-}
+const getGroup = (props?: ButtonGroupProps) => (
+  <div>
+    <Button.Group {...props}>
+      <Button type="primary">Button 1</Button>
+      <Button type="primary">Button 2</Button>
+      <Tooltip title="Tooltip">
+        <Button type="primary" icon={<DownloadOutlined />} disabled />
+      </Tooltip>
+      <Tooltip title="Tooltip">
+        <Button type="primary" icon={<DownloadOutlined />} />
+      </Tooltip>
+    </Button.Group>
+  </div>
+);
 
-export default () => (
+const App: React.FC = () => (
   <>
     {getGroup({ size: 'small' })}
     <br />
@@ -44,6 +44,8 @@ export default () => (
     {getGroup({ size: 'large' })}
   </>
 );
+
+export default App;
 ```
 
 ```css

components/button/demo/loading.md

@@ -13,15 +13,15 @@ title:
 
 A loading indicator can be added to a button by setting the `loading` property on the `Button`.
 
-```jsx
-import React, { useEffect, useState, useRef } from 'react';
+```tsx
+import React, { useState } from 'react';
 import { Button, Space } from 'antd';
 import { PoweroffOutlined } from '@ant-design/icons';
 
-export default () => {
-  const [loadings, setLoadings] = useState([]);
+const App: React.FC = () => {
+  const [loadings, setLoadings] = useState<boolean[]>([]);
 
-  const enterLoading = index => {
+  const enterLoading = (index: number) => {
     setLoadings(prevLoadings => {
       const newLoadings = [...prevLoadings];
       newLoadings[index] = true;
@@ -71,4 +71,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```

components/button/demo/multiple.md

@@ -14,8 +14,9 @@ title:
 If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React from 'react';
 import { Button, Menu, Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
 
 const onMenuClick: MenuProps['onClick'] = e => {
   console.log('click', e);
@@ -41,11 +42,13 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Button type="primary">primary</Button>
     <Button>secondary</Button>
     <Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
   </>
 );
+
+export default App;
 ```

components/button/demo/size.md

@@ -17,20 +17,18 @@ Ant Design supports a default button size as well as a large and small size.
 
 If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Button, Radio } from 'antd';
 import { DownloadOutlined } from '@ant-design/icons';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
 
-export default () => {
-  const [size, setSize] = useState('large');
-  const handleSizeChange = e => {
-    setSize(e.target.value);
-  };
+const App: React.FC = () => {
+  const [size, setSize] = useState<SizeType>('large');
 
   return (
     <>
-      <Radio.Group value={size} onChange={handleSizeChange}>
+      <Radio.Group value={size} onChange={e => setSize(e.target.value)}>
         <Radio.Button value="large">Large</Radio.Button>
         <Radio.Button value="default">Default</Radio.Button>
         <Radio.Button value="small">Small</Radio.Button>
@@ -61,4 +59,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```

components/calendar/demo/basic.md

@@ -13,12 +13,19 @@ title:
 
 A basic calendar component with Year/Month switch.
 
-```jsx
+```tsx
+import React from 'react';
 import { Calendar } from 'antd';
+import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
+import type { Moment } from 'moment';
 
-function onPanelChange(value, mode) {
-  console.log(value.format('YYYY-MM-DD'), mode);
-}
+const App: React.FC = () => {
+  const onPanelChange = (value: Moment, mode: CalendarMode) => {
+    console.log(value.format('YYYY-MM-DD'), mode);
+  };
 
-export default () => <Calendar onPanelChange={onPanelChange} />;
+  return <Calendar onPanelChange={onPanelChange} />;
+};
+
+export default App;
 ```

components/calendar/demo/card.md

@@ -13,18 +13,25 @@ title:
 
 Nested inside a container element for rendering in limited space.
 
-```jsx
+```tsx
+import React from 'react';
 import { Calendar } from 'antd';
+import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
+import type { Moment } from 'moment';
 
-function onPanelChange(value, mode) {
-  console.log(value, mode);
-}
+const App: React.FC = () => {
+  const onPanelChange = (value: Moment, mode: CalendarMode) => {
+    console.log(value.format('YYYY-MM-DD'), mode);
+  };
 
-export default () => (
-  <div className="site-calendar-demo-card">
-    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
-  </div>
-);
+  return (
+    <div className="site-calendar-demo-card">
+      <Calendar fullscreen={false} onPanelChange={onPanelChange} />
+    </div>
+  );
+};
+
+export default App;
 ```
 
 ```css

components/calendar/demo/customize-header.md

@@ -13,94 +13,105 @@ title:
 
 Customize Calendar header content.
 
-```jsx
+```tsx
+import React from 'react';
 import { Calendar, Select, Radio, Col, Row, Typography } from 'antd';
+import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
+import type { Moment } from 'moment';
 
-function onPanelChange(value, mode) {
-  console.log(value, mode);
-}
+const App: React.FC = () => {
+  const onPanelChange = (value: Moment, mode: CalendarMode) => {
+    console.log(value.format('YYYY-MM-DD'), mode);
+  };
 
-export default () => (
-  <div className="site-calendar-customize-header-wrapper">
-    <Calendar
-      fullscreen={false}
-      headerRender={({ value, type, onChange, onTypeChange }) => {
-        const start = 0;
-        const end = 12;
-        const monthOptions = [];
+  return (
+    <div className="site-calendar-customize-header-wrapper">
+      <Calendar
+        fullscreen={false}
+        headerRender={({ value, type, onChange, onTypeChange }) => {
+          const start = 0;
+          const end = 12;
+          const monthOptions = [];
 
-        const current = value.clone();
-        const localeData = value.localeData();
-        const months = [];
-        for (let i = 0; i < 12; i++) {
-          current.month(i);
-          months.push(localeData.monthsShort(current));
-        }
+          const current = value.clone();
+          const localeData = value.localeData();
+          const months = [];
+          for (let i = 0; i < 12; i++) {
+            current.month(i);
+            months.push(localeData.monthsShort(current));
+          }
 
-        for (let index = start; index < end; index++) {
-          monthOptions.push(
-            <Select.Option className="month-item" key={`${index}`}>
-              {months[index]}
-            </Select.Option>,
+          for (let index = start; index < end; index++) {
+            monthOptions.push(
+              <Select.Option className="month-item" key={`${index}`}>
+                {months[index]}
+              </Select.Option>,
+            );
+          }
+          const month = value.month();
+
+          const year = value.year();
+          const options = [];
+          for (let i = year - 10; i < year + 10; i += 1) {
+            options.push(
+              <Select.Option key={i} value={i} className="year-item">
+                {i}
+              </Select.Option>,
+            );
+          }
+          return (
+            <div style={{ padding: 8 }}>
+              <Typography.Title level={4}>Custom header</Typography.Title>
+              <Row gutter={8}>
+                <Col>
+                  <Radio.Group
+                    size="small"
+                    onChange={e => onTypeChange(e.target.value)}
+                    value={type}
+                  >
+                    <Radio.Button value="month">Month</Radio.Button>
+                    <Radio.Button value="year">Year</Radio.Button>
+                  </Radio.Group>
+                </Col>
+                <Col>
+                  <Select
+                    size="small"
+                    dropdownMatchSelectWidth={false}
+                    className="my-year-select"
+                    onChange={newYear => {
+                      const now = value.clone().year(Number(newYear));
+                      onChange(now);
+                    }}
+                    value={String(year)}
+                  >
+                    {options}
+                  </Select>
+                </Col>
+                <Col>
+                  <Select
+                    size="small"
+                    dropdownMatchSelectWidth={false}
+                    value={String(month)}
+                    onChange={selectedMonth => {
+                      const newValue = value.clone();
+                      newValue.month(parseInt(selectedMonth, 10));
+                      onChange(newValue);
+                    }}
+                  >
+                    {monthOptions}
+                  </Select>
+                </Col>
+              </Row>
+            </div>
           );
-        }
-        const month = value.month();
+        }}
+        onPanelChange={onPanelChange}
+      />
+    </div>
+  );
+};
 
-        const year = value.year();
-        const options = [];
-        for (let i = year - 10; i < year + 10; i += 1) {
-          options.push(
-            <Select.Option key={i} value={i} className="year-item">
-              {i}
-            </Select.Option>,
-          );
-        }
-        return (
-          <div style={{ padding: 8 }}>
-            <Typography.Title level={4}>Custom header</Typography.Title>
-            <Row gutter={8}>
-              <Col>
-                <Radio.Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
-                  <Radio.Button value="month">Month</Radio.Button>
-                  <Radio.Button value="year">Year</Radio.Button>
-                </Radio.Group>
-              </Col>
-              <Col>
-                <Select
-                  size="small"
-                  dropdownMatchSelectWidth={false}
-                  className="my-year-select"
-                  onChange={newYear => {
-                    const now = value.clone().year(newYear);
-                    onChange(now);
-                  }}
-                  value={String(year)}
-                >
-                  {options}
-                </Select>
-              </Col>
-              <Col>
-                <Select
-                  size="small"
-                  dropdownMatchSelectWidth={false}
-                  value={String(month)}
-                  onChange={selectedMonth => {
-                    const newValue = value.clone();
-                    newValue.month(parseInt(selectedMonth, 10));
-                    onChange(newValue);
-                  }}
-                >
-                  {monthOptions}
-                </Select>
-              </Col>
-            </Row>
-          </div>
-        );
-      }}
-      onPanelChange={onPanelChange}
-    />
-  </div>
-);
+export default App;
 ```
 
 ```css

components/calendar/demo/notice-calendar.md

@@ -13,10 +13,13 @@ title:
 
 This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
 
-```jsx
+```tsx
+import React from 'react';
 import { Calendar, Badge } from 'antd';
+import type { BadgeProps } from 'antd';
+import type { Moment } from 'moment';
 
-function getListData(value) {
+const getListData = (value: Moment) => {
   let listData;
   switch (value.date()) {
     case 8:
@@ -45,38 +48,42 @@ function getListData(value) {
     default:
   }
   return listData || [];
-}
+};
 
-function dateCellRender(value) {
-  const listData = getListData(value);
-  return (
-    <ul className="events">
-      {listData.map(item => (
-        <li key={item.content}>
-          <Badge status={item.type} text={item.content} />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function getMonthData(value) {
+const getMonthData = (value: Moment) => {
   if (value.month() === 8) {
     return 1394;
   }
-}
+};
 
-function monthCellRender(value) {
-  const num = getMonthData(value);
-  return num ? (
-    <div className="notes-month">
-      <section>{num}</section>
-      <span>Backlog number</span>
-    </div>
-  ) : null;
-}
+const App: React.FC = () => {
+  const monthCellRender = (value: Moment) => {
+    const num = getMonthData(value);
+    return num ? (
+      <div className="notes-month">
+        <section>{num}</section>
+        <span>Backlog number</span>
+      </div>
+    ) : null;
+  };
 
-export default () => <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
+  const dateCellRender = (value: Moment) => {
+    const listData = getListData(value);
+    return (
+      <ul className="events">
+        {listData.map(item => (
+          <li key={item.content}>
+            <Badge status={item.type as BadgeProps['status']} text={item.content} />
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  return <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
+};
+
+export default App;
 ```
 
 ```css

components/calendar/demo/select.md

@@ -13,40 +13,32 @@ title:
 
 A basic calendar component with Year/Month switch.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Calendar, Alert } from 'antd';
 import moment from 'moment';
+import type { Moment } from 'moment';
 
-export default () => {
-  const [calendar, setCalendar] = useState({
-    value: moment('2017-01-25'),
-    selectedValue: moment('2017-01-25'),
-  });
+const App: React.FC = () => {
+  const [value, setValue] = useState(moment('2017-01-25'));
+  const [selectedValue, setSelectedValue] = useState(moment('2017-01-25'));
 
-  const onSelect = value => {
-    setCalendar({
-      value,
-      selectedValue: value,
-    });
+  const onSelect = (newValue: Moment) => {
+    setValue(newValue);
+    setSelectedValue(newValue);
   };
 
-  const onPanelChange = value => {
-    setCalendar({
-      ...calendar,
-      value,
-    });
+  const onPanelChange = (newValue: Moment) => {
+    setValue(newValue);
   };
 
   return (
     <>
-      <Alert
-        message={`You selected date: ${
-          calendar.selectedValue && calendar.selectedValue.format('YYYY-MM-DD')
-        }`}
-      />
-      <Calendar value={calendar.value} onSelect={onSelect} onPanelChange={onPanelChange} />
+      <Alert message={`You selected date: ${selectedValue?.format('YYYY-MM-DD')}`} />
+      <Calendar value={value} onSelect={onSelect} onPanelChange={onPanelChange} />
     </>
   );
 };
+
+export default App;
 ```

components/card/demo/basic.md

@@ -13,10 +13,11 @@ title:
 
 A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Card } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
       <p>Card content</p>
@@ -30,6 +31,8 @@ export default () => (
     </Card>
   </>
 );
+
+export default App;
 ```
 
 <style>

components/card/demo/border-less.md

@@ -13,10 +13,11 @@ title:
 
 A borderless card on a gray background.
 
-```jsx
+```tsx
+import React from 'react';
 import { Card } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <div className="site-card-border-less-wrapper">
     <Card title="Card title" bordered={false} style={{ width: 300 }}>
       <p>Card content</p>
@@ -25,6 +26,8 @@ export default () => (
     </Card>
   </div>
 );
+
+export default App;
 ```
 
 ```css

components/card/demo/flexible-content.md

@@ -13,12 +13,13 @@ title:
 
 You can use `Card.Meta` to support more flexible content.
 
-```jsx
+```tsx
+import React from 'react';
 import { Card } from 'antd';
 
 const { Meta } = Card;
 
-export default () => (
+const App: React.FC = () => (
   <Card
     hoverable
     style={{ width: 240 }}
@@ -27,4 +28,6 @@ export default () => (
     <Meta title="Europe Street beat" description="www.instagram.com" />
   </Card>
 );
+
+export default App;
 ```

components/card/demo/grid-card.md

@@ -13,15 +13,16 @@ title:
 
 Grid style card content.
 
-```jsx
+```tsx
+import React from 'react';
 import { Card } from 'antd';
 
-const gridStyle = {
+const gridStyle: React.CSSProperties = {
   width: '25%',
   textAlign: 'center',
 };
 
-export default () => (
+const App: React.FC = () => (
   <Card title="Card Title">
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid hoverable={false} style={gridStyle}>
@@ -34,4 +35,6 @@ export default () => (
     <Card.Grid style={gridStyle}>Content</Card.Grid>
   </Card>
 );
+
+export default App;
 ```

components/card/demo/in-column.md

@@ -13,10 +13,11 @@ title:
 
 Cards usually cooperate with grid column layout in overview page.
 
-```jsx
+```tsx
+import React from 'react';
 import { Card, Col, Row } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <div className="site-card-wrapper">
     <Row gutter={16}>
       <Col span={8}>
@@ -37,6 +38,8 @@ export default () => (
     </Row>
   </div>
 );
+
+export default App;
 ```
 
 <style>

components/card/demo/inner.md

@@ -13,10 +13,11 @@ title:
 
 It can be placed inside the ordinary card to display the information of the multilevel structure.
 
-```jsx
+```tsx
+import React from 'react';
 import { Card } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Card title="Card title">
     <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
       Inner Card content
@@ -31,4 +32,6 @@ export default () => (
     </Card>
   </Card>
 );
+
+export default App;
 ```

components/card/demo/loading.md

@@ -13,17 +13,17 @@ title:
 
 Shows a loading indicator while the contents of the card is being fetched.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Skeleton, Switch, Card, Avatar } from 'antd';
 import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
 
 const { Meta } = Card;
 
-export default () => {
+const App: React.FC = () => {
   const [loading, setLoading] = useState(true);
 
-  const onChange = checked => {
+  const onChange = (checked: boolean) => {
     setLoading(!checked);
   };
 
@@ -58,4 +58,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```

components/card/demo/meta.md

@@ -13,13 +13,14 @@ title:
 
 A Card that supports `cover`, `avatar`, `title` and `description`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Card, Avatar } from 'antd';
 import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
 
 const { Meta } = Card;
 
-export default () => (
+const App: React.FC = () => (
   <Card
     style={{ width: 300 }}
     cover={
@@ -41,4 +42,6 @@ export default () => (
     />
   </Card>
 );
+
+export default App;
 ```

components/card/demo/simple.md

@@ -13,14 +13,17 @@ title:
 
 A simple card only containing a content area.
 
-```jsx
+```tsx
+import React from 'react';
 import { Card } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Card style={{ width: 300 }}>
     <p>Card content</p>
     <p>Card content</p>
     <p>Card content</p>
   </Card>
 );
+
+export default App;
 ```

components/card/demo/tabs.md

@@ -13,7 +13,7 @@ title:
 
 More content can be hosted.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Card } from 'antd';
 
@@ -28,7 +28,7 @@ const tabList = [
   },
 ];
 
-const contentList = {
+const contentList: Record<string, React.ReactNode> = {
   tab1: <p>content1</p>,
   tab2: <p>content2</p>,
 };
@@ -48,20 +48,20 @@ const tabListNoTitle = [
   },
 ];
 
-const contentListNoTitle = {
+const contentListNoTitle: Record<string, React.ReactNode> = {
   article: <p>article content</p>,
   app: <p>app content</p>,
   project: <p>project content</p>,
 };
 
-const TabsCard = () => {
-  const [activeTabKey1, setActiveTabKey1] = useState('tab1');
-  const [activeTabKey2, setActiveTabKey2] = useState('app');
+const App: React.FC = () => {
+  const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');
+  const [activeTabKey2, setActiveTabKey2] = useState<string>('app');
 
-  const onTab1Change = key => {
+  const onTab1Change = (key: string) => {
     setActiveTabKey1(key);
   };
-  const onTab2Change = key => {
+  const onTab2Change = (key: string) => {
     setActiveTabKey2(key);
   };
 
@@ -96,5 +96,5 @@ const TabsCard = () => {
   );
 };
 
-export default () => <TabsCard />;
+export default App;
 ```

components/carousel/demo/autoplay.md

@@ -13,10 +13,11 @@ title:
 
 Timing of scrolling to the next card/picture.
 
-```jsx
+```tsx
+import React from 'react';
 import { Carousel } from 'antd';
 
-const contentStyle = {
+const contentStyle: React.CSSProperties = {
   height: '160px',
   color: '#fff',
   lineHeight: '160px',
@@ -24,7 +25,7 @@ const contentStyle = {
   background: '#364d79',
 };
 
-export default () => (
+const App: React.FC = () => (
   <Carousel autoplay>
     <div>
       <h3 style={contentStyle}>1</h3>
@@ -40,4 +41,6 @@ export default () => (
     </div>
   </Carousel>
 );
+
+export default App;
 ```

components/carousel/demo/basic.md

@@ -13,14 +13,11 @@ title:
 
 Basic usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Carousel } from 'antd';
 
-function onChange(a, b, c) {
-  console.log(a, b, c);
-}
-
-const contentStyle = {
+const contentStyle: React.CSSProperties = {
   height: '160px',
   color: '#fff',
   lineHeight: '160px',
@@ -28,20 +25,28 @@ const contentStyle = {
   background: '#364d79',
 };
 
-export default () => (
-  <Carousel afterChange={onChange}>
-    <div>
-      <h3 style={contentStyle}>1</h3>
-    </div>
-    <div>
-      <h3 style={contentStyle}>2</h3>
-    </div>
-    <div>
-      <h3 style={contentStyle}>3</h3>
-    </div>
-    <div>
-      <h3 style={contentStyle}>4</h3>
-    </div>
-  </Carousel>
-);
+const App: React.FC = () => {
+  const onChange = (currentSlide: number) => {
+    console.log(currentSlide);
+  };
+
+  return (
+    <Carousel afterChange={onChange}>
+      <div>
+        <h3 style={contentStyle}>1</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>2</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>3</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>4</h3>
+      </div>
+    </Carousel>
+  );
+};
+
+export default App;
 ```

components/carousel/demo/fade.md

@@ -13,10 +13,11 @@ title:
 
 Slides use fade for transition.
 
-```jsx
+```tsx
+import React from 'react';
 import { Carousel } from 'antd';
 
-const contentStyle = {
+const contentStyle: React.CSSProperties = {
   height: '160px',
   color: '#fff',
   lineHeight: '160px',
@@ -24,7 +25,7 @@ const contentStyle = {
   background: '#364d79',
 };
 
-export default () => (
+const App: React.FC = () => (
   <Carousel effect="fade">
     <div>
       <h3 style={contentStyle}>1</h3>
@@ -40,4 +41,6 @@ export default () => (
     </div>
   </Carousel>
 );
+
+export default App;
 ```

components/carousel/demo/position.md

@@ -13,10 +13,13 @@ title:
 
 There are 4 position options available.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Carousel, Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
+import type { DotPosition } from 'antd/lib/carousel';
 
-const contentStyle = {
+const contentStyle: React.CSSProperties = {
   height: '160px',
   color: '#fff',
   lineHeight: '160px',
@@ -24,10 +27,10 @@ const contentStyle = {
   background: '#364d79',
 };
 
-const PositionCarouselDemo = () => {
-  const [dotPosition, setDotPosition] = React.useState('top');
+const App: React.FC = () => {
+  const [dotPosition, setDotPosition] = useState<DotPosition>('top');
 
-  const handlePositionChange = ({ target: { value } }) => {
+  const handlePositionChange = ({ target: { value } }: RadioChangeEvent) => {
     setDotPosition(value);
   };
 
@@ -57,5 +60,5 @@ const PositionCarouselDemo = () => {
   );
 };
 
-export default () => <PositionCarouselDemo />;
+export default App;
 ```

components/cascader/demo/basic.md

@@ -13,10 +13,17 @@ title:
 
 Cascade selection box for selecting province/city/district.
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader } from 'antd';
 
-const options = [
+interface Option {
+  value: string | number;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -51,9 +58,13 @@ const options = [
   },
 ];
 
-function onChange(value) {
+const onChange = (value: string[]) => {
   console.log(value);
-}
+};
 
-export default () => <Cascader options={options} onChange={onChange} placeholder="Please select" />;
+const App: React.FC = () => (
+  <Cascader options={options} onChange={onChange} placeholder="Please select" />
+);
+
+export default App;
 ```

components/cascader/demo/change-on-select.md

@@ -13,10 +13,17 @@ title:
 
 Allow only select parent options.
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader } from 'antd';
 
-const options = [
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -51,9 +58,11 @@ const options = [
   },
 ];
 
-function onChange(value) {
+const onChange = (value: string[]) => {
   console.log(value);
-}
+};
 
-export default () => <Cascader options={options} onChange={onChange} changeOnSelect />;
+const App: React.FC = () => <Cascader options={options} onChange={onChange} changeOnSelect />;
+
+export default App;
 ```

components/cascader/demo/custom-dropdown.md

@@ -13,10 +13,17 @@ title:
 
 Customize the dropdown menu via `dropdownRender`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader, Divider } from 'antd';
 
-const options = [
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -51,17 +58,17 @@ const options = [
   },
 ];
 
-function dropdownRender(menus) {
-  return (
-    <div>
-      {menus}
-      <Divider style={{ margin: 0 }} />
-      <div style={{ padding: 8 }}>The footer is not very short.</div>
-    </div>
-  );
-}
+const dropdownRender = (menus: React.ReactNode) => (
+  <div>
+    {menus}
+    <Divider style={{ margin: 0 }} />
+    <div style={{ padding: 8 }}>The footer is not very short.</div>
+  </div>
+);
 
-export default () => (
+const App: React.FC = () => (
   <Cascader options={options} dropdownRender={dropdownRender} placeholder="Please select" />
 );
+
+export default App;
 ```

components/cascader/demo/custom-render.md

@@ -13,10 +13,19 @@ title:
 
 For instance, add an external link after the selected value.
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader } from 'antd';
+import type { DefaultOptionType } from 'antd/es/cascader';
 
-const options = [
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+  code?: number;
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -53,12 +62,16 @@ const options = [
   },
 ];
 
-function handleAreaClick(e, label, option) {
+const handleAreaClick = (
+  e: React.MouseEvent<HTMLAnchorElement>,
+  label: string,
+  option: DefaultOptionType,
+) => {
   e.stopPropagation();
   console.log('clicked', label, option);
-}
+};
 
-const displayRender = (labels, selectedOptions) =>
+const displayRender = (labels: string[], selectedOptions: DefaultOptionType[]) =>
   labels.map((label, i) => {
     const option = selectedOptions[i];
     if (i === labels.length - 1) {
@@ -71,7 +84,7 @@ const displayRender = (labels, selectedOptions) =>
     return <span key={option.value}>{label} / </span>;
   });
 
-export default () => (
+const App: React.FC = () => (
   <Cascader
     options={options}
     defaultValue={['zhejiang', 'hangzhou', 'xihu']}
@@ -79,4 +92,6 @@ export default () => (
     style={{ width: '100%' }}
   />
 );
+
+export default App;
 ```

components/cascader/demo/custom-trigger.md

@@ -13,10 +13,17 @@ title:
 
 Separate trigger button and result.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Cascader } from 'antd';
 
-const options = [
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -39,12 +46,11 @@ const options = [
   },
 ];
 
-export default () => {
-  const [text, setText] = React.useState('Unselect');
+const App: React.FC = () => {
+  const [text, setText] = useState('Unselect');
 
-  const onChange = (value, selectedOptions) => {
-    const labeText = selectedOptions.map(o => o.label).join(', ');
-    setText(labeText);
+  const onChange = (_: string[], selectedOptions: Option[]) => {
+    setText(selectedOptions.map(o => o.label).join(', '));
   };
 
   return (
@@ -57,4 +63,6 @@ export default () => {
     </span>
   );
 };
+
+export default App;
 ```

components/cascader/demo/default-value.md

@@ -13,10 +13,17 @@ title:
 
 Specifies default value by an array.
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader } from 'antd';
 
-const options = [
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -51,11 +58,13 @@ const options = [
   },
 ];
 
-function onChange(value) {
+const onChange = (value: string[]) => {
   console.log(value);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />
 );
+
+export default App;
 ```

components/cascader/demo/disabled-option.md

@@ -13,10 +13,18 @@ title:
 
 Disable option by specifying the `disabled` property in `options`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader } from 'antd';
 
-const options = [
+interface Option {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -52,9 +60,11 @@ const options = [
   },
 ];
 
-function onChange(value) {
+const onChange = (value: string[]) => {
   console.log(value);
-}
+};
 
-export default () => <Cascader options={options} onChange={onChange} />;
+const App: React.FC = () => <Cascader options={options} onChange={onChange} />;
+
+export default App;
 ```

components/cascader/demo/fields-name.md

@@ -13,10 +13,17 @@ title:
 
 Custom field names.
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader } from 'antd';
 
-const options = [
+interface Option {
+  code: string;
+  name: string;
+  items?: Option[];
+}
+
+const options: Option[] = [
   {
     code: 'zhejiang',
     name: 'Zhejiang',
@@ -51,11 +58,11 @@ const options = [
   },
 ];
 
-function onChange(value) {
+const onChange = (value: string[]) => {
   console.log(value);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Cascader
     fieldNames={{ label: 'name', value: 'code', children: 'items' }}
     options={options}
@@ -63,4 +70,6 @@ export default () => (
     placeholder="Please select"
   />
 );
+
+export default App;
 ```

components/cascader/demo/hover.md

@@ -13,10 +13,17 @@ title:
 
 Hover to expand sub menu, click to select option.
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader } from 'antd';
 
-const options = [
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -51,16 +58,14 @@ const options = [
   },
 ];
 
-function onChange(value) {
+const onChange = (value: string[]) => {
   console.log(value);
-}
+};
 
 // Just show the latest item.
-function displayRender(label) {
-  return label[label.length - 1];
-}
+const displayRender = (labels: string[]) => labels[labels.length - 1];
 
-export default () => (
+const App: React.FC = () => (
   <Cascader
     options={options}
     expandTrigger="hover"
@@ -68,4 +73,6 @@ export default () => (
     onChange={onChange}
   />
 );
+
+export default App;
 ```

components/cascader/demo/lazy.md

@@ -17,10 +17,19 @@ Load options lazily with `loadData`.
 
 > Note: `loadData` cannot work with `showSearch`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Cascader } from 'antd';
 
-const optionLists = [
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+  isLeaf?: boolean;
+  loading?: boolean;
+}
+
+const optionLists: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -33,14 +42,14 @@ const optionLists = [
   },
 ];
 
-const LazyOptions = () => {
-  const [options, setOptions] = React.useState(optionLists);
+const App: React.FC = () => {
+  const [options, setOptions] = useState<Option[]>(optionLists);
 
-  const onChange = (value, selectedOptions) => {
+  const onChange = (value: string[], selectedOptions: Option[]) => {
     console.log(value, selectedOptions);
   };
 
-  const loadData = selectedOptions => {
+  const loadData = (selectedOptions: Option[]) => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
     targetOption.loading = true;
 
@@ -64,5 +73,5 @@ const LazyOptions = () => {
   return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;
 };
 
-export default () => <LazyOptions />;
+export default App;
 ```

components/cascader/demo/multiple.md

@@ -14,10 +14,17 @@ title:
 
 Select multiple options
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader } from 'antd';
 
-const options = [
+interface Option {
+  value: string | number;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     label: 'Light',
     value: 'light',
@@ -51,20 +58,19 @@ const options = [
   },
 ];
 
-const App = () => {
-  const onChange = value => {
-    console.log(value);
-  };
-  return (
-    <Cascader
-      style={{ width: '100%' }}
-      options={options}
-      onChange={onChange}
-      multiple
-      maxTagCount="responsive"
-    />
-  );
+const onChange = (value: string[][]) => {
+  console.log(value);
 };
 
+const App: React.FC = () => (
+  <Cascader
+    style={{ width: '100%' }}
+    options={options}
+    onChange={onChange}
+    multiple
+    maxTagCount="responsive"
+  />
+);
+
 export default App;
 ```