diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
index a33d0d5f8a..7620445b41 100644
--- a/components/affix/demo/basic.md
+++ b/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;
 ```
diff --git a/components/affix/demo/debug.md b/components/affix/demo/debug.md
index 886d8b525a..1947819a9c 100644
--- a/components/affix/demo/debug.md
+++ b/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;
 ```
diff --git a/components/affix/demo/on-change.md b/components/affix/demo/on-change.md
index 48cdbba705..0395b455d2 100644
--- a/components/affix/demo/on-change.md
+++ b/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;
 ```
diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md
index ba33e30e22..127c08c334 100644
--- a/components/affix/demo/target.md
+++ b/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>
diff --git a/components/alert/demo/action.md b/components/alert/demo/action.md
index 4fae7619d5..baa8610592 100644
--- a/components/alert/demo/action.md
+++ b/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>
diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md
index 0eebe712d0..7fc22fb092 100644
--- a/components/alert/demo/banner.md
+++ b/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;
 ```
diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
index a7000a88ff..99cea079d8 100644
--- a/components/alert/demo/basic.md
+++ b/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>
diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
index 8e5f8b3872..8077c0a8d0 100644
--- a/components/alert/demo/closable.md
+++ b/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;
 ```
diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md
index f0165cd872..f15e98a81b 100644
--- a/components/alert/demo/close-text.md
+++ b/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;
 ```
diff --git a/components/alert/demo/custom-icon.md b/components/alert/demo/custom-icon.md
index 8dccd1da57..5c2fa5f848 100644
--- a/components/alert/demo/custom-icon.md
+++ b/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;
 ```
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
index 08b5d58698..2ffc5ccabf 100644
--- a/components/alert/demo/description.md
+++ b/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;
 ```
diff --git a/components/alert/demo/error-boundary.md b/components/alert/demo/error-boundary.md
index de020ee205..dee645ed28 100644
--- a/components/alert/demo/error-boundary.md
+++ b/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;
 ```
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
index d90413d04f..af5733204f 100644
--- a/components/alert/demo/icon.md
+++ b/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;
 ```
diff --git a/components/alert/demo/loop-banner.md b/components/alert/demo/loop-banner.md
index 9fcca95166..9587f2deeb 100644
--- a/components/alert/demo/loop-banner.md
+++ b/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;
 ```
diff --git a/components/alert/demo/smooth-closed.md b/components/alert/demo/smooth-closed.md
index 7b3d14e92b..f31ff6fedb 100644
--- a/components/alert/demo/smooth-closed.md
+++ b/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 ? (
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
index 45031271e9..c96d855e0b 100644
--- a/components/alert/demo/style.md
+++ b/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>
diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md
index cf338929bb..9c5c59d207 100644
--- a/components/anchor/demo/basic.md
+++ b/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>
diff --git a/components/anchor/demo/customizeHighlight.md b/components/anchor/demo/customizeHighlight.md
index 9bd61b1c51..6127e4a6f7 100644
--- a/components/anchor/demo/customizeHighlight.md
+++ b/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;
 ```
diff --git a/components/anchor/demo/onChange.md b/components/anchor/demo/onChange.md
index 2de6912f65..83fde3efb5 100644
--- a/components/anchor/demo/onChange.md
+++ b/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;
 ```
diff --git a/components/anchor/demo/onClick.md b/components/anchor/demo/onClick.md
index 3e45bb70f6..d4f1658d14 100644
--- a/components/anchor/demo/onClick.md
+++ b/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;
 ```
diff --git a/components/anchor/demo/static.md b/components/anchor/demo/static.md
index ef5dc21274..0323919f12 100644
--- a/components/anchor/demo/static.md
+++ b/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;
 ```
diff --git a/components/anchor/demo/targetOffset.md b/components/anchor/demo/targetOffset.md
index 6e0d81c39d..5ac38f47f8 100644
--- a/components/anchor/demo/targetOffset.md
+++ b/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;
 ```
diff --git a/components/auto-complete/demo/basic.md b/components/auto-complete/demo/basic.md
index aac1c2975f..964f877149 100644
--- a/components/auto-complete/demo/basic.md
+++ b/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;
 ```
diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md
index f015ac25cc..d970393bf6 100644
--- a/components/auto-complete/demo/certain-category.md
+++ b/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
diff --git a/components/auto-complete/demo/custom.md b/components/auto-complete/demo/custom.md
index 3da9c394a2..3baaef65f6 100644
--- a/components/auto-complete/demo/custom.md
+++ b/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;
 ```
diff --git a/components/auto-complete/demo/form-debug.md b/components/auto-complete/demo/form-debug.md
index 476b6ff21b..b2e1f53868 100644
--- a/components/auto-complete/demo/form-debug.md
+++ b/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;
 ```
diff --git a/components/auto-complete/demo/non-case-sensitive.md b/components/auto-complete/demo/non-case-sensitive.md
index 6c704093a9..7700e7b1ab 100644
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/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;
 ```
diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md
index 9947fc254f..85ab0fb073 100644
--- a/components/auto-complete/demo/options.md
+++ b/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;
 ```
diff --git a/components/auto-complete/demo/status.md b/components/auto-complete/demo/status.md
index 75c239f93a..b4f1959c8b 100644
--- a/components/auto-complete/demo/status.md
+++ b/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;
 ```
diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md
index f37c839280..b0db46cfa1 100644
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/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;
 ```
diff --git a/components/avatar/demo/badge.md b/components/avatar/demo/badge.md
index cc1b7f0edf..2e6f0345c3 100644
--- a/components/avatar/demo/badge.md
+++ b/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
diff --git a/components/avatar/demo/basic.md b/components/avatar/demo/basic.md
index 3e27611784..06fbd28e9f 100644
--- a/components/avatar/demo/basic.md
+++ b/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>
diff --git a/components/avatar/demo/dynamic.md b/components/avatar/demo/dynamic.md
index 64facd6243..74d21af59f 100644
--- a/components/avatar/demo/dynamic.md
+++ b/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;
 ```
diff --git a/components/avatar/demo/fallback.md b/components/avatar/demo/fallback.md
index 53a10bc6e7..35820271c4 100644
--- a/components/avatar/demo/fallback.md
+++ b/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;
 ```
diff --git a/components/avatar/demo/group.md b/components/avatar/demo/group.md
index 4f2c6a82ae..30e1a4e9f3 100644
--- a/components/avatar/demo/group.md
+++ b/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;
 ```
diff --git a/components/avatar/demo/responsive.md b/components/avatar/demo/responsive.md
index 578022207e..102405b88b 100644
--- a/components/avatar/demo/responsive.md
+++ b/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;
 ```
diff --git a/components/avatar/demo/toggle-debug.md b/components/avatar/demo/toggle-debug.md
index 2193219c5d..602a01e4e6 100644
--- a/components/avatar/demo/toggle-debug.md
+++ b/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);
   };
diff --git a/components/avatar/demo/type.md b/components/avatar/demo/type.md
index 2eec417a71..32506904a2 100644
--- a/components/avatar/demo/type.md
+++ b/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>
diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md
index b02bdf9013..b64ea9b295 100644
--- a/components/back-top/demo/basic.md
+++ b/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
diff --git a/components/back-top/demo/custom.md b/components/back-top/demo/custom.md
index 5195bf4bd3..f76c4df8fc 100644
--- a/components/back-top/demo/custom.md
+++ b/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;
 ```
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
index 74a88cf049..f80341e793 100644
--- a/components/badge/demo/basic.md
+++ b/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>
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index 108bd66b75..216e5f9500 100644
--- a/components/badge/demo/change.md
+++ b/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;
 ```
diff --git a/components/badge/demo/colorful.md b/components/badge/demo/colorful.md
index 870cfdc22f..911d600993 100644
--- a/components/badge/demo/colorful.md
+++ b/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
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
index 747a37f96f..cc42ca0fe0 100644
--- a/components/badge/demo/dot.md
+++ b/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;
 ```
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
index b89d6276c1..8eccd2db5d 100644
--- a/components/badge/demo/link.md
+++ b/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;
 ```
diff --git a/components/badge/demo/mix.md b/components/badge/demo/mix.md
index 4daa7c3206..62c2a20f0c 100644
--- a/components/badge/demo/mix.md
+++ b/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;
 ```
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
index 6ae6fadeac..6623f176e1 100644
--- a/components/badge/demo/no-wrapper.md
+++ b/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;
 ```
diff --git a/components/badge/demo/offset.md b/components/badge/demo/offset.md
index c8cc9329c5..ffa5babaa6 100644
--- a/components/badge/demo/offset.md
+++ b/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;
 ```
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index 3604e06442..f702dad07a 100644
--- a/components/badge/demo/overflow.md
+++ b/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;
 ```
diff --git a/components/badge/demo/ribbbon.md b/components/badge/demo/ribbbon.md
index ae29f585ba..a6ecd6ad88 100644
--- a/components/badge/demo/ribbbon.md
+++ b/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
diff --git a/components/badge/demo/ribbon-debug.md b/components/badge/demo/ribbon-debug.md
index 3d7b02ac2e..664ca2012c 100644
--- a/components/badge/demo/ribbon-debug.md
+++ b/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;
 ```
diff --git a/components/badge/demo/size.md b/components/badge/demo/size.md
index 72594de80e..42ee25e48e 100644
--- a/components/badge/demo/size.md
+++ b/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;
 ```
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
index 8648e5e34b..f3ff15ccf1 100644
--- a/components/badge/demo/status.md
+++ b/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;
 ```
diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md
index db12a67c6d..d5f2cd0ea2 100644
--- a/components/badge/demo/title.md
+++ b/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;
 ```
diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md
index 25463c2292..4c1f2f7302 100644
--- a/components/breadcrumb/demo/basic.md
+++ b/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;
 ```
diff --git a/components/breadcrumb/demo/overlay.md b/components/breadcrumb/demo/overlay.md
index e23c852e59..928ee328ee 100644
--- a/components/breadcrumb/demo/overlay.md
+++ b/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;
 ```
diff --git a/components/breadcrumb/demo/react-router.md b/components/breadcrumb/demo/react-router.md
index 472cd7735d..617cb71c95 100644
--- a/components/breadcrumb/demo/react-router.md
+++ b/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
diff --git a/components/breadcrumb/demo/separator-component.md b/components/breadcrumb/demo/separator-component.md
index 83dad51b54..64b5320ff5 100644
--- a/components/breadcrumb/demo/separator-component.md
+++ b/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;
 ```
diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md
index 6147da3c06..2b6f4f4935 100644
--- a/components/breadcrumb/demo/separator.md
+++ b/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;
 ```
diff --git a/components/breadcrumb/demo/withIcon.md b/components/breadcrumb/demo/withIcon.md
index 37318de92a..80aacb70a6 100644
--- a/components/breadcrumb/demo/withIcon.md
+++ b/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;
 ```
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
index d90e609e46..9acfdcc631 100644
--- a/components/button/demo/basic.md
+++ b/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;
 ```
diff --git a/components/button/demo/block.md b/components/button/demo/block.md
index 443c9320a9..a6accfc0c2 100644
--- a/components/button/demo/block.md
+++ b/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;
 ```
diff --git a/components/button/demo/danger.md b/components/button/demo/danger.md
index fefa96da59..1f07931d48 100644
--- a/components/button/demo/danger.md
+++ b/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;
 ```
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index 018316b108..59090e3330 100644
--- a/components/button/demo/disabled.md
+++ b/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
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index ba86db0f3d..7b7aab994d 100644
--- a/components/button/demo/ghost.md
+++ b/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
diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
index c17bd4dacf..3061842444 100644
--- a/components/button/demo/icon.md
+++ b/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;
 ```
diff --git a/components/button/demo/legacy-group.md b/components/button/demo/legacy-group.md
index 54a027dff0..ed036f1827 100644
--- a/components/button/demo/legacy-group.md
+++ b/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
diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
index 6b6d155b9a..8905928549 100644
--- a/components/button/demo/loading.md
+++ b/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;
 ```
diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md
index fe306aafcb..784c09304a 100644
--- a/components/button/demo/multiple.md
+++ b/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;
 ```
diff --git a/components/button/demo/size.md b/components/button/demo/size.md
index 0960568b31..df6668ae7b 100644
--- a/components/button/demo/size.md
+++ b/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;
 ```
diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md
index 89a3fdb1c4..6d75ac6584 100644
--- a/components/calendar/demo/basic.md
+++ b/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;
 ```
diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md
index 4050c39d8c..a2c7f02b16 100644
--- a/components/calendar/demo/card.md
+++ b/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
diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md
index 1b8dc6c798..238069655b 100644
--- a/components/calendar/demo/customize-header.md
+++ b/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
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
index 7303412f7f..94c50d61f9 100644
--- a/components/calendar/demo/notice-calendar.md
+++ b/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
diff --git a/components/calendar/demo/select.md b/components/calendar/demo/select.md
index b38f16eff7..a6018f79b6 100644
--- a/components/calendar/demo/select.md
+++ b/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;
 ```
diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md
index e9a909a8bd..f84875f716 100644
--- a/components/card/demo/basic.md
+++ b/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>
diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md
index 4e471eaf93..3284d334a3 100644
--- a/components/card/demo/border-less.md
+++ b/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
diff --git a/components/card/demo/flexible-content.md b/components/card/demo/flexible-content.md
index 99f9923ceb..37804e15a9 100644
--- a/components/card/demo/flexible-content.md
+++ b/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;
 ```
diff --git a/components/card/demo/grid-card.md b/components/card/demo/grid-card.md
index af138b31ea..24fadbabff 100644
--- a/components/card/demo/grid-card.md
+++ b/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;
 ```
diff --git a/components/card/demo/in-column.md b/components/card/demo/in-column.md
index ce39d8f02a..baf2d45d4b 100644
--- a/components/card/demo/in-column.md
+++ b/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>
diff --git a/components/card/demo/inner.md b/components/card/demo/inner.md
index 9923546784..f1f6438d2f 100644
--- a/components/card/demo/inner.md
+++ b/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;
 ```
diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
index 4461e1823b..664433d052 100644
--- a/components/card/demo/loading.md
+++ b/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;
 ```
diff --git a/components/card/demo/meta.md b/components/card/demo/meta.md
index 8b90c8f10e..7ed92a7cfc 100644
--- a/components/card/demo/meta.md
+++ b/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;
 ```
diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md
index 95737a5635..37c873be4f 100644
--- a/components/card/demo/simple.md
+++ b/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;
 ```
diff --git a/components/card/demo/tabs.md b/components/card/demo/tabs.md
index 4416f2eb72..7277c01dab 100644
--- a/components/card/demo/tabs.md
+++ b/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;
 ```
diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md
index e928a3c0c6..2a8b084f19 100644
--- a/components/carousel/demo/autoplay.md
+++ b/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;
 ```
diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md
index 36f8031e7d..6a42759d8e 100644
--- a/components/carousel/demo/basic.md
+++ b/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;
 ```
diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md
index fb472acb16..7245903c57 100644
--- a/components/carousel/demo/fade.md
+++ b/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;
 ```
diff --git a/components/carousel/demo/position.md b/components/carousel/demo/position.md
index d64d9c47ed..23c7e46367 100644
--- a/components/carousel/demo/position.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md
index 15457da1c6..ce4628702a 100644
--- a/components/cascader/demo/basic.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/change-on-select.md b/components/cascader/demo/change-on-select.md
index d262965906..f446786cbf 100644
--- a/components/cascader/demo/change-on-select.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/custom-dropdown.md b/components/cascader/demo/custom-dropdown.md
index 882d0a0878..588240f388 100644
--- a/components/cascader/demo/custom-dropdown.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/custom-render.md b/components/cascader/demo/custom-render.md
index ca83da29ec..d3f57e348b 100644
--- a/components/cascader/demo/custom-render.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/custom-trigger.md b/components/cascader/demo/custom-trigger.md
index 3befe2e074..55cd27eec6 100644
--- a/components/cascader/demo/custom-trigger.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/default-value.md b/components/cascader/demo/default-value.md
index d686898823..564c0bf801 100644
--- a/components/cascader/demo/default-value.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/disabled-option.md b/components/cascader/demo/disabled-option.md
index ed75ab3221..613e85afb2 100644
--- a/components/cascader/demo/disabled-option.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/fields-name.md b/components/cascader/demo/fields-name.md
index 1eea655c16..ed45182a11 100644
--- a/components/cascader/demo/fields-name.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/hover.md b/components/cascader/demo/hover.md
index 10e478af3f..229041d219 100644
--- a/components/cascader/demo/hover.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/lazy.md b/components/cascader/demo/lazy.md
index e13c736f31..92514d57ea 100644
--- a/components/cascader/demo/lazy.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/multiple.md b/components/cascader/demo/multiple.md
index 36c11a372a..b1a3d152f5 100644
--- a/components/cascader/demo/multiple.md
+++ b/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;
 ```
diff --git a/components/cascader/demo/placement.md b/components/cascader/demo/placement.md
index 6f542aa2ed..32ea74ddf1 100644
--- a/components/cascader/demo/placement.md
+++ b/components/cascader/demo/placement.md
@@ -13,10 +13,18 @@ title:
 
 You can manually specify the position of the popup via `placement`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Cascader, Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
-const options = [
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -51,10 +59,12 @@ const options = [
   },
 ];
 
-const SetPlacementDemo = () => {
-  const [placement, SetPlacement] = React.useState('topLeft');
+const App: React.FC = () => {
+  const [placement, SetPlacement] = useState<'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'>(
+    'topLeft',
+  );
 
-  const placementChange = e => {
+  const placementChange = (e: RadioChangeEvent) => {
     SetPlacement(e.target.value);
   };
 
@@ -73,5 +83,5 @@ const SetPlacementDemo = () => {
   );
 };
 
-export default () => <SetPlacementDemo />;
+export default App;
 ```
diff --git a/components/cascader/demo/search.md b/components/cascader/demo/search.md
index 74178663ff..496f14e737 100644
--- a/components/cascader/demo/search.md
+++ b/components/cascader/demo/search.md
@@ -17,10 +17,19 @@ Search and select options directly.
 
 > Now, `Cascader[showSearch]` doesn't support search on server, more info [#5547](https://github.com/ant-design/ant-design/issues/5547)
 
-```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[];
+  disabled?: boolean;
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -60,15 +69,16 @@ const options = [
   },
 ];
 
-function onChange(value, selectedOptions) {
+const onChange = (value: string[], selectedOptions: Option[]) => {
   console.log(value, selectedOptions);
-}
+};
 
-function filter(inputValue, path) {
-  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
-}
+const filter = (inputValue: string, path: DefaultOptionType[]) =>
+  path.some(
+    option => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
+  );
 
-export default () => (
+const App: React.FC = () => (
   <Cascader
     options={options}
     onChange={onChange}
@@ -77,4 +87,6 @@ export default () => (
     onSearch={value => console.log(value)}
   />
 );
+
+export default App;
 ```
diff --git a/components/cascader/demo/size.md b/components/cascader/demo/size.md
index 6a17c7eb21..0d4dcf6c4d 100644
--- a/components/cascader/demo/size.md
+++ b/components/cascader/demo/size.md
@@ -13,10 +13,17 @@ title:
 
 Cascade selection box of different sizes.
 
-```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,11 @@ const options = [
   },
 ];
 
-function onChange(value) {
+const onChange = (value: string[]) => {
   console.log(value);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Cascader size="large" options={options} onChange={onChange} />
     <br />
@@ -68,4 +75,6 @@ export default () => (
     <br />
   </>
 );
+
+export default App;
 ```
diff --git a/components/cascader/demo/status.md b/components/cascader/demo/status.md
index 6a62a82a96..18dcd0daaf 100644
--- a/components/cascader/demo/status.md
+++ b/components/cascader/demo/status.md
@@ -15,14 +15,15 @@ title:
 Add status to Cascader with `status`, which could be `error` or `warning`.
 
 ```tsx
+import React from 'react';
 import { Cascader, Space } from 'antd';
 
-const Validation: React.FC = () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <Cascader status="error" placeholder="Error" />
     <Cascader status="warning" multiple placeholder="Warning multiple" />
   </Space>
 );
 
-export default () => <Validation />;
+export default App;
 ```
diff --git a/components/cascader/demo/suffix.md b/components/cascader/demo/suffix.md
index 56c99bc157..7c4cdc7b88 100644
--- a/components/cascader/demo/suffix.md
+++ b/components/cascader/demo/suffix.md
@@ -14,11 +14,18 @@ title:
 
 Use `suffixIcon` to customize the selection box suffix icon, and use `expandIcon` to customize the current item expand icon.
 
-```jsx
+```tsx
+import React from 'react';
 import { Cascader } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
-const options = [
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
   {
     value: 'zhejiang',
     label: 'Zhejiang',
@@ -53,11 +60,11 @@ const options = [
   },
 ];
 
-function onChange(value) {
+const onChange = (value: string[]) => {
   console.log(value);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Cascader
       suffixIcon={<SmileOutlined />}
@@ -81,4 +88,6 @@ export default () => (
     <Cascader expandIcon="ab" options={options} onChange={onChange} placeholder="Please select" />
   </>
 );
+
+export default App;
 ```
diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
index b6f6a92539..09c2ded247 100644
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -13,12 +13,16 @@ title:
 
 Basic usage of checkbox.
 
-```jsx
+```tsx
+import React from 'react';
 import { Checkbox } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 
-function onChange(e) {
+const onChange = (e: CheckboxChangeEvent) => {
   console.log(`checked = ${e.target.checked}`);
-}
+};
 
-export default () => <Checkbox onChange={onChange}>Checkbox</Checkbox>;
+const App: React.FC = () => <Checkbox onChange={onChange}>Checkbox</Checkbox>;
+
+export default App;
 ```
diff --git a/components/checkbox/demo/check-all.md b/components/checkbox/demo/check-all.md
index 4bfcfca046..f7382d9053 100644
--- a/components/checkbox/demo/check-all.md
+++ b/components/checkbox/demo/check-all.md
@@ -13,26 +13,29 @@ title:
 
 The `indeterminate` property can help you to achieve a 'check all' effect.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Checkbox, Divider } from 'antd';
+import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 
 const CheckboxGroup = Checkbox.Group;
 
 const plainOptions = ['Apple', 'Pear', 'Orange'];
 const defaultCheckedList = ['Apple', 'Orange'];
 
-const App = () => {
-  const [checkedList, setCheckedList] = React.useState(defaultCheckedList);
-  const [indeterminate, setIndeterminate] = React.useState(true);
-  const [checkAll, setCheckAll] = React.useState(false);
+const App: React.FC = () => {
+  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList);
+  const [indeterminate, setIndeterminate] = useState(true);
+  const [checkAll, setCheckAll] = useState(false);
 
-  const onChange = list => {
+  const onChange = (list: CheckboxValueType[]) => {
     setCheckedList(list);
     setIndeterminate(!!list.length && list.length < plainOptions.length);
     setCheckAll(list.length === plainOptions.length);
   };
 
-  const onCheckAllChange = e => {
+  const onCheckAllChange = (e: CheckboxChangeEvent) => {
     setCheckedList(e.target.checked ? plainOptions : []);
     setIndeterminate(false);
     setCheckAll(e.target.checked);
diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md
index 1ff8e686fd..09f3a02348 100644
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -13,11 +13,12 @@ title:
 
 Communicated with other components.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Checkbox, Button } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 
-export default () => {
+const App: React.FC = () => {
   const [checked, setChecked] = useState(true);
   const [disabled, setDisabled] = useState(false);
 
@@ -29,7 +30,7 @@ export default () => {
     setDisabled(!disabled);
   };
 
-  const onChange = e => {
+  const onChange = (e: CheckboxChangeEvent) => {
     console.log('checked = ', e.target.checked);
     setChecked(e.target.checked);
   };
@@ -54,4 +55,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/checkbox/demo/debug-line.md b/components/checkbox/demo/debug-line.md
index b5f6fe4531..21cc160b17 100644
--- a/components/checkbox/demo/debug-line.md
+++ b/components/checkbox/demo/debug-line.md
@@ -15,6 +15,7 @@ debug: true
 Same line
 
 ```tsx
+import React from 'react';
 import { Checkbox, Radio, Space } from 'antd';
 
 const sharedStyle: React.CSSProperties = {
@@ -22,7 +23,7 @@ const sharedStyle: React.CSSProperties = {
   marginBottom: 16,
 };
 
-export default () => (
+const App: React.FC = () => (
   <div>
     <Space style={sharedStyle} align="center">
       <Checkbox value="light" />
@@ -61,4 +62,6 @@ export default () => (
     </div>
   </div>
 );
+
+export default App;
 ```
diff --git a/components/checkbox/demo/disabled.md b/components/checkbox/demo/disabled.md
index 82deca4926..cd9ffcfc29 100644
--- a/components/checkbox/demo/disabled.md
+++ b/components/checkbox/demo/disabled.md
@@ -13,14 +13,17 @@ checkbox 不可用。
 
 Disabled checkbox.
 
-```jsx
+```tsx
+import React from 'react';
 import { Checkbox } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Checkbox defaultChecked={false} disabled />
     <br />
     <Checkbox defaultChecked disabled />
   </>
 );
+
+export default App;
 ```
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md
index e0d2db5579..f48464899d 100644
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@@ -13,12 +13,14 @@ title:
 
 Generate a group of checkboxes from an array.
 
-```jsx
+```tsx
+import React from 'react';
 import { Checkbox } from 'antd';
+import type { CheckboxValueType } from 'antd/es/checkbox/Group';
 
-function onChange(checkedValues) {
+const onChange = (checkedValues: CheckboxValueType[]) => {
   console.log('checked = ', checkedValues);
-}
+};
 
 const plainOptions = ['Apple', 'Pear', 'Orange'];
 const options = [
@@ -32,7 +34,7 @@ const optionsWithDisabled = [
   { label: 'Orange', value: 'Orange', disabled: false },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
     <br />
@@ -48,4 +50,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/checkbox/demo/layout.md b/components/checkbox/demo/layout.md
index be82a71412..fe533f6dd5 100644
--- a/components/checkbox/demo/layout.md
+++ b/components/checkbox/demo/layout.md
@@ -13,14 +13,16 @@ Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用，可以实现灵
 
 We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.
 
-```jsx
+```tsx
+import React from 'react';
 import { Checkbox, Row, Col } from 'antd';
+import type { CheckboxValueType } from 'antd/es/checkbox/Group';
 
-function onChange(checkedValues) {
+const onChange = (checkedValues: CheckboxValueType[]) => {
   console.log('checked = ', checkedValues);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
     <Row>
       <Col span={8}>
@@ -41,4 +43,6 @@ export default () => (
     </Row>
   </Checkbox.Group>
 );
+
+export default App;
 ```
diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
index 43fcf594c3..b9dd653233 100644
--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@@ -13,7 +13,8 @@ title:
 
 In accordion mode, only one panel can be expanded at a time.
 
-```jsx
+```tsx
+import React from 'react';
 import { Collapse } from 'antd';
 
 const { Panel } = Collapse;
@@ -24,7 +25,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-export default () => (
+const App: React.FC = () => (
   <Collapse accordion>
     <Panel header="This is panel header 1" key="1">
       <p>{text}</p>
@@ -37,4 +38,6 @@ export default () => (
     </Panel>
   </Collapse>
 );
+
+export default App;
 ```
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
index 9d2c4f55a0..4528b7ca0d 100644
--- a/components/collapse/demo/basic.md
+++ b/components/collapse/demo/basic.md
@@ -13,34 +13,39 @@ title:
 
 By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
 
-```jsx
+```tsx
+import React from 'react';
 import { Collapse } from 'antd';
 
 const { Panel } = Collapse;
 
-function callback(key) {
-  console.log(key);
-}
-
 const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.
 `;
 
-export default () => (
-  <Collapse defaultActiveKey={['1']} onChange={callback}>
-    <Panel header="This is panel header 1" key="1">
-      <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 2" key="2">
-      <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 3" key="3">
-      <p>{text}</p>
-    </Panel>
-  </Collapse>
-);
+const App: React.FC = () => {
+  const onChange = (key: string | string[]) => {
+    console.log(key);
+  };
+
+  return (
+    <Collapse defaultActiveKey={['1']} onChange={onChange}>
+      <Panel header="This is panel header 1" key="1">
+        <p>{text}</p>
+      </Panel>
+      <Panel header="This is panel header 2" key="2">
+        <p>{text}</p>
+      </Panel>
+      <Panel header="This is panel header 3" key="3">
+        <p>{text}</p>
+      </Panel>
+    </Collapse>
+  );
+};
+
+export default App;
 ```
 
 <style>
diff --git a/components/collapse/demo/borderless.md b/components/collapse/demo/borderless.md
index 1449f722e5..597445c7cd 100644
--- a/components/collapse/demo/borderless.md
+++ b/components/collapse/demo/borderless.md
@@ -13,7 +13,8 @@ title:
 
 A borderless style of Collapse.
 
-```jsx
+```tsx
+import React from 'react';
 import { Collapse } from 'antd';
 
 const { Panel } = Collapse;
@@ -25,7 +26,7 @@ const text = (
   </p>
 );
 
-export default () => (
+const App: React.FC = () => (
   <Collapse bordered={false} defaultActiveKey={['1']}>
     <Panel header="This is panel header 1" key="1">
       {text}
@@ -38,4 +39,6 @@ export default () => (
     </Panel>
   </Collapse>
 );
+
+export default App;
 ```
diff --git a/components/collapse/demo/collapsible.md b/components/collapse/demo/collapsible.md
index 589ed52c15..da3b833ccb 100644
--- a/components/collapse/demo/collapsible.md
+++ b/components/collapse/demo/collapsible.md
@@ -13,7 +13,8 @@ title:
 
 Specify the trigger area of collapsible by `collapsible`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Collapse, Space } from 'antd';
 
 const { Panel } = Collapse;
@@ -24,7 +25,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <Collapse collapsible="header" defaultActiveKey={['1']}>
       <Panel header="This panel can only be collapsed by clicking text" key="1">
@@ -38,6 +39,8 @@ export default () => (
     </Collapse>
   </Space>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
index 83d0622352..8b9da89213 100644
--- a/components/collapse/demo/custom.md
+++ b/components/collapse/demo/custom.md
@@ -13,7 +13,8 @@ title:
 
 Customize the background, border, margin styles and icon for each panel.
 
-```jsx
+```tsx
+import React from 'react';
 import { Collapse } from 'antd';
 import { CaretRightOutlined } from '@ant-design/icons';
 
@@ -25,7 +26,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-export default () => (
+const App: React.FC = () => (
   <Collapse
     bordered={false}
     defaultActiveKey={['1']}
@@ -43,6 +44,8 @@ export default () => (
     </Panel>
   </Collapse>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/collapse/demo/extra.md b/components/collapse/demo/extra.md
index fc1c0f9545..7df0977e21 100644
--- a/components/collapse/demo/extra.md
+++ b/components/collapse/demo/extra.md
@@ -13,43 +13,46 @@ title:
 
 More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Collapse, Select } from 'antd';
 import { SettingOutlined } from '@ant-design/icons';
+import type { ExpandIconPosition } from 'antd/lib/collapse/Collapse';
 
 const { Panel } = Collapse;
 const { Option } = Select;
 
-function callback(key) {
-  console.log(key);
-}
-
 const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.
 `;
 
-const genExtra = () => (
-  <SettingOutlined
-    onClick={event => {
-      // If you don't want click extra trigger collapse, you can prevent this:
-      event.stopPropagation();
-    }}
-  />
-);
+const App: React.FC = () => {
+  const [expandIconPosition, setExpandIconPosition] = useState<ExpandIconPosition>('left');
 
-export default () => {
-  const [expandIconPosition, setExpandIconPosition] = React.useState('left');
-
-  const onPositionChange = position => {
-    setExpandIconPosition(position);
+  const onPositionChange = (newExpandIconPosition: ExpandIconPosition) => {
+    setExpandIconPosition(newExpandIconPosition);
   };
+
+  const onChange = (key: string | string[]) => {
+    console.log(key);
+  };
+
+  const genExtra = () => (
+    <SettingOutlined
+      onClick={event => {
+        // If you don't want click extra trigger collapse, you can prevent this:
+        event.stopPropagation();
+      }}
+    />
+  );
+
   return (
     <>
       <Collapse
         defaultActiveKey={['1']}
-        onChange={callback}
+        onChange={onChange}
         expandIconPosition={expandIconPosition}
       >
         <Panel header="This is panel header 1" key="1" extra={genExtra()}>
@@ -71,4 +74,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/collapse/demo/ghost.md b/components/collapse/demo/ghost.md
index 1aa8c8a939..b9d4001855 100644
--- a/components/collapse/demo/ghost.md
+++ b/components/collapse/demo/ghost.md
@@ -13,7 +13,8 @@ title:
 
 Making collapse's background to transparent.
 
-```jsx
+```tsx
+import React from 'react';
 import { Collapse } from 'antd';
 
 const { Panel } = Collapse;
@@ -24,7 +25,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-export default () => (
+const App: React.FC = () => (
   <Collapse defaultActiveKey={['1']} ghost>
     <Panel header="This is panel header 1" key="1">
       <p>{text}</p>
@@ -37,4 +38,6 @@ export default () => (
     </Panel>
   </Collapse>
 );
+
+export default App;
 ```
diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md
index d39031feae..9c7bbfb3f2 100644
--- a/components/collapse/demo/mix.md
+++ b/components/collapse/demo/mix.md
@@ -13,36 +13,41 @@ title:
 
 `Collapse` is nested inside the `Collapse`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Collapse } from 'antd';
 
 const { Panel } = Collapse;
 
-function callback(key) {
-  console.log(key);
-}
-
 const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.
 `;
 
-export default () => (
-  <Collapse onChange={callback}>
-    <Panel header="This is panel header 1" key="1">
-      <Collapse defaultActiveKey="1">
-        <Panel header="This is panel nest panel" key="1">
-          <p>{text}</p>
-        </Panel>
-      </Collapse>
-    </Panel>
-    <Panel header="This is panel header 2" key="2">
-      <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 3" key="3">
-      <p>{text}</p>
-    </Panel>
-  </Collapse>
-);
+const App: React.FC = () => {
+  const onChange = (key: string | string[]) => {
+    console.log(key);
+  };
+
+  return (
+    <Collapse onChange={onChange}>
+      <Panel header="This is panel header 1" key="1">
+        <Collapse defaultActiveKey="1">
+          <Panel header="This is panel nest panel" key="1">
+            <p>{text}</p>
+          </Panel>
+        </Collapse>
+      </Panel>
+      <Panel header="This is panel header 2" key="2">
+        <p>{text}</p>
+      </Panel>
+      <Panel header="This is panel header 3" key="3">
+        <p>{text}</p>
+      </Panel>
+    </Collapse>
+  );
+};
+
+export default App;
 ```
diff --git a/components/collapse/demo/noarrow.md b/components/collapse/demo/noarrow.md
index 64a227e7f5..f6fd04a544 100644
--- a/components/collapse/demo/noarrow.md
+++ b/components/collapse/demo/noarrow.md
@@ -13,29 +13,34 @@ title:
 
 You can hide the arrow icon by passing `showArrow={false}` to `CollapsePanel` component.
 
-```jsx
+```tsx
+import React from 'react';
 import { Collapse } from 'antd';
 
 const { Panel } = Collapse;
 
-function callback(key) {
-  console.log(key);
-}
-
 const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.
 `;
 
-export default () => (
-  <Collapse defaultActiveKey={['1']} onChange={callback}>
-    <Panel header="This is panel header with arrow icon" key="1">
-      <p>{text}</p>
-    </Panel>
-    <Panel showArrow={false} header="This is panel header with no arrow icon" key="2">
-      <p>{text}</p>
-    </Panel>
-  </Collapse>
-);
+const App: React.FC = () => {
+  const onChange = (key: string | string[]) => {
+    console.log(key);
+  };
+
+  return (
+    <Collapse defaultActiveKey={['1']} onChange={onChange}>
+      <Panel header="This is panel header with arrow icon" key="1">
+        <p>{text}</p>
+      </Panel>
+      <Panel showArrow={false} header="This is panel header with no arrow icon" key="2">
+        <p>{text}</p>
+      </Panel>
+    </Collapse>
+  );
+};
+
+export default App;
 ```
diff --git a/components/comment/demo/basic.md b/components/comment/demo/basic.md
index 14240c723f..9691a0a59a 100644
--- a/components/comment/demo/basic.md
+++ b/components/comment/demo/basic.md
@@ -13,16 +13,16 @@ title:
 
 A basic comment with author, avatar, time and actions.
 
-```jsx
+```tsx
 import React, { createElement, useState } from 'react';
 import { Comment, Tooltip, Avatar } from 'antd';
 import moment from 'moment';
 import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
 
-const Demo = () => {
+const App: React.FC = () => {
   const [likes, setLikes] = useState(0);
   const [dislikes, setDislikes] = useState(0);
-  const [action, setAction] = useState(null);
+  const [action, setAction] = useState<string | null>(null);
 
   const like = () => {
     setLikes(1);
@@ -73,7 +73,7 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
 
 ```css
diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md
index ca78822f17..2a12469835 100644
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@@ -13,13 +13,28 @@ title:
 
 Comment can be used as an editor, so the user can customize the contents of the component.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Comment, Avatar, Form, Button, List, Input } from 'antd';
 import moment from 'moment';
 
 const { TextArea } = Input;
 
-const CommentList = ({ comments }) => (
+interface CommentItem {
+  author: string;
+  avatar: string;
+  content: React.ReactNode;
+  datetime: string;
+}
+
+interface EditorProps {
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onSubmit: () => void;
+  submitting: boolean;
+  value: string;
+}
+
+const CommentList = ({ comments }: { comments: CommentItem[] }) => (
   <List
     dataSource={comments}
     header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
@@ -28,7 +43,7 @@ const CommentList = ({ comments }) => (
   />
 );
 
-const Editor = ({ onChange, onSubmit, submitting, value }) => (
+const Editor = ({ onChange, onSubmit, submitting, value }: EditorProps) => (
   <>
     <Form.Item>
       <TextArea rows={4} onChange={onChange} value={value} />
@@ -41,62 +56,52 @@ const Editor = ({ onChange, onSubmit, submitting, value }) => (
   </>
 );
 
-export default () => {
-  const [state, setState] = React.useState({
-    comments: [],
-    submitting: false,
-    value: '',
-  });
+const App: React.FC = () => {
+  const [comments, setComments] = useState<CommentItem[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [value, setValue] = useState('');
 
   const handleSubmit = () => {
-    if (!state.value) {
-      return;
-    }
+    if (!value) return;
 
-    setState({
-      ...state,
-      submitting: true,
-    });
+    setSubmitting(true);
 
     setTimeout(() => {
-      setState({
-        submitting: false,
-        value: '',
-        comments: [
-          ...state.comments,
-          {
-            author: 'Han Solo',
-            avatar: 'https://joeschmoe.io/api/v1/random',
-            content: <p>{state.value}</p>,
-            datetime: moment().fromNow(),
-          },
-        ],
-      });
+      setSubmitting(false);
+      setValue('');
+      setComments([
+        ...comments,
+        {
+          author: 'Han Solo',
+          avatar: 'https://joeschmoe.io/api/v1/random',
+          content: <p>{value}</p>,
+          datetime: moment().fromNow(),
+        },
+      ]);
     }, 1000);
   };
 
-  const handleChange = e => {
-    setState({
-      ...state,
-      value: e.target.value,
-    });
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
   };
 
   return (
     <>
-      {state.comments.length > 0 && <CommentList comments={state.comments} />}
+      {comments.length > 0 && <CommentList comments={comments} />}
       <Comment
         avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
         content={
           <Editor
             onChange={handleChange}
             onSubmit={handleSubmit}
-            submitting={state.submitting}
-            value={state.value}
+            submitting={submitting}
+            value={value}
           />
         }
       />
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md
index 5191f0f131..1ab61852b9 100644
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@@ -13,7 +13,8 @@ title:
 
 Displaying a series of comments using the `antd` List Component.
 
-```jsx
+```tsx
+import React from 'react';
 import { Comment, Tooltip, List } from 'antd';
 import moment from 'moment';
 
@@ -54,7 +55,7 @@ const data = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <List
     className="comment-list"
     header={`${data.length} replies`}
@@ -73,4 +74,6 @@ export default () => (
     )}
   />
 );
+
+export default App;
 ```
diff --git a/components/comment/demo/nested.md b/components/comment/demo/nested.md
index 4af8d87125..cb912ca024 100644
--- a/components/comment/demo/nested.md
+++ b/components/comment/demo/nested.md
@@ -13,10 +13,11 @@ title:
 
 Comments can be nested.
 
-```jsx
+```tsx
+import React from 'react';
 import { Comment, Avatar } from 'antd';
 
-const ExampleComment = ({ children }) => (
+const ExampleComment: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
   <Comment
     actions={[<span key="comment-nested-reply-to">Reply to</span>]}
     author={<a>Han Solo</a>}
@@ -32,7 +33,7 @@ const ExampleComment = ({ children }) => (
   </Comment>
 );
 
-export default () => (
+const App: React.FC = () => (
   <ExampleComment>
     <ExampleComment>
       <ExampleComment />
@@ -40,4 +41,6 @@ export default () => (
     </ExampleComment>
   </ExampleComment>
 );
+
+export default App;
 ```
diff --git a/components/config-provider/demo/direction.md b/components/config-provider/demo/direction.md
index 376a748bc9..377a053ce2 100644
--- a/components/config-provider/demo/direction.md
+++ b/components/config-provider/demo/direction.md
@@ -13,9 +13,8 @@ title:
 
 Components which support rtl direction are listed here, you can toggle the direction in the demo.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
-
 import {
   Input,
   Col,
@@ -46,6 +45,8 @@ import {
   MinusOutlined,
   PlusOutlined,
 } from '@ant-design/icons';
+import type { DirectionType } from 'antd/lib/config-provider';
+import type { RadioChangeEvent } from 'antd';
 
 const InputGroup = Input.Group;
 const ButtonGroup = Button.Group;
@@ -104,14 +105,13 @@ const cascaderOptions = [
     ],
   },
 ];
+type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 
-function Page(props) {
-  const [state, setState] = useState({
-    currentStep: 0,
-    modalVisible: false,
-    badgeCount: 5,
-    showBadge: true,
-  });
+const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [badgeCount, setBadgeCount] = useState(5);
+  const [showBadge, setShowBadge] = useState(true);
 
   const selectBefore = (
     <Select defaultValue="Http://" style={{ width: 90 }}>
@@ -130,75 +130,54 @@ function Page(props) {
   );
 
   // ==== Cascader ====
-  const cascaderFilter = (inputValue, path) =>
+  const cascaderFilter = (inputValue: string, path: { label: string }[]) =>
     path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
 
-  const onCascaderChange = value => {
+  const onCascaderChange = (value: any) => {
     console.log(value);
   };
   // ==== End Cascader ====
 
   // ==== Modal ====
   const showModal = () => {
-    setState({
-      ...state,
-      modalVisible: true,
-    });
+    setModalVisible(true);
   };
 
-  const handleOk = e => {
+  const handleOk = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
-    setState({
-      ...state,
-      modalVisible: false,
-    });
+    setModalVisible(false);
   };
 
-  const handleCancel = e => {
+  const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
-    setState({
-      ...state,
-      modalVisible: false,
-    });
+    setModalVisible(false);
   };
 
   // ==== End Modal ====
 
-  const onStepsChange = currentStep => {
-    console.log('onChange:', currentStep);
-    setState({
-      ...state,
-      currentStep,
-    });
+  const onStepsChange = (newCurrentStep: number) => {
+    console.log('onChange:', newCurrentStep);
+    setCurrentStep(newCurrentStep);
   };
 
   // ==== Badge ====
 
   const increaseBadge = () => {
-    const badgeCount = state.badgeCount + 1;
-    setState({
-      ...state,
-      badgeCount,
-    });
+    setBadgeCount(badgeCount + 1);
   };
 
   const declineBadge = () => {
-    let badgeCount = state.badgeCount - 1;
-    if (badgeCount < 0) {
-      badgeCount = 0;
+    let newBadgeCount = badgeCount - 1;
+    if (newBadgeCount < 0) {
+      newBadgeCount = 0;
     }
-    setState({
-      ...state,
-      badgeCount,
-    });
+    setBadgeCount(newBadgeCount);
   };
 
-  const onChangeBadge = showBadge => {
-    setState({
-      ...state,
-      showBadge,
-    });
+  const onChangeBadge = (checked: boolean) => {
+    setShowBadge(checked);
   };
+  // ==== End Badge ====
 
   return (
     <div className="direction-components">
@@ -210,7 +189,7 @@ function Page(props) {
             options={cascaderOptions}
             onChange={onCascaderChange}
             placeholder="یک مورد انتخاب کنید"
-            popupPlacement={props.popupPlacement}
+            popupPlacement={popupPlacement}
           />
           &nbsp;&nbsp;&nbsp;&nbsp; With search:
           <Cascader
@@ -218,8 +197,8 @@ function Page(props) {
             options={cascaderOptions}
             onChange={onCascaderChange}
             placeholder="Select an item"
-            popupPlacement={props.popupPlacement}
-            showSearch={cascaderFilter}
+            popupPlacement={popupPlacement}
+            showSearch={{ filter: cascaderFilter }}
           />
         </Col>
       </Row>
@@ -360,7 +339,7 @@ function Page(props) {
                 placeholder="Select a person"
                 optionFilterProp="children"
                 filterOption={(input, option) =>
-                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  option?.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }
               >
                 <Option value="jack">Jack</Option>
@@ -379,17 +358,13 @@ function Page(props) {
                   allowClear
                   treeDefaultExpandAll
                 >
-                  <TreeNode value="parent 1" title="parent 1" key="0-1">
-                    <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
-                      <TreeNode value="leaf1" title="my leaf" key="random" />
-                      <TreeNode value="leaf2" title="your leaf" key="random1" />
+                  <TreeNode title="parent 1" key="0-1">
+                    <TreeNode title="parent 1-0" key="0-1-1">
+                      <TreeNode title="my leaf" key="random" />
+                      <TreeNode title="your leaf" key="random1" />
                     </TreeNode>
-                    <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
-                      <TreeNode
-                        value="sss"
-                        title={<b style={{ color: '#08c' }}>sss</b>}
-                        key="random3"
-                      />
+                    <TreeNode title="parent 1-1" key="random2">
+                      <TreeNode title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
                     </TreeNode>
                   </TreeNode>
                 </TreeSelect>
@@ -406,7 +381,7 @@ function Page(props) {
                 </Button>
                 <Modal
                   title="پنچره ساده"
-                  visible={state.modalVisible}
+                  visible={modalVisible}
                   onOk={handleOk}
                   onCancel={handleCancel}
                 >
@@ -422,13 +397,13 @@ function Page(props) {
             <Col span={24}>
               <Divider orientation="left">Steps example</Divider>
               <div>
-                <Steps progressDot current={state.currentStep}>
+                <Steps progressDot current={currentStep}>
                   <Step title="Finished" description="This is a description." />
                   <Step title="In Progress" description="This is a description." />
                   <Step title="Waiting" description="This is a description." />
                 </Steps>
                 <br />
-                <Steps current={state.currentStep} onChange={onStepsChange}>
+                <Steps current={currentStep} onChange={onStepsChange}>
                   <Step title="Step 1" description="This is a description." />
                   <Step title="Step 2" description="This is a description." />
                   <Step title="Step 3" description="This is a description." />
@@ -452,7 +427,7 @@ function Page(props) {
               <Divider orientation="left">Badge example</Divider>
               <div>
                 <div>
-                  <Badge count={state.badgeCount}>
+                  <Badge count={badgeCount}>
                     <a href="#" className="head-example" />
                   </Badge>
                   <ButtonGroup>
@@ -465,10 +440,10 @@ function Page(props) {
                   </ButtonGroup>
                 </div>
                 <div style={{ marginTop: 10 }}>
-                  <Badge dot={state.showBadge}>
+                  <Badge dot={showBadge}>
                     <a href="#" className="head-example" />
                   </Badge>
-                  <Switch onChange={onChangeBadge} checked={state.showBadge} />
+                  <Switch onChange={onChangeBadge} checked={showBadge} />
                 </div>
               </div>
             </Col>
@@ -527,13 +502,13 @@ function Page(props) {
       </Row>
     </div>
   );
-}
+};
 
-export default () => {
-  const [direction, setDirection] = useState('ltr');
-  const [popupPlacement, setPopupPlacement] = useState('bottomLeft');
+const App: React.FC = () => {
+  const [direction, setDirection] = useState<DirectionType>('ltr');
+  const [popupPlacement, setPopupPlacement] = useState<Placement>('bottomLeft');
 
-  const changeDirection = e => {
+  const changeDirection = (e: RadioChangeEvent) => {
     const directionValue = e.target.value;
     setDirection(directionValue);
     if (directionValue === 'rtl') {
@@ -557,11 +532,13 @@ export default () => {
         </Radio.Group>
       </div>
       <ConfigProvider direction={direction}>
-        <Page className={direction} popupPlacement={popupPlacement} />
+        <Page popupPlacement={popupPlacement} />
       </ConfigProvider>
     </>
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/config-provider/demo/locale.md b/components/config-provider/demo/locale.md
index 47a2251d6a..6780ad17c0 100644
--- a/components/config-provider/demo/locale.md
+++ b/components/config-provider/demo/locale.md
@@ -13,7 +13,8 @@ title:
 
 Components which need localization support are listed here, you can toggle the language in the demo.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import {
   ConfigProvider,
   Pagination,
@@ -31,6 +32,7 @@ import {
 import enUS from 'antd/lib/locale/en_US';
 import zhCN from 'antd/lib/locale/zh_CN';
 import moment from 'moment';
+import type { RadioChangeEvent } from 'antd';
 import 'moment/locale/zh-cn';
 
 moment.locale('en');
@@ -55,8 +57,8 @@ const columns = [
   },
 ];
 
-function Page() {
-  const [visible, setVisible] = React.useState(false);
+const Page = () => {
+  const [visible, setVisible] = useState(false);
 
   const showModal = () => {
     setVisible(true);
@@ -105,7 +107,7 @@ function Page() {
         </Popconfirm>
       </div>
       <div className="example">
-        <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
+        <Transfer dataSource={[]} showSearch targetKeys={[]} />
       </div>
       <div className="site-config-provider-calendar-wrapper">
         <Calendar fullscreen={false} value={moment()} />
@@ -118,14 +120,14 @@ function Page() {
       </Modal>
     </div>
   );
-}
+};
 
-export default () => {
-  const [locale, setLocale] = React.useState(enUS);
+const App: React.FC = () => {
+  const [locale, setLocal] = useState(enUS);
 
-  const changeLocale = e => {
+  const changeLocale = (e: RadioChangeEvent) => {
     const localeValue = e.target.value;
-    setLocale(localeValue);
+    setLocal(localeValue);
     if (!localeValue) {
       moment.locale('en');
     } else {
@@ -154,6 +156,8 @@ export default () => {
     </div>
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/config-provider/demo/prefixCls.md b/components/config-provider/demo/prefixCls.md
index e5a020b083..c266fc6068 100644
--- a/components/config-provider/demo/prefixCls.md
+++ b/components/config-provider/demo/prefixCls.md
@@ -14,17 +14,18 @@ debug: true
 
 Config component and icon prefixCls.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { ConfigProvider, Select, Button } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
-import React, { useState } from 'react';
 
 // Ant Design site use `es` module for view
 // but do not replace related lib `lib` with `es`
 // which do not show correct in site.
 // We may need do convert in site also.
-const FormSizeDemo = () => {
+const App: React.FC = () => {
   const [prefixCls, setPrefixCls] = useState('light');
+
   return (
     <div>
       <Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
@@ -39,5 +40,6 @@ const FormSizeDemo = () => {
     </div>
   );
 };
-export default () => <FormSizeDemo />;
+
+export default App;
 ```
diff --git a/components/config-provider/demo/size.md b/components/config-provider/demo/size.md
index 3fedcfedf2..30b2b6c044 100644
--- a/components/config-provider/demo/size.md
+++ b/components/config-provider/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 Config component default size.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import {
   ConfigProvider,
@@ -27,11 +27,13 @@ import {
   Card,
   Tabs,
 } from 'antd';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
 
 const { TabPane } = Tabs;
 
-const FormSizeDemo = () => {
-  const [componentSize, setComponentSize] = useState('small');
+const App: React.FC = () => {
+  const [componentSize, setComponentSize] = useState<SizeType>('small');
+
   return (
     <div>
       <Radio.Group
@@ -111,5 +113,6 @@ const FormSizeDemo = () => {
     </div>
   );
 };
-export default () => <FormSizeDemo />;
+
+export default App;
 ```
diff --git a/components/config-provider/demo/theme.md b/components/config-provider/demo/theme.md
index c89dff29d5..ed252c12d7 100644
--- a/components/config-provider/demo/theme.md
+++ b/components/config-provider/demo/theme.md
@@ -14,8 +14,7 @@ title:
 
 Modify global theme color by css variable which IE not support. Css variable depends on the design, it may adjust so please do not directly use it. You can go to other components page for more detail style. [Check this](/docs/react/customize-theme-variable) to view detail.
 
-```jsx
-import { SketchPicker } from 'react-color';
+```tsx
 import React, { useState } from 'react';
 import {
   DownOutlined,
@@ -58,8 +57,12 @@ import {
   Spin,
   Transfer,
 } from 'antd';
+import { SketchPicker } from 'react-color';
+import type { SpaceProps, TreeSelectProps } from 'antd';
 
-const SplitSpace = props => <Space split={<Divider type="vertical" />} size={4} {...props} />;
+const SplitSpace: React.FC<SpaceProps> = props => (
+  <Space split={<Divider type="vertical" />} size={4} {...props} />
+);
 
 const menuItems = [
   {
@@ -116,7 +119,7 @@ const treeData = [
   },
 ];
 
-const treeSelectProps = {
+const treeSelectProps: TreeSelectProps = {
   ...inputProps,
   treeCheckable: true,
   maxTagCount: 'responsive',
@@ -158,7 +161,7 @@ const MyTransfer = () => {
   );
 };
 
-const FormSizeDemo = () => {
+const App: React.FC = () => {
   const [color, setColor] = useState({
     primaryColor: '#1890ff',
     errorColor: '#ff4d4f',
@@ -167,7 +170,7 @@ const FormSizeDemo = () => {
     infoColor: '#1890ff',
   });
 
-  function onColorChange(nextColor) {
+  const onColorChange = (nextColor: Partial<typeof color>) => {
     const mergedNextColor = {
       ...color,
       ...nextColor,
@@ -176,7 +179,7 @@ const FormSizeDemo = () => {
     ConfigProvider.config({
       theme: mergedNextColor,
     });
-  }
+  };
 
   return (
     <Row gutter={16} wrap={false}>
@@ -313,9 +316,11 @@ const FormSizeDemo = () => {
                 <Menu
                   items={[
                     {
+                      key: '1',
                       label: '1st menu item',
                     },
                     {
+                      key: '2',
                       label: 'a danger item',
                       danger: true,
                     },
@@ -634,5 +639,6 @@ const FormSizeDemo = () => {
     </Row>
   );
 };
-export default () => <FormSizeDemo />;
+
+export default App;
 ```
diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index d4ef7ab3eb..a123d4a647 100644
--- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -40614,14 +40614,14 @@ exports[`renders ./components/date-picker/demo/size.md extend context correctly
             checked=""
             class="ant-radio-button-input"
             type="radio"
-            value="default"
+            value="middle"
           />
           <span
             class="ant-radio-button-inner"
           />
         </span>
         <span>
-          Default
+          middle
         </span>
       </label>
       <label
@@ -40650,7 +40650,7 @@ exports[`renders ./components/date-picker/demo/size.md extend context correctly
     style="margin-bottom:12px"
   >
     <div
-      class="ant-picker ant-picker-default"
+      class="ant-picker ant-picker-middle"
     >
       <div
         class="ant-picker-input"
@@ -41248,7 +41248,7 @@ exports[`renders ./components/date-picker/demo/size.md extend context correctly
     style="margin-bottom:12px"
   >
     <div
-      class="ant-picker ant-picker-default"
+      class="ant-picker ant-picker-middle"
     >
       <div
         class="ant-picker-input"
@@ -41482,7 +41482,7 @@ exports[`renders ./components/date-picker/demo/size.md extend context correctly
     style="margin-bottom:12px"
   >
     <div
-      class="ant-picker ant-picker-range ant-picker-default"
+      class="ant-picker ant-picker-range ant-picker-middle"
     >
       <div
         class="ant-picker-input ant-picker-input-active"
@@ -42664,7 +42664,7 @@ exports[`renders ./components/date-picker/demo/size.md extend context correctly
     class="ant-space-item"
   >
     <div
-      class="ant-picker ant-picker-default"
+      class="ant-picker ant-picker-middle"
     >
       <div
         class="ant-picker-input"
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
index 435ac44b15..b0acd14a62 100644
--- a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -3383,14 +3383,14 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
             checked=""
             class="ant-radio-button-input"
             type="radio"
-            value="default"
+            value="middle"
           />
           <span
             class="ant-radio-button-inner"
           />
         </span>
         <span>
-          Default
+          middle
         </span>
       </label>
       <label
@@ -3419,7 +3419,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
     style="margin-bottom:12px"
   >
     <div
-      class="ant-picker ant-picker-default"
+      class="ant-picker ant-picker-middle"
     >
       <div
         class="ant-picker-input"
@@ -3463,7 +3463,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
     style="margin-bottom:12px"
   >
     <div
-      class="ant-picker ant-picker-default"
+      class="ant-picker ant-picker-middle"
     >
       <div
         class="ant-picker-input"
@@ -3507,7 +3507,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
     style="margin-bottom:12px"
   >
     <div
-      class="ant-picker ant-picker-range ant-picker-default"
+      class="ant-picker ant-picker-range ant-picker-middle"
     >
       <div
         class="ant-picker-input ant-picker-input-active"
@@ -3592,7 +3592,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker ant-picker-default"
+      class="ant-picker ant-picker-middle"
     >
       <div
         class="ant-picker-input"
diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md
index 5507c558cc..72ccdca4b9 100644
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@@ -13,14 +13,16 @@ title:
 
 Basic use case. Users can select or input a date in panel.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
+import type { DatePickerProps } from 'antd';
 
-function onChange(date, dateString) {
+const onChange: DatePickerProps['onChange'] = (date, dateString) => {
   console.log(date, dateString);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <DatePicker onChange={onChange} />
     <DatePicker onChange={onChange} picker="week" />
@@ -29,4 +31,6 @@ export default () => (
     <DatePicker onChange={onChange} picker="year" />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/bordered.md b/components/date-picker/demo/bordered.md
index f73ae783a5..ef94d40af3 100644
--- a/components/date-picker/demo/bordered.md
+++ b/components/date-picker/demo/bordered.md
@@ -13,12 +13,13 @@ title:
 
 Bordered-less style component.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <DatePicker bordered={false} />
     <DatePicker picker="week" bordered={false} />
@@ -30,4 +31,6 @@ export default () => (
     <RangePicker picker="year" bordered={false} />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/date-render.md b/components/date-picker/demo/date-render.md
index f5317b88b1..5afed808b0 100644
--- a/components/date-picker/demo/date-render.md
+++ b/components/date-picker/demo/date-render.md
@@ -13,16 +13,17 @@ title:
 
 We can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <DatePicker
       dateRender={current => {
-        const style = {};
+        const style: React.CSSProperties = {};
         if (current.date() === 1) {
           style.border = '1px solid #1890ff';
           style.borderRadius = '50%';
@@ -36,7 +37,7 @@ export default () => (
     />
     <RangePicker
       dateRender={current => {
-        const style = {};
+        const style: React.CSSProperties = {};
         if (current.date() === 1) {
           style.border = '1px solid #1890ff';
           style.borderRadius = '50%';
@@ -50,4 +51,6 @@ export default () => (
     />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md
index 11d58bc8fb..3a31c9e9f1 100644
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@@ -13,34 +13,35 @@ title:
 
 Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
 
-```jsx
+```tsx
+import React from 'react';
 import moment from 'moment';
 import { DatePicker, Space } from 'antd';
+import type { RangePickerProps } from 'antd/es/date-picker';
 
 const { RangePicker } = DatePicker;
 
-function range(start, end) {
+const range = (start: number, end: number) => {
   const result = [];
   for (let i = start; i < end; i++) {
     result.push(i);
   }
   return result;
-}
+};
 
-function disabledDate(current) {
+// eslint-disable-next-line arrow-body-style
+const disabledDate: RangePickerProps['disabledDate'] = current => {
   // Can not select days before today and today
   return current && current < moment().endOf('day');
-}
+};
 
-function disabledDateTime() {
-  return {
-    disabledHours: () => range(0, 24).splice(4, 20),
-    disabledMinutes: () => range(30, 60),
-    disabledSeconds: () => [55, 56],
-  };
-}
+const disabledDateTime = () => ({
+  disabledHours: () => range(0, 24).splice(4, 20),
+  disabledMinutes: () => range(30, 60),
+  disabledSeconds: () => [55, 56],
+});
 
-function disabledRangeTime(_, type) {
+const disabledRangeTime: RangePickerProps['disabledTime'] = (_, type) => {
   if (type === 'start') {
     return {
       disabledHours: () => range(0, 60).splice(4, 20),
@@ -53,9 +54,9 @@ function disabledRangeTime(_, type) {
     disabledMinutes: () => range(0, 31),
     disabledSeconds: () => [55, 56],
   };
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <DatePicker
       format="YYYY-MM-DD HH:mm:ss"
@@ -76,4 +77,6 @@ export default () => (
     />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md
index 1cad077131..799244c3ed 100644
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@@ -13,14 +13,16 @@ title:
 
 A disabled state of the `DatePicker`. You can also set as array to disable one of input.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
 import moment from 'moment';
 
 const { RangePicker } = DatePicker;
 
 const dateFormat = 'YYYY-MM-DD';
-export default () => (
+
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
     <DatePicker picker="month" defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
@@ -34,4 +36,6 @@ export default () => (
     />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/extra-footer.md b/components/date-picker/demo/extra-footer.md
index 8f2435e4df..6dbd7db2cb 100644
--- a/components/date-picker/demo/extra-footer.md
+++ b/components/date-picker/demo/extra-footer.md
@@ -13,12 +13,13 @@ title:
 
 Render extra footer in panel for customized requirements.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <DatePicker renderExtraFooter={() => 'extra footer'} />
     <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
@@ -27,4 +28,6 @@ export default () => (
     <DatePicker renderExtraFooter={() => 'extra footer'} picker="month" />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md
index f10777a6a3..148bb43e20 100644
--- a/components/date-picker/demo/format.md
+++ b/components/date-picker/demo/format.md
@@ -13,9 +13,11 @@ title:
 
 We can set the date format by `format`.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
 import moment from 'moment';
+import type { DatePickerProps } from 'antd';
 
 const { RangePicker } = DatePicker;
 
@@ -25,14 +27,15 @@ const monthFormat = 'YYYY/MM';
 
 const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
 
-const customFormat = value => `custom format: ${value.format(dateFormat)}`;
+const customFormat: DatePickerProps['format'] = value =>
+  `custom format: ${value.format(dateFormat)}`;
 
-const customWeekStartEndFormat = value =>
+const customWeekStartEndFormat: DatePickerProps['format'] = value =>
   `${moment(value).startOf('week').format(weekFormat)} ~ ${moment(value)
     .endOf('week')
     .format(weekFormat)}`;
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
     <DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
@@ -45,4 +48,6 @@ export default () => (
     <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={customFormat} />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/mode.md b/components/date-picker/demo/mode.md
index 13e4ddb17b..dedbd4d74a 100644
--- a/components/date-picker/demo/mode.md
+++ b/components/date-picker/demo/mode.md
@@ -14,23 +14,28 @@ debug: true
 
 Determing which panel to show with `mode` and `onPanelChange`.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { DatePicker, Space } from 'antd';
+import type { RangePickerProps } from 'antd/es/date-picker';
+import type { Moment } from 'moment';
+import type { DatePickerProps } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-function ControlledDatePicker() {
-  const [mode, setMode] = useState('time');
+type RangeValue = [Moment | null, Moment | null] | null;
 
-  const handleOpenChange = open => {
+const ControlledDatePicker = () => {
+  const [mode, setMode] = useState<DatePickerProps['mode']>('time');
+
+  const handleOpenChange = (open: boolean) => {
     if (open) {
       setMode('time');
     }
   };
 
-  const handlePanelChange = (value, dateMode) => {
-    setMode(dateMode);
+  const handlePanelChange: DatePickerProps['onPanelChange'] = (_, newMode) => {
+    setMode(newMode);
   };
 
   return (
@@ -41,40 +46,38 @@ function ControlledDatePicker() {
       onPanelChange={handlePanelChange}
     />
   );
-}
+};
 
-function ControlledRangePicker() {
-  const [mode, setMode] = useState(['month', 'month']);
-  const [value, setValue] = useState([]);
+const ControlledRangePicker = () => {
+  const [mode, setMode] = useState<RangePickerProps['mode']>(['month', 'month']);
+  const [value, setValue] = useState<RangeValue>([null, null]);
 
-  const handlePanelChange = (dateValue, dateMode) => {
-    setValue(dateValue);
+  const handlePanelChange: RangePickerProps['onPanelChange'] = (newValue, newModes) => {
+    setValue(newValue);
     setMode([
-      dateMode[0] === 'date' ? 'month' : dateMode[0],
-      dateMode[1] === 'date' ? 'month' : dateMode[1],
+      newModes[0] === 'date' ? 'month' : newModes[0],
+      newModes[1] === 'date' ? 'month' : newModes[1],
     ]);
   };
 
-  const handleChange = dateValue => {
-    setValue(dateValue);
-  };
-
   return (
     <RangePicker
       placeholder={['Start month', 'End month']}
       format="YYYY-MM"
       value={value}
       mode={mode}
-      onChange={handleChange}
+      onChange={setValue}
       onPanelChange={handlePanelChange}
     />
   );
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <ControlledDatePicker />
     <ControlledRangePicker />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/placement.md b/components/date-picker/demo/placement.md
index 74007c7265..e82e2ef1f0 100644
--- a/components/date-picker/demo/placement.md
+++ b/components/date-picker/demo/placement.md
@@ -13,15 +13,17 @@ title:
 
 You can manually specify the position of the popup via `placement`.
 
-```jsx
-import { DatePicker, Space, Radio } from 'antd';
+```tsx
+import React, { useState } from 'react';
+import { DatePicker, Radio } from 'antd';
+import type { DatePickerProps, RadioChangeEvent } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-const SetPlacementDemo = () => {
-  const [placement, SetPlacement] = React.useState('topLeft');
+const App: React.FC = () => {
+  const [placement, SetPlacement] = useState<DatePickerProps['placement']>('topLeft');
 
-  const placementChange = e => {
+  const placementChange = (e: RadioChangeEvent) => {
     SetPlacement(e.target.value);
   };
 
@@ -43,5 +45,5 @@ const SetPlacementDemo = () => {
   );
 };
 
-export default () => <SetPlacementDemo />;
+export default App;
 ```
diff --git a/components/date-picker/demo/presetted-ranges.md b/components/date-picker/demo/presetted-ranges.md
index 4702a2a520..7ad6ca02be 100644
--- a/components/date-picker/demo/presetted-ranges.md
+++ b/components/date-picker/demo/presetted-ranges.md
@@ -13,22 +13,24 @@ title:
 
 We can set preset ranges to RangePicker to improve user experience.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
 import moment from 'moment';
+import type { RangePickerProps } from 'antd/es/date-picker';
 
 const { RangePicker } = DatePicker;
 
-function onChange(dates, dateStrings) {
+const onChange: RangePickerProps['onChange'] = (dates, dateStrings) => {
   if (dates) {
     console.log('From: ', dates[0], ', to: ', dates[1]);
     console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
   } else {
     console.log('Clear');
   }
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <RangePicker
       ranges={{
@@ -48,4 +50,6 @@ export default () => (
     />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/range-picker.md b/components/date-picker/demo/range-picker.md
index 0bcdcbd528..2d44c88701 100644
--- a/components/date-picker/demo/range-picker.md
+++ b/components/date-picker/demo/range-picker.md
@@ -13,12 +13,13 @@ title:
 
 Set range picker type by `picker` prop.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <RangePicker />
     <RangePicker showTime />
@@ -28,4 +29,6 @@ export default () => (
     <RangePicker picker="year" />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/select-in-range.md b/components/date-picker/demo/select-in-range.md
index 9a7a8e03fa..1d7d3697fd 100644
--- a/components/date-picker/demo/select-in-range.md
+++ b/components/date-picker/demo/select-in-range.md
@@ -13,31 +13,35 @@ title:
 
 A example shows how to select a dynamic range by using `onCalendarChange` and `disabledDate`.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { DatePicker } from 'antd';
+import type { Moment } from 'moment';
 
 const { RangePicker } = DatePicker;
 
-const App = () => {
-  const [dates, setDates] = useState([]);
-  const [hackValue, setHackValue] = useState();
-  const [value, setValue] = useState();
-  const disabledDate = current => {
-    if (!dates || dates.length === 0) {
+type RangeValue = [Moment | null, Moment | null] | null;
+
+const App: React.FC = () => {
+  const [dates, setDates] = useState<RangeValue>(null);
+  const [hackValue, setHackValue] = useState<RangeValue>(null);
+  const [value, setValue] = useState<RangeValue>(null);
+
+  const disabledDate = (current: Moment) => {
+    if (!dates) {
       return false;
     }
     const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
     const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
-    return tooEarly || tooLate;
+    return !!tooEarly || !!tooLate;
   };
 
-  const onOpenChange = open => {
+  const onOpenChange = (open: boolean) => {
     if (open) {
-      setHackValue([]);
-      setDates([]);
+      setHackValue([null, null]);
+      setDates([null, null]);
     } else {
-      setHackValue(undefined);
+      setHackValue(null);
     }
   };
 
diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md
index 69a5248da1..ea36eb94f9 100644
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@@ -7,21 +7,24 @@ title:
 
 ## zh-CN
 
-三种大小的输入框，若不设置，则为 `default`。
+三种大小的输入框，若不设置，则为 `middle`。
 
 ## en-US
 
-The input box comes in three sizes. `default` will be used if `size` is omitted.
+The input box comes in three sizes. `middle` will be used if `size` is omitted.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { DatePicker, Radio, Space } from 'antd';
+import type { RadioChangeEvent } from 'antd';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
 
 const { RangePicker } = DatePicker;
 
-export default () => {
-  const [size, setSize] = React.useState('default');
+const App: React.FC = () => {
+  const [size, setSize] = useState<SizeType>('middle');
 
-  const handleSizeChange = e => {
+  const handleSizeChange = (e: RadioChangeEvent) => {
     setSize(e.target.value);
   };
 
@@ -29,7 +32,7 @@ export default () => {
     <Space direction="vertical" size={12}>
       <Radio.Group value={size} onChange={handleSizeChange}>
         <Radio.Button value="large">Large</Radio.Button>
-        <Radio.Button value="default">Default</Radio.Button>
+        <Radio.Button value="middle">middle</Radio.Button>
         <Radio.Button value="small">Small</Radio.Button>
       </Radio.Group>
       <DatePicker size={size} />
@@ -39,4 +42,6 @@ export default () => {
     </Space>
   );
 };
+
+export default App;
 ```
diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md
index 0b56b2156b..c44ad21984 100644
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@@ -20,55 +20,38 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
 > - Use the `disabledDate` property to limit the start and end dates.
 > - Improve user experience with `open` and `onOpenChange`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { DatePicker, Space } from 'antd';
+import type { Moment } from 'moment';
 
-export default () => {
-  const [state, setState] = React.useState({
-    startValue: null,
-    endValue: null,
-    endOpen: false,
-  });
+const App: React.FC = () => {
+  const [startValue, setStartValue] = useState<Moment | null>(null);
+  const [endValue, setEndValue] = useState<Moment | null>(null);
+  const [endOpen, setEndOpen] = useState(false);
 
-  const disabledStartDate = startValue => {
-    const { endValue } = state;
-    if (!startValue || !endValue) {
+  const disabledStartDate = (startDate: Moment) => {
+    if (!startDate || !endValue) {
       return false;
     }
-    return startValue.valueOf() > endValue.valueOf();
+    return startDate.valueOf() > endValue.valueOf();
   };
 
-  const disabledEndDate = endValue => {
-    const { startValue } = state;
-    if (!endValue || !startValue) {
+  const disabledEndDate = (endDate: Moment) => {
+    if (!endDate || !startValue) {
       return false;
     }
-    return endValue.valueOf() <= startValue.valueOf();
+    return endDate.valueOf() <= startValue.valueOf();
   };
 
-  const onChange = (field, value) => {
-    setState({
-      ...state,
-      [field]: value,
-    });
-  };
-
-  const onStartChange = value => {
-    onChange('startValue', value);
-  };
-
-  const onEndChange = value => {
-    onChange('endValue', value);
-  };
-
-  const handleStartOpenChange = open => {
+  const handleStartOpenChange = (open: boolean) => {
     if (!open) {
-      setState({ ...state, endOpen: true });
+      setEndOpen(true);
     }
   };
 
-  const handleEndOpenChange = open => {
-    setState({ ...state, endOpen: true });
+  const handleEndOpenChange = (open: boolean) => {
+    setEndOpen(open);
   };
 
   return (
@@ -77,22 +60,24 @@ export default () => {
         disabledDate={disabledStartDate}
         showTime
         format="YYYY-MM-DD HH:mm:ss"
-        value={state.startValue}
+        value={startValue}
         placeholder="Start"
-        onChange={onStartChange}
+        onChange={setStartValue}
         onOpenChange={handleStartOpenChange}
       />
       <DatePicker
         disabledDate={disabledEndDate}
         showTime
         format="YYYY-MM-DD HH:mm:ss"
-        value={state.endValue}
+        value={endValue}
         placeholder="End"
-        onChange={onEndChange}
-        open={state.endOpen}
+        onChange={setEndValue}
+        open={endOpen}
         onOpenChange={handleEndOpenChange}
       />
     </Space>
   );
 };
+
+export default App;
 ```
diff --git a/components/date-picker/demo/status.md b/components/date-picker/demo/status.md
index 454c0b3801..4d9770b267 100644
--- a/components/date-picker/demo/status.md
+++ b/components/date-picker/demo/status.md
@@ -15,9 +15,10 @@ title:
 Add status to DatePicker with `status`, which could be `error` or `warning`.
 
 ```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
 
-const Status: React.FC = () => (
+const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <DatePicker status="error" style={{ width: '100%' }} />
     <DatePicker status="warning" style={{ width: '100%' }} />
@@ -26,5 +27,5 @@ const Status: React.FC = () => (
   </Space>
 );
 
-export default () => <Status />;
+export default App;
 ```
diff --git a/components/date-picker/demo/suffix.md b/components/date-picker/demo/suffix.md
index 1cdeeb59e8..b153561717 100644
--- a/components/date-picker/demo/suffix.md
+++ b/components/date-picker/demo/suffix.md
@@ -14,18 +14,26 @@ title:
 
 Basic use case. Users can select or input a date in panel.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
+import type { Moment } from 'moment';
 
 const smileIcon = <SmileOutlined />;
 const { RangePicker } = DatePicker;
 
-function onChange(date, dateString) {
-  console.log(date, dateString);
-}
+type DatePickerValue = Moment | null;
+type RangePickerValue = [Moment | null, Moment | null] | null;
 
-export default () => (
+const onChange = (
+  date: DatePickerValue | RangePickerValue,
+  dateString: [string, string] | string,
+) => {
+  console.log(date, dateString);
+};
+
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <DatePicker suffixIcon={smileIcon} onChange={onChange} />
     <DatePicker suffixIcon={smileIcon} onChange={onChange} picker="month" />
@@ -37,4 +45,6 @@ export default () => (
     <DatePicker suffixIcon="ab" onChange={onChange} picker="week" />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/date-picker/demo/switchable.md b/components/date-picker/demo/switchable.md
index 66b3331ca7..2a1801da59 100644
--- a/components/date-picker/demo/switchable.md
+++ b/components/date-picker/demo/switchable.md
@@ -13,20 +13,30 @@ title:
 
 Switch in different types of pickers by Select.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { DatePicker, TimePicker, Select, Space } from 'antd';
+import type { TimePickerProps, DatePickerProps } from 'antd';
 
 const { Option } = Select;
 
-function PickerWithType({ type, onChange }) {
+type PickerType = 'time' | 'date';
+
+const PickerWithType = ({
+  type,
+  onChange,
+}: {
+  type: PickerType;
+  onChange: TimePickerProps['onChange'] | DatePickerProps['onChange'];
+}) => {
   if (type === 'time') return <TimePicker onChange={onChange} />;
   if (type === 'date') return <DatePicker onChange={onChange} />;
   return <DatePicker picker={type} onChange={onChange} />;
-}
+};
+
+const App: React.FC = () => {
+  const [type, setType] = useState<PickerType>('time');
 
-function SwitchablePicker() {
-  const [type, setType] = useState('time');
   return (
     <Space>
       <Select value={type} onChange={setType}>
@@ -40,7 +50,7 @@ function SwitchablePicker() {
       <PickerWithType type={type} onChange={value => console.log(value)} />
     </Space>
   );
-}
+};
 
-export default () => <SwitchablePicker />;
+export default App;
 ```
diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md
index af777cf1ef..81d54f94fe 100644
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@@ -13,21 +13,26 @@ title:
 
 This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
 
-```jsx
+```tsx
+import React from 'react';
 import { DatePicker, Space } from 'antd';
+import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
 
 const { RangePicker } = DatePicker;
 
-function onChange(value, dateString) {
+const onChange = (
+  value: DatePickerProps['value'] | RangePickerProps['value'],
+  dateString: [string, string] | string,
+) => {
   console.log('Selected Time: ', value);
   console.log('Formatted Selected Time: ', dateString);
-}
+};
 
-function onOk(value) {
+const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
   console.log('onOk: ', value);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <DatePicker showTime onChange={onChange} onOk={onOk} />
     <RangePicker
@@ -38,4 +43,6 @@ export default () => (
     />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/descriptions/demo/basic.md b/components/descriptions/demo/basic.md
index e84f31a541..51b1596cc1 100644
--- a/components/descriptions/demo/basic.md
+++ b/components/descriptions/demo/basic.md
@@ -13,10 +13,11 @@ title:
 
 Simplest Usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Descriptions } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Descriptions title="User Info">
     <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
     <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
@@ -27,4 +28,6 @@ export default () => (
     </Descriptions.Item>
   </Descriptions>
 );
+
+export default App;
 ```
diff --git a/components/descriptions/demo/border.md b/components/descriptions/demo/border.md
index 2abf6717a4..75a7600fe3 100644
--- a/components/descriptions/demo/border.md
+++ b/components/descriptions/demo/border.md
@@ -13,10 +13,11 @@ title:
 
 Descriptions with border and background color.
 
-```jsx
+```tsx
+import React from 'react';
 import { Descriptions, Badge } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Descriptions title="User Info" bordered>
     <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
     <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
@@ -46,4 +47,6 @@ export default () => (
     </Descriptions.Item>
   </Descriptions>
 );
+
+export default App;
 ```
diff --git a/components/descriptions/demo/responsive.md b/components/descriptions/demo/responsive.md
index ee3f14f1cb..34e8878550 100644
--- a/components/descriptions/demo/responsive.md
+++ b/components/descriptions/demo/responsive.md
@@ -13,10 +13,11 @@ title:
 
 Responsive configuration enables perfect presentation on small screen devices.
 
-```jsx
+```tsx
+import React from 'react';
 import { Descriptions } from 'antd';
 
-const Demo = () => (
+const App: React.FC = () => (
   <div>
     <Descriptions
       title="Responsive Descriptions"
@@ -46,5 +47,5 @@ const Demo = () => (
   </div>
 );
 
-export default Demo;
+export default App;
 ```
diff --git a/components/descriptions/demo/size.md b/components/descriptions/demo/size.md
index d8488da32f..35d8a64515 100644
--- a/components/descriptions/demo/size.md
+++ b/components/descriptions/demo/size.md
@@ -13,13 +13,15 @@ title:
 
 Custom sizes to fit in a variety of containers.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Descriptions, Radio, Button } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
-export default () => {
-  const [size, setSize] = React.useState('default');
+const App: React.FC = () => {
+  const [size, setSize] = useState<'default' | 'middle' | 'small'>('default');
 
-  const onChange = e => {
+  const onChange = (e: RadioChangeEvent) => {
     console.log('size checked', e.target.value);
     setSize(e.target.value);
   };
@@ -72,4 +74,6 @@ export default () => {
     </div>
   );
 };
+
+export default App;
 ```
diff --git a/components/descriptions/demo/style.md b/components/descriptions/demo/style.md
index 6ed0ddf656..924fc9e56f 100644
--- a/components/descriptions/demo/style.md
+++ b/components/descriptions/demo/style.md
@@ -15,6 +15,7 @@ debug: true
 Customize label & wrapper style
 
 ```tsx
+import React, { useState } from 'react';
 import { Descriptions, Divider, Switch, Radio } from 'antd';
 
 const labelStyle: React.CSSProperties = { background: 'red' };
@@ -22,9 +23,9 @@ const contentStyle: React.CSSProperties = { background: 'green' };
 
 type LayoutType = 'horizontal' | 'vertical' | undefined;
 
-const Demo = () => {
-  const [border, setBorder] = React.useState(true);
-  const [layout, setLayout] = React.useState('horizontal' as LayoutType);
+const App: React.FC = () => {
+  const [border, setBorder] = useState(true);
+  const [layout, setLayout] = useState('horizontal' as LayoutType);
 
   return (
     <>
@@ -69,5 +70,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/descriptions/demo/text.md b/components/descriptions/demo/text.md
index 93c3060ae1..77fdf67091 100644
--- a/components/descriptions/demo/text.md
+++ b/components/descriptions/demo/text.md
@@ -14,7 +14,8 @@ title:
 
 Descriptions with border and background color.
 
-```jsx
+```tsx
+import React from 'react';
 import { Descriptions, Badge, Table } from 'antd';
 
 const dataSource = [
@@ -49,7 +50,8 @@ const columns = [
     key: 'address',
   },
 ];
-export default () => (
+
+const App: React.FC = () => (
   <Descriptions title="User Info" column={2}>
     <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
     <Descriptions.Item label={<div style={{ display: 'flex' }}>Billing Mode</div>}>
@@ -85,4 +87,6 @@ export default () => (
     </Descriptions.Item>
   </Descriptions>
 );
+
+export default App;
 ```
diff --git a/components/descriptions/demo/vertical-border.md b/components/descriptions/demo/vertical-border.md
index a90a67c9c1..16600d412b 100644
--- a/components/descriptions/demo/vertical-border.md
+++ b/components/descriptions/demo/vertical-border.md
@@ -13,10 +13,11 @@ title:
 
 Descriptions with border and background color.
 
-```jsx
+```tsx
+import React from 'react';
 import { Descriptions, Badge } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Descriptions title="User Info" layout="vertical" bordered>
     <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
     <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
@@ -46,4 +47,6 @@ export default () => (
     </Descriptions.Item>
   </Descriptions>
 );
+
+export default App;
 ```
diff --git a/components/descriptions/demo/vertical.md b/components/descriptions/demo/vertical.md
index a2713726e8..43fd06fe15 100644
--- a/components/descriptions/demo/vertical.md
+++ b/components/descriptions/demo/vertical.md
@@ -13,10 +13,11 @@ title:
 
 Simplest Usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Descriptions } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Descriptions title="User Info" layout="vertical">
     <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
     <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
@@ -27,4 +28,6 @@ export default () => (
     <Descriptions.Item label="Remark">empty</Descriptions.Item>
   </Descriptions>
 );
+
+export default App;
 ```
diff --git a/components/divider/demo/customize-style.md b/components/divider/demo/customize-style.md
index 14b8597453..e4e0f02c32 100644
--- a/components/divider/demo/customize-style.md
+++ b/components/divider/demo/customize-style.md
@@ -14,10 +14,11 @@ debug: true
 
 Use `style` to change default style.
 
-```jsx
+```tsx
+import React from 'react';
 import { Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider style={{ borderWidth: 2, borderColor: '#7cb305' }} />
     <Divider style={{ borderColor: '#7cb305' }} dashed />
@@ -28,4 +29,6 @@ export default () => (
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
   </>
 );
+
+export default App;
 ```
diff --git a/components/divider/demo/horizontal.md b/components/divider/demo/horizontal.md
index 33e9d02b4a..ba38697167 100644
--- a/components/divider/demo/horizontal.md
+++ b/components/divider/demo/horizontal.md
@@ -13,10 +13,11 @@ title:
 
 Divider is `horizontal` by default. You can add text within Divider.
 
-```jsx
+```tsx
+import React from 'react';
 import { Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
@@ -34,4 +35,6 @@ export default () => (
     </p>
   </>
 );
+
+export default App;
 ```
diff --git a/components/divider/demo/plain.md b/components/divider/demo/plain.md
index b4bf5438e7..5b9a970ae1 100644
--- a/components/divider/demo/plain.md
+++ b/components/divider/demo/plain.md
@@ -13,10 +13,11 @@ title:
 
 You can use non-heading style of divider text by setting `plain`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
@@ -43,4 +44,6 @@ export default () => (
     </p>
   </>
 );
+
+export default App;
 ```
diff --git a/components/divider/demo/vertical.md b/components/divider/demo/vertical.md
index 554b8c470b..3faaf64eb2 100644
--- a/components/divider/demo/vertical.md
+++ b/components/divider/demo/vertical.md
@@ -13,10 +13,11 @@ title:
 
 Use `type="vertical"` make it vertical.
 
-```jsx
+```tsx
+import React from 'react';
 import { Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     Text
     <Divider type="vertical" />
@@ -25,4 +26,6 @@ export default () => (
     <a href="#">Link</a>
   </>
 );
+
+export default App;
 ```
diff --git a/components/divider/demo/with-text.md b/components/divider/demo/with-text.md
index d27d1830d0..4b42b9bf7e 100644
--- a/components/divider/demo/with-text.md
+++ b/components/divider/demo/with-text.md
@@ -13,10 +13,11 @@ title:
 
 Divider with inner title, set `orientation="left/right"` to align it.
 
-```jsx
+```tsx
+import React from 'react';
 import { Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
@@ -53,4 +54,6 @@ export default () => (
     </p>
   </>
 );
+
+export default App;
 ```
diff --git a/components/drawer/demo/basic-right.md b/components/drawer/demo/basic-right.md
index be71663ffa..a68d328057 100644
--- a/components/drawer/demo/basic-right.md
+++ b/components/drawer/demo/basic-right.md
@@ -19,12 +19,15 @@ import { Drawer, Button } from 'antd';
 
 const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
+
   const showDrawer = () => {
     setVisible(true);
   };
+
   const onClose = () => {
     setVisible(false);
   };
+
   return (
     <>
       <Button type="primary" onClick={showDrawer}>
diff --git a/components/drawer/demo/config-provider.md b/components/drawer/demo/config-provider.md
index d08732f819..554eb79a2b 100644
--- a/components/drawer/demo/config-provider.md
+++ b/components/drawer/demo/config-provider.md
@@ -21,12 +21,15 @@ import { Drawer, ConfigProvider, Button } from 'antd';
 const App: React.FC = () => {
   const domRef = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
+
   const showDrawer = () => {
     setVisible(true);
   };
+
   const onClose = () => {
     setVisible(false);
   };
+
   return (
     <ConfigProvider getPopupContainer={() => domRef.current!}>
       <div ref={domRef} className="site-drawer-render-in-current-wrapper">
diff --git a/components/drawer/demo/extra.md b/components/drawer/demo/extra.md
index a9b36b085a..6bd9496bc6 100644
--- a/components/drawer/demo/extra.md
+++ b/components/drawer/demo/extra.md
@@ -22,15 +22,19 @@ import type { RadioChangeEvent } from 'antd/es/radio';
 const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
   const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
+
   const showDrawer = () => {
     setVisible(true);
   };
+
   const onChange = (e: RadioChangeEvent) => {
     setPlacement(e.target.value);
   };
+
   const onClose = () => {
     setVisible(false);
   };
+
   return (
     <>
       <Space>
diff --git a/components/drawer/demo/form-in-drawer.md b/components/drawer/demo/form-in-drawer.md
index a79cecffee..209c9cd95c 100644
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@@ -13,14 +13,15 @@ title:
 
 Use a form in Drawer with a submit button.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
-export default () => {
-  const [visible, setVisible] = React.useState(false);
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
 
   const showDrawer = () => {
     setVisible(true);
@@ -123,7 +124,7 @@ export default () => {
               >
                 <DatePicker.RangePicker
                   style={{ width: '100%' }}
-                  getPopupContainer={trigger => trigger.parentElement}
+                  getPopupContainer={trigger => trigger.parentElement!}
                 />
               </Form.Item>
             </Col>
@@ -149,6 +150,8 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/drawer/demo/multi-level-drawer.md b/components/drawer/demo/multi-level-drawer.md
index 63844c4568..27925ecaed 100644
--- a/components/drawer/demo/multi-level-drawer.md
+++ b/components/drawer/demo/multi-level-drawer.md
@@ -13,12 +13,13 @@ title:
 
 Open a new drawer on top of an existing drawer to handle multi branch tasks.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Drawer, Button } from 'antd';
 
-export default () => {
-  const [visible, setVisible] = React.useState(false);
-  const [childrenDrawer, setChildrenDrawer] = React.useState(false);
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [childrenDrawer, setChildrenDrawer] = useState(false);
 
   const showDrawer = () => {
     setVisible(true);
@@ -64,6 +65,8 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
 
 <style>
diff --git a/components/drawer/demo/no-mask.md b/components/drawer/demo/no-mask.md
index 548b1f30f3..fd270b1b57 100644
--- a/components/drawer/demo/no-mask.md
+++ b/components/drawer/demo/no-mask.md
@@ -20,12 +20,15 @@ import { Drawer, Button } from 'antd';
 
 const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
+
   const showDrawer = () => {
     setVisible(true);
   };
+
   const onClose = () => {
     setVisible(false);
   };
+
   return (
     <>
       <Button type="primary" onClick={showDrawer}>
diff --git a/components/drawer/demo/placement.md b/components/drawer/demo/placement.md
index 4645f0173e..d4c8d94840 100644
--- a/components/drawer/demo/placement.md
+++ b/components/drawer/demo/placement.md
@@ -13,12 +13,14 @@ title:
 
 The Drawer can appear from any edge of the screen.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Drawer, Button, Radio, Space } from 'antd';
+import type { DrawerProps, RadioChangeEvent } from 'antd';
 
-export default () => {
-  const [visible, setVisible] = React.useState(false);
-  const [placement, setPlacement] = React.useState('left');
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [placement, setPlacement] = useState<DrawerProps['placement']>('left');
 
   const showDrawer = () => {
     setVisible(true);
@@ -28,7 +30,7 @@ export default () => {
     setVisible(false);
   };
 
-  const onChange = e => {
+  const onChange = (e: RadioChangeEvent) => {
     setPlacement(e.target.value);
   };
 
@@ -60,4 +62,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/drawer/demo/render-in-current.md b/components/drawer/demo/render-in-current.md
index d89b44c6a9..3ae95447ef 100644
--- a/components/drawer/demo/render-in-current.md
+++ b/components/drawer/demo/render-in-current.md
@@ -13,11 +13,12 @@ title:
 
 Render in current dom. custom container, check `getContainer`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Drawer, Button } from 'antd';
 
-export default () => {
-  const [visible, setVisible] = React.useState(false);
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
 
   const showDrawer = () => {
     setVisible(true);
@@ -49,6 +50,8 @@ export default () => {
     </div>
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/drawer/demo/size.md b/components/drawer/demo/size.md
index 9c792aa91a..7f165dc4cd 100644
--- a/components/drawer/demo/size.md
+++ b/components/drawer/demo/size.md
@@ -21,17 +21,21 @@ import type { DrawerProps } from 'antd/es/drawer';
 const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
   const [size, setSize] = useState<DrawerProps['size']>();
+
   const showDefaultDrawer = () => {
     setSize('default');
     setVisible(true);
   };
+
   const showLargeDrawer = () => {
     setSize('large');
     setVisible(true);
   };
+
   const onClose = () => {
     setVisible(false);
   };
+
   return (
     <>
       <Space>
diff --git a/components/drawer/demo/user-profile.md b/components/drawer/demo/user-profile.md
index b89c4c67a6..c5340f7bee 100644
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@@ -13,18 +13,24 @@ title:
 
 Use Drawer to quickly preview details of an object, such as those in a list.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
 
-const DescriptionItem = ({ title, content }) => (
+interface DescriptionItemProps {
+  title: string;
+  content: React.ReactNode;
+}
+
+const DescriptionItem = ({ title, content }: DescriptionItemProps) => (
   <div className="site-description-item-profile-wrapper">
     <p className="site-description-item-profile-p-label">{title}:</p>
     {content}
   </div>
 );
 
-export default () => {
-  const [visible, setVisible] = React.useState(false);
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
 
   const showDrawer = () => {
     setVisible(true);
@@ -39,9 +45,11 @@ export default () => {
       <List
         dataSource={[
           {
+            id: 1,
             name: 'Lily',
           },
           {
+            id: 2,
             name: 'Lily',
           },
         ]}
@@ -154,6 +162,8 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/dropdown/demo/arrow-center.md b/components/dropdown/demo/arrow-center.md
index 6098882cbf..e0f774535e 100644
--- a/components/dropdown/demo/arrow-center.md
+++ b/components/dropdown/demo/arrow-center.md
@@ -13,13 +13,15 @@ title:
 
 By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point to the center of the target element.
 
-```jsx
+```tsx
+import React from 'react';
 import { Menu, Dropdown, Button } from 'antd';
 
 const menu = (
   <Menu
     items={[
       {
+        key: '1',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
             1st menu item
@@ -27,6 +29,7 @@ const menu = (
         ),
       },
       {
+        key: '2',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
             2nd menu item
@@ -34,6 +37,7 @@ const menu = (
         ),
       },
       {
+        key: '3',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
             3rd menu item
@@ -44,7 +48,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Dropdown overlay={menu} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
       <Button>bottomLeft</Button>
@@ -67,6 +71,8 @@ export default () => (
     </Dropdown>
   </>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/dropdown/demo/arrow.md b/components/dropdown/demo/arrow.md
index c95ec279b4..4f9b93776e 100644
--- a/components/dropdown/demo/arrow.md
+++ b/components/dropdown/demo/arrow.md
@@ -13,13 +13,15 @@ title:
 
 You could display an arrow.
 
-```jsx
+```tsx
+import React from 'react';
 import { Menu, Dropdown, Button } from 'antd';
 
 const menu = (
   <Menu
     items={[
       {
+        key: '1',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
             1st menu item
@@ -27,6 +29,7 @@ const menu = (
         ),
       },
       {
+        key: '2',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
             2nd menu item
@@ -34,6 +37,7 @@ const menu = (
         ),
       },
       {
+        key: '3',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
             3rd menu item
@@ -44,7 +48,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Dropdown overlay={menu} placement="bottomLeft" arrow>
       <Button>bottomLeft</Button>
@@ -67,6 +71,8 @@ export default () => (
     </Dropdown>
   </>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md
index 986b9b1d62..004a7d90f2 100644
--- a/components/dropdown/demo/basic.md
+++ b/components/dropdown/demo/basic.md
@@ -13,7 +13,8 @@ title:
 
 The most basic dropdown menu.
 
-```jsx
+```tsx
+import React from 'react';
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined, SmileOutlined } from '@ant-design/icons';
 
@@ -21,6 +22,7 @@ const menu = (
   <Menu
     items={[
       {
+        key: '1',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
             1st menu item
@@ -28,6 +30,7 @@ const menu = (
         ),
       },
       {
+        key: '2',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
             2nd menu item (disabled)
@@ -37,6 +40,7 @@ const menu = (
         disabled: true,
       },
       {
+        key: '3',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
             3rd menu item (disabled)
@@ -45,6 +49,7 @@ const menu = (
         disabled: true,
       },
       {
+        key: '4',
         danger: true,
         label: 'a danger item',
       },
@@ -52,7 +57,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Dropdown overlay={menu}>
     <a onClick={e => e.preventDefault()}>
       <Space>
@@ -62,4 +67,6 @@ export default () => (
     </a>
   </Dropdown>
 );
+
+export default App;
 ```
diff --git a/components/dropdown/demo/context-menu.md b/components/dropdown/demo/context-menu.md
index c1db8f4336..a04836dd39 100644
--- a/components/dropdown/demo/context-menu.md
+++ b/components/dropdown/demo/context-menu.md
@@ -13,7 +13,8 @@ title:
 
 The default trigger mode is `hover`, you can change it to `contextMenu`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Menu, Dropdown } from 'antd';
 
 const menu = (
@@ -35,7 +36,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Dropdown overlay={menu} trigger={['contextMenu']}>
     <div
       className="site-dropdown-context-menu"
@@ -49,6 +50,8 @@ export default () => (
     </div>
   </Dropdown>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md
index 15f9264e02..0cdd18d287 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -13,19 +13,21 @@ title:
 
 A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.
 
-```jsx
+```tsx
+import React from 'react';
 import { Menu, Dropdown, Button, message, Space, Tooltip } from 'antd';
 import { DownOutlined, UserOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
-function handleButtonClick(e) {
+const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
   message.info('Click on left button.');
   console.log('click left button', e);
-}
+};
 
-function handleMenuClick(e) {
+const handleMenuClick: MenuProps['onClick'] = e => {
   message.info('Click on menu item.');
   console.log('click', e);
-}
+};
 
 const menu = (
   <Menu
@@ -50,7 +52,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Space wrap>
     <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
       Dropdown
@@ -67,7 +69,7 @@ export default () => (
         <Tooltip title="tooltip" key="leftButton">
           {leftButton}
         </Tooltip>,
-        React.cloneElement(rightButton, { loading: true }),
+        React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: true }),
       ]}
     >
       With Tooltip
@@ -82,4 +84,6 @@ export default () => (
     </Dropdown>
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md
index e8cbab610d..6215730898 100644
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@@ -13,11 +13,13 @@ title:
 
 An event will be triggered when you click menu items, in which you can make different operations according to item's key.
 
-```jsx
+```tsx
+import React from 'react';
 import { Menu, Dropdown, message, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
-const onClick = ({ key }) => {
+const onClick: MenuProps['onClick'] = ({ key }) => {
   message.info(`Click on item ${key}`);
 };
 
@@ -41,7 +43,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Dropdown overlay={menu}>
     <a onClick={e => e.preventDefault()}>
       <Space>
@@ -51,4 +53,6 @@ export default () => (
     </a>
   </Dropdown>
 );
+
+export default App;
 ```
diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md
index 1fdb7e080a..7e226a5b5a 100644
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@@ -13,7 +13,8 @@ title:
 
 Divider and disabled menu item.
 
-```jsx
+```tsx
+import React from 'react';
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
@@ -48,7 +49,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Dropdown overlay={menu}>
     <a onClick={e => e.preventDefault()}>
       <Space>
@@ -58,4 +59,6 @@ export default () => (
     </a>
   </Dropdown>
 );
+
+export default App;
 ```
diff --git a/components/dropdown/demo/loading.md b/components/dropdown/demo/loading.md
index c0b7abb88e..127ba512e7 100644
--- a/components/dropdown/demo/loading.md
+++ b/components/dropdown/demo/loading.md
@@ -13,7 +13,8 @@ title:
 
 A loading indicator can be added to a button by setting the `loading` property on the `Dropdown.Button`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
@@ -27,19 +28,22 @@ const menu = (
     ]}
   />
 );
-export default () => {
-  const [loadings, setLodings] = React.useState([]);
 
-  const enterLoading = index => {
-    const newLoadings = [...loadings];
-    newLoadings[index] = true;
-    setLodings(newLoadings);
+const App: React.FC = () => {
+  const [loadings, setLoadings] = useState<boolean[]>([]);
+
+  const enterLoading = (index: number) => {
+    setLoadings(state => {
+      const newLoadings = [...state];
+      newLoadings[index] = true;
+      return newLoadings;
+    });
 
     setTimeout(() => {
-      setLodings(prevLoadings => {
-        const temLoadings = [...prevLoadings];
-        temLoadings[index] = false;
-        return temLoadings;
+      setLoadings(state => {
+        const newLoadings = [...state];
+        newLoadings[index] = false;
+        return newLoadings;
       });
     }, 6000);
   };
@@ -71,4 +75,6 @@ export default () => {
     </Space>
   );
 };
+
+export default App;
 ```
diff --git a/components/dropdown/demo/menu-full.md b/components/dropdown/demo/menu-full.md
index 3dfbd645d2..591fa5ece9 100644
--- a/components/dropdown/demo/menu-full.md
+++ b/components/dropdown/demo/menu-full.md
@@ -19,9 +19,10 @@ This demo was created for debugging Menu styles inside Dropdown.
 [#19150](https://github.com/ant-design/ant-design/pull/19150)
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React from 'react';
 import { Menu, Dropdown, Space } from 'antd';
 import { MailOutlined, AppstoreOutlined, SettingOutlined, DownOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -70,7 +71,7 @@ const items: MenuItem[] = [
 
 const menu = <Menu selectedKeys={['1']} openKeys={['sub1']} items={items} />;
 
-export default () => (
+const App: React.FC = () => (
   <Dropdown overlay={menu}>
     <a onClick={e => e.preventDefault()}>
       <Space>
@@ -80,4 +81,6 @@ export default () => (
     </a>
   </Dropdown>
 );
+
+export default App;
 ```
diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-visible.md
index c1b49ceee8..ed16f96df1 100644
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@@ -13,20 +13,22 @@ title:
 
 The default is to close the menu when you click on menu items, this feature can be turned off.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
-export default () => {
-  const [visible, setVisible] = React.useState(false);
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
 
-  const handleMenuClick = e => {
+  const handleMenuClick: MenuProps['onClick'] = e => {
     if (e.key === '3') {
       setVisible(false);
     }
   };
 
-  const handleVisibleChange = flag => {
+  const handleVisibleChange = (flag: boolean) => {
     setVisible(flag);
   };
 
@@ -61,4 +63,6 @@ export default () => {
     </Dropdown>
   );
 };
+
+export default App;
 ```
diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
index 4dc1f707cc..d47851ca3c 100644
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@@ -13,13 +13,15 @@ title:
 
 Support 6 placements.
 
-```jsx
+```tsx
+import React from 'react';
 import { Menu, Dropdown, Button, Space } from 'antd';
 
 const menu = (
   <Menu
     items={[
       {
+        key: '1',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
             1st menu item
@@ -27,6 +29,7 @@ const menu = (
         ),
       },
       {
+        key: '2',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
             2nd menu item
@@ -34,6 +37,7 @@ const menu = (
         ),
       },
       {
+        key: '3',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
             3rd menu item
@@ -44,7 +48,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <Space wrap>
       <Dropdown overlay={menu} placement="bottomLeft">
@@ -70,4 +74,6 @@ export default () => (
     </Space>
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md
index ba80db5a21..9d6eae7214 100644
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@@ -13,54 +13,54 @@ title:
 
 The menu has multiple levels.
 
-```jsx
+```tsx
+import React from 'react';
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
-const { SubMenu } = Menu;
-
 const menu = (
   <Menu
     items={[
       {
+        key: '1',
         type: 'group',
         label: 'Group title',
         children: [
           {
-            key: '1',
+            key: '1-1',
             label: '1st menu item',
           },
           {
-            key: '2',
+            key: '1-2',
             label: '2nd menu item',
           },
         ],
       },
       {
-        key: 'sub',
+        key: '2',
         label: 'sub menu',
         children: [
           {
-            key: '3',
+            key: '2-1',
             label: '3rd menu item',
           },
           {
-            key: '4',
+            key: '2-2',
             label: '4th menu item',
           },
         ],
       },
       {
+        key: '3',
         label: 'disabled sub menu',
-        key: 'disabled',
         disabled: true,
         children: [
           {
-            key: '5',
+            key: '3-1',
             label: '5d menu item',
           },
           {
-            key: '6',
+            key: '3-2',
             label: '6th menu item',
           },
         ],
@@ -69,7 +69,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Dropdown overlay={menu}>
     <a onClick={e => e.preventDefault()}>
       <Space>
@@ -79,4 +79,6 @@ export default () => (
     </a>
   </Dropdown>
 );
+
+export default App;
 ```
diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md
index e8a4d02e1b..b62995d48a 100644
--- a/components/dropdown/demo/trigger.md
+++ b/components/dropdown/demo/trigger.md
@@ -14,6 +14,7 @@ title:
 The default trigger mode is `hover`, you can change it to `click`.
 
 ```tsx
+import React from 'react';
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
@@ -39,7 +40,7 @@ const menu = (
   />
 );
 
-export default () => (
+const App: React.FC = () => (
   <Dropdown overlay={menu} trigger={['click']}>
     <a onClick={e => e.preventDefault()}>
       <Space>
@@ -49,4 +50,6 @@ export default () => (
     </a>
   </Dropdown>
 );
+
+export default App;
 ```
diff --git a/components/empty/demo/basic.md b/components/empty/demo/basic.md
index 37e68151e6..f4bd011329 100644
--- a/components/empty/demo/basic.md
+++ b/components/empty/demo/basic.md
@@ -13,8 +13,10 @@ title:
 
 Simplest Usage.
 
-```jsx
+```tsx
 import { Empty } from 'antd';
 
-export default () => <Empty />;
+const App: React.FC = () => <Empty />;
+
+export default App;
 ```
diff --git a/components/empty/demo/config-provider.md b/components/empty/demo/config-provider.md
index 04c43270c9..9d0ceebc93 100644
--- a/components/empty/demo/config-provider.md
+++ b/components/empty/demo/config-provider.md
@@ -13,7 +13,8 @@ title:
 
 Use ConfigProvider set global Empty style.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import {
   ConfigProvider,
   Switch,
@@ -36,8 +37,8 @@ const customizeRenderEmpty = () => (
 
 const style = { width: 200 };
 
-export default () => {
-  const [customize, setCustomize] = React.useState(false);
+const App: React.FC = () => {
+  const [customize, setCustomize] = useState(false);
 
   return (
     <div>
@@ -45,14 +46,14 @@ export default () => {
         unCheckedChildren="default"
         checkedChildren="customize"
         checked={customize}
-        onChange={value => {
-          setCustomize(value);
+        onChange={val => {
+          setCustomize(val);
         }}
       />
 
       <Divider />
 
-      <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
+      <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>
         <div className="config-provider">
           <h4>Select</h4>
           <Select style={style} />
@@ -90,6 +91,8 @@ export default () => {
     </div>
   );
 };
+
+export default App;
 ```
 
 <style>
diff --git a/components/empty/demo/customize.md b/components/empty/demo/customize.md
index 3ebb99fc74..50cc25e31c 100644
--- a/components/empty/demo/customize.md
+++ b/components/empty/demo/customize.md
@@ -13,10 +13,11 @@ title:
 
 Customize image source, image size, description and extra content.
 
-```jsx
+```tsx
+import React from 'react';
 import { Empty, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Empty
     image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
     imageStyle={{
@@ -31,4 +32,6 @@ export default () => (
     <Button type="primary">Create Now</Button>
   </Empty>
 );
+
+export default App;
 ```
diff --git a/components/empty/demo/description.md b/components/empty/demo/description.md
index 844fb64fc2..447f3cbe22 100644
--- a/components/empty/demo/description.md
+++ b/components/empty/demo/description.md
@@ -13,8 +13,10 @@ title:
 
 Simplest Usage with no description.
 
-```jsx
+```tsx
 import { Empty } from 'antd';
 
-export default () => <Empty description={false} />;
+const App: React.FC = () => <Empty description={false} />;
+
+export default App;
 ```
diff --git a/components/empty/demo/simple.md b/components/empty/demo/simple.md
index f2a87fdf57..ce06e41cca 100644
--- a/components/empty/demo/simple.md
+++ b/components/empty/demo/simple.md
@@ -13,8 +13,10 @@ title:
 
 You can choose another style of `image` by setting image to `Empty.PRESENTED_IMAGE_SIMPLE`.
 
-```jsx
+```tsx
 import { Empty } from 'antd';
 
-export default () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+const App: React.FC = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+
+export default App;
 ```
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index da09a59dc0..853e23fb89 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4533,7 +4533,7 @@ exports[`renders ./components/form/demo/ref-item.md extend context correctly 1`]
     </div>
   </div>
   <button
-    class="ant-btn ant-btn-button"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index bb51bc50eb..f4dc45ffa2 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -4007,7 +4007,7 @@ exports[`renders ./components/form/demo/ref-item.md correctly 1`] = `
     </div>
   </div>
   <button
-    class="ant-btn ant-btn-button"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md
index 8bbd9d424c..ae28739124 100644
--- a/components/form/demo/advanced-search.md
+++ b/components/form/demo/advanced-search.md
@@ -102,12 +102,14 @@ const AdvancedSearchForm = () => {
   );
 };
 
-export default () => (
+const App: React.FC = () => (
   <div>
     <AdvancedSearchForm />
     <div className="search-result-list">Search Result List</div>
   </div>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md
index 5172b0c8bf..7271eb17a4 100644
--- a/components/form/demo/basic.md
+++ b/components/form/demo/basic.md
@@ -14,9 +14,10 @@ title:
 Basic Form data control. Includes layout, initial values, validation and submit.
 
 ```tsx
+import React from 'react';
 import { Form, Input, Button, Checkbox } from 'antd';
 
-const Demo = () => {
+const App: React.FC = () => {
   const onFinish = (values: any) => {
     console.log('Success:', values);
   };
@@ -64,5 +65,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/col-24-debug.md b/components/form/demo/col-24-debug.md
index 370224a01a..cc0159ccd1 100644
--- a/components/form/demo/col-24-debug.md
+++ b/components/form/demo/col-24-debug.md
@@ -15,9 +15,10 @@ See issue [#32980](https://github.com/ant-design/ant-design/issues/32980).
 See issue [#32980](https://github.com/ant-design/ant-design/issues/32980).
 
 ```tsx
+import React from 'react';
 import { Form, Input, Button } from 'antd';
 
-const Demo = () => {
+const App: React.FC = () => {
   const onFinish = (values: any) => {
     console.log('Success:', values);
   };
@@ -94,5 +95,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/complex-form-control.md b/components/form/demo/complex-form-control.md
index b1856eb10c..8aa23db116 100644
--- a/components/form/demo/complex-form-control.md
+++ b/components/form/demo/complex-form-control.md
@@ -53,13 +53,14 @@ This demo shows three typical usages:
 
 See the `Customized Form Controls` demo below for more advanced usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Form, Input, Select, Tooltip, Button, Space, Typography } from 'antd';
 
 const { Option } = Select;
 
-const Demo = () => {
-  const onFinish = values => {
+const App: React.FC = () => {
+  const onFinish = (values: any) => {
     console.log('Received values of form: ', values);
   };
 
@@ -125,5 +126,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/control-hooks.md b/components/form/demo/control-hooks.md
index 1ef2afb2af..c063852088 100644
--- a/components/form/demo/control-hooks.md
+++ b/components/form/demo/control-hooks.md
@@ -18,6 +18,7 @@ Call form method with `Form.useForm`.
 > Note that `useForm` is a [React Hooks](https://reactjs.org/docs/hooks-intro.html) that only works in functional component.
 
 ```tsx
+import React from 'react';
 import { Form, Input, Button, Select } from 'antd';
 
 const { Option } = Select;
@@ -30,7 +31,7 @@ const tailLayout = {
   wrapperCol: { offset: 8, span: 16 },
 };
 
-const Demo = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
 
   const onGenderChange = (value: string) => {
@@ -104,7 +105,7 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
 
 ```css
diff --git a/components/form/demo/control-ref.md b/components/form/demo/control-ref.md
index 613ada9ce7..9c5686d98e 100644
--- a/components/form/demo/control-ref.md
+++ b/components/form/demo/control-ref.md
@@ -14,6 +14,7 @@ title:
 We recommend use `Form.useForm` to create data control. If you are using class component, you can get it by `ref`.
 
 ```tsx
+import React from 'react';
 import { Form, Input, Button, Select } from 'antd';
 import type { FormInstance } from 'antd/es/form';
 
@@ -27,7 +28,7 @@ const tailLayout = {
   wrapperCol: { offset: 8, span: 16 },
 };
 
-class Demo extends React.Component {
+class App extends React.Component {
   formRef = React.createRef<FormInstance>();
 
   onGenderChange = (value: string) => {
@@ -107,7 +108,7 @@ class Demo extends React.Component {
   }
 }
 
-export default Demo;
+export default App;
 ```
 
 ```css
diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md
index e38dc5ea3e..888db0ee2b 100644
--- a/components/form/demo/customized-form-controls.md
+++ b/components/form/demo/customized-form-controls.md
@@ -83,7 +83,7 @@ const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
   );
 };
 
-const Demo = () => {
+const App: React.FC = () => {
   const onFinish = (values: any) => {
     console.log('Received values from form: ', values);
   };
@@ -119,5 +119,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/dep-debug.md b/components/form/demo/dep-debug.md
index 535642a9aa..5b6d255564 100644
--- a/components/form/demo/dep-debug.md
+++ b/components/form/demo/dep-debug.md
@@ -15,11 +15,12 @@ Buggy!
 Buggy!
 
 ```tsx
+import React from 'react';
 import { Form, Input } from 'antd';
 
 let acc = 0;
 
-const Demo = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
   return (
     <Form
@@ -46,5 +47,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/disabled-input-debug.md b/components/form/demo/disabled-input-debug.md
index 4c0f5fbc35..24fe83ea70 100644
--- a/components/form/demo/disabled-input-debug.md
+++ b/components/form/demo/disabled-input-debug.md
@@ -15,9 +15,10 @@ Test disabled Input with validate state
 Test disabled Input with validate state
 
 ```tsx
+import React from 'react';
 import { Form, Input } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Form>
     <Form.Item label="Normal0">
       <Input placeholder="unavailable choice" value="Buggy!" />
@@ -57,4 +58,6 @@ export default () => (
     </Form.Item>
   </Form>
 );
+
+export default App;
 ```
diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md
index 1137eb55a7..7bcb7bfac6 100644
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@@ -13,7 +13,8 @@ title:
 
 Add or remove form items dynamically. `add` function support config initial value.
 
-```jsx
+```tsx
+import React from 'react';
 import { Form, Input, Button } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
@@ -34,8 +35,8 @@ const formItemLayoutWithOutLabel = {
   },
 };
 
-const DynamicFieldSet = () => {
-  const onFinish = values => {
+const App: React.FC = () => {
+  const onFinish = (values: any) => {
     console.log('Received values of form:', values);
   };
 
@@ -117,7 +118,7 @@ const DynamicFieldSet = () => {
   );
 };
 
-export default () => <DynamicFieldSet />;
+export default App;
 ```
 
 ```css
diff --git a/components/form/demo/dynamic-form-items-complex.md b/components/form/demo/dynamic-form-items-complex.md
index 040d522393..a066b6f2cc 100644
--- a/components/form/demo/dynamic-form-items-complex.md
+++ b/components/form/demo/dynamic-form-items-complex.md
@@ -13,7 +13,8 @@ title:
 
 This example demonstrates the case that a form contains multiple form controls.
 
-```jsx
+```tsx
+import React from 'react';
 import { Form, Input, Button, Space, Select } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
@@ -29,10 +30,12 @@ const sights = {
   Shanghai: ['Oriental Pearl', 'The Bund'],
 };
 
-const Demo = () => {
+type SightsKeys = keyof typeof sights;
+
+const App: React.FC = () => {
   const [form] = Form.useForm();
 
-  const onFinish = values => {
+  const onFinish = (values: any) => {
     console.log('Received values of form:', values);
   };
 
@@ -64,7 +67,7 @@ const Demo = () => {
                       rules={[{ required: true, message: 'Missing sight' }]}
                     >
                       <Select disabled={!form.getFieldValue('area')} style={{ width: 130 }}>
-                        {(sights[form.getFieldValue('area')] || []).map(item => (
+                        {(sights[form.getFieldValue('area') as SightsKeys] || []).map(item => (
                           <Option key={item} value={item}>
                             {item}
                           </Option>
@@ -103,5 +106,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/dynamic-form-items-no-style.md b/components/form/demo/dynamic-form-items-no-style.md
index ad5c300259..2c14da7b05 100644
--- a/components/form/demo/dynamic-form-items-no-style.md
+++ b/components/form/demo/dynamic-form-items-no-style.md
@@ -14,12 +14,13 @@ debug: true
 
 Nest with `noStyle` field dynamic form.
 
-```jsx
+```tsx
+import React from 'react';
 import { Form, Input, Button, Space } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-const Demo = () => {
-  const onFinish = values => {
+const App: React.FC = () => {
+  const onFinish = (values: any) => {
     console.log('Received values of form:', values);
   };
 
@@ -62,5 +63,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/dynamic-form-items.md b/components/form/demo/dynamic-form-items.md
index 680ac711e6..4138c91b6c 100644
--- a/components/form/demo/dynamic-form-items.md
+++ b/components/form/demo/dynamic-form-items.md
@@ -13,12 +13,13 @@ title:
 
 Nest dynamic field need extends `field`. Pass `field.name` to nest item.
 
-```jsx
+```tsx
+import React from 'react';
 import { Form, Input, Button, Space } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-const Demo = () => {
-  const onFinish = values => {
+const App: React.FC = () => {
+  const onFinish = (values: any) => {
     console.log('Received values of form:', values);
   };
 
@@ -63,5 +64,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/dynamic-rule.md b/components/form/demo/dynamic-rule.md
index 755e537871..a3a3f39a59 100644
--- a/components/form/demo/dynamic-rule.md
+++ b/components/form/demo/dynamic-rule.md
@@ -21,18 +21,19 @@ const formItemLayout = {
   labelCol: { span: 4 },
   wrapperCol: { span: 8 },
 };
+
 const formTailLayout = {
   labelCol: { span: 4 },
   wrapperCol: { span: 8, offset: 4 },
 };
 
-const DynamicRule = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
   const [checkNick, setCheckNick] = useState(false);
 
   useEffect(() => {
     form.validateFields(['nickname']);
-  }, [checkNick]);
+  }, [checkNick, form]);
 
   const onCheckboxChange = (e: { target: { checked: boolean } }) => {
     setCheckNick(e.target.checked);
@@ -89,5 +90,5 @@ const DynamicRule = () => {
   );
 };
 
-export default () => <DynamicRule />;
+export default App;
 ```
diff --git a/components/form/demo/form-context.md b/components/form/demo/form-context.md
index df4f528bbd..228b066f62 100644
--- a/components/form/demo/form-context.md
+++ b/components/form/demo/form-context.md
@@ -17,7 +17,7 @@ Use `Form.Provider` to process data between forms. In this case, submit button i
 import React, { useState, useEffect, useRef } from 'react';
 import { Form, Input, InputNumber, Modal, Button, Avatar, Typography } from 'antd';
 import { SmileOutlined, UserOutlined } from '@ant-design/icons';
-import type { FormInstance } from 'antd/lib/form';
+import type { FormInstance } from 'antd/es/form';
 
 const layout = {
   labelCol: { span: 8 },
@@ -49,7 +49,7 @@ const useResetFormOnCloseModal = ({ form, visible }: { form: FormInstance; visib
     if (!visible && prevVisible) {
       form.resetFields();
     }
-  }, [visible]);
+  }, [form, prevVisible, visible]);
 };
 
 const ModalForm: React.FC<ModalFormProps> = ({ visible, onCancel }) => {
@@ -78,7 +78,7 @@ const ModalForm: React.FC<ModalFormProps> = ({ visible, onCancel }) => {
   );
 };
 
-const Demo = () => {
+const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
 
   const showUserModal = () => {
@@ -145,7 +145,7 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
 
 ```css
diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md
index f64914cd4e..27500c4979 100644
--- a/components/form/demo/form-in-modal.md
+++ b/components/form/demo/form-in-modal.md
@@ -83,7 +83,7 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
   );
 };
 
-const CollectionsPage = () => {
+const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
 
   const onCreate = (values: any) => {
@@ -112,7 +112,7 @@ const CollectionsPage = () => {
   );
 };
 
-export default () => <CollectionsPage />;
+export default App;
 ```
 
 ```css
diff --git a/components/form/demo/global-state.md b/components/form/demo/global-state.md
index 1242bc4e20..8cdeae3628 100644
--- a/components/form/demo/global-state.md
+++ b/components/form/demo/global-state.md
@@ -53,7 +53,7 @@ const CustomizedForm: React.FC<CustomizedFormProps> = ({ onChange, fields }) =>
   </Form>
 );
 
-const Demo = () => {
+const App: React.FC = () => {
   const [fields, setFields] = useState<FieldData[]>([{ name: ['username'], value: 'Ant Design' }]);
 
   return (
@@ -69,7 +69,7 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
 
 <style>
diff --git a/components/form/demo/inline-login.md b/components/form/demo/inline-login.md
index 5d9065c414..d2eae57ff0 100644
--- a/components/form/demo/inline-login.md
+++ b/components/form/demo/inline-login.md
@@ -18,7 +18,7 @@ import React, { useState, useEffect } from 'react';
 import { Form, Input, Button } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 
-const HorizontalLoginForm = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
   const [, forceUpdate] = useState({});
 
@@ -67,5 +67,5 @@ const HorizontalLoginForm = () => {
   );
 };
 
-export default () => <HorizontalLoginForm />;
+export default App;
 ```
diff --git a/components/form/demo/label-debug.md b/components/form/demo/label-debug.md
index 0cecc2aaa3..43d3e611fb 100644
--- a/components/form/demo/label-debug.md
+++ b/components/form/demo/label-debug.md
@@ -15,9 +15,10 @@ debug: true
 Use `<Typography.Text ellipsis>` in label should show `...`.
 
 ```tsx
+import React from 'react';
 import { Form, Input, Typography } from 'antd';
 
-const Demo = () => (
+const App: React.FC = () => (
   <Form name="label-ellipsis" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
     <Form.Item
       label={
@@ -43,5 +44,5 @@ const Demo = () => (
   </Form>
 );
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/layout-can-wrap.md b/components/form/demo/layout-can-wrap.md
index 0071cb237c..ce1a0675e7 100644
--- a/components/form/demo/layout-can-wrap.md
+++ b/components/form/demo/layout-can-wrap.md
@@ -15,9 +15,10 @@ version: 4.18.0
 Turn on `labelWrap` to wrap label if text is long.
 
 ```tsx
+import React from 'react';
 import { Form, Input, Button } from 'antd';
 
-const Demo = () => (
+const App: React.FC = () => (
   <Form
     name="wrap"
     labelCol={{ flex: '110px' }}
@@ -42,5 +43,5 @@ const Demo = () => (
   </Form>
 );
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/layout.md b/components/form/demo/layout.md
index 28d9446f27..32a6779374 100644
--- a/components/form/demo/layout.md
+++ b/components/form/demo/layout.md
@@ -19,7 +19,7 @@ import { Form, Input, Button, Radio } from 'antd';
 
 type LayoutType = Parameters<typeof Form>[0]['layout'];
 
-const FormLayoutDemo = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
   const [formLayout, setFormLayout] = useState<LayoutType>('horizontal');
 
@@ -70,5 +70,5 @@ const FormLayoutDemo = () => {
   );
 };
 
-export default () => <FormLayoutDemo />;
+export default App;
 ```
diff --git a/components/form/demo/nest-messages.md b/components/form/demo/nest-messages.md
index 4d9e66c93d..e18c13dc32 100644
--- a/components/form/demo/nest-messages.md
+++ b/components/form/demo/nest-messages.md
@@ -14,6 +14,7 @@ title:
 `name` prop support nest data structure. Customize validate message template with `validateMessages` or `message`. Ref [here](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) about message template.
 
 ```tsx
+import React from 'react';
 import { Form, Input, InputNumber, Button } from 'antd';
 
 const layout = {
@@ -34,7 +35,7 @@ const validateMessages = {
 };
 /* eslint-enable no-template-curly-in-string */
 
-const Demo = () => {
+const App: React.FC = () => {
   const onFinish = (values: any) => {
     console.log(values);
   };
@@ -65,5 +66,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.md
index b930e3d392..9c6620a90c 100644
--- a/components/form/demo/normal-login.md
+++ b/components/form/demo/normal-login.md
@@ -16,10 +16,11 @@ title:
 Normal login form which can contain more elements.
 
 ```tsx
+import React from 'react';
 import { Form, Input, Button, Checkbox } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 
-const NormalLoginForm = () => {
+const App: React.FC = () => {
   const onFinish = (values: any) => {
     console.log('Received values of form: ', values);
   };
@@ -67,7 +68,7 @@ const NormalLoginForm = () => {
   );
 };
 
-export default () => <NormalLoginForm />;
+export default App;
 ```
 
 ```css
diff --git a/components/form/demo/ref-item.md b/components/form/demo/ref-item.md
index 778cd4311d..7da38d6822 100644
--- a/components/form/demo/ref-item.md
+++ b/components/form/demo/ref-item.md
@@ -14,13 +14,14 @@ debug: true
 
 Use `ref` first!
 
-```jsx
+```tsx
 import React from 'react';
 import { Button, Form, Input } from 'antd';
+import type { InputRef } from 'antd';
 
-const Demo = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
-  const ref = React.useRef();
+  const ref = React.useRef<InputRef>(null);
 
   return (
     <Form form={form} initialValues={{ list: ['light'] }}>
@@ -31,7 +32,7 @@ const Demo = () => {
       <Form.List name="list">
         {fields =>
           fields.map(field => (
-            <Form.Item key={field.key} {...field}>
+            <Form.Item {...field} key={field.key}>
               <Input ref={ref} />
             </Form.Item>
           ))
@@ -39,7 +40,7 @@ const Demo = () => {
       </Form.List>
 
       <Button
-        type="button"
+        htmlType="button"
         onClick={() => {
           form.getFieldInstance('test').focus();
         }}
@@ -57,5 +58,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/register.md b/components/form/demo/register.md
index a72564b85f..ed5af97e99 100644
--- a/components/form/demo/register.md
+++ b/components/form/demo/register.md
@@ -88,7 +88,7 @@ const tailFormItemLayout = {
   },
 };
 
-const RegistrationForm = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
 
   const onFinish = (values: any) => {
@@ -300,5 +300,5 @@ const RegistrationForm = () => {
   );
 };
 
-export default () => <RegistrationForm />;
+export default App;
 ```
diff --git a/components/form/demo/required-mark.md b/components/form/demo/required-mark.md
index 0a45aa91d4..c42ee8bf75 100644
--- a/components/form/demo/required-mark.md
+++ b/components/form/demo/required-mark.md
@@ -20,7 +20,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 
 type RequiredMark = boolean | 'optional';
 
-const FormLayoutDemo = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
   const [requiredMark, setRequiredMarkType] = useState<RequiredMark>('optional');
 
@@ -59,5 +59,5 @@ const FormLayoutDemo = () => {
   );
 };
 
-export default () => <FormLayoutDemo />;
+export default App;
 ```
diff --git a/components/form/demo/size.md b/components/form/demo/size.md
index bb9d8546e9..7d382b05fe 100644
--- a/components/form/demo/size.md
+++ b/components/form/demo/size.md
@@ -30,11 +30,13 @@ import {
 
 type SizeType = Parameters<typeof Form>[0]['size'];
 
-const FormSizeDemo = () => {
+const App: React.FC = () => {
   const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
+
   const onFormLayoutChange = ({ size }: { size: SizeType }) => {
     setComponentSize(size);
   };
+
   return (
     <Form
       labelCol={{ span: 4 }}
@@ -98,5 +100,5 @@ const FormSizeDemo = () => {
   );
 };
 
-export default () => <FormSizeDemo />;
+export default App;
 ```
diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md
index 68895f546b..5139fa373b 100644
--- a/components/form/demo/time-related-controls.md
+++ b/components/form/demo/time-related-controls.md
@@ -14,6 +14,7 @@ title:
 The `value` of time-related components is a `moment` object, which we need to pre-process it before we submit to server.
 
 ```tsx
+import React from 'react';
 import { Form, DatePicker, TimePicker, Button } from 'antd';
 
 const { RangePicker } = DatePicker;
@@ -35,7 +36,7 @@ const rangeConfig = {
   rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
 };
 
-const TimeRelatedForm = () => {
+const App: React.FC = () => {
   const onFinish = (fieldsValue: any) => {
     // Should format date value before submit.
     const rangeValue = fieldsValue['range-picker'];
@@ -89,5 +90,5 @@ const TimeRelatedForm = () => {
   );
 };
 
-export default () => <TimeRelatedForm />;
+export default App;
 ```
diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md
index b621c322d7..b85ef0ec6e 100644
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@@ -14,6 +14,7 @@ title:
 Demonstration of validation configuration for form controls which are not shown in the demos above.
 
 ```tsx
+import React from 'react';
 import {
   Form,
   Select,
@@ -42,10 +43,10 @@ const normFile = (e: any) => {
   if (Array.isArray(e)) {
     return e;
   }
-  return e && e.fileList;
+  return e?.fileList;
 };
 
-const Demo = () => {
+const App: React.FC = () => {
   const onFinish = (values: any) => {
     console.log('Received values of form: ', values);
   };
@@ -206,5 +207,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md
index c3f41a97ef..7a94d884c9 100644
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@@ -22,6 +22,7 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
 3. `help`: display validate message.
 
 ```tsx
+import React from 'react';
 import { SmileOutlined } from '@ant-design/icons';
 import {
   Form,
@@ -48,7 +49,7 @@ const formItemLayout = {
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <Form {...formItemLayout}>
     <Form.Item
       label="Fail"
@@ -168,4 +169,6 @@ export default () => (
     </Form.Item>
   </Form>
 );
+
+export default App;
 ```
diff --git a/components/form/demo/warning-only.md b/components/form/demo/warning-only.md
index 0bb5ff6c2c..b087843b59 100644
--- a/components/form/demo/warning-only.md
+++ b/components/form/demo/warning-only.md
@@ -18,7 +18,7 @@ title:
 import React from 'react';
 import { Form, Input, message, Button, Space } from 'antd';
 
-const Demo = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
 
   const onFinish = () => {
@@ -64,5 +64,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/form/demo/without-form-create.md b/components/form/demo/without-form-create.md
index a4c44f06c9..b4cdcbe1cf 100644
--- a/components/form/demo/without-form-create.md
+++ b/components/form/demo/without-form-create.md
@@ -19,10 +19,12 @@ import { Form, InputNumber } from 'antd';
 
 type ValidateStatus = Parameters<typeof Form.Item>[0]['validateStatus'];
 
-function validatePrimeNumber(number: number): {
+const validatePrimeNumber = (
+  number: number,
+): {
   validateStatus: ValidateStatus;
   errorMsg: string | null;
-} {
+} => {
   if (number === 11) {
     return {
       validateStatus: 'success',
@@ -33,14 +35,14 @@ function validatePrimeNumber(number: number): {
     validateStatus: 'error',
     errorMsg: 'The prime between 8 and 12 is 11!',
   };
-}
+};
 
 const formItemLayout = {
   labelCol: { span: 7 },
   wrapperCol: { span: 12 },
 };
 
-const RawForm = () => {
+const App: React.FC = () => {
   const [number, setNumber] = useState<{
     value: number;
     validateStatus?: ValidateStatus;
@@ -73,5 +75,5 @@ const RawForm = () => {
   );
 };
 
-export default () => <RawForm />;
+export default App;
 ```
diff --git a/components/grid/demo/basic.md b/components/grid/demo/basic.md
index 4520fa333d..3fc0413563 100644
--- a/components/grid/demo/basic.md
+++ b/components/grid/demo/basic.md
@@ -17,10 +17,11 @@ From the stack to the horizontal arrangement.
 
 You can create a basic grid system by using a single set of `Row` and `Col` grid assembly, all of the columns (Col) must be placed in `Row`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Row>
       <Col span={24}>col</Col>
@@ -42,4 +43,6 @@ export default () => (
     </Row>
   </>
 );
+
+export default App;
 ```
diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md
index df98fe43cc..5420fdcbce 100644
--- a/components/grid/demo/flex-align.md
+++ b/components/grid/demo/flex-align.md
@@ -13,12 +13,15 @@ title:
 
 Child elements vertically aligned.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col, Divider } from 'antd';
 
-const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
+const DemoBox: React.FC<{ children: React.ReactNode; value: number }> = props => (
+  <p className={`height-${props.value}`}>{props.children}</p>
+);
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Align Top</Divider>
     <Row justify="center" align="top">
@@ -69,6 +72,8 @@ export default () => (
     </Row>
   </>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md
index 5e612b8256..c11ec85ea3 100644
--- a/components/grid/demo/flex-order.md
+++ b/components/grid/demo/flex-order.md
@@ -13,10 +13,11 @@ title:
 
 To change the element sort by `order`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col, Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Normal</Divider>
     <Row>
@@ -50,6 +51,8 @@ export default () => (
     </Row>
   </>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/grid/demo/flex-stretch.md b/components/grid/demo/flex-stretch.md
index 642c56632e..4cdb4eed87 100644
--- a/components/grid/demo/flex-stretch.md
+++ b/components/grid/demo/flex-stretch.md
@@ -13,10 +13,11 @@ Col 提供 `flex` 属性以支持填充。
 
 Col provides `flex` prop to support fill rest.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col, Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Percentage columns</Divider>
     <Row>
@@ -42,4 +43,6 @@ export default () => (
     </Row>
   </>
 );
+
+export default App;
 ```
diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
index c985a0404c..93c29c3d94 100644
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@@ -15,10 +15,11 @@ title:
 
 Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col, Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">sub-element align left</Divider>
     <Row justify="start">
@@ -69,6 +70,8 @@ export default () => (
     </Row>
   </>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
index 2a345225b0..74c71dff21 100644
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@@ -25,12 +25,13 @@ You can use an array to set vertical spacing, `[horizontal, vertical]` `[16, { x
 
 > vertical gutter was supported after `3.24.0`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col, Divider } from 'antd';
 
-const style = { background: '#0092ff', padding: '8px 0' };
+const style: React.CSSProperties = { background: '#0092ff', padding: '8px 0' };
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Horizontal</Divider>
     <Row gutter={16}>
@@ -91,6 +92,8 @@ export default () => (
     </Row>
   </>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/grid/demo/offset.md b/components/grid/demo/offset.md
index 94b721628a..7532320b98 100644
--- a/components/grid/demo/offset.md
+++ b/components/grid/demo/offset.md
@@ -15,10 +15,11 @@ title:
 
 `offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Row>
       <Col span={8}>col-8</Col>
@@ -41,4 +42,6 @@ export default () => (
     </Row>
   </>
 );
+
+export default App;
 ```
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index 8123b70a55..b4104adeb5 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -13,12 +13,13 @@ title:
 
 A simple playground for column count and gutter.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Row, Col, Slider } from 'antd';
 
-const gutters = {};
-const vgutters = {};
-const colCounts = {};
+const gutters: Record<string, number> = {};
+const vgutters: Record<string, number> = {};
+const colCounts: Record<string, number> = {};
 
 [8, 16, 24, 32, 40, 48].forEach((value, i) => {
   gutters[i] = value;
@@ -30,26 +31,11 @@ const colCounts = {};
   colCounts[i] = value;
 });
 
-export default () => {
-  const [state, setState] = React.useState({
-    gutterKey: 1,
-    vgutterKey: 1,
-    colCountKey: 2,
-  });
+const App: React.FC = () => {
+  const [gutterKey, setGutterKey] = useState(1);
+  const [vgutterKey, setVgutterKey] = useState(1);
+  const [colCountKey, setColCountKey] = useState(2);
 
-  const onGutterChange = gutterKey => {
-    setState({ ...state, gutterKey });
-  };
-
-  const onVGutterChange = vgutterKey => {
-    setState({ ...state, vgutterKey });
-  };
-
-  const onColCountChange = colCountKey => {
-    setState({ ...state, colCountKey });
-  };
-
-  const { gutterKey, vgutterKey, colCountKey } = state;
   const cols = [];
   const colCount = colCounts[colCountKey];
   let colCode = '';
@@ -70,10 +56,10 @@ export default () => {
           min={0}
           max={Object.keys(gutters).length - 1}
           value={gutterKey}
-          onChange={onGutterChange}
+          onChange={setGutterKey}
           marks={gutters}
           step={null}
-          tipFormatter={value => gutters[value]}
+          tipFormatter={value => value && gutters[value]}
         />
       </div>
       <span>Vertical Gutter (px): </span>
@@ -82,10 +68,10 @@ export default () => {
           min={0}
           max={Object.keys(vgutters).length - 1}
           value={vgutterKey}
-          onChange={onVGutterChange}
+          onChange={setVgutterKey}
           marks={vgutters}
           step={null}
-          tipFormatter={value => vgutters[value]}
+          tipFormatter={value => value && vgutters[value]}
         />
       </div>
       <span>Column Count:</span>
@@ -94,10 +80,10 @@ export default () => {
           min={0}
           max={Object.keys(colCounts).length - 1}
           value={colCountKey}
-          onChange={onColCountChange}
+          onChange={setColCountKey}
           marks={colCounts}
           step={null}
-          tipFormatter={value => colCounts[value]}
+          tipFormatter={value => value && colCounts[value]}
         />
       </div>
       <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
@@ -111,6 +97,8 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/grid/demo/responsive-more.md b/components/grid/demo/responsive-more.md
index 788abf1e51..38c92b3750 100644
--- a/components/grid/demo/responsive-more.md
+++ b/components/grid/demo/responsive-more.md
@@ -15,10 +15,11 @@ title:
 
 `span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` `xxl` properties to use, where `xs={6}` is equivalent to `xs={{span: 6}}`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Row>
     <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
       Col
@@ -31,4 +32,6 @@ export default () => (
     </Col>
   </Row>
 );
+
+export default App;
 ```
diff --git a/components/grid/demo/responsive.md b/components/grid/demo/responsive.md
index 8f0f56ad0b..299f1e1e1f 100644
--- a/components/grid/demo/responsive.md
+++ b/components/grid/demo/responsive.md
@@ -13,10 +13,11 @@ title:
 
 Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid-media-queries), here preset six dimensions: `xs` `sm` `md` `lg` `xl` `xxl`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Row>
     <Col xs={2} sm={4} md={6} lg={8} xl={10}>
       Col
@@ -29,4 +30,6 @@ export default () => (
     </Col>
   </Row>
 );
+
+export default App;
 ```
diff --git a/components/grid/demo/sort.md b/components/grid/demo/sort.md
index a95bdd6d47..80f86c5dce 100644
--- a/components/grid/demo/sort.md
+++ b/components/grid/demo/sort.md
@@ -15,10 +15,11 @@ title:
 
 By using `push` and `pull` class you can easily change column order.
 
-```jsx
+```tsx
+import React from 'react';
 import { Row, Col } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Row>
     <Col span={18} push={6}>
       col-18 col-push-6
@@ -28,4 +29,6 @@ export default () => (
     </Col>
   </Row>
 );
+
+export default App;
 ```
diff --git a/components/grid/demo/useBreakpoint.md b/components/grid/demo/useBreakpoint.md
index 2c61ae4725..349d5119f2 100644
--- a/components/grid/demo/useBreakpoint.md
+++ b/components/grid/demo/useBreakpoint.md
@@ -11,13 +11,15 @@ title: useBreakpoint Hook
 
 Use `useBreakpoint` Hook provide personalized layout.
 
-```jsx
+```tsx
+import React from 'react';
 import { Grid, Tag } from 'antd';
 
 const { useBreakpoint } = Grid;
 
-function UseBreakpointDemo() {
+const App: React.FC = () => {
   const screens = useBreakpoint();
+
   return (
     <>
       Current break point:{' '}
@@ -30,7 +32,7 @@ function UseBreakpointDemo() {
         ))}
     </>
   );
-}
+};
 
-export default () => <UseBreakpointDemo />;
+export default App;
 ```
diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md
index 3f3db45634..e34796e843 100644
--- a/components/icon/demo/basic.md
+++ b/components/icon/demo/basic.md
@@ -13,7 +13,8 @@ title:
 
 Import icons from `@ant-design/icons`, component name of icons with different theme is the icon name suffixed by the theme name. Specify the `spin` property to show spinning animation.
 
-```jsx
+```tsx
+import React from 'react';
 import { Space } from 'antd';
 import {
   HomeOutlined,
@@ -23,7 +24,7 @@ import {
   LoadingOutlined,
 } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <HomeOutlined />
     <SettingFilled />
@@ -33,4 +34,6 @@ export default () => (
     <LoadingOutlined />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md
index 2b15f248c2..af769895c7 100644
--- a/components/icon/demo/custom.md
+++ b/components/icon/demo/custom.md
@@ -13,9 +13,11 @@ title:
 
 Create a reusable React component by using `<Icon component={...} />`. The property `component` takes a React component that renders to `svg` element.
 
-```jsx
+```tsx
+import React from 'react';
 import { Space } from 'antd';
 import Icon, { HomeOutlined } from '@ant-design/icons';
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
 
 const HeartSvg = () => (
   <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
@@ -68,16 +70,22 @@ const PandaSvg = () => (
   </svg>
 );
 
-const HeartIcon = props => <Icon component={HeartSvg} {...props} />;
+const HeartIcon = (props: Partial<CustomIconComponentProps>) => (
+  <Icon component={HeartSvg} {...props} />
+);
 
-const PandaIcon = props => <Icon component={PandaSvg} {...props} />;
+const PandaIcon = (props: Partial<CustomIconComponentProps>) => (
+  <Icon component={PandaSvg} {...props} />
+);
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <HeartIcon style={{ color: 'hotpink' }} />
     <PandaIcon style={{ fontSize: '32px' }} />
-    <Icon component={HomeOutlined} />
+    <Icon component={HomeOutlined as React.ForwardRefExoticComponent<any>} />
     <HomeOutlined />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/icon/demo/iconfont.md b/components/icon/demo/iconfont.md
index 6227afcc38..990e192745 100644
--- a/components/icon/demo/iconfont.md
+++ b/components/icon/demo/iconfont.md
@@ -13,7 +13,8 @@ title:
 
 If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully.
 
-```jsx
+```tsx
+import React from 'react';
 import { Space } from 'antd';
 import { createFromIconfontCN } from '@ant-design/icons';
 
@@ -21,11 +22,13 @@ const IconFont = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
 });
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <IconFont type="icon-tuichu" />
     <IconFont type="icon-facebook" />
     <IconFont type="icon-twitter" />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/icon/demo/scriptUrl.md b/components/icon/demo/scriptUrl.md
index fa905183e5..3966615337 100644
--- a/components/icon/demo/scriptUrl.md
+++ b/components/icon/demo/scriptUrl.md
@@ -13,7 +13,8 @@ title:
 
 You can use `scriptUrl` as an array after `@ant-design/icons@4.1.0`, manage icons in one `<Icon />` from multiple [iconfont.cn](http://iconfont.cn/) resources. If icon with a duplicate name in resources, it will overrided in array order.
 
-```jsx
+```tsx
+import React from 'react';
 import { Space } from 'antd';
 import { createFromIconfontCN } from '@ant-design/icons';
 
@@ -24,7 +25,7 @@ const IconFont = createFromIconfontCN({
   ],
 });
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <IconFont type="icon-javascript" />
     <IconFont type="icon-java" />
@@ -32,4 +33,6 @@ export default () => (
     <IconFont type="icon-python" />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/icon/demo/two-tone.md b/components/icon/demo/two-tone.md
index 6316df3086..704e15a554 100644
--- a/components/icon/demo/two-tone.md
+++ b/components/icon/demo/two-tone.md
@@ -13,15 +13,18 @@ title:
 
 You can set `twoToneColor` prop to specific primary color for two-tone icons.
 
-```jsx
+```tsx
+import React from 'react';
 import { Space } from 'antd';
 import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <SmileTwoTone />
     <HeartTwoTone twoToneColor="#eb2f96" />
     <CheckCircleTwoTone twoToneColor="#52c41a" />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/image/demo/basic.md b/components/image/demo/basic.md
index 099ca1932c..19cbee0b2d 100644
--- a/components/image/demo/basic.md
+++ b/components/image/demo/basic.md
@@ -13,17 +13,16 @@ title:
 
 Click the image to zoom in.
 
-```jsx
+```tsx
+import React from 'react';
 import { Image } from 'antd';
 
-function ImageDemo() {
-  return (
-    <Image
-      width={200}
-      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-    />
-  );
-}
+const App: React.FC = () => (
+  <Image
+    width={200}
+    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+  />
+);
 
-export default () => <ImageDemo />;
+export default App;
 ```
diff --git a/components/image/demo/controlled-preview.md b/components/image/demo/controlled-preview.md
index f318ec0ce9..061f028b06 100644
--- a/components/image/demo/controlled-preview.md
+++ b/components/image/demo/controlled-preview.md
@@ -13,12 +13,13 @@ title:
 
 You can make preview controlled.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Image, Button } from 'antd';
 
-function ImageDemo() {
+const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
+
   return (
     <>
       <Button type="primary" onClick={() => setVisible(true)}>
@@ -38,7 +39,7 @@ function ImageDemo() {
       />
     </>
   );
-}
+};
 
-export default () => <ImageDemo />;
+export default App;
 ```
diff --git a/components/image/demo/fallback.md b/components/image/demo/fallback.md
index 63dff0f868..87271b2a0c 100644
--- a/components/image/demo/fallback.md
+++ b/components/image/demo/fallback.md
@@ -13,19 +13,18 @@ title:
 
 Load failed to display image placeholder.
 
-```jsx
+```tsx
+import React from 'react';
 import { Image } from 'antd';
 
-function ImageDemo() {
-  return (
-    <Image
-      width={200}
-      height={200}
-      src="error"
-      fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
-    />
-  );
-}
+const App: React.FC = () => (
+  <Image
+    width={200}
+    height={200}
+    src="error"
+    fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
+  />
+);
 
-export default () => <ImageDemo />;
+export default App;
 ```
diff --git a/components/image/demo/placeholder.md b/components/image/demo/placeholder.md
index 5124831a58..9ae103314b 100644
--- a/components/image/demo/placeholder.md
+++ b/components/image/demo/placeholder.md
@@ -13,12 +13,13 @@ title:
 
 Progressive when large image loading.
 
-```jsx
-import React from 'react';
+```tsx
+import React, { useState } from 'react';
 import { Image, Button, Space } from 'antd';
 
-function ImageDemo() {
-  const [random, setRandom] = React.useState();
+const App: React.FC = () => {
+  const [random, setRandom] = useState<number>();
+
   return (
     <Space size={12}>
       <Image
@@ -42,7 +43,7 @@ function ImageDemo() {
       </Button>
     </Space>
   );
-}
+};
 
-export default () => <ImageDemo />;
+export default App;
 ```
diff --git a/components/image/demo/preview-group-visible.md b/components/image/demo/preview-group-visible.md
index d2ea685aa1..9fdb215aa8 100644
--- a/components/image/demo/preview-group-visible.md
+++ b/components/image/demo/preview-group-visible.md
@@ -13,12 +13,13 @@ title:
 
 Preview a collection from one image.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Image } from 'antd';
 
-const App = () => {
+const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
+
   return (
     <>
       <Image
diff --git a/components/image/demo/preview-group.md b/components/image/demo/preview-group.md
index b4d6cb76da..791cef1e90 100644
--- a/components/image/demo/preview-group.md
+++ b/components/image/demo/preview-group.md
@@ -13,10 +13,11 @@ title:
 
 Click the left and right switch buttons to preview multiple images.
 
-```jsx
+```tsx
+import React from 'react';
 import { Image } from 'antd';
 
-const App = () => (
+const App: React.FC = () => (
   <Image.PreviewGroup>
     <Image width={200} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
     <Image
diff --git a/components/image/demo/preview-mask.md b/components/image/demo/preview-mask.md
index 21164661a6..75e5feca7b 100644
--- a/components/image/demo/preview-mask.md
+++ b/components/image/demo/preview-mask.md
@@ -19,25 +19,23 @@ import React from 'react';
 import { Image, Space } from 'antd';
 import { ZoomInOutlined } from '@ant-design/icons';
 
-function ImageDemo() {
-  return (
-    <Image
-      width={96}
-      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-      preview={{
-        maskClassName: 'customize-mask',
-        mask: (
-          <Space direction="vertical" align="center">
-            <ZoomInOutlined />
-            示例
-          </Space>
-        ),
-      }}
-    />
-  );
-}
+const App: React.FC = () => (
+  <Image
+    width={96}
+    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+    preview={{
+      maskClassName: 'customize-mask',
+      mask: (
+        <Space direction="vertical" align="center">
+          <ZoomInOutlined />
+          示例
+        </Space>
+      ),
+    }}
+  />
+);
 
-export default () => <ImageDemo />;
+export default App;
 ```
 
 ```css
diff --git a/components/image/demo/previewSrc.md b/components/image/demo/previewSrc.md
index c01609f6a0..627ee7859e 100644
--- a/components/image/demo/previewSrc.md
+++ b/components/image/demo/previewSrc.md
@@ -13,21 +13,19 @@ title:
 
 You can set different preview image.
 
-```jsx
+```tsx
 import React from 'react';
 import { Image } from 'antd';
 
-function ImageDemo() {
-  return (
-    <Image
-      width={200}
-      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
-      preview={{
-        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      }}
-    />
-  );
-}
+const App: React.FC = () => (
+  <Image
+    width={200}
+    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
+    preview={{
+      src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    }}
+  />
+);
 
-export default () => <ImageDemo />;
+export default App;
 ```
diff --git a/components/input-number/demo/addon.md b/components/input-number/demo/addon.md
index 5c52725eb3..65ed64b010 100644
--- a/components/input-number/demo/addon.md
+++ b/components/input-number/demo/addon.md
@@ -13,7 +13,8 @@ title:
 
 Using pre & post tabs example.
 
-```jsx
+```tsx
+import React from 'react';
 import { InputNumber, Select, Space, Cascader } from 'antd';
 import { SettingOutlined } from '@ant-design/icons';
 
@@ -34,7 +35,7 @@ const selectAfter = (
   </Select>
 );
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
     <InputNumber addonBefore={selectBefore} addonAfter={selectAfter} defaultValue={100} />
@@ -45,4 +46,6 @@ export default () => (
     />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/input-number/demo/basic.md b/components/input-number/demo/basic.md
index 363bd1260f..6b20e51774 100644
--- a/components/input-number/demo/basic.md
+++ b/components/input-number/demo/basic.md
@@ -13,12 +13,15 @@ title:
 
 Numeric-only input box.
 
-```jsx
+```tsx
+import React from 'react';
 import { InputNumber } from 'antd';
 
-function onChange(value) {
+const onChange = (value: number) => {
   console.log('changed', value);
-}
+};
 
-export default () => <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />;
+const App: React.FC = () => <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />;
+
+export default App;
 ```
diff --git a/components/input-number/demo/borderless.md b/components/input-number/demo/borderless.md
index ecd2f12c06..6903df02fe 100644
--- a/components/input-number/demo/borderless.md
+++ b/components/input-number/demo/borderless.md
@@ -13,8 +13,11 @@ title:
 
 No border.
 
-```jsx
+```tsx
+import React from 'react';
 import { InputNumber } from 'antd';
 
-export default () => <InputNumber min={1} max={10} defaultValue={3} bordered={false} />;
+const App: React.FC = () => <InputNumber min={1} max={10} defaultValue={3} bordered={false} />;
+
+export default App;
 ```
diff --git a/components/input-number/demo/controls.md b/components/input-number/demo/controls.md
index c0000d374d..616ce7861f 100644
--- a/components/input-number/demo/controls.md
+++ b/components/input-number/demo/controls.md
@@ -14,11 +14,14 @@ title:
 
 When you need to use a custom `Icon`, you can set the `Icon` component as the property value of `upIcon` and `downIcon`.
 
-```jsx
+```tsx
+import React from 'react';
 import { InputNumber } from 'antd';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <InputNumber controls={{ upIcon: <ArrowUpOutlined />, downIcon: <ArrowDownOutlined /> }} />
 );
+
+export default App;
 ```
diff --git a/components/input-number/demo/digit.md b/components/input-number/demo/digit.md
index d8b59e62dc..2bc65faa4f 100644
--- a/components/input-number/demo/digit.md
+++ b/components/input-number/demo/digit.md
@@ -14,13 +14,14 @@ title:
 Use `stringMode` to support high precision decimals support. `onChange` will return string value instead. You need polyfill of BigInt if browser not support.
 
 ```tsx
+import React from 'react';
 import { InputNumber } from 'antd';
 
-function onChange(value: string) {
+const onChange = (value: string) => {
   console.log('changed', value);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <InputNumber<string>
     style={{ width: 200 }}
     defaultValue="1"
@@ -31,4 +32,6 @@ export default () => (
     stringMode
   />
 );
+
+export default App;
 ```
diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md
index 6141ced979..b69864e97f 100644
--- a/components/input-number/demo/disabled.md
+++ b/components/input-number/demo/disabled.md
@@ -13,11 +13,12 @@ title:
 
 Click the button to toggle between available and disabled states.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { InputNumber, Button } from 'antd';
 
-export default () => {
-  const [disabled, setDisabled] = React.useState(true);
+const App: React.FC = () => {
+  const [disabled, setDisabled] = useState(true);
 
   const toggle = () => {
     setDisabled(!disabled);
@@ -34,4 +35,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/input-number/demo/formatter.md b/components/input-number/demo/formatter.md
index 3d0709767f..50d35f75ec 100644
--- a/components/input-number/demo/formatter.md
+++ b/components/input-number/demo/formatter.md
@@ -17,19 +17,20 @@ Display value within it's situation with `formatter`, and we usually use `parser
 
 > Here is a Intl.NumberFormat InputNumber implementation: [https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo](https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo)
 
-```jsx
+```tsx
+import React from 'react';
 import { InputNumber, Space } from 'antd';
 
-function onChange(value) {
+const onChange = (value: number | string) => {
   console.log('changed', value);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <InputNumber
       defaultValue={1000}
       formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
-      parser={value => value.replace(/\$\s?|(,*)/g, '')}
+      parser={value => value!.replace(/\$\s?|(,*)/g, '')}
       onChange={onChange}
     />
     <InputNumber
@@ -37,9 +38,11 @@ export default () => (
       min={0}
       max={100}
       formatter={value => `${value}%`}
-      parser={value => value.replace('%', '')}
+      parser={value => value!.replace('%', '')}
       onChange={onChange}
     />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/input-number/demo/keyboard.md b/components/input-number/demo/keyboard.md
index 605f6fd427..f9e191adae 100644
--- a/components/input-number/demo/keyboard.md
+++ b/components/input-number/demo/keyboard.md
@@ -14,10 +14,12 @@ title:
 Control keyboard behavior by `keyboard`.
 
 ```tsx
+import React, { useState } from 'react';
 import { InputNumber, Checkbox, Space } from 'antd';
 
-const App = () => {
-  const [keyboard, setKeyboard] = React.useState(true);
+const App: React.FC = () => {
+  const [keyboard, setKeyboard] = useState(true);
+
   return (
     <Space>
       <InputNumber min={1} max={10} keyboard={keyboard} defaultValue={3} />
diff --git a/components/input-number/demo/out-of-range.md b/components/input-number/demo/out-of-range.md
index d27d2523d4..14bb5506a9 100644
--- a/components/input-number/demo/out-of-range.md
+++ b/components/input-number/demo/out-of-range.md
@@ -14,10 +14,11 @@ title:
 Show warning style when `value` is out of range by control.
 
 ```tsx
+import React, { useState } from 'react';
 import { InputNumber, Button, Space } from 'antd';
 
-const Demo = () => {
-  const [value, setValue] = React.useState<string | number>('99');
+const App: React.FC = () => {
+  const [value, setValue] = useState<string | number>('99');
 
   return (
     <Space>
@@ -34,5 +35,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/input-number/demo/prefix.md b/components/input-number/demo/prefix.md
index c17967ea4e..2bc7712938 100644
--- a/components/input-number/demo/prefix.md
+++ b/components/input-number/demo/prefix.md
@@ -13,11 +13,12 @@ title:
 
 Add a prefix inside input.
 
-```jsx
+```tsx
+import React from 'react';
 import { InputNumber } from 'antd';
-import { InfoCircleOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons';
+import { UserOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <InputNumber prefix="￥" style={{ width: '100%' }} />
     <br />
@@ -28,4 +29,6 @@ export default () => (
     <InputNumber prefix="￥" disabled style={{ width: '100%' }} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md
index f40d47ef3e..e78ac01600 100644
--- a/components/input-number/demo/size.md
+++ b/components/input-number/demo/size.md
@@ -13,18 +13,21 @@ title:
 
 There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
 
-```jsx
+```tsx
+import React from 'react';
 import { InputNumber, Space } from 'antd';
 
-function onChange(value) {
+const onChange = (value: number) => {
   console.log('changed', value);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
     <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
     <InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/input-number/demo/status.md b/components/input-number/demo/status.md
index 6045bafacc..038aeb79af 100644
--- a/components/input-number/demo/status.md
+++ b/components/input-number/demo/status.md
@@ -15,10 +15,11 @@ title:
 Add status to InputNumber with `status`, which could be `error` or `warning`.
 
 ```tsx
+import React from 'react';
 import { InputNumber, Space } from 'antd';
 import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
 
-const ValidateInputs: React.FC = () => (
+const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <InputNumber status="error" style={{ width: '100%' }} />
     <InputNumber status="warning" style={{ width: '100%' }} />
@@ -27,5 +28,5 @@ const ValidateInputs: React.FC = () => (
   </Space>
 );
 
-export default () => <ValidateInputs />;
+export default App;
 ```
diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md
index 985931c805..99b6dceda1 100644
--- a/components/input/demo/addon.md
+++ b/components/input/demo/addon.md
@@ -13,7 +13,8 @@ title:
 
 Using pre & post tabs example.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input, Select, Space, Cascader } from 'antd';
 import { SettingOutlined } from '@ant-design/icons';
 
@@ -34,7 +35,7 @@ const selectAfter = (
   </Select>
 );
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
     <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
@@ -46,6 +47,8 @@ export default () => (
     />
   </Space>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/input/demo/align.md b/components/input/demo/align.md
index 87434c7499..597648dadc 100644
--- a/components/input/demo/align.md
+++ b/components/input/demo/align.md
@@ -6,7 +6,8 @@ title:
 debug: true
 ---
 
-```jsx
+```tsx
+import React from 'react';
 import {
   Typography,
   Button,
@@ -65,7 +66,7 @@ const options = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Mentions style={{ width: 100 }} rows={1} />
     <Input.TextArea rows={1} style={{ width: 100 }} />
@@ -101,4 +102,6 @@ export default () => (
     <Input style={narrowStyle} defaultValue="1" suffix="Y" />
   </>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/allowClear.md b/components/input/demo/allowClear.md
index ff74e57a40..a6dcde70b3 100644
--- a/components/input/demo/allowClear.md
+++ b/components/input/demo/allowClear.md
@@ -13,16 +13,17 @@ title:
 
 Input box with the remove icon, click the icon to delete everything.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-const onChange = e => {
+const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
   console.log(e);
 };
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Input placeholder="input with clear icon" allowClear onChange={onChange} />
     <br />
@@ -30,4 +31,6 @@ export default () => (
     <TextArea placeholder="textarea with clear icon" allowClear onChange={onChange} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/autosize-textarea.md b/components/input/demo/autosize-textarea.md
index 351bfde3dd..d833e1aae9 100644
--- a/components/input/demo/autosize-textarea.md
+++ b/components/input/demo/autosize-textarea.md
@@ -13,18 +13,14 @@ title:
 
 `autoSize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content. An option object can be provided to `autoSize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-export default () => {
-  const [value, setValue] = React.useState();
-
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  const onChange = ({ target: { value } }) => {
-    setValue(value);
-  };
+const App: React.FC = () => {
+  const [value, setValue] = useState('');
 
   return (
     <>
@@ -37,11 +33,13 @@ export default () => {
       <div style={{ margin: '24px 0' }} />
       <TextArea
         value={value}
-        onChange={onChange}
+        onChange={e => setValue(e.target.value)}
         placeholder="Controlled autosize"
         autoSize={{ minRows: 3, maxRows: 5 }}
       />
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/input/demo/basic.md b/components/input/demo/basic.md
index 4305cdea10..ba8f153585 100644
--- a/components/input/demo/basic.md
+++ b/components/input/demo/basic.md
@@ -13,8 +13,11 @@ title:
 
 Basic usage example.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input } from 'antd';
 
-export default () => <Input placeholder="Basic usage" />;
+const App: React.FC = () => <Input placeholder="Basic usage" />;
+
+export default App;
 ```
diff --git a/components/input/demo/borderless-debug.md b/components/input/demo/borderless-debug.md
index d67f72e405..9754add990 100644
--- a/components/input/demo/borderless-debug.md
+++ b/components/input/demo/borderless-debug.md
@@ -14,12 +14,13 @@ Buggy!
 
 Buggy!
 
-```jsx
+```tsx
+import React from 'react';
 import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-export default () => (
+const App: React.FC = () => (
   <div style={{ backgroundColor: 'rgba(0, 0, 128, .2)' }}>
     <Input placeholder="Unbordered" bordered={false} />
     <Input placeholder="Unbordered" bordered={false} size="large" />
@@ -30,4 +31,6 @@ export default () => (
     <Input prefix="￥" suffix="RMB" disabled bordered={false} />
   </div>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/borderless.md b/components/input/demo/borderless.md
index ba0dd94aa8..221b404363 100644
--- a/components/input/demo/borderless.md
+++ b/components/input/demo/borderless.md
@@ -13,8 +13,11 @@ title:
 
 No border.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input } from 'antd';
 
-export default () => <Input placeholder="Borderless" bordered={false} />;
+const App: React.FC = () => <Input placeholder="Borderless" bordered={false} />;
+
+export default App;
 ```
diff --git a/components/input/demo/focus.md b/components/input/demo/focus.md
index 712ae7b32f..4eb897a86f 100644
--- a/components/input/demo/focus.md
+++ b/components/input/demo/focus.md
@@ -14,11 +14,12 @@ title:
 Focus with additional option.
 
 ```tsx
+import React, { useState, useRef } from 'react';
 import { Input, Space, Button, Switch } from 'antd';
 
-const Demo = () => {
-  const inputRef = React.useRef<any>(null);
-  const [input, setInput] = React.useState(true);
+const App: React.FC = () => {
+  const inputRef = useRef<any>(null);
+  const [input, setInput] = useState(true);
 
   const sharedProps = {
     style: { width: '100%' },
@@ -80,5 +81,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/input/demo/group.md b/components/input/demo/group.md
index b344e003d6..d00bfaf8f1 100644
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -17,7 +17,8 @@ Input.Group example.
 
 Note: You don't need `Col` to control the width in the `compact` mode.
 
-```jsx
+```tsx
+import React from 'react';
 import {
   Input,
   Button,
@@ -69,7 +70,7 @@ const options = [
   },
 ];
 
-const App = () => (
+const App: React.FC = () => (
   <div className="site-input-group-wrapper">
     <Input.Group size="large">
       <Row gutter={8}>
diff --git a/components/input/demo/password-input.md b/components/input/demo/password-input.md
index 1e3664fd15..58c29566b4 100644
--- a/components/input/demo/password-input.md
+++ b/components/input/demo/password-input.md
@@ -13,11 +13,12 @@ title:
 
 Input type of password.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input, Space } from 'antd';
 import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <Input.Password placeholder="input password" />
     <Input.Password
@@ -26,4 +27,6 @@ export default () => (
     />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md
index d0d3b01499..df474a3d49 100644
--- a/components/input/demo/presuffix.md
+++ b/components/input/demo/presuffix.md
@@ -13,11 +13,12 @@ title:
 
 Add a prefix or suffix icons inside input.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input, Tooltip } from 'antd';
 import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Input
       placeholder="Enter your username"
@@ -36,4 +37,6 @@ export default () => (
     <Input prefix="￥" suffix="RMB" disabled />
   </>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/search-input-loading.md b/components/input/demo/search-input-loading.md
index bbf7008982..7702788b77 100644
--- a/components/input/demo/search-input-loading.md
+++ b/components/input/demo/search-input-loading.md
@@ -13,12 +13,13 @@ title:
 
 Search loading when onSearch.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input } from 'antd';
 
 const { Search } = Input;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Search placeholder="input search loading default" loading />
     <br />
@@ -29,4 +30,6 @@ export default () => (
     <Search placeholder="input search text" enterButton="Search" size="large" loading />
   </>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md
index 1f137ee904..2685451532 100644
--- a/components/input/demo/search-input.md
+++ b/components/input/demo/search-input.md
@@ -13,7 +13,8 @@ title:
 
 Example of creating a search box by grouping a standard input with a search button.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input, Space } from 'antd';
 import { AudioOutlined } from '@ant-design/icons';
 
@@ -28,9 +29,9 @@ const suffix = (
   />
 );
 
-const onSearch = value => console.log(value);
+const onSearch = (value: string) => console.log(value);
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
     <Search placeholder="input search text" allowClear onSearch={onSearch} style={{ width: 200 }} />
@@ -58,4 +59,6 @@ export default () => (
     />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/show-count.md b/components/input/demo/show-count.md
index 1ff260ae91..980e417668 100644
--- a/components/input/demo/show-count.md
+++ b/components/input/demo/show-count.md
@@ -13,16 +13,17 @@ title:
 
 Show character counting.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-const onChange = e => {
+const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
   console.log('Change:', e.target.value);
 };
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Input showCount maxLength={20} onChange={onChange} />
     <br />
@@ -30,4 +31,6 @@ export default () => (
     <TextArea showCount maxLength={100} onChange={onChange} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/size.md b/components/input/demo/size.md
index b219ec483d..b910e6392f 100644
--- a/components/input/demo/size.md
+++ b/components/input/demo/size.md
@@ -13,11 +13,12 @@ title:
 
 There are three sizes of an Input box: `large` (40px), `default` (32px) and `small` (24px).
 
-```jsx
+```tsx
+import React from 'react';
 import { Input } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Input size="large" placeholder="large size" prefix={<UserOutlined />} />
     <br />
@@ -28,4 +29,6 @@ export default () => (
     <Input size="small" placeholder="small size" prefix={<UserOutlined />} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/status.md b/components/input/demo/status.md
index efaee5b53a..44eb7399ef 100644
--- a/components/input/demo/status.md
+++ b/components/input/demo/status.md
@@ -15,10 +15,11 @@ title:
 Add status to Input with `status`, which could be `error` or `warning`.
 
 ```tsx
+import React from 'react';
 import { Input, Space } from 'antd';
 import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
 
-const ValidateInputs: React.FC = () => (
+const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <Input status="error" placeholder="Error" />
     <Input status="warning" placeholder="Warning" />
@@ -27,5 +28,5 @@ const ValidateInputs: React.FC = () => (
   </Space>
 );
 
-export default () => <ValidateInputs />;
+export default App;
 ```
diff --git a/components/input/demo/textarea-resize.md b/components/input/demo/textarea-resize.md
index 79aad4842c..9996da5096 100644
--- a/components/input/demo/textarea-resize.md
+++ b/components/input/demo/textarea-resize.md
@@ -14,7 +14,8 @@ debug: true
 
 For multi-line input.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Input, Button } from 'antd';
 
 const { TextArea } = Input;
@@ -22,8 +23,8 @@ const { TextArea } = Input;
 const defaultValue =
   'The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.';
 
-export default () => {
-  const [autoResize, setAutoResize] = React.useState(false);
+const App: React.FC = () => {
+  const [autoResize, setAutoResize] = useState(false);
 
   return (
     <>
@@ -35,4 +36,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/input/demo/textarea-show-count.md b/components/input/demo/textarea-show-count.md
index 44779aa8a4..8d14b94bf2 100644
--- a/components/input/demo/textarea-show-count.md
+++ b/components/input/demo/textarea-show-count.md
@@ -13,16 +13,19 @@ title:
 
 Show character counting.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-const onChange = e => {
+const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
   console.log('Change:', e.target.value);
 };
 
-export default () => (
+const App: React.FC = () => (
   <TextArea showCount maxLength={100} style={{ height: 120 }} onChange={onChange} />
 );
+
+export default App;
 ```
diff --git a/components/input/demo/textarea.md b/components/input/demo/textarea.md
index 0e97e5cbf6..4eb8074bf7 100644
--- a/components/input/demo/textarea.md
+++ b/components/input/demo/textarea.md
@@ -13,12 +13,13 @@ title:
 
 For multi-line input.
 
-```jsx
+```tsx
+import React from 'react';
 import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <TextArea rows={4} />
     <br />
@@ -26,4 +27,6 @@ export default () => (
     <TextArea rows={4} placeholder="maxLength is 6" maxLength={6} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/input/demo/tooltip.md b/components/input/demo/tooltip.md
index 5ba543b56c..5118c39dbf 100644
--- a/components/input/demo/tooltip.md
+++ b/components/input/demo/tooltip.md
@@ -13,20 +13,25 @@ title:
 
 You can use the Input in conjunction with [Tooltip](/components/tooltip) component to create a Numeric Input, which can provide a good experience for extra-long content display.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Input, Tooltip } from 'antd';
 
-function formatNumber(value) {
-  return new Intl.NumberFormat().format(value);
+interface NumericInputProps {
+  style: React.CSSProperties;
+  value: string;
+  onChange: (value: string) => void;
 }
 
-const NumericInput = props => {
-  const { value, onBlur, onChange } = props;
+const formatNumber = (value: number) => new Intl.NumberFormat().format(value);
 
-  const handleChange = e => {
-    const inputValue = e.target.value;
+const NumericInput = (props: NumericInputProps) => {
+  const { value, onChange } = props;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value: inputValue } = e.target;
     const reg = /^-?\d*(\.\d*)?$/;
-    if ((!isNaN(inputValue) && reg.test(inputValue)) || inputValue === '' || inputValue === '-') {
+    if (reg.test(inputValue) || inputValue === '' || inputValue === '-') {
       onChange(inputValue);
     }
   };
@@ -38,16 +43,14 @@ const NumericInput = props => {
       valueTemp = value.slice(0, -1);
     }
     onChange(valueTemp.replace(/0*(\d+)/, '$1'));
-    if (onBlur) {
-      onBlur();
-    }
   };
 
   const title = value ? (
-    <span className="numeric-input-title">{value !== '-' ? formatNumber(value) : '-'}</span>
+    <span className="numeric-input-title">{value !== '-' ? formatNumber(Number(value)) : '-'}</span>
   ) : (
     'Input a number'
   );
+
   return (
     <Tooltip trigger={['focus']} title={title} placement="topLeft" overlayClassName="numeric-input">
       <Input
@@ -61,15 +64,13 @@ const NumericInput = props => {
   );
 };
 
-export default () => {
-  const [value, setValue] = React.useState();
+const App: React.FC = () => {
+  const [value, setValue] = useState('');
 
-  const onChange = val => {
-    setValue(val);
-  };
-
-  return <NumericInput style={{ width: 120 }} value={value} onChange={onChange} />;
+  return <NumericInput style={{ width: 120 }} value={value} onChange={setValue} />;
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index 2660777ec9..3830f3d923 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -13,12 +13,13 @@ title:
 
 Classic page layouts.
 
-```jsx
+```tsx
+import React from 'react';
 import { Layout } from 'antd';
 
 const { Header, Footer, Sider, Content } = Layout;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Layout>
       <Header>Header</Header>
@@ -54,6 +55,8 @@ export default () => (
     </Layout>
   </>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/layout/demo/custom-trigger-debug.md b/components/layout/demo/custom-trigger-debug.md
index ac03e564cf..b6f1ea04a9 100644
--- a/components/layout/demo/custom-trigger-debug.md
+++ b/components/layout/demo/custom-trigger-debug.md
@@ -11,7 +11,7 @@ debug: true
 修改内容前，请尝试此 Demo 查看样式是否抖动。
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React, { useState } from 'react';
 import { Layout, Menu } from 'antd';
 import {
   TeamOutlined,
@@ -22,6 +22,7 @@ import {
   MenuUnfoldOutlined,
   MenuFoldOutlined,
 } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 const { Header, Sider, Content } = Layout;
 
@@ -76,12 +77,8 @@ const items: MenuProps['items'] = [
   },
 ];
 
-export default () => {
-  const [collapsed, setCollapsed] = React.useState(true);
-
-  const toggle = () => {
-    setCollapsed(!collapsed);
-  };
+const App: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(true);
 
   return (
     <Layout>
@@ -99,7 +96,7 @@ export default () => {
         <Header className="site-layout-background" style={{ padding: 0 }}>
           {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
             className: 'trigger',
-            onClick: toggle,
+            onClick: () => setCollapsed(!collapsed),
           })}
         </Header>
         <Content
@@ -116,6 +113,8 @@ export default () => {
     </Layout>
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 6de040316c..6768077e15 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -13,7 +13,8 @@ title:
 
 If you want to use a customized trigger, you can hide the default one by setting `trigger={null}`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Layout, Menu } from 'antd';
 import {
   MenuUnfoldOutlined,
@@ -25,12 +26,8 @@ import {
 
 const { Header, Sider, Content } = Layout;
 
-export default () => {
-  const [collapsed, setCollapsed] = React.useState(false);
-
-  const toggle = () => {
-    setCollapsed(!collapsed);
-  };
+const App: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(false);
 
   return (
     <Layout>
@@ -63,7 +60,7 @@ export default () => {
         <Header className="site-layout-background" style={{ padding: 0 }}>
           {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
             className: 'trigger',
-            onClick: toggle,
+            onClick: () => setCollapsed(!collapsed),
           })}
         </Header>
         <Content
@@ -80,6 +77,8 @@ export default () => {
     </Layout>
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index 420e46e296..f875d26021 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -15,7 +15,7 @@ title:
 When dealing with long content, a fixed sider can provide a better user experience.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React from 'react';
 import { Layout, Menu } from 'antd';
 import {
   AppstoreOutlined,
@@ -27,6 +27,7 @@ import {
   UploadOutlined,
   VideoCameraOutlined,
 } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -45,7 +46,7 @@ const items: MenuProps['items'] = [
   label: `nav ${index + 1}`,
 }));
 
-export default () => (
+const App: React.FC = () => (
   <Layout hasSider>
     <Sider
       style={{
@@ -165,6 +166,8 @@ export default () => (
     </Layout>
   </Layout>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index 8d48023926..b9f15f0fad 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -15,11 +15,12 @@ title:
 Fixed Header is generally used to fix the top navigation to facilitate page switching.
 
 ```tsx
+import React from 'react';
 import { Layout, Menu, Breadcrumb } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
-export default () => (
+const App: React.FC = () => (
   <Layout>
     <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
       <div className="logo" />
@@ -46,6 +47,8 @@ export default () => (
     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
   </Layout>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index 5653a26f11..77de8c25ef 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -17,13 +17,14 @@ Layout.Sider supports responsive layout.
 
 > Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to 0.
 
-```jsx
+```tsx
+import React from 'react';
 import { Layout, Menu } from 'antd';
 import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
 
 const { Header, Content, Footer, Sider } = Layout;
 
-export default () => (
+const App: React.FC = () => (
   <Layout>
     <Sider
       breakpoint="lg"
@@ -60,6 +61,8 @@ export default () => (
     </Layout>
   </Layout>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 47856256dd..9d4cd703a8 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -23,7 +23,7 @@ Generally, the mainnav is placed on the left side of the page, and the secondary
 The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React, { useState } from 'react';
 import { Layout, Menu, Breadcrumb } from 'antd';
 import {
   DesktopOutlined,
@@ -32,6 +32,7 @@ import {
   TeamOutlined,
   UserOutlined,
 } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -63,17 +64,12 @@ const items: MenuItem[] = [
   getItem('Files', '9', <FileOutlined />),
 ];
 
-export default () => {
-  const [collapsed, setCollapsed] = React.useState(false);
-
-  const onCollapse = (isCollapsed: boolean) => {
-    console.log(isCollapsed);
-    setCollapsed(isCollapsed);
-  };
+const App: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(false);
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
-      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
+      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
         <div className="logo" />
         <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
       </Sider>
@@ -93,6 +89,8 @@ export default () => {
     </Layout>
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index 3e1871102d..39df4b3cd1 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -14,9 +14,10 @@ title:
 Both the top navigation and the sidebar, commonly used in application site.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React from 'react';
 import { Layout, Menu, Breadcrumb } from 'antd';
 import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 const { Header, Content, Sider } = Layout;
 
@@ -45,7 +46,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
   },
 );
 
-export default () => (
+const App: React.FC = () => (
   <Layout>
     <Header className="header">
       <div className="logo" />
@@ -81,6 +82,8 @@ export default () => (
     </Layout>
   </Layout>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 21cd16cf59..b8d7b47b8c 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -14,9 +14,10 @@ title:
 Both the top navigation and the sidebar, commonly used in documentation site.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React from 'react';
 import { Layout, Menu, Breadcrumb } from 'antd';
 import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -45,7 +46,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
   },
 );
 
-export default () => (
+const App: React.FC = () => (
   <Layout>
     <Header className="header">
       <div className="logo" />
@@ -73,6 +74,8 @@ export default () => (
     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
   </Layout>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index ecb3fb86a1..be744ec8d5 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -19,12 +19,13 @@ Generally, the mainnav is placed at the top of the page, and includes the logo,
 
 Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.
 
-```jsx
+```tsx
+import React from 'react';
 import { Layout, Menu, Breadcrumb } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
-export default () => (
+const App: React.FC = () => (
   <Layout className="layout">
     <Header>
       <div className="logo" />
@@ -52,6 +53,8 @@ export default () => (
     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
   </Layout>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/list/demo/basic.md b/components/list/demo/basic.md
index 28b43408c3..a62560a382 100644
--- a/components/list/demo/basic.md
+++ b/components/list/demo/basic.md
@@ -13,7 +13,8 @@ title:
 
 Basic list.
 
-```jsx
+```tsx
+import React from 'react';
 import { List, Avatar } from 'antd';
 
 const data = [
@@ -31,7 +32,7 @@ const data = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <List
     itemLayout="horizontal"
     dataSource={data}
@@ -46,4 +47,6 @@ export default () => (
     )}
   />
 );
+
+export default App;
 ```
diff --git a/components/list/demo/grid-test.md b/components/list/demo/grid-test.md
index 88e9f5bc3b..02239da218 100644
--- a/components/list/demo/grid-test.md
+++ b/components/list/demo/grid-test.md
@@ -14,7 +14,8 @@ List `grid` 在各种情况下的样式表现，如 Fragment 和封装了 List.I
 
 Test List `grid` for some edge cases.
 
-```jsx
+```tsx
+import React from 'react';
 import { List, Card } from 'antd';
 
 const data = [
@@ -44,7 +45,7 @@ const ListItem = () => (
   </List.Item>
 );
 
-export default () => (
+const App: React.FC = () => (
   <>
     <List
       grid={{ gutter: 16, column: 4 }}
@@ -68,4 +69,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/list/demo/grid.md b/components/list/demo/grid.md
index 2720fdeda9..295f44e229 100644
--- a/components/list/demo/grid.md
+++ b/components/list/demo/grid.md
@@ -13,7 +13,8 @@ title:
 
 Create a grid layout by setting the `grid` property of List.
 
-```jsx
+```tsx
+import React from 'react';
 import { List, Card } from 'antd';
 
 const data = [
@@ -31,7 +32,7 @@ const data = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <List
     grid={{ gutter: 16, column: 4 }}
     dataSource={data}
@@ -42,4 +43,6 @@ export default () => (
     )}
   />
 );
+
+export default App;
 ```
diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md
index 160093e548..33670e8dc9 100644
--- a/components/list/demo/infinite-load.md
+++ b/components/list/demo/infinite-load.md
@@ -13,14 +13,30 @@ title:
 
 The example of infinite load with [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component).
 
-```jsx
+```tsx
 import React, { useState, useEffect } from 'react';
-import { List, message, Avatar, Skeleton, Divider } from 'antd';
+import { List, Avatar, Skeleton, Divider } from 'antd';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
-const InfiniteListExample = () => {
+interface DataType {
+  gender: string;
+  name: {
+    title: string;
+    first: string;
+    last: string;
+  };
+  email: string;
+  picture: {
+    large: string;
+    medium: string;
+    thumbnail: string;
+  };
+  nat: string;
+}
+
+const App: React.FC = () => {
   const [loading, setLoading] = useState(false);
-  const [data, setData] = useState([]);
+  const [data, setData] = useState<DataType[]>([]);
 
   const loadMoreData = () => {
     if (loading) {
@@ -63,7 +79,7 @@ const InfiniteListExample = () => {
         <List
           dataSource={data}
           renderItem={item => (
-            <List.Item key={item.id}>
+            <List.Item key={item.email}>
               <List.Item.Meta
                 avatar={<Avatar src={item.picture.large} />}
                 title={<a href="https://ant.design">{item.name.last}</a>}
@@ -78,5 +94,5 @@ const InfiniteListExample = () => {
   );
 };
 
-export default () => <InfiniteListExample />;
+export default App;
 ```
diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md
index 2a7375eb5c..bb6a10ee39 100644
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@@ -13,17 +13,35 @@ title:
 
 Load more list with `loadMore` property.
 
-```jsx
-import React, { useEffect, useState } from 'react';
+```tsx
+import React, { useState, useEffect } from 'react';
 import { List, Avatar, Button, Skeleton } from 'antd';
 
+interface DataType {
+  gender?: string;
+  name: {
+    title?: string;
+    first?: string;
+    last?: string;
+  };
+  email?: string;
+  picture: {
+    large?: string;
+    medium?: string;
+    thumbnail?: string;
+  };
+  nat?: string;
+  loading: boolean;
+}
+
 const count = 3;
 const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
 
-export default () => {
+const App: React.FC = () => {
   const [initLoading, setInitLoading] = useState(true);
   const [loading, setLoading] = useState(false);
-  const [data, setData] = useState([]);
+  const [data, setData] = useState<DataType[]>([]);
+  const [list, setList] = useState<DataType[]>([]);
 
   useEffect(() => {
     fetch(fakeDataUrl)
@@ -31,28 +49,26 @@ export default () => {
       .then(res => {
         setInitLoading(false);
         setData(res.results);
+        setList(res.results);
       });
   }, []);
 
-  useEffect(() => {
-    // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
-    // In real scene, you can using public method of react-virtualized:
-    // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
-    window.dispatchEvent(new Event('resize'));
-  }, [JSON.stringify(data)]);
-
   const onLoadMore = () => {
     setLoading(true);
-    const newData = data.concat(
-      [...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
+    setList(
+      data.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} }))),
     );
-    setData(newData);
-
     fetch(fakeDataUrl)
       .then(res => res.json())
       .then(res => {
+        const newData = data.concat(res.results);
+        setData(newData);
+        setList(newData);
         setLoading(false);
-        setData(data.concat(res.results));
+        // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
+        // In real scene, you can using public method of react-virtualized:
+        // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
+        window.dispatchEvent(new Event('resize'));
       });
   };
 
@@ -76,7 +92,7 @@ export default () => {
       loading={initLoading}
       itemLayout="horizontal"
       loadMore={loadMore}
-      dataSource={data}
+      dataSource={list}
       renderItem={item => (
         <List.Item
           actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
@@ -84,7 +100,7 @@ export default () => {
           <Skeleton avatar title={false} loading={item.loading} active>
             <List.Item.Meta
               avatar={<Avatar src={item.picture.large} />}
-              title={<a href="https://ant.design">{item.name.last}</a>}
+              title={<a href="https://ant.design">{item.name?.last}</a>}
               description="Ant Design, a design language for background applications, is refined by Ant UED Team"
             />
             <div>content</div>
@@ -94,6 +110,8 @@ export default () => {
     />
   );
 };
+
+export default App;
 ```
 
 ```css
diff --git a/components/list/demo/responsive.md b/components/list/demo/responsive.md
index c253c7c9bd..d990402e15 100644
--- a/components/list/demo/responsive.md
+++ b/components/list/demo/responsive.md
@@ -13,7 +13,8 @@ title:
 
 Responsive grid list. The size property the is as same as [Layout Grid](/components/grid/#Col).
 
-```jsx
+```tsx
+import React from 'react';
 import { List, Card } from 'antd';
 
 const data = [
@@ -37,7 +38,7 @@ const data = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <List
     grid={{
       gutter: 16,
@@ -56,4 +57,6 @@ export default () => (
     )}
   />
 );
+
+export default App;
 ```
diff --git a/components/list/demo/simple.md b/components/list/demo/simple.md
index 938a503652..0990390b82 100644
--- a/components/list/demo/simple.md
+++ b/components/list/demo/simple.md
@@ -21,7 +21,8 @@ If a large or small list is desired, set the size property to either large or sm
 
 Customizing the header and footer of list by setting `header` and `footer` property.
 
-```jsx
+```tsx
+import React from 'react';
 import { List, Typography, Divider } from 'antd';
 
 const data = [
@@ -32,7 +33,7 @@ const data = [
   'Los Angeles battles huge wildfires.',
 ];
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Default Size</Divider>
     <List
@@ -66,4 +67,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/list/demo/vertical.md b/components/list/demo/vertical.md
index a49cd0c79a..745bb08d5c 100644
--- a/components/list/demo/vertical.md
+++ b/components/list/demo/vertical.md
@@ -13,31 +13,29 @@ title:
 
 Set the `itemLayout` property to `vertical` to create a vertical list.
 
-```jsx
+```tsx
+import React from 'react';
 import { List, Avatar, Space } from 'antd';
 import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
 
-const listData = [];
-for (let i = 0; i < 23; i++) {
-  listData.push({
-    href: 'https://ant.design',
-    title: `ant design part ${i}`,
-    avatar: 'https://joeschmoe.io/api/v1/random',
-    description:
-      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
-    content:
-      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
-  });
-}
+const data = Array.from({ length: 23 }).map((_, i) => ({
+  href: 'https://ant.design',
+  title: `ant design part ${i}`,
+  avatar: 'https://joeschmoe.io/api/v1/random',
+  description:
+    'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+  content:
+    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
+}));
 
-const IconText = ({ icon, text }) => (
+const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
   <Space>
     {React.createElement(icon)}
     {text}
   </Space>
 );
 
-export default () => (
+const App: React.FC = () => (
   <List
     itemLayout="vertical"
     size="large"
@@ -47,7 +45,7 @@ export default () => (
       },
       pageSize: 3,
     }}
-    dataSource={listData}
+    dataSource={data}
     footer={
       <div>
         <b>ant design</b> footer part
@@ -79,4 +77,6 @@ export default () => (
     )}
   />
 );
+
+export default App;
 ```
diff --git a/components/list/demo/virtual-list.md b/components/list/demo/virtual-list.md
index f497f3c42e..d11ab0b7fb 100644
--- a/components/list/demo/virtual-list.md
+++ b/components/list/demo/virtual-list.md
@@ -13,17 +13,33 @@ title:
 
 An example of infinite & virtualized list via using [rc-virtual-list](https://github.com/react-component/virtual-list).
 
-```jsx
+```tsx
 import React, { useState, useEffect } from 'react';
 import { List, message, Avatar } from 'antd';
 import VirtualList from 'rc-virtual-list';
 
+interface UserItem {
+  email: string;
+  gender: string;
+  name: {
+    first: string;
+    last: string;
+    title: string;
+  };
+  nat: string;
+  picture: {
+    large: string;
+    medium: string;
+    thumbnail: string;
+  };
+}
+
 const fakeDataUrl =
   'https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo';
 const ContainerHeight = 400;
 
-const VirtualizedExample = () => {
-  const [data, setData] = useState([]);
+const App: React.FC = () => {
+  const [data, setData] = useState<UserItem[]>([]);
 
   const appendData = () => {
     fetch(fakeDataUrl)
@@ -38,8 +54,8 @@ const VirtualizedExample = () => {
     appendData();
   }, []);
 
-  const onScroll = e => {
-    if (e.target.scrollHeight - e.target.scrollTop === ContainerHeight) {
+  const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
+    if (e.currentTarget.scrollHeight - e.currentTarget.scrollTop === ContainerHeight) {
       appendData();
     }
   };
@@ -53,7 +69,7 @@ const VirtualizedExample = () => {
         itemKey="email"
         onScroll={onScroll}
       >
-        {item => (
+        {(item: UserItem) => (
           <List.Item key={item.email}>
             <List.Item.Meta
               avatar={<Avatar src={item.picture.large} />}
@@ -68,5 +84,5 @@ const VirtualizedExample = () => {
   );
 };
 
-export default () => <VirtualizedExample />;
+export default App;
 ```
diff --git a/components/mentions/demo/async.md b/components/mentions/demo/async.md
index 3e48539b05..21b7f1f8b3 100644
--- a/components/mentions/demo/async.md
+++ b/components/mentions/demo/async.md
@@ -13,43 +13,43 @@ title:
 
 async
 
-```jsx
-import React, { useState, useRef, useMemo } from 'react';
+```tsx
+import React, { useState } from 'react';
 import { Mentions } from 'antd';
 import debounce from 'lodash/debounce';
 
 const { Option } = Mentions;
 
-export default () => {
+const App: React.FC = () => {
+  const [search, setSearch] = useState('');
   const [loading, setLoading] = useState(false);
-  const [users, setUsers] = useState([]);
-  const searchRef = useRef();
+  const [users, setUsers] = useState<{ login: string; avatar_url: string }[]>([]);
 
-  const loadGithubUsers = useMemo(
-    () =>
-      debounce(key => {
-        if (!key) {
-          setUsers([]);
-          return;
-        }
+  const loadGithubUsers = (key: string) => {
+    if (!key) {
+      setUsers([]);
+      return;
+    }
 
-        fetch(`https://api.github.com/search/users?q=${key}`)
-          .then(res => res.json())
-          .then(({ items = [] }) => {
-            if (searchRef.current !== key) return;
-            setLoading(false);
-            setUsers(items.slice(0, 10));
-          });
-      }, 800),
-    [],
-  );
+    fetch(`https://api.github.com/search/users?q=${key}`)
+      .then(res => res.json())
+      .then(({ items = [] }) => {
+        if (search !== key) return;
 
-  const onSearch = search => {
-    setLoading(!!search);
+        setLoading(false);
+        setUsers(items.slice(0, 10));
+      });
+  };
+
+  const debounceLoadGithubUsers = debounce(loadGithubUsers, 800);
+
+  const onSearch = (newSearch: string) => {
+    console.log('Search:', newSearch);
+    setSearch(newSearch);
+    setLoading(!!newSearch);
     setUsers([]);
-    searchRef.current = search;
-    console.log('Search:', search);
-    loadGithubUsers(search);
+
+    debounceLoadGithubUsers(newSearch);
   };
 
   return (
@@ -63,6 +63,8 @@ export default () => {
     </Mentions>
   );
 };
+
+export default App;
 ```
 
 <style>
diff --git a/components/mentions/demo/autoSize.md b/components/mentions/demo/autoSize.md
index 8bc9628db8..89fe20c7b2 100644
--- a/components/mentions/demo/autoSize.md
+++ b/components/mentions/demo/autoSize.md
@@ -13,16 +13,19 @@ title:
 
 Height autoSize.
 
-```jsx
+```tsx
+import React from 'react';
 import { Mentions } from 'antd';
 
 const { Option } = Mentions;
 
-export default () => (
+const App: React.FC = () => (
   <Mentions autoSize style={{ width: '100%' }}>
     <Option value="afc163">afc163</Option>
     <Option value="zombieJ">zombieJ</Option>
     <Option value="yesmeck">yesmeck</Option>
   </Mentions>
 );
+
+export default App;
 ```
diff --git a/components/mentions/demo/basic.md b/components/mentions/demo/basic.md
index 878dc1251b..1f71b43155 100644
--- a/components/mentions/demo/basic.md
+++ b/components/mentions/demo/basic.md
@@ -13,20 +13,22 @@ title:
 
 Basic usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Mentions } from 'antd';
+import type { OptionProps } from 'antd/es/mentions';
 
 const { Option } = Mentions;
 
-function onChange(value) {
+const onChange = (value: string) => {
   console.log('Change:', value);
-}
+};
 
-function onSelect(option) {
+const onSelect = (option: OptionProps) => {
   console.log('select', option);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Mentions
     style={{ width: '100%' }}
     onChange={onChange}
@@ -38,4 +40,6 @@ export default () => (
     <Option value="yesmeck">yesmeck</Option>
   </Mentions>
 );
+
+export default App;
 ```
diff --git a/components/mentions/demo/form.md b/components/mentions/demo/form.md
index 50078c8603..2b6c4d0dca 100644
--- a/components/mentions/demo/form.md
+++ b/components/mentions/demo/form.md
@@ -14,11 +14,12 @@ title:
 Controlled mode, for example, to work with `Form`.
 
 ```tsx
+import React from 'react';
 import { Mentions, Form, Button } from 'antd';
 
 const { Option, getMentions } = Mentions;
 
-const App = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
 
   const onReset = () => {
diff --git a/components/mentions/demo/placement.md b/components/mentions/demo/placement.md
index 1eef269c5e..bfd1cc903b 100644
--- a/components/mentions/demo/placement.md
+++ b/components/mentions/demo/placement.md
@@ -13,16 +13,19 @@ title:
 
 Change the suggestions placement.
 
-```jsx
+```tsx
+import React from 'react';
 import { Mentions } from 'antd';
 
 const { Option } = Mentions;
 
-export default () => (
+const App: React.FC = () => (
   <Mentions style={{ width: '100%' }} placement="top">
     <Option value="afc163">afc163</Option>
     <Option value="zombieJ">zombieJ</Option>
     <Option value="yesmeck">yesmeck</Option>
   </Mentions>
 );
+
+export default App;
 ```
diff --git a/components/mentions/demo/prefix.md b/components/mentions/demo/prefix.md
index 00238683e5..b6d3f8f836 100644
--- a/components/mentions/demo/prefix.md
+++ b/components/mentions/demo/prefix.md
@@ -13,7 +13,8 @@ title:
 
 Customize Trigger Token by `prefix` props. Default to `@`, `Array<string>` also supported.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Mentions } from 'antd';
 
 const { Option } = Mentions;
@@ -23,11 +24,13 @@ const MOCK_DATA = {
   '#': ['1.0', '2.0', '3.0'],
 };
 
-export default () => {
-  const [prefix, setPrefix] = React.useState('@');
+type PrefixType = keyof typeof MOCK_DATA;
 
-  const onSearch = (_, prefixValue) => {
-    setPrefix(prefixValue);
+const App: React.FC = () => {
+  const [prefix, setPrefix] = useState<PrefixType>('@');
+
+  const onSearch = (_: string, newPrefix: PrefixType) => {
+    setPrefix(newPrefix);
   };
 
   return (
@@ -45,4 +48,6 @@ export default () => {
     </Mentions>
   );
 };
+
+export default App;
 ```
diff --git a/components/mentions/demo/readonly.md b/components/mentions/demo/readonly.md
index 9934813ff9..1804a15cea 100644
--- a/components/mentions/demo/readonly.md
+++ b/components/mentions/demo/readonly.md
@@ -13,33 +13,31 @@ title:
 
 Configurate `disabled` and `readOnly`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Mentions } from 'antd';
 
 const { Option } = Mentions;
 
-function getOptions() {
-  return ['afc163', 'zombiej', 'yesmeck'].map(value => (
+const getOptions = () =>
+  ['afc163', 'zombiej', 'yesmeck'].map(value => (
     <Option key={value} value={value}>
       {value}
     </Option>
   ));
-}
 
-function App() {
-  return (
-    <>
-      <div style={{ marginBottom: 10 }}>
-        <Mentions style={{ width: '100%' }} placeholder="this is disabled Mentions" disabled>
-          {getOptions()}
-        </Mentions>
-      </div>
-      <Mentions style={{ width: '100%' }} placeholder="this is readOnly Mentions" readOnly>
+const App: React.FC = () => (
+  <>
+    <div style={{ marginBottom: 10 }}>
+      <Mentions style={{ width: '100%' }} placeholder="this is disabled Mentions" disabled>
         {getOptions()}
       </Mentions>
-    </>
-  );
-}
+    </div>
+    <Mentions style={{ width: '100%' }} placeholder="this is readOnly Mentions" readOnly>
+      {getOptions()}
+    </Mentions>
+  </>
+);
 
 export default App;
 ```
diff --git a/components/mentions/demo/status.md b/components/mentions/demo/status.md
index 6a530dad97..1770af6bb1 100644
--- a/components/mentions/demo/status.md
+++ b/components/mentions/demo/status.md
@@ -13,20 +13,22 @@ title:
 
 Add status to Mentions with `status`, which could be `error` or `warning`。
 
-```jsx
+```tsx
+import React from 'react';
 import { Mentions, Space } from 'antd';
+import type { OptionProps } from 'antd/es/mentions';
 
 const { Option } = Mentions;
 
-function onChange(value) {
+const onChange = (value: string) => {
   console.log('Change:', value);
-}
+};
 
-function onSelect(option) {
+const onSelect = (option: OptionProps) => {
   console.log('select', option);
-}
+};
 
-const MentionsStatuses = () => {
+const App: React.FC = () => {
   const options = (
     <>
       <Option value="afc163">afc163</Option>
@@ -47,5 +49,5 @@ const MentionsStatuses = () => {
   );
 };
 
-export default () => <MentionsStatuses />;
+export default App;
 ```
diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md
index ee813a0858..8a0ecf49ba 100755
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@@ -14,9 +14,10 @@ title:
 Horizontal top navigation menu.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React, { useState } from 'react';
 import { Menu } from 'antd';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 const items: MenuProps['items'] = [
   {
@@ -75,8 +76,8 @@ const items: MenuProps['items'] = [
   },
 ];
 
-const App = () => {
-  const [current, setCurrent] = React.useState('mail');
+const App: React.FC = () => {
+  const [current, setCurrent] = useState('mail');
 
   const onClick: MenuProps['onClick'] = e => {
     console.log('click ', e);
diff --git a/components/menu/demo/inline-collapsed.md b/components/menu/demo/inline-collapsed.md
index fd1eab97b7..930f2cb081 100644
--- a/components/menu/demo/inline-collapsed.md
+++ b/components/menu/demo/inline-collapsed.md
@@ -18,7 +18,7 @@ Inline menu could be collapsed.
 Here is [a complete demo](/components/layout/#components-layout-demo-side) with sider layout.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React, { useState } from 'react';
 import { Menu, Button } from 'antd';
 import {
   AppstoreOutlined,
@@ -29,6 +29,7 @@ import {
   ContainerOutlined,
   MailOutlined,
 } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -68,8 +69,8 @@ const items: MenuItem[] = [
   ]),
 ];
 
-const App = () => {
-  const [collapsed, setCollapsed] = React.useState(false);
+const App: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(false);
 
   const toggleCollapsed = () => {
     setCollapsed(!collapsed);
diff --git a/components/menu/demo/inline.md b/components/menu/demo/inline.md
index 9cc1e6a0b8..fcac6350b5 100755
--- a/components/menu/demo/inline.md
+++ b/components/menu/demo/inline.md
@@ -14,9 +14,10 @@ title:
 Vertical menu with inline submenus.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React from 'react';
 import { Menu } from 'antd';
 import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -56,7 +57,7 @@ const items: MenuProps['items'] = [
   ]),
 ];
 
-const Sider = () => {
+const App: React.FC = () => {
   const onClick: MenuProps['onClick'] = e => {
     console.log('click ', e);
   };
@@ -73,5 +74,5 @@ const Sider = () => {
   );
 };
 
-export default () => <Sider />;
+export default App;
 ```
diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md
index 3a30e12de8..181cd9dfc5 100755
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -14,9 +14,10 @@ title:
 Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React, { useState } from 'react';
 import { Menu } from 'antd';
 import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -59,8 +60,8 @@ const items: MenuItem[] = [
 // submenu keys of first level
 const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
 
-const Sider = () => {
-  const [openKeys, setOpenKeys] = React.useState(['sub1']);
+const App: React.FC = () => {
+  const [openKeys, setOpenKeys] = useState(['sub1']);
 
   const onOpenChange: MenuProps['onOpenChange'] = keys => {
     const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
@@ -82,5 +83,5 @@ const Sider = () => {
   );
 };
 
-export default () => <Sider />;
+export default App;
 ```
diff --git a/components/menu/demo/style-debug.md b/components/menu/demo/style-debug.md
index 7c4c69a287..9b995ea980 100644
--- a/components/menu/demo/style-debug.md
+++ b/components/menu/demo/style-debug.md
@@ -15,10 +15,10 @@ buggy!
 buggy!
 
 ```tsx
-import * as React from 'react';
-import type { MenuProps } from 'antd';
+import React, { useState } from 'react';
 import { Menu, Switch } from 'antd';
 import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
+import type { MenuTheme, MenuProps } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -52,9 +52,9 @@ const items: MenuItem[] = [
   getItem('Option 12', '12'),
 ];
 
-const Demo = () => {
-  const [theme, setTheme] = React.useState<'dark' | 'light'>('dark');
-  const [current, setCurrent] = React.useState('1');
+const App: React.FC = () => {
+  const [theme, setTheme] = useState<MenuTheme>('dark');
+  const [current, setCurrent] = useState('1');
 
   const changeTheme = (value: boolean) => {
     setTheme(value ? 'dark' : 'light');
@@ -107,5 +107,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/menu/demo/submenu-theme.md b/components/menu/demo/submenu-theme.md
index fe5e33d2b3..a1ab1baa35 100755
--- a/components/menu/demo/submenu-theme.md
+++ b/components/menu/demo/submenu-theme.md
@@ -14,9 +14,10 @@ title:
 You can config SubMenu theme with `theme` prop to enable different theme color effect. This sample is dark for root and light for SubMenu.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React, { useState } from 'react';
 import { Menu, Switch } from 'antd';
 import { MailOutlined } from '@ant-design/icons';
+import type { MenuTheme, MenuProps } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -36,9 +37,9 @@ function getItem(
   } as MenuItem;
 }
 
-const SubMenuTheme = () => {
-  const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
-  const [current, setCurrent] = React.useState('1');
+const App: React.FC = () => {
+  const [theme, setTheme] = useState<MenuTheme>('light');
+  const [current, setCurrent] = useState('1');
 
   const changeTheme = (value: boolean) => {
     setTheme(value ? 'dark' : 'light');
@@ -83,5 +84,5 @@ const SubMenuTheme = () => {
   );
 };
 
-export default () => <SubMenuTheme />;
+export default App;
 ```
diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
index c2169d1c02..0e450b4216 100755
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@@ -14,7 +14,7 @@ title:
 Show the dynamic switching mode (between `inline` and `vertical`).
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React, { useState } from 'react';
 import { Menu, Switch, Divider } from 'antd';
 import {
   MailOutlined,
@@ -23,6 +23,7 @@ import {
   SettingOutlined,
   LinkOutlined,
 } from '@ant-design/icons';
+import type { MenuTheme, MenuProps } from 'antd/es/menu';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -63,9 +64,9 @@ const items: MenuItem[] = [
   ),
 ];
 
-const Demo = () => {
-  const [mode, setMode] = React.useState<'inline' | 'vertical'>('inline');
-  const [theme, setTheme] = React.useState<'dark' | 'light'>('light');
+const App: React.FC = () => {
+  const [mode, setMode] = useState<'vertical' | 'inline'>('inline');
+  const [theme, setTheme] = useState<MenuTheme>('light');
 
   const changeMode = (value: boolean) => {
     setMode(value ? 'vertical' : 'inline');
@@ -94,5 +95,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/menu/demo/theme.md b/components/menu/demo/theme.md
index e456e9ea1a..5a63ad754e 100755
--- a/components/menu/demo/theme.md
+++ b/components/menu/demo/theme.md
@@ -14,9 +14,10 @@ title:
 There are two built-in themes: `light` and `dark`. The default value is `light`.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React, { useState } from 'react';
 import { Menu, Switch } from 'antd';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
+import type { MenuTheme, MenuProps } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -58,9 +59,9 @@ const items: MenuItem[] = [
   ]),
 ];
 
-const Sider = () => {
-  const [theme, setTheme] = React.useState<'dark' | 'light'>('dark');
-  const [current, setCurrent] = React.useState('1');
+const App: React.FC = () => {
+  const [theme, setTheme] = useState<MenuTheme>('dark');
+  const [current, setCurrent] = useState('1');
 
   const changeTheme = (value: boolean) => {
     setTheme(value ? 'dark' : 'light');
@@ -94,5 +95,5 @@ const Sider = () => {
   );
 };
 
-export default () => <Sider />;
+export default App;
 ```
diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md
index b23d187ac8..206fef8c7d 100755
--- a/components/menu/demo/vertical.md
+++ b/components/menu/demo/vertical.md
@@ -14,9 +14,10 @@ title:
 Submenus open as pop-ups.
 
 ```tsx
-import type { MenuProps } from 'antd';
+import React from 'react';
 import { Menu } from 'antd';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -60,7 +61,9 @@ const onClick: MenuProps['onClick'] = e => {
   console.log('click', e);
 };
 
-export default () => (
+const App: React.FC = () => (
   <Menu onClick={onClick} style={{ width: 256 }} mode="vertical" items={items} />
 );
+
+export default App;
 ```
diff --git a/components/message/demo/custom-style.md b/components/message/demo/custom-style.md
index 4fc0b21399..ef32dd1754 100644
--- a/components/message/demo/custom-style.md
+++ b/components/message/demo/custom-style.md
@@ -13,7 +13,8 @@ title:
 
 The `style` and `className` are available to customize Message.
 
-```jsx
+```tsx
+import React from 'react';
 import { message, Button } from 'antd';
 
 const success = () => {
@@ -26,5 +27,7 @@ const success = () => {
   });
 };
 
-export default () => <Button onClick={success}>Customized style</Button>;
+const App: React.FC = () => <Button onClick={success}>Customized style</Button>;
+
+export default App;
 ```
diff --git a/components/message/demo/duration.md b/components/message/demo/duration.md
index 4078ab5b39..8d5ab679e8 100644
--- a/components/message/demo/duration.md
+++ b/components/message/demo/duration.md
@@ -13,12 +13,15 @@ title:
 
 Customize message display duration from default `3s` to `10s`.
 
-```jsx
+```tsx
+import React from 'react';
 import { message, Button } from 'antd';
 
 const success = () => {
   message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
 };
 
-export default () => <Button onClick={success}>Customized display duration</Button>;
+const App: React.FC = () => <Button onClick={success}>Customized display duration</Button>;
+
+export default App;
 ```
diff --git a/components/message/demo/hooks.md b/components/message/demo/hooks.md
index 954bfca6bb..9fc76deb91 100644
--- a/components/message/demo/hooks.md
+++ b/components/message/demo/hooks.md
@@ -13,13 +13,15 @@ title:
 
 Use `message.useMessage` to get `contextHolder` with context accessible issue.
 
-```jsx
+```tsx
+import React from 'react';
 import { message, Button } from 'antd';
 
 const Context = React.createContext({ name: 'Default' });
 
-function Demo() {
+const App: React.FC = () => {
   const [messageApi, contextHolder] = message.useMessage();
+
   const info = () => {
     messageApi.open({
       type: 'info',
@@ -36,7 +38,7 @@ function Demo() {
       </Button>
     </Context.Provider>
   );
-}
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/message/demo/info.md b/components/message/demo/info.md
index cc53aa7e8b..77033056f4 100644
--- a/components/message/demo/info.md
+++ b/components/message/demo/info.md
@@ -13,16 +13,19 @@ title:
 
 Normal message for information.
 
-```jsx
+```tsx
+import React from 'react';
 import { message, Button } from 'antd';
 
 const info = () => {
   message.info('This is a normal message');
 };
 
-export default () => (
+const App: React.FC = () => (
   <Button type="primary" onClick={info}>
     Display normal message
   </Button>
 );
+
+export default App;
 ```
diff --git a/components/message/demo/loading.md b/components/message/demo/loading.md
index 23e2c0276a..c9dfb8f50f 100644
--- a/components/message/demo/loading.md
+++ b/components/message/demo/loading.md
@@ -13,7 +13,8 @@ title:
 
 Display a global loading indicator, which is dismissed by itself asynchronously.
 
-```jsx
+```tsx
+import React from 'react';
 import { message, Button } from 'antd';
 
 const success = () => {
@@ -22,5 +23,7 @@ const success = () => {
   setTimeout(hide, 2500);
 };
 
-export default () => <Button onClick={success}>Display a loading indicator</Button>;
+const App: React.FC = () => <Button onClick={success}>Display a loading indicator</Button>;
+
+export default App;
 ```
diff --git a/components/message/demo/other.md b/components/message/demo/other.md
index 12f15d9408..7f6df6160d 100644
--- a/components/message/demo/other.md
+++ b/components/message/demo/other.md
@@ -13,7 +13,8 @@ title:
 
 Messages of success, error and warning types.
 
-```jsx
+```tsx
+import React from 'react';
 import { message, Button, Space } from 'antd';
 
 const success = () => {
@@ -28,11 +29,13 @@ const warning = () => {
   message.warning('This is a warning message');
 };
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <Button onClick={success}>Success</Button>
     <Button onClick={error}>Error</Button>
     <Button onClick={warning}>Warning</Button>
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/message/demo/thenable.md b/components/message/demo/thenable.md
index affb3064c5..001a321c72 100644
--- a/components/message/demo/thenable.md
+++ b/components/message/demo/thenable.md
@@ -13,7 +13,8 @@ title:
 
 `message` provides a promise interface for `onClose`. The above example will display a new message when the old message is about to close.
 
-```jsx
+```tsx
+import React from 'react';
 import { message, Button } from 'antd';
 
 const success = () => {
@@ -23,5 +24,7 @@ const success = () => {
     .then(() => message.info('Loading finished is finished', 2.5));
 };
 
-export default () => <Button onClick={success}>Display sequential messages</Button>;
+const App: React.FC = () => <Button onClick={success}>Display sequential messages</Button>;
+
+export default App;
 ```
diff --git a/components/message/demo/update.md b/components/message/demo/update.md
index 8d65ab9fb4..b5f9fed679 100644
--- a/components/message/demo/update.md
+++ b/components/message/demo/update.md
@@ -13,7 +13,8 @@ title:
 
 Update message content with unique `key`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, message } from 'antd';
 
 const key = 'updatable';
@@ -25,9 +26,11 @@ const openMessage = () => {
   }, 1000);
 };
 
-export default () => (
+const App: React.FC = () => (
   <Button type="primary" onClick={openMessage}>
     Open the message box
   </Button>
 );
+
+export default App;
 ```
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
index c331b1c5c2..a851083ca7 100644
--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@@ -13,13 +13,14 @@ title:
 
 Asynchronously close a modal dialog when the OK button is pressed. For example, you can use this pattern when you submit a form.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Modal, Button } from 'antd';
 
-const App = () => {
-  const [visible, setVisible] = React.useState(false);
-  const [confirmLoading, setConfirmLoading] = React.useState(false);
-  const [modalText, setModalText] = React.useState('Content of the modal');
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [modalText, setModalText] = useState('Content of the modal');
 
   const showModal = () => {
     setVisible(true);
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index fe9e8590b1..3670d8e973 100644
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -13,11 +13,11 @@ title:
 
 Basic modal.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Modal, Button } from 'antd';
 
-const App = () => {
+const App: React.FC = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
 
   const showModal = () => {
diff --git a/components/modal/demo/button-props.md b/components/modal/demo/button-props.md
index 84853a55e2..8caf8e3f4a 100644
--- a/components/modal/demo/button-props.md
+++ b/components/modal/demo/button-props.md
@@ -13,22 +13,23 @@ title:
 
 Passing `okButtonProps` and `cancelButtonProps` will customize the OK button and cancel button props.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Modal, Button } from 'antd';
 
-export default () => {
-  const [visible, setVisible] = React.useState(false);
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
 
   const showModal = () => {
     setVisible(true);
   };
 
-  const handleOk = e => {
+  const handleOk = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
     setVisible(false);
   };
 
-  const handleCancel = e => {
+  const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
     setVisible(false);
   };
@@ -53,4 +54,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/modal/demo/confirm-router.md b/components/modal/demo/confirm-router.md
index 460e581629..e1d53585b8 100644
--- a/components/modal/demo/confirm-router.md
+++ b/components/modal/demo/confirm-router.md
@@ -13,17 +13,18 @@ title:
 
 `Modal.destroyAll()` will destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically.
 
-```jsx
+```tsx
+import React from 'react';
 import { Modal, Button } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 
-function destroyAll() {
-  Modal.destroyAll();
-}
-
 const { confirm } = Modal;
 
-function showConfirm() {
+const destroyAll = () => {
+  Modal.destroyAll();
+};
+
+const showConfirm = () => {
   for (let i = 0; i < 3; i += 1) {
     setTimeout(() => {
       confirm({
@@ -38,7 +39,9 @@ function showConfirm() {
       });
     }, i * 500);
   }
-}
+};
 
-export default () => <Button onClick={showConfirm}>Confirm</Button>;
+const App: React.FC = () => <Button onClick={showConfirm}>Confirm</Button>;
+
+export default App;
 ```
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
index 150e1387bd..ef24684132 100644
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -13,13 +13,14 @@ title:
 
 Use `confirm()` to show a confirmation modal dialog. Let onCancel/onOk function return a promise object to delay closing the dialog.
 
-```jsx
+```tsx
+import React from 'react';
 import { Modal, Button, Space } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 
 const { confirm } = Modal;
 
-function showConfirm() {
+const showConfirm = () => {
   confirm({
     title: 'Do you Want to delete these items?',
     icon: <ExclamationCircleOutlined />,
@@ -31,9 +32,9 @@ function showConfirm() {
       console.log('Cancel');
     },
   });
-}
+};
 
-function showPromiseConfirm() {
+const showPromiseConfirm = () => {
   confirm({
     title: 'Do you want to delete these items?',
     icon: <ExclamationCircleOutlined />,
@@ -45,9 +46,9 @@ function showPromiseConfirm() {
     },
     onCancel() {},
   });
-}
+};
 
-function showDeleteConfirm() {
+const showDeleteConfirm = () => {
   confirm({
     title: 'Are you sure delete this task?',
     icon: <ExclamationCircleOutlined />,
@@ -62,9 +63,9 @@ function showDeleteConfirm() {
       console.log('Cancel');
     },
   });
-}
+};
 
-function showPropsConfirm() {
+const showPropsConfirm = () => {
   confirm({
     title: 'Are you sure delete this task?',
     icon: <ExclamationCircleOutlined />,
@@ -82,9 +83,9 @@ function showPropsConfirm() {
       console.log('Cancel');
     },
   });
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space wrap>
     <Button onClick={showConfirm}>Confirm</Button>
     <Button onClick={showPromiseConfirm}>With promise</Button>
@@ -96,4 +97,6 @@ export default () => (
     </Button>
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index 18ac902f51..220800d583 100644
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@@ -17,11 +17,11 @@ A more complex example which define a customized footer button bar. The dialog w
 
 You could set `footer` to `null` if you don't need default footer buttons.
 
-```jsx
-import { useState } from 'react';
+```tsx
+import React, { useState } from 'react';
 import { Modal, Button } from 'antd';
 
-export default () => {
+const App: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const [visible, setVisible] = useState(false);
 
@@ -78,4 +78,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/modal/demo/hooks.md b/components/modal/demo/hooks.md
index 1e9be6a59c..9c43032c6c 100644
--- a/components/modal/demo/hooks.md
+++ b/components/modal/demo/hooks.md
@@ -13,11 +13,12 @@ title:
 
 Use `Modal.useModal` to get `contextHolder` with context accessible issue.
 
-```jsx
+```tsx
+import React, { createContext } from 'react';
 import { Modal, Button, Space } from 'antd';
 
-const ReachableContext = React.createContext();
-const UnreachableContext = React.createContext();
+const ReachableContext = createContext<string | null>(null);
+const UnreachableContext = createContext<string | null>(null);
 
 const config = {
   title: 'Use Hook!',
@@ -30,7 +31,7 @@ const config = {
   ),
 };
 
-const App = () => {
+const App: React.FC = () => {
   const [modal, contextHolder] = Modal.useModal();
 
   return (
diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
index ede9a2f0dc..96a32ac708 100644
--- a/components/modal/demo/info.md
+++ b/components/modal/demo/info.md
@@ -13,10 +13,11 @@ title:
 
 In the various types of information modal dialog, only one button to close dialog is provided.
 
-```jsx
+```tsx
+import React from 'react';
 import { Modal, Button, Space } from 'antd';
 
-function info() {
+const info = () => {
   Modal.info({
     title: 'This is a notification message',
     content: (
@@ -27,29 +28,29 @@ function info() {
     ),
     onOk() {},
   });
-}
+};
 
-function success() {
+const success = () => {
   Modal.success({
     content: 'some messages...some messages...',
   });
-}
+};
 
-function error() {
+const error = () => {
   Modal.error({
     title: 'This is an error message',
     content: 'some messages...some messages...',
   });
-}
+};
 
-function warning() {
+const warning = () => {
   Modal.warning({
     title: 'This is a warning message',
     content: 'some messages...some messages...',
   });
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space wrap>
     <Button onClick={info}>Info</Button>
     <Button onClick={success}>Success</Button>
@@ -57,4 +58,6 @@ export default () => (
     <Button onClick={warning}>Warning</Button>
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
index 45cb18745b..e6442f8a98 100644
--- a/components/modal/demo/locale.md
+++ b/components/modal/demo/locale.md
@@ -13,12 +13,13 @@ title:
 
 To customize the text of the buttons, you need to set `okText` and `cancelText` props.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Modal, Button, Space } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 
 const LocalizedModal = () => {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useState(false);
 
   const showModal = () => {
     setVisible(true);
@@ -49,7 +50,7 @@ const LocalizedModal = () => {
   );
 };
 
-function confirm() {
+const confirm = () => {
   Modal.confirm({
     title: 'Confirm',
     icon: <ExclamationCircleOutlined />,
@@ -57,12 +58,14 @@ function confirm() {
     okText: '确认',
     cancelText: '取消',
   });
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <LocalizedModal />
     <Button onClick={confirm}>Confirm</Button>
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md
index 0b7f0e6860..1f58065feb 100644
--- a/components/modal/demo/manual.md
+++ b/components/modal/demo/manual.md
@@ -13,26 +13,32 @@ title:
 
 Manually updating and destroying a modal from `Modal.method`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Modal, Button } from 'antd';
 
-function countDown() {
+const countDown = () => {
   let secondsToGo = 5;
+
   const modal = Modal.success({
     title: 'This is a notification message',
     content: `This modal will be destroyed after ${secondsToGo} second.`,
   });
+
   const timer = setInterval(() => {
     secondsToGo -= 1;
     modal.update({
       content: `This modal will be destroyed after ${secondsToGo} second.`,
     });
   }, 1000);
+
   setTimeout(() => {
     clearInterval(timer);
     modal.destroy();
   }, secondsToGo * 1000);
-}
+};
 
-export default () => <Button onClick={countDown}>Open modal to close in 5s</Button>;
+const App: React.FC = () => <Button onClick={countDown}>Open modal to close in 5s</Button>;
+
+export default App;
 ```
diff --git a/components/modal/demo/modal-render.md b/components/modal/demo/modal-render.md
index 8a3dc0a767..08ae4a0ae0 100644
--- a/components/modal/demo/modal-render.md
+++ b/components/modal/demo/modal-render.md
@@ -13,32 +13,33 @@ title:
 
 Custom modal content render. use `react-draggable` implements draggable.
 
-```jsx
-import { useState, useRef } from 'react';
+```tsx
+import React, { useRef, useState } from 'react';
 import { Modal, Button } from 'antd';
 import Draggable from 'react-draggable';
+import type { DraggableEvent, DraggableData } from 'react-draggable';
 
-export default () => {
+const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
-  const [disabled, setDisabled] = useState(true);
+  const [disabled, setDisabled] = useState(false);
   const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
-  const draggleRef = useRef();
+  const draggleRef = useRef<HTMLDivElement>(null);
 
   const showModal = () => {
     setVisible(true);
   };
 
-  const handleOk = e => {
+  const handleOk = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
     setVisible(false);
   };
 
-  const handleCancel = e => {
+  const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
     setVisible(false);
   };
 
-  const onStart = (event, uiData) => {
+  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
     const { clientWidth, clientHeight } = window.document.documentElement;
     const targetRect = draggleRef.current?.getBoundingClientRect();
     if (!targetRect) {
@@ -101,4 +102,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
index 7dd11ee288..d05d07c75d 100644
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@@ -13,12 +13,13 @@ title:
 
 You can use `centered`,`style.top` or other styles to set position of modal dialog.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Modal, Button } from 'antd';
 
-export default () => {
-  const [modal1Visible, setModal1Visible] = React.useState(false);
-  const [modal2Visible, setModal2Visible] = React.useState(false);
+const App: React.FC = () => {
+  const [modal1Visible, setModal1Visible] = useState(false);
+  const [modal2Visible, setModal2Visible] = useState(false);
 
   return (
     <>
@@ -55,4 +56,6 @@ export default () => {
     </>
   );
 };
+
+export default App;
 ```
diff --git a/components/modal/demo/width.md b/components/modal/demo/width.md
index 6e8aadc331..b882925bb4 100644
--- a/components/modal/demo/width.md
+++ b/components/modal/demo/width.md
@@ -13,12 +13,13 @@ title:
 
 Use `width` to set the width of the modal dialog.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Modal, Button } from 'antd';
 
-const App = () => {
+const App: React.FC = () => {
   const [visible, setVisible] = useState(false);
+
   return (
     <>
       <Button type="primary" onClick={() => setVisible(true)}>
diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md
index d1a424616c..75d3367340 100644
--- a/components/notification/demo/basic.md
+++ b/components/notification/demo/basic.md
@@ -13,7 +13,8 @@ title:
 
 The simplest usage that close the notification box after 4.5s.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, notification } from 'antd';
 
 const openNotification = () => {
@@ -26,10 +27,11 @@ const openNotification = () => {
     },
   });
 };
-
-export default () => (
+const App: React.FC = () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
   </Button>
 );
+
+export default App;
 ```
diff --git a/components/notification/demo/custom-icon.md b/components/notification/demo/custom-icon.md
index 389aca236c..a52c6255f7 100644
--- a/components/notification/demo/custom-icon.md
+++ b/components/notification/demo/custom-icon.md
@@ -13,7 +13,8 @@ title:
 
 The icon can be customized to any react node.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, notification } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
@@ -26,9 +27,11 @@ const openNotification = () => {
   });
 };
 
-export default () => (
+const App: React.FC = () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
   </Button>
 );
+
+export default App;
 ```
diff --git a/components/notification/demo/custom-style.md b/components/notification/demo/custom-style.md
index 84b15019b0..b1ac88d426 100644
--- a/components/notification/demo/custom-style.md
+++ b/components/notification/demo/custom-style.md
@@ -13,7 +13,8 @@ title:
 
 The style and className are available to customize Notification.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, notification } from 'antd';
 
 const openNotification = () => {
@@ -28,9 +29,11 @@ const openNotification = () => {
   });
 };
 
-export default () => (
+const App: React.FC = () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
   </Button>
 );
+
+export default App;
 ```
diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md
index 8da6bca4fa..19ad437ba6 100644
--- a/components/notification/demo/duration.md
+++ b/components/notification/demo/duration.md
@@ -13,7 +13,8 @@ title:
 
 `Duration` can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0, the notification box will never close automatically.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, notification } from 'antd';
 
 const openNotification = () => {
@@ -26,9 +27,11 @@ const openNotification = () => {
   notification.open(args);
 };
 
-export default () => (
+const App: React.FC = () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
   </Button>
 );
+
+export default App;
 ```
diff --git a/components/notification/demo/hooks.md b/components/notification/demo/hooks.md
index b5b2941af8..eb77ac0ac7 100755
--- a/components/notification/demo/hooks.md
+++ b/components/notification/demo/hooks.md
@@ -13,7 +13,8 @@ title:
 
 Use `notification.useNotification` to get `contextHolder` with context accessible issue.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, notification, Divider, Space } from 'antd';
 import {
   RadiusUpleftOutlined,
@@ -21,13 +22,14 @@ import {
   RadiusBottomleftOutlined,
   RadiusBottomrightOutlined,
 } from '@ant-design/icons';
+import type { NotificationPlacement } from 'antd/lib/notification';
 
 const Context = React.createContext({ name: 'Default' });
 
-const Demo = () => {
+const App: React.FC = () => {
   const [api, contextHolder] = notification.useNotification();
 
-  const openNotification = placement => {
+  const openNotification = (placement: NotificationPlacement) => {
     api.info({
       message: `Notification ${placement}`,
       description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
@@ -63,5 +65,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index 4218d320c7..3165955d64 100755
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -13,7 +13,8 @@ title:
 
 A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport via `placement`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, notification, Divider, Space } from 'antd';
 import {
   RadiusUpleftOutlined,
@@ -23,8 +24,9 @@ import {
   BorderTopOutlined,
   BorderBottomOutlined,
 } from '@ant-design/icons';
+import type { NotificationPlacement } from 'antd/lib/notification';
 
-const openNotification = placement => {
+const openNotification = (placement: NotificationPlacement) => {
   notification.info({
     message: `Notification ${placement}`,
     description:
@@ -33,7 +35,7 @@ const openNotification = placement => {
   });
 };
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Space>
       <Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
@@ -83,4 +85,6 @@ export default () => (
     </Space>
   </>
 );
+
+export default App;
 ```
diff --git a/components/notification/demo/update.md b/components/notification/demo/update.md
index 2fca4e0362..d2d9fcff7f 100644
--- a/components/notification/demo/update.md
+++ b/components/notification/demo/update.md
@@ -13,7 +13,8 @@ title:
 
 Update content with unique key.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, notification } from 'antd';
 
 const key = 'updatable';
@@ -24,6 +25,7 @@ const openNotification = () => {
     message: 'Notification Title',
     description: 'description.',
   });
+
   setTimeout(() => {
     notification.open({
       key,
@@ -33,9 +35,11 @@ const openNotification = () => {
   }, 1000);
 };
 
-export default () => (
+const App: React.FC = () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
   </Button>
 );
+
+export default App;
 ```
diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md
index cfea71e3c9..b7aab4e7fe 100644
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -13,7 +13,8 @@ title:
 
 To customize the style or font of the close button.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, notification } from 'antd';
 
 const close = () => {
@@ -39,9 +40,11 @@ const openNotification = () => {
   });
 };
 
-export default () => (
+const App: React.FC = () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
   </Button>
 );
+
+export default App;
 ```
diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md
index 7f4e0d263f..dde42f6b1f 100644
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@@ -13,10 +13,13 @@ title:
 
 A notification box with a icon at the left side.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, notification, Space } from 'antd';
 
-const openNotificationWithIcon = type => {
+type NotificationType = 'success' | 'info' | 'warning' | 'error';
+
+const openNotificationWithIcon = (type: NotificationType) => {
   notification[type]({
     message: 'Notification Title',
     description:
@@ -24,7 +27,7 @@ const openNotificationWithIcon = type => {
   });
 };
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
     <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
@@ -32,4 +35,6 @@ export default () => (
     <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md
index f062590967..2c41232037 100644
--- a/components/page-header/demo/actions.md
+++ b/components/page-header/demo/actions.md
@@ -13,10 +13,11 @@ title:
 
 Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.
 
-```jsx
+```tsx
+import React from 'react';
 import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <PageHeader
       className="site-page-header"
@@ -72,6 +73,8 @@ export default () => (
     </PageHeader>
   </>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/page-header/demo/basic.md b/components/page-header/demo/basic.md
index aaed6d5add..94e075afa7 100644
--- a/components/page-header/demo/basic.md
+++ b/components/page-header/demo/basic.md
@@ -13,10 +13,11 @@ title:
 
 Standard header, suitable for use in scenarios that require a brief description.
 
-```jsx
+```tsx
+import React from 'react';
 import { PageHeader } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <PageHeader
     className="site-page-header"
     onBack={() => null}
@@ -24,6 +25,8 @@ export default () => (
     subTitle="This is a subtitle"
   />
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/page-header/demo/breadcrumb.md b/components/page-header/demo/breadcrumb.md
index 3f7ef90802..ac00138b8a 100644
--- a/components/page-header/demo/breadcrumb.md
+++ b/components/page-header/demo/breadcrumb.md
@@ -13,7 +13,8 @@ title:
 
 With breadcrumbs, it is suitable for deeper pages, allowing users to navigate quickly.
 
-```jsx
+```tsx
+import React from 'react';
 import { PageHeader } from 'antd';
 
 const routes = [
@@ -31,7 +32,7 @@ const routes = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <PageHeader
     className="site-page-header"
     title="Title"
@@ -39,4 +40,6 @@ export default () => (
     subTitle="This is a subtitle"
   />
 );
+
+export default App;
 ```
diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md
index b8433d7fd3..7e57f494ee 100644
--- a/components/page-header/demo/content.md
+++ b/components/page-header/demo/content.md
@@ -13,7 +13,8 @@ title:
 
 Show all props provided by PageHeader.
 
-```jsx
+```tsx
+import React from 'react';
 import { PageHeader, Menu, Dropdown, Button, Tag, Typography, Row } from 'antd';
 import { MoreOutlined } from '@ant-design/icons';
 
@@ -23,6 +24,7 @@ const menu = (
   <Menu
     items={[
       {
+        key: '1',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
             1st menu item
@@ -30,6 +32,7 @@ const menu = (
         ),
       },
       {
+        key: '2',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
             2nd menu item
@@ -37,6 +40,7 @@ const menu = (
         ),
       },
       {
+        key: '3',
         label: (
           <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
             3rd menu item
@@ -68,7 +72,7 @@ const routes = [
   },
 ];
 
-const IconLink = ({ src, text }) => (
+const IconLink = ({ src, text }: { src: string; text: string }) => (
   <a className="example-link">
     <img className="example-link-icon" src={src} alt={text} />
     {text}
@@ -103,14 +107,17 @@ const content = (
   </>
 );
 
-const Content = ({ children, extraContent }) => (
+const Content: React.FC<{ children: React.ReactNode; extraContent: React.ReactNode }> = ({
+  children,
+  extraContent,
+}) => (
   <Row>
     <div style={{ flex: 1 }}>{children}</div>
     <div className="image">{extraContent}</div>
   </Row>
 );
 
-export default () => (
+const App: React.FC = () => (
   <PageHeader
     title="Title"
     className="site-page-header"
@@ -140,6 +147,8 @@ export default () => (
     </Content>
   </PageHeader>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/page-header/demo/ghost.md b/components/page-header/demo/ghost.md
index e364caf87c..df8c9f2629 100644
--- a/components/page-header/demo/ghost.md
+++ b/components/page-header/demo/ghost.md
@@ -13,10 +13,11 @@ title:
 
 The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.
 
-```jsx
+```tsx
+import React from 'react';
 import { PageHeader, Button, Descriptions } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <div className="site-page-header-ghost-wrapper">
     <PageHeader
       ghost={false}
@@ -45,6 +46,8 @@ export default () => (
     </PageHeader>
   </div>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/page-header/demo/responsive.md b/components/page-header/demo/responsive.md
index 88d4983677..9ae62b8ae4 100644
--- a/components/page-header/demo/responsive.md
+++ b/components/page-header/demo/responsive.md
@@ -14,7 +14,8 @@ title:
 
 Under different screen sizes, there should be different performance
 
-```jsx
+```tsx
+import React from 'react';
 import { PageHeader, Tabs, Button, Statistic, Descriptions } from 'antd';
 
 const { TabPane } = Tabs;
@@ -52,14 +53,17 @@ const extraContent = (
   </div>
 );
 
-const Content = ({ children, extra }) => (
+const Content: React.FC<{ children: React.ReactNode; extra: React.ReactNode }> = ({
+  children,
+  extra,
+}) => (
   <div className="content">
     <div className="main">{children}</div>
     <div className="extra">{extra}</div>
   </div>
 );
 
-export default () => (
+const App: React.FC = () => (
   <PageHeader
     className="site-page-header-responsive"
     onBack={() => window.history.back()}
@@ -82,6 +86,8 @@ export default () => (
     <Content extra={extraContent}>{renderContent()}</Content>
   </PageHeader>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/pagination/demo/all.md b/components/pagination/demo/all.md
index 54647d3575..feaa08be2d 100644
--- a/components/pagination/demo/all.md
+++ b/components/pagination/demo/all.md
@@ -13,10 +13,11 @@ title:
 
 Show all configured prop.
 
-```jsx
+```tsx
+import React from 'react';
 import { Pagination } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Pagination
     total={85}
     showSizeChanger
@@ -24,4 +25,6 @@ export default () => (
     showTotal={total => `Total ${total} items`}
   />
 );
+
+export default App;
 ```
diff --git a/components/pagination/demo/basic.md b/components/pagination/demo/basic.md
index 2493db08ac..066cf96576 100644
--- a/components/pagination/demo/basic.md
+++ b/components/pagination/demo/basic.md
@@ -13,8 +13,11 @@ title:
 
 Basic pagination.
 
-```jsx
+```tsx
+import React from 'react';
 import { Pagination } from 'antd';
 
-export default () => <Pagination defaultCurrent={1} total={50} />;
+const App: React.FC = () => <Pagination defaultCurrent={1} total={50} />;
+
+export default App;
 ```
diff --git a/components/pagination/demo/changer.md b/components/pagination/demo/changer.md
index 708aa3d5cb..11f33f74b0 100644
--- a/components/pagination/demo/changer.md
+++ b/components/pagination/demo/changer.md
@@ -13,14 +13,16 @@ title:
 
 Change `pageSize`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Pagination } from 'antd';
+import type { PaginationProps } from 'antd';
 
-function onShowSizeChange(current, pageSize) {
+const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
   console.log(current, pageSize);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Pagination
       showSizeChanger
@@ -38,4 +40,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/pagination/demo/controlled.md b/components/pagination/demo/controlled.md
index 055c2b6837..51a4f5385f 100644
--- a/components/pagination/demo/controlled.md
+++ b/components/pagination/demo/controlled.md
@@ -13,25 +13,21 @@ title:
 
 Controlled page number.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Pagination } from 'antd';
+import type { PaginationProps } from 'antd';
 
-class App extends React.Component {
-  state = {
-    current: 3,
-  };
+const App: React.FC = () => {
+  const [current, setCurrent] = useState(3);
 
-  onChange = page => {
+  const onChange: PaginationProps['onChange'] = page => {
     console.log(page);
-    this.setState({
-      current: page,
-    });
+    setCurrent(page);
   };
 
-  render() {
-    return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
-  }
-}
+  return <Pagination current={current} onChange={onChange} total={50} />;
+};
 
 export default App;
 ```
diff --git a/components/pagination/demo/itemRender.md b/components/pagination/demo/itemRender.md
index bc6dc5eb57..3f9ac638f5 100644
--- a/components/pagination/demo/itemRender.md
+++ b/components/pagination/demo/itemRender.md
@@ -13,10 +13,12 @@ title:
 
 Use text link for prev and next button.
 
-```jsx
+```tsx
+import React from 'react';
 import { Pagination } from 'antd';
+import type { PaginationProps } from 'antd';
 
-function itemRender(current, type, originalElement) {
+const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
   if (type === 'prev') {
     return <a>Previous</a>;
   }
@@ -24,7 +26,9 @@ function itemRender(current, type, originalElement) {
     return <a>Next</a>;
   }
   return originalElement;
-}
+};
 
-export default () => <Pagination total={500} itemRender={itemRender} />;
+const App: React.FC = () => <Pagination total={500} itemRender={itemRender} />;
+
+export default App;
 ```
diff --git a/components/pagination/demo/jump.md b/components/pagination/demo/jump.md
index 4df55a73fc..ed231697e3 100644
--- a/components/pagination/demo/jump.md
+++ b/components/pagination/demo/jump.md
@@ -13,18 +13,22 @@ title:
 
 Jump to a page directly.
 
-```jsx
+```tsx
+import React from 'react';
 import { Pagination } from 'antd';
+import type { PaginationProps } from 'antd';
 
-function onChange(pageNumber) {
+const onChange: PaginationProps['onChange'] = pageNumber => {
   console.log('Page: ', pageNumber);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
     <br />
     <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled />
   </>
 );
+
+export default App;
 ```
diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md
index 7bc18ee7f3..8f8aa88a6d 100644
--- a/components/pagination/demo/mini.md
+++ b/components/pagination/demo/mini.md
@@ -13,14 +13,14 @@ title:
 
 Mini size pagination.
 
-```jsx
+```tsx
+import React from 'react';
 import { Pagination } from 'antd';
+import type { PaginationProps } from 'antd';
 
-function showTotal(total) {
-  return `Total ${total} items`;
-}
+const showTotal: PaginationProps['showTotal'] = total => `Total ${total} items`;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Pagination size="small" total={50} />
     <Pagination size="small" total={50} showSizeChanger showQuickJumper />
@@ -35,6 +35,8 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/pagination/demo/more.md b/components/pagination/demo/more.md
index c57e9a13e0..03de1c561d 100644
--- a/components/pagination/demo/more.md
+++ b/components/pagination/demo/more.md
@@ -13,8 +13,11 @@ title:
 
 More pages.
 
-```jsx
+```tsx
+import React from 'react';
 import { Pagination } from 'antd';
 
-export default () => <Pagination defaultCurrent={6} total={500} />;
+const App: React.FC = () => <Pagination defaultCurrent={6} total={500} />;
+
+export default App;
 ```
diff --git a/components/pagination/demo/simple.md b/components/pagination/demo/simple.md
index cf094d5e19..93cd321040 100644
--- a/components/pagination/demo/simple.md
+++ b/components/pagination/demo/simple.md
@@ -13,14 +13,17 @@ title:
 
 Simple mode.
 
-```jsx
+```tsx
+import React from 'react';
 import { Pagination } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Pagination simple defaultCurrent={2} total={50} />
     <br />
     <Pagination disabled simple defaultCurrent={2} total={50} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/pagination/demo/total.md b/components/pagination/demo/total.md
index efaac61727..48f41d6b86 100644
--- a/components/pagination/demo/total.md
+++ b/components/pagination/demo/total.md
@@ -13,10 +13,11 @@ title:
 
 You can show the total number of data by setting `showTotal`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Pagination } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Pagination
       total={85}
@@ -33,4 +34,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/popconfirm/demo/async.md b/components/popconfirm/demo/async.md
index 06564ae681..b44cbb2e77 100644
--- a/components/popconfirm/demo/async.md
+++ b/components/popconfirm/demo/async.md
@@ -13,12 +13,13 @@ title:
 
 Asynchronously close a popconfirm when a the OK button is pressed. For example, you can use this pattern when you submit a form.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Popconfirm, Button } from 'antd';
 
-const App = () => {
-  const [visible, setVisible] = React.useState(false);
-  const [confirmLoading, setConfirmLoading] = React.useState(false);
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
 
   const showPopconfirm = () => {
     setVisible(true);
@@ -26,6 +27,7 @@ const App = () => {
 
   const handleOk = () => {
     setConfirmLoading(true);
+
     setTimeout(() => {
       setVisible(false);
       setConfirmLoading(false);
diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md
index c13add1a50..7b8c460805 100755
--- a/components/popconfirm/demo/basic.md
+++ b/components/popconfirm/demo/basic.md
@@ -13,20 +13,21 @@ title:
 
 The basic example.
 
-```jsx
+```tsx
+import React from 'react';
 import { Popconfirm, message } from 'antd';
 
-function confirm(e) {
+const confirm = (e: React.MouseEvent<HTMLElement>) => {
   console.log(e);
   message.success('Click on Yes');
-}
+};
 
-function cancel(e) {
+const cancel = (e: React.MouseEvent<HTMLElement>) => {
   console.log(e);
   message.error('Click on No');
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Popconfirm
     title="Are you sure to delete this task?"
     onConfirm={confirm}
@@ -37,4 +38,6 @@ export default () => (
     <a href="#">Delete</a>
   </Popconfirm>
 );
+
+export default App;
 ```
diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md
index f11fec29f2..a50c86e5ae 100755
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -13,65 +13,62 @@ title:
 
 Make it pop up under some conditions.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Popconfirm, Switch, message } from 'antd';
 
-class App extends React.Component {
-  state = {
-    visible: false,
-    condition: true, // Whether meet the condition, if not show popconfirm.
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [condition, setCondition] = useState(true);
+
+  const changeCondition = (checked: boolean) => {
+    setCondition(checked);
   };
 
-  changeCondition = value => {
-    this.setState({ condition: value });
-  };
-
-  confirm = () => {
-    this.setState({ visible: false });
+  const confirm = () => {
+    setVisible(false);
     message.success('Next step.');
   };
 
-  cancel = () => {
-    this.setState({ visible: false });
+  const cancel = () => {
+    setVisible(false);
     message.error('Click on cancel.');
   };
 
-  handleVisibleChange = visible => {
-    if (!visible) {
-      this.setState({ visible });
+  const handleVisibleChange = (newVisible: boolean) => {
+    if (!newVisible) {
+      setVisible(newVisible);
       return;
     }
     // Determining condition before show the popconfirm.
-    console.log(this.state.condition);
-    if (this.state.condition) {
-      this.confirm(); // next step
+    console.log(condition);
+    if (condition) {
+      confirm(); // next step
     } else {
-      this.setState({ visible }); // show the popconfirm
+      setVisible(newVisible);
     }
   };
 
-  render() {
-    return (
-      <div>
-        <Popconfirm
-          title="Are you sure delete this task?"
-          visible={this.state.visible}
-          onVisibleChange={this.handleVisibleChange}
-          onConfirm={this.confirm}
-          onCancel={this.cancel}
-          okText="Yes"
-          cancelText="No"
-        >
-          <a href="#">Delete a task</a>
-        </Popconfirm>
-        <br />
-        <br />
-        Whether directly execute：
-        <Switch defaultChecked onChange={this.changeCondition} />
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      <Popconfirm
+        title="Are you sure delete this task?"
+        visible={visible}
+        onVisibleChange={handleVisibleChange}
+        onConfirm={confirm}
+        onCancel={cancel}
+        okText="Yes"
+        cancelText="No"
+      >
+        <a href="#">Delete a task</a>
+      </Popconfirm>
+      <br />
+      <br />
+      Whether directly execute：
+      <Switch defaultChecked onChange={changeCondition} />
+    </div>
+  );
+};
 
 export default App;
 ```
diff --git a/components/popconfirm/demo/icon.md b/components/popconfirm/demo/icon.md
index acceea442d..15c2e42da7 100644
--- a/components/popconfirm/demo/icon.md
+++ b/components/popconfirm/demo/icon.md
@@ -13,13 +13,16 @@ title:
 
 Set `icon` props to customize the icon.
 
-```jsx
+```tsx
+import React from 'react';
 import { Popconfirm } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Popconfirm title="Are you sure？" icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
     <a href="#">Delete</a>
   </Popconfirm>
 );
+
+export default App;
 ```
diff --git a/components/popconfirm/demo/locale.md b/components/popconfirm/demo/locale.md
index 41f2ebc0fa..c0f20bf1d3 100755
--- a/components/popconfirm/demo/locale.md
+++ b/components/popconfirm/demo/locale.md
@@ -13,12 +13,15 @@ title:
 
 Set `okText` and `cancelText` props to customize the button's labels.
 
-```jsx
+```tsx
+import React from 'react';
 import { Popconfirm } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
     <a href="#">Delete</a>
   </Popconfirm>
 );
+
+export default App;
 ```
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
index 045807e67e..5453c3d362 100755
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@@ -13,16 +13,17 @@ title:
 
 There are 12 `placement` options available. Use `arrowPointAtCenter` if you want the arrow to point at the center of target.
 
-```jsx
+```tsx
+import React from 'react';
 import { Popconfirm, message, Button } from 'antd';
 
 const text = 'Are you sure to delete this task?';
 
-function confirm() {
+const confirm = () => {
   message.info('Clicked on Yes.');
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <div className="demo">
     <div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
       <Popconfirm placement="topLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
@@ -106,6 +107,8 @@ export default () => (
     </div>
   </div>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/popconfirm/demo/promise.md b/components/popconfirm/demo/promise.md
index 33017f8fb2..2314dd16e1 100644
--- a/components/popconfirm/demo/promise.md
+++ b/components/popconfirm/demo/promise.md
@@ -14,13 +14,14 @@ title:
 
 Asynchronously close a popconfirm when the OK button is pressed. For example, you can use this pattern when you submit a form.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, Popconfirm } from 'antd';
 
-const App = () => {
+const App: React.FC = () => {
   const confirm = () =>
     new Promise(resolve => {
-      setTimeout(() => resolve(), 3000);
+      setTimeout(() => resolve(null), 3000);
     });
 
   return (
diff --git a/components/popover/demo/arrow-point-at-center.md b/components/popover/demo/arrow-point-at-center.md
index 9ca19e0fe3..d6a0667d48 100644
--- a/components/popover/demo/arrow-point-at-center.md
+++ b/components/popover/demo/arrow-point-at-center.md
@@ -13,7 +13,8 @@ title:
 
 The arrow points to the center of the target element, which set `arrowPointAtCenter`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Popover, Button } from 'antd';
 
 const content = (
@@ -23,7 +24,7 @@ const content = (
   </>
 );
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Popover placement="topLeft" title="Title" content={content}>
       <Button>Align edge / 边缘对齐</Button>
@@ -33,4 +34,6 @@ export default () => (
     </Popover>
   </>
 );
+
+export default App;
 ```
diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md
index f4b9864c0b..ef0e328f99 100755
--- a/components/popover/demo/basic.md
+++ b/components/popover/demo/basic.md
@@ -13,7 +13,8 @@ title:
 
 The most basic example. The size of the floating layer depends on the contents region.
 
-```jsx
+```tsx
+import React from 'react';
 import { Popover, Button } from 'antd';
 
 const content = (
@@ -23,11 +24,13 @@ const content = (
   </div>
 );
 
-export default () => (
+const App: React.FC = () => (
   <Popover content={content} title="Title">
     <Button type="primary">Hover me</Button>
   </Popover>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/popover/demo/control.md b/components/popover/demo/control.md
index 21fc257748..5e617ae914 100755
--- a/components/popover/demo/control.md
+++ b/components/popover/demo/control.md
@@ -13,38 +13,33 @@ title:
 
 Use `visible` prop to control the display of the card.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Popover, Button } from 'antd';
 
-class App extends React.Component {
-  state = {
-    visible: false,
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+
+  const hide = () => {
+    setVisible(false);
   };
 
-  hide = () => {
-    this.setState({
-      visible: false,
-    });
+  const handleVisibleChange = (newVisible: boolean) => {
+    setVisible(newVisible);
   };
 
-  handleVisibleChange = visible => {
-    this.setState({ visible });
-  };
-
-  render() {
-    return (
-      <Popover
-        content={<a onClick={this.hide}>Close</a>}
-        title="Title"
-        trigger="click"
-        visible={this.state.visible}
-        onVisibleChange={this.handleVisibleChange}
-      >
-        <Button type="primary">Click me</Button>
-      </Popover>
-    );
-  }
-}
+  return (
+    <Popover
+      content={<a onClick={hide}>Close</a>}
+      title="Title"
+      trigger="click"
+      visible={visible}
+      onVisibleChange={handleVisibleChange}
+    >
+      <Button type="primary">Click me</Button>
+    </Popover>
+  );
+};
 
 export default App;
 ```
diff --git a/components/popover/demo/hover-with-click.md b/components/popover/demo/hover-with-click.md
index 8bb54ae3f2..7b9a07529d 100644
--- a/components/popover/demo/hover-with-click.md
+++ b/components/popover/demo/hover-with-click.md
@@ -13,66 +13,58 @@ title:
 
 The following example shows how to create a popover which can be hovered and clicked.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Popover, Button } from 'antd';
 
-class App extends React.Component {
-  state = {
-    clicked: false,
-    hovered: false,
+const App: React.FC = () => {
+  const [clicked, setClicked] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  const hide = () => {
+    setClicked(false);
+    setHovered(false);
   };
 
-  hide = () => {
-    this.setState({
-      clicked: false,
-      hovered: false,
-    });
+  const handleHoverChange = (visible: boolean) => {
+    setHovered(visible);
+    setClicked(false);
   };
 
-  handleHoverChange = visible => {
-    this.setState({
-      hovered: visible,
-      clicked: false,
-    });
+  const handleClickChange = (visible: boolean) => {
+    setHovered(false);
+    setClicked(visible);
   };
 
-  handleClickChange = visible => {
-    this.setState({
-      clicked: visible,
-      hovered: false,
-    });
-  };
+  const hoverContent = <div>This is hover content.</div>;
+  const clickContent = <div>This is click content.</div>;
 
-  render() {
-    const hoverContent = <div>This is hover content.</div>;
-    const clickContent = <div>This is click content.</div>;
-    return (
+  return (
+    <Popover
+      style={{ width: 500 }}
+      content={hoverContent}
+      title="Hover title"
+      trigger="hover"
+      visible={hovered}
+      onVisibleChange={handleHoverChange}
+    >
       <Popover
-        style={{ width: 500 }}
-        content={hoverContent}
-        title="Hover title"
-        trigger="hover"
-        visible={this.state.hovered}
-        onVisibleChange={this.handleHoverChange}
+        content={
+          <div>
+            {clickContent}
+            <a onClick={hide}>Close</a>
+          </div>
+        }
+        title="Click title"
+        trigger="click"
+        visible={clicked}
+        onVisibleChange={handleClickChange}
       >
-        <Popover
-          content={
-            <div>
-              {clickContent}
-              <a onClick={this.hide}>Close</a>
-            </div>
-          }
-          title="Click title"
-          trigger="click"
-          visible={this.state.clicked}
-          onVisibleChange={this.handleClickChange}
-        >
-          <Button>Hover and click / 悬停并单击</Button>
-        </Popover>
+        <Button>Hover and click / 悬停并单击</Button>
       </Popover>
-    );
-  }
-}
+    </Popover>
+  );
+};
 
 export default App;
 ```
diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md
index e46ba06e2d..f71cae65db 100755
--- a/components/popover/demo/placement.md
+++ b/components/popover/demo/placement.md
@@ -13,7 +13,8 @@ title:
 
 There are 12 `placement` options available.
 
-```jsx
+```tsx
+import React from 'react';
 import { Popover, Button } from 'antd';
 
 const text = <span>Title</span>;
@@ -26,7 +27,7 @@ const content = (
 
 const buttonWidth = 70;
 
-export default () => (
+const App: React.FC = () => (
   <div className="demo">
     <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
       <Popover placement="topLeft" title={text} content={content} trigger="click">
@@ -74,6 +75,8 @@ export default () => (
     </div>
   </div>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/popover/demo/triggerType.md b/components/popover/demo/triggerType.md
index 7789a569eb..43c7bdf1a9 100755
--- a/components/popover/demo/triggerType.md
+++ b/components/popover/demo/triggerType.md
@@ -13,7 +13,8 @@ title:
 
 Mouse to click, focus and move in.
 
-```jsx
+```tsx
+import React from 'react';
 import { Popover, Button } from 'antd';
 
 const content = (
@@ -23,7 +24,7 @@ const content = (
   </div>
 );
 
-export default () => (
+const App: React.FC = () => (
   <div>
     <Popover content={content} title="Title" trigger="hover">
       <Button>Hover me</Button>
@@ -36,4 +37,6 @@ export default () => (
     </Popover>
   </div>
 );
+
+export default App;
 ```
diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md
index aaf4466cc3..21a4efe1e3 100644
--- a/components/progress/demo/circle-dynamic.md
+++ b/components/progress/demo/circle-dynamic.md
@@ -13,43 +13,40 @@ title:
 
 A dynamic progress bar is better.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Progress, Button } from 'antd';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 
-class App extends React.Component {
-  state = {
-    percent: 0,
-  };
+const App: React.FC = () => {
+  const [percent, setPercent] = useState(0);
 
-  increase = () => {
-    let percent = this.state.percent + 10;
-    if (percent > 100) {
-      percent = 100;
+  const increase = () => {
+    let newPercent = percent + 10;
+    if (newPercent > 100) {
+      newPercent = 100;
     }
-    this.setState({ percent });
+    setPercent(newPercent);
   };
 
-  decline = () => {
-    let percent = this.state.percent - 10;
-    if (percent < 0) {
-      percent = 0;
+  const decline = () => {
+    let newPercent = percent - 10;
+    if (newPercent < 0) {
+      newPercent = 0;
     }
-    this.setState({ percent });
+    setPercent(newPercent);
   };
 
-  render() {
-    return (
-      <>
-        <Progress type="circle" percent={this.state.percent} />
-        <Button.Group>
-          <Button onClick={this.decline} icon={<MinusOutlined />} />
-          <Button onClick={this.increase} icon={<PlusOutlined />} />
-        </Button.Group>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Progress type="circle" percent={percent} />
+      <Button.Group>
+        <Button onClick={decline} icon={<MinusOutlined />} />
+        <Button onClick={increase} icon={<PlusOutlined />} />
+      </Button.Group>
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/progress/demo/circle-mini.md b/components/progress/demo/circle-mini.md
index 1d7e11547a..84617248af 100644
--- a/components/progress/demo/circle-mini.md
+++ b/components/progress/demo/circle-mini.md
@@ -13,14 +13,17 @@ title:
 
 A smaller circular progress bar.
 
-```jsx
+```tsx
+import React from 'react';
 import { Progress } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Progress type="circle" percent={30} width={80} />
     <Progress type="circle" percent={70} width={80} status="exception" />
     <Progress type="circle" percent={100} width={80} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md
index db03cce586..4ba57e1c76 100644
--- a/components/progress/demo/circle.md
+++ b/components/progress/demo/circle.md
@@ -13,16 +13,19 @@ title:
 
 A circular progress bar.
 
-```jsx
+```tsx
+import React from 'react';
 import { Progress } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Progress type="circle" percent={75} />
     <Progress type="circle" percent={70} status="exception" />
     <Progress type="circle" percent={100} />
   </>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/progress/demo/dashboard.md b/components/progress/demo/dashboard.md
index 32cb4249b3..81da1cba94 100644
--- a/components/progress/demo/dashboard.md
+++ b/components/progress/demo/dashboard.md
@@ -13,13 +13,16 @@ title:
 
 By setting `type=dashboard`, you can get a dashboard style of progress easily. Modify `gapDegree` to set the degree of gap.
 
-```jsx
+```tsx
+import React from 'react';
 import { Progress } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Progress type="dashboard" percent={75} />
     <Progress type="dashboard" percent={75} gapDegree={30} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md
index 8cde6bede6..a5b786d4ef 100644
--- a/components/progress/demo/dynamic.md
+++ b/components/progress/demo/dynamic.md
@@ -13,43 +13,40 @@ title:
 
 A dynamic progress bar is better.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Progress, Button } from 'antd';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 
-class App extends React.Component {
-  state = {
-    percent: 0,
-  };
+const App: React.FC = () => {
+  const [percent, setPercent] = useState(0);
 
-  increase = () => {
-    let percent = this.state.percent + 10;
-    if (percent > 100) {
-      percent = 100;
+  const increase = () => {
+    let newPercent = percent + 10;
+    if (newPercent > 100) {
+      newPercent = 100;
     }
-    this.setState({ percent });
+    setPercent(newPercent);
   };
 
-  decline = () => {
-    let percent = this.state.percent - 10;
-    if (percent < 0) {
-      percent = 0;
+  const decline = () => {
+    let newPercent = percent - 10;
+    if (newPercent < 0) {
+      newPercent = 0;
     }
-    this.setState({ percent });
+    setPercent(newPercent);
   };
 
-  render() {
-    return (
-      <>
-        <Progress percent={this.state.percent} />
-        <Button.Group>
-          <Button onClick={this.decline} icon={<MinusOutlined />} />
-          <Button onClick={this.increase} icon={<PlusOutlined />} />
-        </Button.Group>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Progress percent={percent} />
+      <Button.Group>
+        <Button onClick={decline} icon={<MinusOutlined />} />
+        <Button onClick={increase} icon={<PlusOutlined />} />
+      </Button.Group>
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md
index e2e43691c6..cef3d6c215 100644
--- a/components/progress/demo/format.md
+++ b/components/progress/demo/format.md
@@ -13,15 +13,18 @@ title:
 
 You can set a custom text by setting the `format` prop.
 
-```jsx
+```tsx
+import React from 'react';
 import { Progress } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Progress type="circle" percent={75} format={percent => `${percent} Days`} />
     <Progress type="circle" percent={100} format={() => 'Done'} />
   </>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/progress/demo/gradient-line.md b/components/progress/demo/gradient-line.md
index dd92b15c07..dbce306eb2 100644
--- a/components/progress/demo/gradient-line.md
+++ b/components/progress/demo/gradient-line.md
@@ -13,10 +13,11 @@ title:
 
 A package of `linear-gradient`. It is recommended to only pass two colors.
 
-```jsx
+```tsx
+import React from 'react';
 import { Progress } from 'antd';
 
-const Demo = () => (
+const App: React.FC = () => (
   <>
     <Progress
       strokeColor={{
@@ -52,5 +53,5 @@ const Demo = () => (
   </>
 );
 
-export default Demo;
+export default App;
 ```
diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md
index d9859a68ba..8daee930be 100644
--- a/components/progress/demo/line-mini.md
+++ b/components/progress/demo/line-mini.md
@@ -13,10 +13,11 @@ title:
 
 Appropriate for a narrow area.
 
-```jsx
+```tsx
+import React from 'react';
 import { Progress } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <div style={{ width: 170 }}>
     <Progress percent={30} size="small" />
     <Progress percent={50} size="small" status="active" />
@@ -24,4 +25,6 @@ export default () => (
     <Progress percent={100} size="small" />
   </div>
 );
+
+export default App;
 ```
diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md
index 829a30de9b..effb07ec78 100644
--- a/components/progress/demo/line.md
+++ b/components/progress/demo/line.md
@@ -13,10 +13,11 @@ title:
 
 A standard progress bar.
 
-```jsx
+```tsx
+import React from 'react';
 import { Progress } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Progress percent={30} />
     <Progress percent={50} status="active" />
@@ -25,4 +26,6 @@ export default () => (
     <Progress percent={50} showInfo={false} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/progress/demo/linecap.md b/components/progress/demo/linecap.md
index ac1d25e828..ffefb569d3 100644
--- a/components/progress/demo/linecap.md
+++ b/components/progress/demo/linecap.md
@@ -13,14 +13,17 @@ title:
 
 By setting `strokeLinecap="square"`, you can change the linecaps from round to square.
 
-```jsx
+```tsx
+import React from 'react';
 import { Progress } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Progress strokeLinecap="square" percent={75} />
     <Progress strokeLinecap="square" type="circle" percent={75} />
     <Progress strokeLinecap="square" type="dashboard" percent={75} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/progress/demo/segment.md b/components/progress/demo/segment.md
index c816d54fdc..4aa709fa92 100644
--- a/components/progress/demo/segment.md
+++ b/components/progress/demo/segment.md
@@ -13,10 +13,11 @@ title:
 
 A standard progress bar. Doesn't support trail color when `type="circle|dashboard"`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tooltip, Progress } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Tooltip title="3 done / 3 in progress / 4 to do">
       <Progress percent={60} success={{ percent: 30 }} />
@@ -31,4 +32,6 @@ export default () => (
     </Tooltip>
   </>
 );
+
+export default App;
 ```
diff --git a/components/progress/demo/steps.md b/components/progress/demo/steps.md
index 00c5b1c341..0e33edec2a 100644
--- a/components/progress/demo/steps.md
+++ b/components/progress/demo/steps.md
@@ -13,10 +13,11 @@ title:
 
 A progress bar with steps.
 
-```jsx
+```tsx
+import React from 'react';
 import { Progress } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Progress percent={50} steps={3} />
     <br />
@@ -25,4 +26,6 @@ export default () => (
     <Progress percent={100} steps={5} size="small" strokeColor="#52c41a" />
   </>
 );
+
+export default App;
 ```
diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md
index 318304786d..6bf8f872f5 100644
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@@ -23,8 +23,7 @@ Properties that shared by all types.
 | format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` |
 | percent | To set the completion percentage | number | 0 |
 | showInfo | Whether to display the progress value and the status icon | boolean | true |
-| size | To set the size of the progress | `default` \| `small` | `default` |
-| status | To set the status of the progress, options: `success` `exception` `normal` `active`(line only) | string | - |
+| status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
 | strokeColor | The color of progress bar | string | - |
 | strokeLinecap | To set the style of the progress linecap | `round` \| `square` | `round` |
 | success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - |
diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md
index 4afb423ba7..adb5c71d0d 100644
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@@ -24,7 +24,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
 | format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` |
 | percent | 百分比 | number | 0 |
 | showInfo | 是否显示进度数值或状态图标 | boolean | true |
-| size | 进度条大小 | `default` \| `small` | `default` |
 | status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
 | strokeColor | 进度条的色彩 | string | - |
 | strokeLinecap | 进度条的样式 | `round` \| `square` | `round` |
diff --git a/components/radio/demo/badge.md b/components/radio/demo/badge.md
index d8eec05300..4dd8467765 100644
--- a/components/radio/demo/badge.md
+++ b/components/radio/demo/badge.md
@@ -14,10 +14,11 @@ title:
 
 Test Badge style.
 
-```jsx
+```tsx
+import React from 'react';
 import { Radio, Badge } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Radio.Group buttonStyle="solid">
     <Badge count={1}>
       <Radio.Button value={1}>Click Me</Radio.Button>
@@ -27,4 +28,6 @@ export default () => (
     </Badge>
   </Radio.Group>
 );
+
+export default App;
 ```
diff --git a/components/radio/demo/basic.md b/components/radio/demo/basic.md
index b7cbb5c0d7..6028479484 100644
--- a/components/radio/demo/basic.md
+++ b/components/radio/demo/basic.md
@@ -13,8 +13,11 @@ title:
 
 The simplest use.
 
-```jsx
+```tsx
+import React from 'react';
 import { Radio } from 'antd';
 
-export default () => <Radio>Radio</Radio>;
+const App: React.FC = () => <Radio>Radio</Radio>;
+
+export default App;
 ```
diff --git a/components/radio/demo/disabled.md b/components/radio/demo/disabled.md
index 8592cd9764..77ab5a07b6 100644
--- a/components/radio/demo/disabled.md
+++ b/components/radio/demo/disabled.md
@@ -13,37 +13,32 @@ Radio 不可用。
 
 Radio unavailable.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Radio, Button } from 'antd';
 
-class App extends React.Component {
-  state = {
-    disabled: true,
+const App: React.FC = () => {
+  const [disabled, setDisabled] = useState(true);
+
+  const toggleDisabled = () => {
+    setDisabled(!disabled);
   };
 
-  toggleDisabled = () => {
-    this.setState({
-      disabled: !this.state.disabled,
-    });
-  };
-
-  render() {
-    return (
-      <>
-        <Radio defaultChecked={false} disabled={this.state.disabled}>
-          Disabled
-        </Radio>
-        <Radio defaultChecked disabled={this.state.disabled}>
-          Disabled
-        </Radio>
-        <br />
-        <Button type="primary" onClick={this.toggleDisabled} style={{ marginTop: 16 }}>
-          Toggle disabled
-        </Button>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Radio defaultChecked={false} disabled={disabled}>
+        Disabled
+      </Radio>
+      <Radio defaultChecked disabled={disabled}>
+        Disabled
+      </Radio>
+      <br />
+      <Button type="primary" onClick={toggleDisabled} style={{ marginTop: 16 }}>
+        Toggle disabled
+      </Button>
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/radio/demo/radiobutton-solid.md b/components/radio/demo/radiobutton-solid.md
index 96b61f6448..fa9ea5119d 100644
--- a/components/radio/demo/radiobutton-solid.md
+++ b/components/radio/demo/radiobutton-solid.md
@@ -13,10 +13,11 @@ title:
 
 Solid radio button style.
 
-```jsx
+```tsx
+import React from 'react';
 import { Radio } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Radio.Group defaultValue="a" buttonStyle="solid">
       <Radio.Button value="a">Hangzhou</Radio.Button>
@@ -34,4 +35,6 @@ export default () => (
     </Radio.Group>
   </>
 );
+
+export default App;
 ```
diff --git a/components/radio/demo/radiobutton.md b/components/radio/demo/radiobutton.md
index ad71316cf9..15da055dea 100644
--- a/components/radio/demo/radiobutton.md
+++ b/components/radio/demo/radiobutton.md
@@ -13,14 +13,16 @@ title:
 
 The combination of radio button style.
 
-```jsx
+```tsx
+import React from 'react';
 import { Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
-function onChange(e) {
+const onChange = (e: RadioChangeEvent) => {
   console.log(`radio checked:${e.target.value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Radio.Group onChange={onChange} defaultValue="a">
       <Radio.Button value="a">Hangzhou</Radio.Button>
@@ -44,4 +46,6 @@ export default () => (
     </Radio.Group>
   </>
 );
+
+export default App;
 ```
diff --git a/components/radio/demo/radiogroup-more.md b/components/radio/demo/radiogroup-more.md
index b26377588c..25e97df41a 100644
--- a/components/radio/demo/radiogroup-more.md
+++ b/components/radio/demo/radiogroup-more.md
@@ -13,38 +13,33 @@ title:
 
 Vertical Radio.Group, with more radios.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Radio, Input, Space } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
-class App extends React.Component {
-  state = {
-    value: 1,
-  };
+const App: React.FC = () => {
+  const [value, setValue] = useState(1);
 
-  onChange = e => {
+  const onChange = (e: RadioChangeEvent) => {
     console.log('radio checked', e.target.value);
-    this.setState({
-      value: e.target.value,
-    });
+    setValue(e.target.value);
   };
 
-  render() {
-    const { value } = this.state;
-    return (
-      <Radio.Group onChange={this.onChange} value={value}>
-        <Space direction="vertical">
-          <Radio value={1}>Option A</Radio>
-          <Radio value={2}>Option B</Radio>
-          <Radio value={3}>Option C</Radio>
-          <Radio value={4}>
-            More...
-            {value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
-          </Radio>
-        </Space>
-      </Radio.Group>
-    );
-  }
-}
+  return (
+    <Radio.Group onChange={onChange} value={value}>
+      <Space direction="vertical">
+        <Radio value={1}>Option A</Radio>
+        <Radio value={2}>Option B</Radio>
+        <Radio value={3}>Option C</Radio>
+        <Radio value={4}>
+          More...
+          {value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
+        </Radio>
+      </Space>
+    </Radio.Group>
+  );
+};
 
 export default App;
 ```
diff --git a/components/radio/demo/radiogroup-options.md b/components/radio/demo/radiogroup-options.md
index 90d12f7b26..0802a4394e 100644
--- a/components/radio/demo/radiogroup-options.md
+++ b/components/radio/demo/radiogroup-options.md
@@ -13,8 +13,10 @@ title:
 
 Render radios by configuring `options`. Radio type can also be set through the `optionType` parameter.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
 const plainOptions = ['Apple', 'Pear', 'Orange'];
 const options = [
@@ -28,70 +30,52 @@ const optionsWithDisabled = [
   { label: 'Orange', value: 'Orange', disabled: true },
 ];
 
-class App extends React.Component {
-  state = {
-    value1: 'Apple',
-    value2: 'Apple',
-    value3: 'Apple',
-    value4: 'Apple',
+const App: React.FC = () => {
+  const [value1, setValue1] = useState('Apple');
+  const [value2, setValue2] = useState('Apple');
+  const [value3, setValue3] = useState('Apple');
+  const [value4, setValue4] = useState('Apple');
+
+  const onChange1 = ({ target: { value } }: RadioChangeEvent) => {
+    console.log('radio1 checked', value);
+    setValue1(value);
   };
 
-  onChange1 = e => {
-    console.log('radio1 checked', e.target.value);
-    this.setState({
-      value1: e.target.value,
-    });
+  const onChange2 = ({ target: { value } }: RadioChangeEvent) => {
+    console.log('radio2 checked', value);
+    setValue2(value);
   };
 
-  onChange2 = e => {
-    console.log('radio2 checked', e.target.value);
-    this.setState({
-      value2: e.target.value,
-    });
+  const onChange3 = ({ target: { value } }: RadioChangeEvent) => {
+    console.log('radio3 checked', value);
+    setValue3(value);
   };
 
-  onChange3 = e => {
-    console.log('radio3 checked', e.target.value);
-    this.setState({
-      value3: e.target.value,
-    });
+  const onChange4 = ({ target: { value } }: RadioChangeEvent) => {
+    console.log('radio4 checked', value);
+    setValue4(value);
   };
 
-  onChange4 = e => {
-    console.log('radio4 checked', e.target.value);
-    this.setState({
-      value4: e.target.value,
-    });
-  };
-
-  render() {
-    const { value1, value2, value3, value4 } = this.state;
-    return (
-      <>
-        <Radio.Group options={plainOptions} onChange={this.onChange1} value={value1} />
-        <br />
-        <Radio.Group options={optionsWithDisabled} onChange={this.onChange2} value={value2} />
-        <br />
-        <br />
-        <Radio.Group
-          options={options}
-          onChange={this.onChange3}
-          value={value3}
-          optionType="button"
-        />
-        <br />
-        <br />
-        <Radio.Group
-          options={optionsWithDisabled}
-          onChange={this.onChange4}
-          value={value4}
-          optionType="button"
-          buttonStyle="solid"
-        />
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Radio.Group options={plainOptions} onChange={onChange1} value={value1} />
+      <br />
+      <Radio.Group options={optionsWithDisabled} onChange={onChange2} value={value2} />
+      <br />
+      <br />
+      <Radio.Group options={options} onChange={onChange3} value={value3} optionType="button" />
+      <br />
+      <br />
+      <Radio.Group
+        options={optionsWithDisabled}
+        onChange={onChange4}
+        value={value4}
+        optionType="button"
+        buttonStyle="solid"
+      />
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/radio/demo/radiogroup-with-name.md b/components/radio/demo/radiogroup-with-name.md
index 98b2b95f77..25eb0e62e4 100644
--- a/components/radio/demo/radiogroup-with-name.md
+++ b/components/radio/demo/radiogroup-with-name.md
@@ -13,10 +13,11 @@ title:
 
 Passing the `name` property to all `input[type="radio"]` that are in the same Radio.Group. It is usually used to let the browser see your Radio.Group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Radio.Group.
 
-```jsx
+```tsx
+import React from 'react';
 import { Radio } from 'antd';
 
-const App = () => (
+const App: React.FC = () => (
   <Radio.Group name="radiogroup" defaultValue={1}>
     <Radio value={1}>A</Radio>
     <Radio value={2}>B</Radio>
diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md
index bae4da0cce..2bd71c17cb 100644
--- a/components/radio/demo/radiogroup.md
+++ b/components/radio/demo/radiogroup.md
@@ -13,13 +13,15 @@ title:
 
 A group of radio components.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
-const App = () => {
-  const [value, setValue] = React.useState(1);
+const App: React.FC = () => {
+  const [value, setValue] = useState(1);
 
-  const onChange = e => {
+  const onChange = (e: RadioChangeEvent) => {
     console.log('radio checked', e.target.value);
     setValue(e.target.value);
   };
diff --git a/components/radio/demo/size.md b/components/radio/demo/size.md
index b8d622ca40..b3f14e820e 100644
--- a/components/radio/demo/size.md
+++ b/components/radio/demo/size.md
@@ -13,10 +13,11 @@ title:
 
 There are three sizes available: large, medium, and small. It can coordinate with input box.
 
-```jsx
+```tsx
+import React from 'react';
 import { Radio } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Radio.Group defaultValue="a" size="large">
       <Radio.Button value="a">Hangzhou</Radio.Button>
@@ -38,4 +39,6 @@ export default () => (
     </Radio.Group>
   </>
 );
+
+export default App;
 ```
diff --git a/components/rate/demo/basic.md b/components/rate/demo/basic.md
index b2c4a6bdc1..afd22afdbd 100644
--- a/components/rate/demo/basic.md
+++ b/components/rate/demo/basic.md
@@ -13,8 +13,11 @@ title:
 
 The simplest usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Rate } from 'antd';
 
-export default () => <Rate />;
+const App: React.FC = () => <Rate />;
+
+export default App;
 ```
diff --git a/components/rate/demo/character-function.md b/components/rate/demo/character-function.md
index 2cb732114d..e7795b8e23 100644
--- a/components/rate/demo/character-function.md
+++ b/components/rate/demo/character-function.md
@@ -13,11 +13,12 @@ title:
 
 Can customize each character using `(RateProps) => ReactNode`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Rate } from 'antd';
 import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
 
-const customIcons = {
+const customIcons: Record<number, React.ReactNode> = {
   1: <FrownOutlined />,
   2: <FrownOutlined />,
   3: <MehOutlined />,
@@ -25,11 +26,13 @@ const customIcons = {
   5: <SmileOutlined />,
 };
 
-export default () => (
+const App: React.FC = () => (
   <>
-    <Rate defaultValue={2} character={({ index }) => index + 1} />
+    <Rate defaultValue={2} character={({ index }: { index: number }) => index + 1} />
     <br />
-    <Rate defaultValue={3} character={({ index }) => customIcons[index + 1]} />
+    <Rate defaultValue={3} character={({ index }: { index: number }) => customIcons[index + 1]} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/rate/demo/character.md b/components/rate/demo/character.md
index 0c18cd6dd1..1e05091315 100644
--- a/components/rate/demo/character.md
+++ b/components/rate/demo/character.md
@@ -13,11 +13,12 @@ title:
 
 Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.
 
-```jsx
+```tsx
+import React from 'react';
 import { Rate } from 'antd';
 import { HeartOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Rate character={<HeartOutlined />} allowHalf />
     <br />
@@ -26,4 +27,6 @@ export default () => (
     <Rate character="好" allowHalf />
   </>
 );
+
+export default App;
 ```
diff --git a/components/rate/demo/clear.md b/components/rate/demo/clear.md
index bd342ba4cb..8a189e790c 100644
--- a/components/rate/demo/clear.md
+++ b/components/rate/demo/clear.md
@@ -13,10 +13,11 @@ title:
 
 Support set allow to clear star when click again.
 
-```jsx
+```tsx
+import React from 'react';
 import { Rate } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Rate defaultValue={3} />
     <span className="ant-rate-text">allowClear: true</span>
@@ -25,4 +26,6 @@ export default () => (
     <span className="ant-rate-text">allowClear: false</span>
   </>
 );
+
+export default App;
 ```
diff --git a/components/rate/demo/disabled.md b/components/rate/demo/disabled.md
index b2f5914518..d01fce2368 100644
--- a/components/rate/demo/disabled.md
+++ b/components/rate/demo/disabled.md
@@ -13,8 +13,11 @@ title:
 
 Read only, can't use mouse to interact.
 
-```jsx
+```tsx
+import React from 'react';
 import { Rate } from 'antd';
 
-export default () => <Rate disabled defaultValue={2} />;
+const App: React.FC = () => <Rate disabled defaultValue={2} />;
+
+export default App;
 ```
diff --git a/components/rate/demo/half.md b/components/rate/demo/half.md
index da2cc2ee38..f4e94bcac2 100644
--- a/components/rate/demo/half.md
+++ b/components/rate/demo/half.md
@@ -13,8 +13,11 @@ title:
 
 Support select half star.
 
-```jsx
+```tsx
+import React from 'react';
 import { Rate } from 'antd';
 
-export default () => <Rate allowHalf defaultValue={2.5} />;
+const App: React.FC = () => <Rate allowHalf defaultValue={2.5} />;
+
+export default App;
 ```
diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md
index 92a9fccab5..bb6fe9e2a0 100644
--- a/components/rate/demo/text.md
+++ b/components/rate/demo/text.md
@@ -13,30 +13,22 @@ title:
 
 Add copywriting in rate components.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Rate } from 'antd';
 
 const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
 
-class Rater extends React.Component {
-  state = {
-    value: 3,
-  };
+const App: React.FC = () => {
+  const [value, setValue] = useState(3);
 
-  handleChange = value => {
-    this.setState({ value });
-  };
+  return (
+    <span>
+      <Rate tooltips={desc} onChange={setValue} value={value} />
+      {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
+    </span>
+  );
+};
 
-  render() {
-    const { value } = this.state;
-    return (
-      <span>
-        <Rate tooltips={desc} onChange={this.handleChange} value={value} />
-        {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
-      </span>
-    );
-  }
-}
-
-export default () => <Rater />;
+export default App;
 ```
diff --git a/components/rate/index.tsx b/components/rate/index.tsx
index 3ce9952d1c..3e94b5d218 100644
--- a/components/rate/index.tsx
+++ b/components/rate/index.tsx
@@ -1,24 +1,13 @@
 import * as React from 'react';
 import RcRate from 'rc-rate';
 import StarFilled from '@ant-design/icons/StarFilled';
+import type { RateProps as RcRateProps } from 'rc-rate/lib/Rate';
 
 import Tooltip from '../tooltip';
 import { ConfigContext } from '../config-provider';
 
-export interface RateProps {
-  prefixCls?: string;
-  count?: number;
-  value?: number;
-  defaultValue?: number;
-  allowHalf?: boolean;
-  allowClear?: boolean;
-  disabled?: boolean;
+export interface RateProps extends RcRateProps {
   tooltips?: Array<string>;
-  onChange?: (value: number) => void;
-  onHoverChange?: (value: number) => void;
-  character?: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
 }
 
 interface RateNodeProps {
diff --git a/components/result/demo/403.md b/components/result/demo/403.md
index 1679f193ca..5180aa3d7f 100644
--- a/components/result/demo/403.md
+++ b/components/result/demo/403.md
@@ -13,10 +13,11 @@ title:
 
 you are not authorized to access this page.
 
-```jsx
+```tsx
+import React from 'react';
 import { Result, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Result
     status="403"
     title="403"
@@ -24,4 +25,6 @@ export default () => (
     extra={<Button type="primary">Back Home</Button>}
   />
 );
+
+export default App;
 ```
diff --git a/components/result/demo/404.md b/components/result/demo/404.md
index db53301a84..7f50d3ad47 100644
--- a/components/result/demo/404.md
+++ b/components/result/demo/404.md
@@ -13,10 +13,11 @@ title:
 
 The page you visited does not exist.
 
-```jsx
+```tsx
+import React from 'react';
 import { Result, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Result
     status="404"
     title="404"
@@ -24,4 +25,6 @@ export default () => (
     extra={<Button type="primary">Back Home</Button>}
   />
 );
+
+export default App;
 ```
diff --git a/components/result/demo/500.md b/components/result/demo/500.md
index 8852f09e8a..c81d620f90 100644
--- a/components/result/demo/500.md
+++ b/components/result/demo/500.md
@@ -13,10 +13,11 @@ title:
 
 Something went wrong on server.
 
-```jsx
+```tsx
+import React from 'react';
 import { Result, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Result
     status="500"
     title="500"
@@ -24,4 +25,6 @@ export default () => (
     extra={<Button type="primary">Back Home</Button>}
   />
 );
+
+export default App;
 ```
diff --git a/components/result/demo/customIcon.md b/components/result/demo/customIcon.md
index 662033a31b..e08ceb4bc9 100644
--- a/components/result/demo/customIcon.md
+++ b/components/result/demo/customIcon.md
@@ -13,15 +13,18 @@ title:
 
 Custom icon.
 
-```jsx
+```tsx
+import React from 'react';
 import { Result, Button } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Result
     icon={<SmileOutlined />}
     title="Great, we have done all the operations!"
     extra={<Button type="primary">Next</Button>}
   />
 );
+
+export default App;
 ```
diff --git a/components/result/demo/error.md b/components/result/demo/error.md
index bb5dad845c..417e9bc50c 100644
--- a/components/result/demo/error.md
+++ b/components/result/demo/error.md
@@ -13,13 +13,14 @@ title:
 
 Complex error feedback.
 
-```jsx
+```tsx
+import React from 'react';
 import { Result, Button, Typography } from 'antd';
 import { CloseCircleOutlined } from '@ant-design/icons';
 
 const { Paragraph, Text } = Typography;
 
-export default () => (
+const App: React.FC = () => (
   <Result
     status="error"
     title="Submission Failed"
@@ -53,6 +54,8 @@ export default () => (
     </div>
   </Result>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/result/demo/info.md b/components/result/demo/info.md
index 62ae71f472..3327d20793 100644
--- a/components/result/demo/info.md
+++ b/components/result/demo/info.md
@@ -13,10 +13,11 @@ title:
 
 Show processing results.
 
-```jsx
+```tsx
+import React from 'react';
 import { Result, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Result
     title="Your operation has been executed"
     extra={
@@ -26,4 +27,6 @@ export default () => (
     }
   />
 );
+
+export default App;
 ```
diff --git a/components/result/demo/success.md b/components/result/demo/success.md
index 8f7a547e4d..58b6b2a876 100644
--- a/components/result/demo/success.md
+++ b/components/result/demo/success.md
@@ -13,10 +13,11 @@ title:
 
 Show successful results.
 
-```jsx
+```tsx
+import React from 'react';
 import { Result, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Result
     status="success"
     title="Successfully Purchased Cloud Server ECS!"
@@ -29,4 +30,6 @@ export default () => (
     ]}
   />
 );
+
+export default App;
 ```
diff --git a/components/result/demo/warning.md b/components/result/demo/warning.md
index 2b6aaf4ad9..43cc4d7052 100644
--- a/components/result/demo/warning.md
+++ b/components/result/demo/warning.md
@@ -13,10 +13,11 @@ title:
 
 The result of the warning.
 
-```jsx
+```tsx
+import React from 'react';
 import { Result, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Result
     status="warning"
     title="There are some problems with your operation."
@@ -27,4 +28,6 @@ export default () => (
     }
   />
 );
+
+export default App;
 ```
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 28514fcdcb..f65e29fa11 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5974,13 +5974,12 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      class="ant-radio-button-wrapper"
     >
       <span
-        class="ant-radio-button ant-radio-button-checked"
+        class="ant-radio-button"
       >
         <input
-          checked=""
           class="ant-radio-button-input"
           type="radio"
           value="default"
diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap
index 4563483289..da8a832e4a 100644
--- a/components/select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.js.snap
@@ -2083,13 +2083,12 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      class="ant-radio-button-wrapper"
     >
       <span
-        class="ant-radio-button ant-radio-button-checked"
+        class="ant-radio-button"
       >
         <input
-          checked=""
           class="ant-radio-button-input"
           type="radio"
           value="default"
diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md
index 91cdc0fa4f..1d1f04ff10 100644
--- a/components/select/demo/automatic-tokenization.md
+++ b/components/select/demo/automatic-tokenization.md
@@ -13,23 +13,26 @@ title:
 
 Try to copy `Lucy,Jack` and paste to the input. Only available in tags and multiple mode.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
 
-const children = [];
+const children: React.ReactNode[] = [];
 for (let i = 10; i < 36; i++) {
   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
 }
 
-function handleChange(value) {
+const handleChange = (value: string) => {
   console.log(`selected ${value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Select mode="tags" style={{ width: '100%' }} onChange={handleChange} tokenSeparators={[',']}>
     {children}
   </Select>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
index 4e91695fdc..f827ad79ed 100644
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@@ -13,16 +13,17 @@ title:
 
 Basic Usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
 
-function handleChange(value) {
+const handleChange = (value: string) => {
   console.log(`selected ${value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
       <Option value="jack">Jack</Option>
@@ -43,4 +44,6 @@ export default () => (
     </Select>
   </>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/big-data.md b/components/select/demo/big-data.md
index 01cf9b6645..6c80246cbb 100644
--- a/components/select/demo/big-data.md
+++ b/components/select/demo/big-data.md
@@ -13,25 +13,28 @@ Select 使用了[虚拟滚动](https://github.com/react-component/virtual-list)
 
 Select use [virtual scroll](https://github.com/react-component/virtual-list) which get better performance [than 3.0](https://codesandbox.io/s/beautiful-banzai-m72lv).
 
-```jsx
+```tsx
+import React from 'react';
 import { Select, Typography, Divider } from 'antd';
+import type { SelectProps } from 'antd';
 
 const { Title } = Typography;
 
-const options = [];
+const options: SelectProps['options'] = [];
 for (let i = 0; i < 100000; i++) {
   const value = `${i.toString(36)}${i}`;
   options.push({
+    label: value,
     value,
     disabled: i === 10,
   });
 }
 
-function handleChange(value) {
+const handleChange = (value: string[]) => {
   console.log(`selected ${value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Title level={3}>Ant Design 4.0</Title>
     <Title level={4}>{options.length} Items</Title>
@@ -54,4 +57,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/bordered.md b/components/select/demo/bordered.md
index 88b927e445..4983734591 100644
--- a/components/select/demo/bordered.md
+++ b/components/select/demo/bordered.md
@@ -13,12 +13,13 @@ title:
 
 Bordered-less style component.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
       <Option value="jack">Jack</Option>
@@ -30,4 +31,6 @@ export default () => (
     </Select>
   </>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md
index dfdd49f388..bf14caa71f 100644
--- a/components/select/demo/coordinate.md
+++ b/components/select/demo/coordinate.md
@@ -17,7 +17,8 @@ Coordinating the selection of provinces and cities is a common use case and demo
 
 Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
@@ -27,16 +28,18 @@ const cityData = {
   Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
 };
 
-const App = () => {
-  const [cities, setCities] = React.useState(cityData[provinceData[0]]);
-  const [secondCity, setSecondCity] = React.useState(cityData[provinceData[0]][0]);
+type CityName = keyof typeof cityData;
 
-  const handleProvinceChange = value => {
+const App: React.FC = () => {
+  const [cities, setCities] = useState(cityData[provinceData[0] as CityName]);
+  const [secondCity, setSecondCity] = useState(cityData[provinceData[0] as CityName][0]);
+
+  const handleProvinceChange = (value: CityName) => {
     setCities(cityData[value]);
     setSecondCity(cityData[value][0]);
   };
 
-  const onSecondCityChange = value => {
+  const onSecondCityChange = (value: CityName) => {
     setSecondCity(value);
   };
 
diff --git a/components/select/demo/custom-dropdown-menu.md b/components/select/demo/custom-dropdown-menu.md
index 4b0f5791ba..3a8ecce0b5 100644
--- a/components/select/demo/custom-dropdown-menu.md
+++ b/components/select/demo/custom-dropdown-menu.md
@@ -13,7 +13,7 @@ title:
 
 Customize the dropdown menu via `dropdownRender`. Dropdown menu will be closed if click `dropdownRender` area, you can prevent it by wrapping `onMouseDown={e => e.preventDefault()}` (see more at [#13448](https://github.com/ant-design/ant-design/issues/13448)).
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Select, Divider, Input, Typography, Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
@@ -22,15 +22,15 @@ const { Option } = Select;
 
 let index = 0;
 
-const App = () => {
+const App: React.FC = () => {
   const [items, setItems] = useState(['jack', 'lucy']);
   const [name, setName] = useState('');
 
-  const onNameChange = event => {
+  const onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value);
   };
 
-  const addItem = e => {
+  const addItem = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
     setItems([...items, name || `New item ${index++}`]);
     setName('');
diff --git a/components/select/demo/custom-tag-render.md b/components/select/demo/custom-tag-render.md
index 291b2f4d08..2c3cf422e3 100644
--- a/components/select/demo/custom-tag-render.md
+++ b/components/select/demo/custom-tag-render.md
@@ -13,14 +13,16 @@ title:
 
 Allows for custom rendering of tags.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select, Tag } from 'antd';
+import type { CustomTagProps } from 'rc-select/lib/BaseSelect';
 
 const options = [{ value: 'gold' }, { value: 'lime' }, { value: 'green' }, { value: 'cyan' }];
 
-function tagRender(props) {
+const tagRender = (props: CustomTagProps) => {
   const { label, value, closable, onClose } = props;
-  const onPreventMouseDown = event => {
+  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
     event.preventDefault();
     event.stopPropagation();
   };
@@ -35,9 +37,9 @@ function tagRender(props) {
       {label}
     </Tag>
   );
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Select
     mode="multiple"
     showArrow
@@ -47,4 +49,6 @@ export default () => (
     options={options}
   />
 );
+
+export default App;
 ```
diff --git a/components/select/demo/debug.md b/components/select/demo/debug.md
index 394d0fc53a..4f3bc2980e 100644
--- a/components/select/demo/debug.md
+++ b/components/select/demo/debug.md
@@ -14,16 +14,17 @@ debug: true
 
 Basic Usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select, Input, Button } from 'antd';
 
 const { Option } = Select;
 
-function handleChange(value) {
+const handleChange = (value: string | string[]) => {
   console.log(`selected ${value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <div
     style={{
       width: 500,
@@ -63,6 +64,8 @@ export default () => (
     <Button>222</Button>
   </div>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/select/demo/hide-selected.md b/components/select/demo/hide-selected.md
index 7c2063d46e..1ba7e959ef 100644
--- a/components/select/demo/hide-selected.md
+++ b/components/select/demo/hide-selected.md
@@ -13,40 +13,33 @@ title:
 
 Hide already selected options in the dropdown.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Select } from 'antd';
 
 const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
 
-class SelectWithHiddenSelectedOptions extends React.Component {
-  state = {
-    selectedItems: [],
-  };
+const App: React.FC = () => {
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
 
-  handleChange = selectedItems => {
-    this.setState({ selectedItems });
-  };
+  const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
 
-  render() {
-    const { selectedItems } = this.state;
-    const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
-    return (
-      <Select
-        mode="multiple"
-        placeholder="Inserted are removed"
-        value={selectedItems}
-        onChange={this.handleChange}
-        style={{ width: '100%' }}
-      >
-        {filteredOptions.map(item => (
-          <Select.Option key={item} value={item}>
-            {item}
-          </Select.Option>
-        ))}
-      </Select>
-    );
-  }
-}
+  return (
+    <Select
+      mode="multiple"
+      placeholder="Inserted are removed"
+      value={selectedItems}
+      onChange={setSelectedItems}
+      style={{ width: '100%' }}
+    >
+      {filteredOptions.map(item => (
+        <Select.Option key={item} value={item}>
+          {item}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+};
 
-export default () => <SelectWithHiddenSelectedOptions />;
+export default App;
 ```
diff --git a/components/select/demo/label-in-value.md b/components/select/demo/label-in-value.md
index 5c54c69bb3..eacbf8565c 100644
--- a/components/select/demo/label-in-value.md
+++ b/components/select/demo/label-in-value.md
@@ -17,19 +17,20 @@ As a default behavior, the `onChange` callback can only get the `value` of the s
 
 The `label` of the selected item will be packed as an object for passing to the `onChange` callback.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
 
-function handleChange(value) {
+const handleChange = (value: { value: string; label: React.ReactNode }) => {
   console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Select
     labelInValue
-    defaultValue={{ value: 'lucy' }}
+    defaultValue={{ value: 'lucy', label: 'Lucy (101)' }}
     style={{ width: 120 }}
     onChange={handleChange}
   >
@@ -37,4 +38,6 @@ export default () => (
     <Option value="lucy">Lucy (101)</Option>
   </Select>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index 5b0d0778c4..cc3cbc00cd 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -13,21 +13,22 @@ title:
 
 Multiple selection, selecting from existing items.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
 
-const children = [];
+const children: React.ReactNode[] = [];
 for (let i = 10; i < 36; i++) {
   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
 }
 
-function handleChange(value) {
+const handleChange = (value: string[]) => {
   console.log(`selected ${value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Select
       mode="multiple"
@@ -52,4 +53,6 @@ export default () => (
     </Select>
   </>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/optgroup.md b/components/select/demo/optgroup.md
index 9ba4cdf02a..07df8035a5 100644
--- a/components/select/demo/optgroup.md
+++ b/components/select/demo/optgroup.md
@@ -13,16 +13,17 @@ title:
 
 Using `OptGroup` to group the options.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option, OptGroup } = Select;
 
-function handleChange(value) {
+const handleChange = (value: string) => {
   console.log(`selected ${value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
     <OptGroup label="Manager">
       <Option value="jack">Jack</Option>
@@ -33,4 +34,6 @@ export default () => (
     </OptGroup>
   </Select>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/option-label-prop.md b/components/select/demo/option-label-prop.md
index d8dd439907..8bf572961e 100644
--- a/components/select/demo/option-label-prop.md
+++ b/components/select/demo/option-label-prop.md
@@ -13,16 +13,17 @@ title:
 
 Specify the prop name of Option which will be rendered in select box.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
 
-function handleChange(value) {
+const handleChange = (value: string[]) => {
   console.log(`selected ${value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Select
     mode="multiple"
     style={{ width: '100%' }}
@@ -65,6 +66,8 @@ export default () => (
     </Option>
   </Select>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/select/demo/placement.md b/components/select/demo/placement.md
index 72e8fa6556..1537b25f7a 100644
--- a/components/select/demo/placement.md
+++ b/components/select/demo/placement.md
@@ -13,15 +13,18 @@ title:
 
 You can manually specify the position of the popup via `placement`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Select, Radio } from 'antd';
+import type { SelectCommonPlacement } from 'antd/es/_util/motion';
+import type { RadioChangeEvent } from 'antd';
 
 const { Option } = Select;
 
-const SetPlacementDemo = () => {
-  const [placement, SetPlacement] = React.useState('topLeft');
+const App: React.FC = () => {
+  const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');
 
-  const placementChange = e => {
+  const placementChange = (e: RadioChangeEvent) => {
     SetPlacement(e.target.value);
   };
 
@@ -49,5 +52,5 @@ const SetPlacementDemo = () => {
   );
 };
 
-export default () => <SetPlacementDemo />;
+export default App;
 ```
diff --git a/components/select/demo/responsive.md b/components/select/demo/responsive.md
index c6a76e41c5..b589901015 100644
--- a/components/select/demo/responsive.md
+++ b/components/select/demo/responsive.md
@@ -14,7 +14,9 @@ title:
 Auto collapse to tag with responsive case. Not recommend use in large form case since responsive calculation has a perf cost.
 
 ```tsx
+import React, { useState } from 'react';
 import { Select, Space } from 'antd';
+import type { SelectProps } from 'antd';
 
 interface ItemProps {
   label: string;
@@ -31,11 +33,11 @@ for (let i = 10; i < 36; i++) {
   });
 }
 
-const Demo = () => {
-  const [value, setValue] = React.useState(['a10', 'c12', 'h17', 'j19', 'k20']);
+const App: React.FC = () => {
+  const [value, setValue] = useState(['a10', 'c12', 'h17', 'j19', 'k20']);
 
-  const selectProps = {
-    mode: 'multiple' as const,
+  const selectProps: SelectProps = {
+    mode: 'multiple',
     style: { width: '100%' },
     value,
     options,
@@ -43,7 +45,7 @@ const Demo = () => {
       setValue(newValue);
     },
     placeholder: 'Select Item...',
-    maxTagCount: 'responsive' as const,
+    maxTagCount: 'responsive',
   };
 
   return (
@@ -54,5 +56,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md
index 756f50b9f3..a6bad32da4 100644
--- a/components/select/demo/search-box.md
+++ b/components/select/demo/search-box.md
@@ -13,86 +13,83 @@ title:
 
 Search with remote data.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Select } from 'antd';
 import jsonp from 'fetch-jsonp';
 import qs from 'qs';
 
 const { Option } = Select;
 
-let timeout;
-let currentValue;
+let timeout: ReturnType<typeof setTimeout> | null;
+let currentValue: string;
 
-function fetch(value, callback) {
+const fetch = (value: string, callback: (data: { value: string; text: string }[]) => void) => {
   if (timeout) {
     clearTimeout(timeout);
     timeout = null;
   }
   currentValue = value;
 
-  function fake() {
+  const fake = () => {
     const str = qs.stringify({
       code: 'utf-8',
       q: value,
     });
     jsonp(`https://suggest.taobao.com/sug?${str}`)
-      .then(response => response.json())
-      .then(d => {
+      .then((response: any) => response.json())
+      .then((d: any) => {
         if (currentValue === value) {
           const { result } = d;
-          const data = [];
-          result.forEach(r => {
-            data.push({
-              value: r[0],
-              text: r[0],
-            });
-          });
+          const data = result.map((item: any) => ({
+            value: item[0],
+            text: item[0],
+          }));
           callback(data);
         }
       });
-  }
-
-  timeout = setTimeout(fake, 300);
-}
-
-class SearchInput extends React.Component {
-  state = {
-    data: [],
-    value: undefined,
   };
 
-  handleSearch = value => {
-    if (value) {
-      fetch(value, data => this.setState({ data }));
+  timeout = setTimeout(fake, 300);
+};
+
+const SearchInput: React.FC<{ placeholder: string; style: React.CSSProperties }> = props => {
+  const [data, setData] = useState<any[]>([]);
+  const [value, setValue] = useState<string>();
+
+  const handleSearch = (newValue: string) => {
+    if (newValue) {
+      fetch(newValue, setData);
     } else {
-      this.setState({ data: [] });
+      setData([]);
     }
   };
 
-  handleChange = value => {
-    this.setState({ value });
+  const handleChange = (newValue: string) => {
+    setValue(newValue);
   };
 
-  render() {
-    const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
-    return (
-      <Select
-        showSearch
-        value={this.state.value}
-        placeholder={this.props.placeholder}
-        style={this.props.style}
-        defaultActiveFirstOption={false}
-        showArrow={false}
-        filterOption={false}
-        onSearch={this.handleSearch}
-        onChange={this.handleChange}
-        notFoundContent={null}
-      >
-        {options}
-      </Select>
-    );
-  }
-}
+  const options = data.map(d => <Option key={d.value}>{d.text}</Option>);
 
-export default () => <SearchInput placeholder="input search text" style={{ width: 200 }} />;
+  return (
+    <Select
+      showSearch
+      value={value}
+      placeholder={props.placeholder}
+      style={props.style}
+      defaultActiveFirstOption={false}
+      showArrow={false}
+      filterOption={false}
+      onSearch={handleSearch}
+      onChange={handleChange}
+      notFoundContent={null}
+    >
+      {options}
+    </Select>
+  );
+};
+
+const App: React.FC = () => <SearchInput placeholder="input search text" style={{ width: 200 }} />;
+
+export default App;
 ```
diff --git a/components/select/demo/search-sort.md b/components/select/demo/search-sort.md
index 6823b8713d..2fd622ae40 100644
--- a/components/select/demo/search-sort.md
+++ b/components/select/demo/search-sort.md
@@ -13,22 +13,23 @@ title:
 
 Search the options with sorting.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
 
-export default () => (
+const App: React.FC = () => (
   <Select
     showSearch
     style={{ width: 200 }}
     placeholder="Search to Select"
     optionFilterProp="children"
-    filterOption={(input, option) =>
-      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    }
+    filterOption={(input, option) => (option!.children as unknown as string).includes(input)}
     filterSort={(optionA, optionB) =>
-      optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
+      (optionA!.children as unknown as string)
+        .toLowerCase()
+        .localeCompare((optionB!.children as unknown as string).toLowerCase())
     }
   >
     <Option value="1">Not Identified</Option>
@@ -39,4 +40,6 @@ export default () => (
     <Option value="6">Cancelled</Option>
   </Select>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/search.md b/components/select/demo/search.md
index 1aa830352e..32a1e128af 100644
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@@ -13,20 +13,21 @@ title:
 
 Search the options while expanded.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
 
-function onChange(value) {
+const onChange = (value: string) => {
   console.log(`selected ${value}`);
-}
+};
 
-function onSearch(val) {
-  console.log('search:', val);
-}
+const onSearch = (value: string) => {
+  console.log('search:', value);
+};
 
-export default () => (
+const App: React.FC = () => (
   <Select
     showSearch
     placeholder="Select a person"
@@ -34,7 +35,7 @@ export default () => (
     onChange={onChange}
     onSearch={onSearch}
     filterOption={(input, option) =>
-      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
     }
   >
     <Option value="jack">Jack</Option>
@@ -42,4 +43,6 @@ export default () => (
     <Option value="tom">Tom</Option>
   </Select>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/select-users.md b/components/select/demo/select-users.md
index d648af045b..1325cfab9a 100644
--- a/components/select/demo/select-users.md
+++ b/components/select/demo/select-users.md
@@ -14,6 +14,7 @@ title:
 A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.
 
 ```tsx
+import React, { useState, useRef, useMemo } from 'react';
 import { Select, Spin } from 'antd';
 import type { SelectProps } from 'antd/es/select';
 import debounce from 'lodash/debounce';
@@ -27,11 +28,11 @@ export interface DebounceSelectProps<ValueType = any>
 function DebounceSelect<
   ValueType extends { key?: string; label: React.ReactNode; value: string | number } = any,
 >({ fetchOptions, debounceTimeout = 800, ...props }: DebounceSelectProps) {
-  const [fetching, setFetching] = React.useState(false);
-  const [options, setOptions] = React.useState<ValueType[]>([]);
-  const fetchRef = React.useRef(0);
+  const [fetching, setFetching] = useState(false);
+  const [options, setOptions] = useState<ValueType[]>([]);
+  const fetchRef = useRef(0);
 
-  const debounceFetcher = React.useMemo(() => {
+  const debounceFetcher = useMemo(() => {
     const loadOptions = (value: string) => {
       fetchRef.current += 1;
       const fetchId = fetchRef.current;
@@ -85,8 +86,8 @@ async function fetchUserList(username: string): Promise<UserValue[]> {
     );
 }
 
-const Demo = () => {
-  const [value, setValue] = React.useState<UserValue[]>([]);
+const App: React.FC = () => {
+  const [value, setValue] = useState<UserValue[]>([]);
 
   return (
     <DebounceSelect
@@ -102,5 +103,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index f3943c23c2..c1c55f9c81 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -13,24 +13,27 @@ title:
 
 The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Select, Radio } from 'antd';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { RadioChangeEvent } from 'antd';
 
 const { Option } = Select;
 
-const children = [];
+const children: React.ReactNode[] = [];
 for (let i = 10; i < 36; i++) {
   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
 }
 
-function handleChange(value) {
+const handleChange = (value: string | string[]) => {
   console.log(`Selected: ${value}`);
-}
+};
 
-const SelectSizesDemo = () => {
-  const [size, setSize] = React.useState('default');
+const App: React.FC = () => {
+  const [size, setSize] = useState<SizeType>('middle');
 
-  const handleSizeChange = e => {
+  const handleSizeChange = (e: RadioChangeEvent) => {
     setSize(e.target.value);
   };
 
@@ -72,7 +75,7 @@ const SelectSizesDemo = () => {
   );
 };
 
-export default () => <SelectSizesDemo />;
+export default App;
 ```
 
 ```css
diff --git a/components/select/demo/status.md b/components/select/demo/status.md
index f6a5ef0b0b..36ba97c281 100644
--- a/components/select/demo/status.md
+++ b/components/select/demo/status.md
@@ -15,16 +15,17 @@ title:
 Add status to Select with `status`, which could be `error` or `warning`.
 
 ```tsx
+import React from 'react';
 import { Select, Space } from 'antd';
 
-const Status: React.FC = () => (
+const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <Select status="error" style={{ width: '100%' }} />
     <Select status="warning" style={{ width: '100%' }} />
   </Space>
 );
 
-export default () => <Status />;
+export default App;
 ```
 
 ```css
diff --git a/components/select/demo/suffix.md b/components/select/demo/suffix.md
index ef8041afc1..494ae008b3 100644
--- a/components/select/demo/suffix.md
+++ b/components/select/demo/suffix.md
@@ -14,7 +14,8 @@ title:
 
 Basic Usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 import { SmileOutlined, MehOutlined } from '@ant-design/icons';
 
@@ -22,11 +23,11 @@ const smileIcon = <SmileOutlined />;
 const mehIcon = <MehOutlined />;
 const { Option } = Select;
 
-function handleChange(value) {
+const handleChange = (value: string) => {
   console.log(`selected ${value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Select
       suffixIcon={smileIcon}
@@ -46,4 +47,6 @@ export default () => (
     </Select>
   </>
 );
+
+export default App;
 ```
diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md
index ec8e18d511..c968a66609 100644
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@@ -13,23 +13,26 @@ tags select，随意输入的内容（scroll the menu）。
 
 Select with tags, transform input to tag (scroll the menu).
 
-```jsx
+```tsx
+import React from 'react';
 import { Select } from 'antd';
 
 const { Option } = Select;
 
-const children = [];
+const children: React.ReactNode[] = [];
 for (let i = 10; i < 36; i++) {
   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
 }
 
-function handleChange(value) {
+const handleChange = (value: string) => {
   console.log(`selected ${value}`);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" onChange={handleChange}>
     {children}
   </Select>
 );
+
+export default App;
 ```
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index dc1997fb4c..7588d2be7b 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -114,7 +114,7 @@ Array [
         class="ant-skeleton ant-skeleton-element"
       >
         <span
-          class="ant-skeleton-button"
+          class="ant-skeleton-button ant-skeleton-button-square"
         />
       </div>
     </div>
@@ -148,7 +148,7 @@ Array [
     class="ant-skeleton ant-skeleton-element"
   >
     <span
-      class="ant-skeleton-button"
+      class="ant-skeleton-button ant-skeleton-button-square"
     />
   </div>,
   <br />,
@@ -401,14 +401,14 @@ Array [
                     checked=""
                     class="ant-radio-button-input"
                     type="radio"
-                    value="default"
+                    value="square"
                   />
                   <span
                     class="ant-radio-button-inner"
                   />
                 </span>
                 <span>
-                  Default
+                  Square
                 </span>
               </label>
               <label
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
index e72e46a123..c4d797b942 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
@@ -114,7 +114,7 @@ Array [
         class="ant-skeleton ant-skeleton-element"
       >
         <span
-          class="ant-skeleton-button"
+          class="ant-skeleton-button ant-skeleton-button-square"
         />
       </div>
     </div>
@@ -148,7 +148,7 @@ Array [
     class="ant-skeleton ant-skeleton-element"
   >
     <span
-      class="ant-skeleton-button"
+      class="ant-skeleton-button ant-skeleton-button-square"
     />
   </div>,
   <br />,
@@ -401,14 +401,14 @@ Array [
                     checked=""
                     class="ant-radio-button-input"
                     type="radio"
-                    value="default"
+                    value="square"
                   />
                   <span
                     class="ant-radio-button-inner"
                   />
                 </span>
                 <span>
-                  Default
+                  Square
                 </span>
               </label>
               <label
diff --git a/components/skeleton/demo/active.md b/components/skeleton/demo/active.md
index ca04692467..c87e539656 100644
--- a/components/skeleton/demo/active.md
+++ b/components/skeleton/demo/active.md
@@ -13,8 +13,11 @@ title:
 
 Display active animation.
 
-```jsx
+```tsx
+import React from 'react';
 import { Skeleton } from 'antd';
 
-export default () => <Skeleton active />;
+const App: React.FC = () => <Skeleton active />;
+
+export default App;
 ```
diff --git a/components/skeleton/demo/basic.md b/components/skeleton/demo/basic.md
index 0420749e79..2402f43fb7 100644
--- a/components/skeleton/demo/basic.md
+++ b/components/skeleton/demo/basic.md
@@ -13,8 +13,11 @@ title:
 
 Simplest Skeleton usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Skeleton } from 'antd';
 
-export default () => <Skeleton />;
+const App: React.FC = () => <Skeleton />;
+
+export default App;
 ```
diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md
index 249f2d0574..068c743e30 100644
--- a/components/skeleton/demo/children.md
+++ b/components/skeleton/demo/children.md
@@ -13,43 +13,41 @@ title:
 
 Skeleton contains sub component.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Skeleton, Button } from 'antd';
 
-class Demo extends React.Component {
-  state = {
-    loading: false,
-  };
+const App: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+
+  const showSkeleton = () => {
+    setLoading(true);
 
-  showSkeleton = () => {
-    this.setState({ loading: true });
     setTimeout(() => {
-      this.setState({ loading: false });
+      setLoading(false);
     }, 3000);
   };
 
-  render() {
-    return (
-      <div className="article">
-        <Skeleton loading={this.state.loading}>
-          <div>
-            <h4>Ant Design, a design language</h4>
-            <p>
-              We supply a series of design principles, practical patterns and high quality design
-              resources (Sketch and Axure), to help people create their product prototypes
-              beautifully and efficiently.
-            </p>
-          </div>
-        </Skeleton>
-        <Button onClick={this.showSkeleton} disabled={this.state.loading}>
-          Show Skeleton
-        </Button>
-      </div>
-    );
-  }
-}
+  return (
+    <div className="article">
+      <Skeleton loading={loading}>
+        <div>
+          <h4>Ant Design, a design language</h4>
+          <p>
+            We supply a series of design principles, practical patterns and high quality design
+            resources (Sketch and Axure), to help people create their product prototypes beautifully
+            and efficiently.
+          </p>
+        </div>
+      </Skeleton>
+      <Button onClick={showSkeleton} disabled={loading}>
+        Show Skeleton
+      </Button>
+    </div>
+  );
+};
 
-export default Demo;
+export default App;
 ```
 
 <style>
diff --git a/components/skeleton/demo/complex.md b/components/skeleton/demo/complex.md
index 076c2e4506..6e3fdab022 100644
--- a/components/skeleton/demo/complex.md
+++ b/components/skeleton/demo/complex.md
@@ -13,8 +13,11 @@ title:
 
 Complex combination with avatar and multiple paragraphs.
 
-```jsx
+```tsx
+import React from 'react';
 import { Skeleton } from 'antd';
 
-export default () => <Skeleton avatar paragraph={{ rows: 4 }} />;
+const App: React.FC = () => <Skeleton avatar paragraph={{ rows: 4 }} />;
+
+export default App;
 ```
diff --git a/components/skeleton/demo/element.md b/components/skeleton/demo/element.md
index 085efc3ec8..c10f95b6de 100644
--- a/components/skeleton/demo/element.md
+++ b/components/skeleton/demo/element.md
@@ -13,85 +13,90 @@ title:
 
 Skeleton Button, Avatar, Input and Image.
 
-```jsx
-import { Skeleton, Space, Divider, Switch, Form, Radio, Button, Input } from 'antd';
+```tsx
+import React, { useState } from 'react';
+import { Skeleton, Space, Divider, Switch, Form, Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
-class Demo extends React.Component {
-  state = {
-    active: false,
-    block: false,
-    size: 'default',
-    buttonShape: 'default',
-    avatarShape: 'circle',
+type SizeType = 'default' | 'small' | 'large';
+type ButtonShapeType = 'circle' | 'square' | 'round';
+type AvatarShapeType = 'circle' | 'square';
+
+const App: React.FC = () => {
+  const [active, setActive] = useState(false);
+  const [block, setBlock] = useState(false);
+  const [size, setSize] = useState<SizeType>('default');
+  const [buttonShape, setButtonShape] = useState<ButtonShapeType>('square');
+  const [avatarShape, setAvatarShape] = useState<AvatarShapeType>('circle');
+
+  const handleActiveChange = (checked: boolean) => {
+    setActive(checked);
   };
 
-  handleActiveChange = checked => {
-    this.setState({ active: checked });
+  const handleBlockChange = (checked: boolean) => {
+    setBlock(checked);
   };
 
-  handleBlockChange = checked => {
-    this.setState({ block: checked });
+  const handleSizeChange = (e: RadioChangeEvent) => {
+    setSize(e.target.value);
   };
 
-  handleSizeChange = e => {
-    this.setState({ size: e.target.value });
+  const handleShapeButton = (e: RadioChangeEvent) => {
+    setButtonShape(e.target.value);
   };
 
-  handleShapeChange = prop => e => {
-    this.setState({ [prop]: e.target.value });
+  const handleAvatarShape = (e: RadioChangeEvent) => {
+    setAvatarShape(e.target.value);
   };
 
-  render() {
-    const { active, size, buttonShape, avatarShape, block } = this.state;
-    return (
-      <>
-        <Space>
-          <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
-          <Skeleton.Avatar active={active} size={size} shape={avatarShape} />
-          <Skeleton.Input active={active} size={size} />
-        </Space>
-        <br />
-        <br />
+  return (
+    <>
+      <Space>
         <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
-        <br />
-        <br />
-        <Skeleton.Input active={active} size={size} block={block} />
-        <br />
-        <br />
-        <Skeleton.Image />
-        <Divider />
-        <Form layout="inline" style={{ margin: '16px 0' }}>
-          <Form.Item label="Active">
-            <Switch checked={active} onChange={this.handleActiveChange} />
-          </Form.Item>
-          <Form.Item label="Button and Input Block">
-            <Switch checked={block} onChange={this.handleBlockChange} />
-          </Form.Item>
-          <Form.Item label="Size">
-            <Radio.Group value={size} onChange={this.handleSizeChange}>
-              <Radio.Button value="default">Default</Radio.Button>
-              <Radio.Button value="large">Large</Radio.Button>
-              <Radio.Button value="small">Small</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Button Shape">
-            <Radio.Group value={buttonShape} onChange={this.handleShapeChange('buttonShape')}>
-              <Radio.Button value="default">Default</Radio.Button>
-              <Radio.Button value="round">Round</Radio.Button>
-              <Radio.Button value="circle">Circle</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Avatar Shape">
-            <Radio.Group value={avatarShape} onChange={this.handleShapeChange('avatarShape')}>
-              <Radio.Button value="square">Square</Radio.Button>
-              <Radio.Button value="circle">Circle</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-        </Form>
-      </>
-    );
-  }
-}
+        <Skeleton.Avatar active={active} size={size} shape={avatarShape} />
+        <Skeleton.Input active={active} size={size} />
+      </Space>
+      <br />
+      <br />
+      <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
+      <br />
+      <br />
+      <Skeleton.Input active={active} size={size} block={block} />
+      <br />
+      <br />
+      <Skeleton.Image />
+      <Divider />
+      <Form layout="inline" style={{ margin: '16px 0' }}>
+        <Form.Item label="Active">
+          <Switch checked={active} onChange={handleActiveChange} />
+        </Form.Item>
+        <Form.Item label="Button and Input Block">
+          <Switch checked={block} onChange={handleBlockChange} />
+        </Form.Item>
+        <Form.Item label="Size">
+          <Radio.Group value={size} onChange={handleSizeChange}>
+            <Radio.Button value="default">Default</Radio.Button>
+            <Radio.Button value="large">Large</Radio.Button>
+            <Radio.Button value="small">Small</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Button Shape">
+          <Radio.Group value={buttonShape} onChange={handleShapeButton}>
+            <Radio.Button value="square">Square</Radio.Button>
+            <Radio.Button value="round">Round</Radio.Button>
+            <Radio.Button value="circle">Circle</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Avatar Shape">
+          <Radio.Group value={avatarShape} onChange={handleAvatarShape}>
+            <Radio.Button value="square">Square</Radio.Button>
+            <Radio.Button value="circle">Circle</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/skeleton/demo/list.md b/components/skeleton/demo/list.md
index b8a54f9009..267954994d 100644
--- a/components/skeleton/demo/list.md
+++ b/components/skeleton/demo/list.md
@@ -13,85 +13,84 @@ title:
 
 Use skeleton in list component.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Skeleton, Switch, List, Avatar } from 'antd';
 import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons';
+import type Icon from '@ant-design/icons';
 
-const listData = [];
-for (let i = 0; i < 3; i++) {
-  listData.push({
-    href: 'https://ant.design',
-    title: `ant design part ${i}`,
-    avatar: 'https://joeschmoe.io/api/v1/random',
-    description:
-      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
-    content:
-      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
-  });
+interface IconTextProps {
+  icon: typeof Icon;
+  text: React.ReactNode;
 }
 
-const IconText = ({ icon, text }) => (
+const listData = Array.from({ length: 3 }).map((_, i) => ({
+  href: 'https://ant.design',
+  title: `ant design part ${i}`,
+  avatar: 'https://joeschmoe.io/api/v1/random',
+  description:
+    'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+  content:
+    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
+}));
+
+const IconText = ({ icon, text }: IconTextProps) => (
   <span>
     {React.createElement(icon, { style: { marginRight: 8 } })}
     {text}
   </span>
 );
 
-class App extends React.Component {
-  state = {
-    loading: true,
+const App: React.FC = () => {
+  const [loading, setLoading] = useState(true);
+
+  const onChange = (checked: boolean) => {
+    setLoading(checked);
   };
+  return (
+    <>
+      <Switch checked={!loading} onChange={onChange} />
 
-  onChange = checked => {
-    this.setState({ loading: !checked });
-  };
-
-  render() {
-    const { loading } = this.state;
-
-    return (
-      <>
-        <Switch checked={!loading} onChange={this.onChange} />
-
-        <List
-          itemLayout="vertical"
-          size="large"
-          dataSource={listData}
-          renderItem={item => (
-            <List.Item
-              key={item.title}
-              actions={
-                !loading && [
-                  <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
-                  <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
-                  <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
-                ]
-              }
-              extra={
-                !loading && (
-                  <img
-                    width={272}
-                    alt="logo"
-                    src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
-                  />
-                )
-              }
-            >
-              <Skeleton loading={loading} active avatar>
-                <List.Item.Meta
-                  avatar={<Avatar src={item.avatar} />}
-                  title={<a href={item.href}>{item.title}</a>}
-                  description={item.description}
+      <List
+        itemLayout="vertical"
+        size="large"
+        dataSource={listData}
+        renderItem={item => (
+          <List.Item
+            key={item.title}
+            actions={
+              !loading
+                ? [
+                    <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
+                    <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
+                    <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
+                  ]
+                : undefined
+            }
+            extra={
+              !loading && (
+                <img
+                  width={272}
+                  alt="logo"
+                  src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                 />
-                {item.content}
-              </Skeleton>
-            </List.Item>
-          )}
-        />
-      </>
-    );
-  }
-}
+              )
+            }
+          >
+            <Skeleton loading={loading} active avatar>
+              <List.Item.Meta
+                avatar={<Avatar src={item.avatar} />}
+                title={<a href={item.href}>{item.title}</a>}
+                description={item.description}
+              />
+              {item.content}
+            </Skeleton>
+          </List.Item>
+        )}
+      />
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
index b525612127..14ac47f89f 100644
--- a/components/slider/demo/basic.md
+++ b/components/slider/demo/basic.md
@@ -13,31 +13,27 @@ title:
 
 Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Slider, Switch } from 'antd';
 
-class Demo extends React.Component {
-  state = {
-    disabled: false,
+const App: React.FC = () => {
+  const [disabled, setDisabled] = useState(false);
+
+  const onChange = (checked: boolean) => {
+    setDisabled(checked);
   };
 
-  handleDisabledChange = disabled => {
-    this.setState({ disabled });
-  };
+  return (
+    <>
+      <Slider defaultValue={30} disabled={disabled} />
+      <Slider range defaultValue={[20, 50]} disabled={disabled} />
+      Disabled: <Switch size="small" checked={disabled} onChange={onChange} />
+    </>
+  );
+};
 
-  render() {
-    const { disabled } = this.state;
-    return (
-      <>
-        <Slider defaultValue={30} disabled={disabled} />
-        <Slider range defaultValue={[20, 50]} disabled={disabled} />
-        Disabled: <Switch size="small" checked={disabled} onChange={this.handleDisabledChange} />
-      </>
-    );
-  }
-}
-
-export default Demo;
+export default App;
 ```
 
 <style>
diff --git a/components/slider/demo/dragableTrack.md b/components/slider/demo/dragableTrack.md
index 782f64bbf9..e930e57bac 100644
--- a/components/slider/demo/dragableTrack.md
+++ b/components/slider/demo/dragableTrack.md
@@ -13,8 +13,11 @@ title:
 
 Make range track draggable when set `range.draggableTrack`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Slider } from 'antd';
 
-export default () => <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;
+const App: React.FC = () => <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;
+
+export default App;
 ```
diff --git a/components/slider/demo/event.md b/components/slider/demo/event.md
index 5f20e7ff91..2b50b64da6 100644
--- a/components/slider/demo/event.md
+++ b/components/slider/demo/event.md
@@ -13,18 +13,19 @@ title:
 
 The `onChange` callback function will fire when the user changes the slider's value. The `onAfterChange` callback function will fire when `onmouseup` fired.
 
-```jsx
+```tsx
+import React from 'react';
 import { Slider } from 'antd';
 
-function onChange(value) {
+const onChange = (value: number | [number, number]) => {
   console.log('onChange: ', value);
-}
+};
 
-function onAfterChange(value) {
+const onAfterChange = (value: number | [number, number]) => {
   console.log('onAfterChange: ', value);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
     <Slider
@@ -36,4 +37,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md
index d212d7df2a..c97eb29eaa 100644
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@@ -13,36 +13,36 @@ title:
 
 You can add an icon beside the slider to make it meaningful.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Slider } from 'antd';
 import { FrownOutlined, SmileOutlined } from '@ant-design/icons';
 
-class IconSlider extends React.Component {
-  state = {
-    value: 0,
-  };
-
-  handleChange = value => {
-    this.setState({ value });
-  };
-
-  render() {
-    const { max, min } = this.props;
-    const { value } = this.state;
-    const mid = ((max - min) / 2).toFixed(5);
-    const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
-    const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
-    return (
-      <div className="icon-wrapper">
-        <FrownOutlined className={preColorCls} />
-        <Slider {...this.props} onChange={this.handleChange} value={value} />
-        <SmileOutlined className={nextColorCls} />
-      </div>
-    );
-  }
+interface IconSliderProps {
+  max: number;
+  min: number;
 }
 
-export default () => <IconSlider min={0} max={20} />;
+const IconSlider: React.FC<IconSliderProps> = props => {
+  const { max, min } = props;
+  const [value, setValue] = useState(0);
+
+  const mid = Number(((max - min) / 2).toFixed(5));
+  const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
+  const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
+
+  return (
+    <div className="icon-wrapper">
+      <FrownOutlined className={preColorCls} />
+      <Slider {...props} onChange={setValue} value={value} />
+      <SmileOutlined className={nextColorCls} />
+    </div>
+  );
+};
+
+const App: React.FC = () => <IconSlider min={0} max={20} />;
+
+export default App;
 ```
 
 ```css
diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md
index bf55055f9d..e38e13ba78 100644
--- a/components/slider/demo/input-number.md
+++ b/components/slider/demo/input-number.md
@@ -13,92 +13,82 @@ title:
 
 Synchronize with [InputNumber](/components/input-number/) component.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Slider, InputNumber, Row, Col } from 'antd';
 
-class IntegerStep extends React.Component {
-  state = {
-    inputValue: 1,
+const IntegerStep = () => {
+  const [inputValue, setInputValue] = useState(1);
+
+  const onChange = (newValue: number) => {
+    setInputValue(newValue);
   };
 
-  onChange = value => {
-    this.setState({
-      inputValue: value,
-    });
-  };
+  return (
+    <Row>
+      <Col span={12}>
+        <Slider
+          min={1}
+          max={20}
+          onChange={onChange}
+          value={typeof inputValue === 'number' ? inputValue : 0}
+        />
+      </Col>
+      <Col span={4}>
+        <InputNumber
+          min={1}
+          max={20}
+          style={{ margin: '0 16px' }}
+          value={inputValue}
+          onChange={onChange}
+        />
+      </Col>
+    </Row>
+  );
+};
 
-  render() {
-    const { inputValue } = this.state;
-    return (
-      <Row>
-        <Col span={12}>
-          <Slider
-            min={1}
-            max={20}
-            onChange={this.onChange}
-            value={typeof inputValue === 'number' ? inputValue : 0}
-          />
-        </Col>
-        <Col span={4}>
-          <InputNumber
-            min={1}
-            max={20}
-            style={{ margin: '0 16px' }}
-            value={inputValue}
-            onChange={this.onChange}
-          />
-        </Col>
-      </Row>
-    );
-  }
-}
+const DecimalStep = () => {
+  const [inputValue, setInputValue] = useState(0);
 
-class DecimalStep extends React.Component {
-  state = {
-    inputValue: 0,
-  };
-
-  onChange = value => {
+  const onChange = (value: number) => {
     if (isNaN(value)) {
       return;
     }
-    this.setState({
-      inputValue: value,
-    });
+
+    setInputValue(value);
   };
 
-  render() {
-    const { inputValue } = this.state;
-    return (
-      <Row>
-        <Col span={12}>
-          <Slider
-            min={0}
-            max={1}
-            onChange={this.onChange}
-            value={typeof inputValue === 'number' ? inputValue : 0}
-            step={0.01}
-          />
-        </Col>
-        <Col span={4}>
-          <InputNumber
-            min={0}
-            max={1}
-            style={{ margin: '0 16px' }}
-            step={0.01}
-            value={inputValue}
-            onChange={this.onChange}
-          />
-        </Col>
-      </Row>
-    );
-  }
-}
+  return (
+    <Row>
+      <Col span={12}>
+        <Slider
+          min={0}
+          max={1}
+          onChange={onChange}
+          value={typeof inputValue === 'number' ? inputValue : 0}
+          step={0.01}
+        />
+      </Col>
+      <Col span={4}>
+        <InputNumber
+          min={0}
+          max={1}
+          style={{ margin: '0 16px' }}
+          step={0.01}
+          value={inputValue}
+          onChange={onChange}
+        />
+      </Col>
+    </Row>
+  );
+};
 
-export default () => (
+const App: React.FC = () => (
   <div>
     <IntegerStep />
     <DecimalStep />
   </div>
 );
+
+export default App;
 ```
diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md
index ba331a071d..f3f27ad122 100644
--- a/components/slider/demo/mark.md
+++ b/components/slider/demo/mark.md
@@ -13,10 +13,12 @@ title:
 
 Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb. When `included` is false, means that different thumbs are coordinative. when `step` is null, users can only slide the thumbs onto marks.
 
-```jsx
+```tsx
+import React from 'react';
 import { Slider } from 'antd';
+import type { SliderMarks } from 'antd/lib/slider';
 
-const marks = {
+const marks: SliderMarks = {
   0: '0°C',
   26: '26°C',
   37: '37°C',
@@ -28,7 +30,7 @@ const marks = {
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <>
     <h4>included=true</h4>
     <Slider marks={marks} defaultValue={37} />
@@ -44,6 +46,8 @@ export default () => (
     <Slider marks={marks} step={null} defaultValue={37} />
   </>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/slider/demo/reverse.md b/components/slider/demo/reverse.md
index 64883df04d..46f79ee4a6 100644
--- a/components/slider/demo/reverse.md
+++ b/components/slider/demo/reverse.md
@@ -13,29 +13,21 @@ title:
 
 Using `reverse` to render slider reversely.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Slider, Switch } from 'antd';
 
-class Demo extends React.Component {
-  state = {
-    reverse: true,
-  };
+const App: React.FC = () => {
+  const [reverse, setReverse] = useState(true);
 
-  handleReverseChange = reverse => {
-    this.setState({ reverse });
-  };
+  return (
+    <>
+      <Slider defaultValue={30} reverse={reverse} />
+      <Slider range defaultValue={[20, 50]} reverse={reverse} />
+      Reversed: <Switch size="small" checked={reverse} onChange={setReverse} />
+    </>
+  );
+};
 
-  render() {
-    const { reverse } = this.state;
-    return (
-      <>
-        <Slider defaultValue={30} reverse={reverse} />
-        <Slider range defaultValue={[20, 50]} reverse={reverse} />
-        Reversed: <Switch size="small" checked={reverse} onChange={this.handleReverseChange} />
-      </>
-    );
-  }
-}
-
-export default Demo;
+export default App;
 ```
diff --git a/components/slider/demo/show-tooltip.md b/components/slider/demo/show-tooltip.md
index ffb3e35899..6481df1408 100644
--- a/components/slider/demo/show-tooltip.md
+++ b/components/slider/demo/show-tooltip.md
@@ -13,8 +13,11 @@ title:
 
 When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
 
-```jsx
+```tsx
+import React from 'react';
 import { Slider } from 'antd';
 
-export default () => <Slider defaultValue={30} tooltipVisible />;
+const App: React.FC = () => <Slider defaultValue={30} tooltipVisible />;
+
+export default App;
 ```
diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md
index 6f40cd8d73..a37a9acafc 100644
--- a/components/slider/demo/tip-formatter.md
+++ b/components/slider/demo/tip-formatter.md
@@ -13,17 +13,18 @@ title:
 
 Use `tipFormatter` to format content of `Tooltip`. If `tipFormatter` is null, hide it.
 
-```jsx
+```tsx
+import React from 'react';
 import { Slider } from 'antd';
 
-function formatter(value) {
-  return `${value}%`;
-}
+const formatter = (value: number) => `${value}%`;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Slider tipFormatter={formatter} />
     <Slider tipFormatter={null} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/slider/demo/vertical.md b/components/slider/demo/vertical.md
index d1b24b3f46..e577b89143 100644
--- a/components/slider/demo/vertical.md
+++ b/components/slider/demo/vertical.md
@@ -13,16 +13,18 @@ title:
 
 The vertical Slider.
 
-```jsx
+```tsx
+import React from 'react';
 import { Slider } from 'antd';
+import type { SliderMarks } from 'antd/lib/slider';
 
-const style = {
+const style: React.CSSProperties = {
   display: 'inline-block',
   height: 300,
   marginLeft: 70,
 };
 
-const marks = {
+const marks: SliderMarks = {
   0: '0°C',
   26: '26°C',
   37: '37°C',
@@ -34,7 +36,7 @@ const marks = {
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <>
     <div style={style}>
       <Slider vertical defaultValue={30} />
@@ -47,4 +49,6 @@ export default () => (
     </div>
   </>
 );
+
+export default App;
 ```
diff --git a/components/space/demo/align.md b/components/space/demo/align.md
index 678466852a..a8ec6378e4 100644
--- a/components/space/demo/align.md
+++ b/components/space/demo/align.md
@@ -13,10 +13,11 @@ title:
 
 Config item align.
 
-```jsx
+```tsx
+import React from 'react';
 import { Space, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <div className="space-align-container">
     <div className="space-align-block">
       <Space align="center">
@@ -48,6 +49,8 @@ export default () => (
     </div>
   </div>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/space/demo/base.md b/components/space/demo/base.md
index b1fb0a3331..e9021c33f8 100644
--- a/components/space/demo/base.md
+++ b/components/space/demo/base.md
@@ -13,11 +13,12 @@ title:
 
 Crowded components horizontal spacing.
 
-```jsx
+```tsx
+import React from 'react';
 import { Button, Space, Upload, Popconfirm } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 
-const App = () => (
+const App: React.FC = () => (
   <Space>
     Space
     <Button type="primary">Button</Button>
diff --git a/components/space/demo/customize.md b/components/space/demo/customize.md
index 9ed2be302e..c20a500100 100644
--- a/components/space/demo/customize.md
+++ b/components/space/demo/customize.md
@@ -13,11 +13,11 @@ title:
 
 Custom spacing size.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Space, Slider, Button } from 'antd';
 
-function App() {
+const App: React.FC = () => {
   const [size, setSize] = useState(8);
 
   return (
@@ -33,7 +33,7 @@ function App() {
       </Space>
     </>
   );
-}
+};
 
 export default App;
 ```
diff --git a/components/space/demo/debug.md b/components/space/demo/debug.md
index bdf5677981..823e8f0881 100644
--- a/components/space/demo/debug.md
+++ b/components/space/demo/debug.md
@@ -14,10 +14,11 @@ Debug usage
 
 Debug usage
 
-```jsx
+```tsx
+import React from 'react';
 import { Space, Button, Popconfirm } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Space>
     <>
       Button
@@ -38,4 +39,6 @@ export default () => (
     {undefined}
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/space/demo/gap-in-line.md b/components/space/demo/gap-in-line.md
index a89be21860..07cc416fae 100644
--- a/components/space/demo/gap-in-line.md
+++ b/components/space/demo/gap-in-line.md
@@ -15,6 +15,7 @@ Debug usage
 Debug usage
 
 ```tsx
+import React, { useState } from 'react';
 import { Space, Switch } from 'antd';
 
 const style: React.CSSProperties = {
@@ -23,8 +24,8 @@ const style: React.CSSProperties = {
   background: 'red',
 };
 
-const Demo = () => {
-  const [singleCol, setSingleCol] = React.useState(false);
+const App: React.FC = () => {
+  const [singleCol, setSingleCol] = useState(false);
 
   return (
     <>
@@ -46,5 +47,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/space/demo/size.md b/components/space/demo/size.md
index 41167e1d30..978917356f 100644
--- a/components/space/demo/size.md
+++ b/components/space/demo/size.md
@@ -17,12 +17,13 @@ title:
 
 Set the size to `large` and `middle` by setting size to large and middle respectively. If `size` is not set, the spacing is `small`.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Space, Radio, Button } from 'antd';
+import type { SpaceSize } from 'antd/es/space';
 
-function App() {
-  const [size, setSize] = useState('small');
+const App: React.FC = () => {
+  const [size, setSize] = useState<SpaceSize | [SpaceSize, SpaceSize]>('small');
 
   return (
     <>
@@ -41,7 +42,7 @@ function App() {
       </Space>
     </>
   );
-}
+};
 
 export default App;
 ```
diff --git a/components/space/demo/split.md b/components/space/demo/split.md
index eb8f02a47a..d7a71ec744 100644
--- a/components/space/demo/split.md
+++ b/components/space/demo/split.md
@@ -13,10 +13,11 @@ title:
 
 Crowded components split.
 
-```jsx
+```tsx
+import React from 'react';
 import { Space, Typography, Divider } from 'antd';
 
-const App = () => (
+const App: React.FC = () => (
   <Space split={<Divider type="vertical" />}>
     <Typography.Link>Link</Typography.Link>
     <Typography.Link>Link</Typography.Link>
diff --git a/components/space/demo/vertical.md b/components/space/demo/vertical.md
index 39b609fa21..f6aa076259 100644
--- a/components/space/demo/vertical.md
+++ b/components/space/demo/vertical.md
@@ -13,10 +13,11 @@ title:
 
 Crowded components vertical spacing.
 
-```jsx
+```tsx
+import React from 'react';
 import { Space, Card } from 'antd';
 
-const App = () => (
+const App: React.FC = () => (
   <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
     <Card title="Card" size="small">
       <p>Card content</p>
diff --git a/components/space/demo/wrap.md b/components/space/demo/wrap.md
index a018469b81..8badcc5290 100644
--- a/components/space/demo/wrap.md
+++ b/components/space/demo/wrap.md
@@ -13,10 +13,11 @@ title:
 
 Auto wrap line.
 
-```jsx
+```tsx
+import React from 'react';
 import { Space, Button } from 'antd';
 
-const App = () => (
+const App: React.FC = () => (
   <Space size={[8, 16]} wrap>
     {new Array(20).fill(null).map((_, index) => (
       // eslint-disable-next-line react/no-array-index-key
diff --git a/components/spin/demo/basic.md b/components/spin/demo/basic.md
index bbc744542d..6f80762591 100644
--- a/components/spin/demo/basic.md
+++ b/components/spin/demo/basic.md
@@ -14,7 +14,10 @@ title:
 A simple loading status.
 
 ```tsx
+import React from 'react';
 import { Spin } from 'antd';
 
-export default () => <Spin />;
+const App: React.FC = () => <Spin />;
+
+export default App;
 ```
diff --git a/components/spin/demo/custom-indicator.md b/components/spin/demo/custom-indicator.md
index 786f329c3f..c7e3631e1d 100644
--- a/components/spin/demo/custom-indicator.md
+++ b/components/spin/demo/custom-indicator.md
@@ -13,11 +13,14 @@ title:
 
 Use custom loading indicator.
 
-```jsx
+```tsx
+import React from 'react';
 import { Spin } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 
 const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
 
-export default () => <Spin indicator={antIcon} />;
+const App: React.FC = () => <Spin indicator={antIcon} />;
+
+export default App;
 ```
diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md
index 7a330e5d95..6d25c6a301 100644
--- a/components/spin/demo/delayAndDebounce.md
+++ b/components/spin/demo/delayAndDebounce.md
@@ -13,37 +13,36 @@ title:
 
 Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Spin, Alert, Switch } from 'antd';
 
-class Card extends React.Component {
-  state = { loading: false };
+const App: React.FC = () => {
+  const [loading, setLoading] = useState(false);
 
-  toggle = value => {
-    this.setState({ loading: value });
+  const toggle = (checked: boolean) => {
+    setLoading(checked);
   };
+  const container = (
+    <Alert
+      message="Alert message title"
+      description="Further details about the context of this alert."
+      type="info"
+    />
+  );
 
-  render() {
-    const container = (
-      <Alert
-        message="Alert message title"
-        description="Further details about the context of this alert."
-        type="info"
-      />
-    );
-    return (
-      <div>
-        <Spin spinning={this.state.loading} delay={500}>
-          {container}
-        </Spin>
-        <div style={{ marginTop: 16 }}>
-          Loading state：
-          <Switch checked={this.state.loading} onChange={this.toggle} />
-        </div>
+  return (
+    <div>
+      <Spin spinning={loading} delay={500}>
+        {container}
+      </Spin>
+      <div style={{ marginTop: 16 }}>
+        Loading state：
+        <Switch checked={loading} onChange={toggle} />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
-export default () => <Card />;
+export default App;
 ```
diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md
index d5ddd5f517..365a18fbb8 100644
--- a/components/spin/demo/inside.md
+++ b/components/spin/demo/inside.md
@@ -14,13 +14,16 @@ title:
 Spin in a container.
 
 ```tsx
+import React from 'react';
 import { Spin } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <div className="example">
     <Spin />
   </div>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index 638715a4ab..11282c5cd5 100644
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@@ -14,33 +14,32 @@ title:
 Embedding content into `Spin` will set it into loading state.
 
 ```tsx
+import React, { useState } from 'react';
 import { Spin, Switch, Alert } from 'antd';
 
-class Card extends React.Component {
-  state = { loading: false };
+const App: React.FC = () => {
+  const [loading, setLoading] = useState(false);
 
-  toggle = (value: boolean) => {
-    this.setState({ loading: value });
+  const toggle = (checked: boolean) => {
+    setLoading(checked);
   };
 
-  render() {
-    return (
-      <div>
-        <Spin spinning={this.state.loading}>
-          <Alert
-            message="Alert message title"
-            description="Further details about the context of this alert."
-            type="info"
-          />
-        </Spin>
-        <div style={{ marginTop: 16 }}>
-          Loading state：
-          <Switch checked={this.state.loading} onChange={this.toggle} />
-        </div>
+  return (
+    <div>
+      <Spin spinning={loading}>
+        <Alert
+          message="Alert message title"
+          description="Further details about the context of this alert."
+          type="info"
+        />
+      </Spin>
+      <div style={{ marginTop: 16 }}>
+        Loading state：
+        <Switch checked={loading} onChange={toggle} />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
-export default () => <Card />;
+export default App;
 ```
diff --git a/components/spin/demo/size.md b/components/spin/demo/size.md
index acfd7b7e34..0e6a4d760b 100644
--- a/components/spin/demo/size.md
+++ b/components/spin/demo/size.md
@@ -13,14 +13,17 @@ title:
 
 A small `Spin` is used for loading text, default sized `Spin` for loading a card-level block, and large `Spin` used for loading a **page**.
 
-```jsx
+```tsx
+import React from 'react';
 import { Spin, Space } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Space size="middle">
     <Spin size="small" />
     <Spin />
     <Spin size="large" />
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md
index 9c48093b57..1a7cb0c76d 100644
--- a/components/spin/demo/tip.md
+++ b/components/spin/demo/tip.md
@@ -13,10 +13,11 @@ title:
 
 Customized description content.
 
-```jsx
+```tsx
+import React from 'react';
 import { Spin, Alert } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Spin tip="Loading...">
     <Alert
       message="Alert message title"
@@ -25,4 +26,6 @@ export default () => (
     />
   </Spin>
 );
+
+export default App;
 ```
diff --git a/components/statistic/demo/basic.md b/components/statistic/demo/basic.md
index efc6e05dc7..64bb921f45 100644
--- a/components/statistic/demo/basic.md
+++ b/components/statistic/demo/basic.md
@@ -13,10 +13,11 @@ title:
 
 Simplest Usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Statistic, Row, Col, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Row gutter={16}>
     <Col span={12}>
       <Statistic title="Active Users" value={112893} />
@@ -32,4 +33,6 @@ export default () => (
     </Col>
   </Row>
 );
+
+export default App;
 ```
diff --git a/components/statistic/demo/card.md b/components/statistic/demo/card.md
index b7664c1ca4..35fbbfa36e 100644
--- a/components/statistic/demo/card.md
+++ b/components/statistic/demo/card.md
@@ -13,11 +13,12 @@ title:
 
 Display statistic data in Card.
 
-```jsx
+```tsx
+import React from 'react';
 import { Statistic, Card, Row, Col } from 'antd';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <div className="site-statistic-demo-card">
     <Row gutter={16}>
       <Col span={12}>
@@ -47,6 +48,8 @@ export default () => (
     </Row>
   </div>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/statistic/demo/countdown.md b/components/statistic/demo/countdown.md
index f981270515..fb6edda3b0 100644
--- a/components/statistic/demo/countdown.md
+++ b/components/statistic/demo/countdown.md
@@ -13,36 +13,42 @@ title:
 
 Countdown component.
 
-```jsx
+```tsx
+import React from 'react';
 import { Statistic, Row, Col } from 'antd';
+import type { countdownValueType } from 'antd/lib/statistic/utils';
 
 const { Countdown } = Statistic;
 const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
 
-function onFinish() {
-  console.log('finished!');
-}
+const App: React.FC = () => {
+  const onFinish = () => {
+    console.log('finished!');
+  };
 
-function onChange(val) {
-  if (4.95 * 1000 < val && val < 5 * 1000) {
-    console.log('changed!');
-  }
-}
+  const onChange = (val: countdownValueType) => {
+    if (4.95 * 1000 < val && val < 5 * 1000) {
+      console.log('changed!');
+    }
+  };
 
-export default () => (
-  <Row gutter={16}>
-    <Col span={12}>
-      <Countdown title="Countdown" value={deadline} onFinish={onFinish} />
-    </Col>
-    <Col span={12}>
-      <Countdown title="Million Seconds" value={deadline} format="HH:mm:ss:SSS" />
-    </Col>
-    <Col span={24} style={{ marginTop: 32 }}>
-      <Countdown title="Day Level" value={deadline} format="D 天 H 时 m 分 s 秒" />
-    </Col>
-    <Col span={12}>
-      <Countdown title="Countdown" value={Date.now() + 10 * 1000} onChange={onChange} />
-    </Col>
-  </Row>
-);
+  return (
+    <Row gutter={16}>
+      <Col span={12}>
+        <Countdown title="Countdown" value={deadline} onFinish={onFinish} />
+      </Col>
+      <Col span={12}>
+        <Countdown title="Million Seconds" value={deadline} format="HH:mm:ss:SSS" />
+      </Col>
+      <Col span={24} style={{ marginTop: 32 }}>
+        <Countdown title="Day Level" value={deadline} format="D 天 H 时 m 分 s 秒" />
+      </Col>
+      <Col span={12}>
+        <Countdown title="Countdown" value={Date.now() + 10 * 1000} onChange={onChange} />
+      </Col>
+    </Row>
+  );
+};
+
+export default App;
 ```
diff --git a/components/statistic/demo/unit.md b/components/statistic/demo/unit.md
index aaf1e9aca9..9b8b6d79fd 100644
--- a/components/statistic/demo/unit.md
+++ b/components/statistic/demo/unit.md
@@ -13,11 +13,12 @@ title:
 
 Add unit through `prefix` and `suffix`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Statistic, Row, Col } from 'antd';
 import { LikeOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Row gutter={16}>
     <Col span={12}>
       <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
@@ -27,4 +28,6 @@ export default () => (
     </Col>
   </Row>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/clickable.md b/components/steps/demo/clickable.md
index 4fbfd38423..3783b6cf11 100644
--- a/components/steps/demo/clickable.md
+++ b/components/steps/demo/clickable.md
@@ -13,43 +13,38 @@ title:
 
 Setting `onChange` makes Steps clickable.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Steps, Divider } from 'antd';
 
 const { Step } = Steps;
 
-class Demo extends React.Component {
-  state = {
-    current: 0,
-  };
+const App: React.FC = () => {
+  const [current, setCurrent] = useState(0);
 
-  onChange = current => {
+  const onChange = (value: number) => {
     console.log('onChange:', current);
-    this.setState({ current });
+    setCurrent(value);
   };
 
-  render() {
-    const { current } = this.state;
+  return (
+    <>
+      <Steps current={current} onChange={onChange}>
+        <Step title="Step 1" description="This is a description." />
+        <Step title="Step 2" description="This is a description." />
+        <Step title="Step 3" description="This is a description." />
+      </Steps>
 
-    return (
-      <>
-        <Steps current={current} onChange={this.onChange}>
-          <Step title="Step 1" description="This is a description." />
-          <Step title="Step 2" description="This is a description." />
-          <Step title="Step 3" description="This is a description." />
-        </Steps>
+      <Divider />
 
-        <Divider />
+      <Steps current={current} onChange={onChange} direction="vertical">
+        <Step title="Step 1" description="This is a description." />
+        <Step title="Step 2" description="This is a description." />
+        <Step title="Step 3" description="This is a description." />
+      </Steps>
+    </>
+  );
+};
 
-        <Steps current={current} onChange={this.onChange} direction="vertical">
-          <Step title="Step 1" description="This is a description." />
-          <Step title="Step 2" description="This is a description." />
-          <Step title="Step 3" description="This is a description." />
-        </Steps>
-      </>
-    );
-  }
-}
-
-export default Demo;
+export default App;
 ```
diff --git a/components/steps/demo/customized-progress-dot.md b/components/steps/demo/customized-progress-dot.md
index fdf327b961..f0934f2a6c 100644
--- a/components/steps/demo/customized-progress-dot.md
+++ b/components/steps/demo/customized-progress-dot.md
@@ -13,12 +13,14 @@ title:
 
 You can customize the display for Steps with progress dot style.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps, Popover } from 'antd';
+import type { StepsProps } from 'antd';
 
 const { Step } = Steps;
 
-const customDot = (dot, { status, index }) => (
+const customDot: StepsProps['progressDot'] = (dot, { status, index }) => (
   <Popover
     content={
       <span>
@@ -30,7 +32,7 @@ const customDot = (dot, { status, index }) => (
   </Popover>
 );
 
-export default () => (
+const App: React.FC = () => (
   <Steps current={1} progressDot={customDot}>
     <Step title="Finished" description="You can hover on the dot." />
     <Step title="In Progress" description="You can hover on the dot." />
@@ -38,4 +40,6 @@ export default () => (
     <Step title="Waiting" description="You can hover on the dot." />
   </Steps>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md
index 4332e76204..773477681a 100644
--- a/components/steps/demo/error.md
+++ b/components/steps/demo/error.md
@@ -13,16 +13,19 @@ title:
 
 By using `status` of `Steps`, you can specify the state for current step.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-export default () => (
+const App: React.FC = () => (
   <Steps current={1} status="error">
     <Step title="Finished" description="This is a description" />
     <Step title="In Process" description="This is a description" />
     <Step title="Waiting" description="This is a description" />
   </Steps>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md
index d20e4cc6d3..1102a1179b 100644
--- a/components/steps/demo/icon.md
+++ b/components/steps/demo/icon.md
@@ -13,13 +13,14 @@ title:
 
 You can use your own custom icons by setting the property `icon` for `Steps.Step`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps } from 'antd';
 import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from '@ant-design/icons';
 
 const { Step } = Steps;
 
-export default () => (
+const App: React.FC = () => (
   <Steps>
     <Step status="finish" title="Login" icon={<UserOutlined />} />
     <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
@@ -27,4 +28,6 @@ export default () => (
     <Step status="wait" title="Done" icon={<SmileOutlined />} />
   </Steps>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/nav.md b/components/steps/demo/nav.md
index 4315867ef3..1b78ac9617 100644
--- a/components/steps/demo/nav.md
+++ b/components/steps/demo/nav.md
@@ -13,80 +13,76 @@ title:
 
 Navigation steps.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-class Demo extends React.Component {
-  state = {
-    current: 0,
+const App: React.FC = () => {
+  const [current, setCurrent] = useState(0);
+
+  const onChange = (value: number) => {
+    console.log('onChange:', value);
+    setCurrent(value);
   };
 
-  onChange = current => {
-    console.log('onChange:', current);
-    this.setState({ current });
-  };
+  return (
+    <>
+      <Steps
+        type="navigation"
+        size="small"
+        current={current}
+        onChange={onChange}
+        className="site-navigation-steps"
+      >
+        <Step
+          title="Step 1"
+          subTitle="00:00:05"
+          status="finish"
+          description="This is a description."
+        />
+        <Step
+          title="Step 2"
+          subTitle="00:01:02"
+          status="process"
+          description="This is a description."
+        />
+        <Step
+          title="Step 3"
+          subTitle="waiting for longlong time"
+          status="wait"
+          description="This is a description."
+        />
+      </Steps>
+      <Steps
+        type="navigation"
+        current={current}
+        onChange={onChange}
+        className="site-navigation-steps"
+      >
+        <Step status="finish" title="Step 1" />
+        <Step status="process" title="Step 2" />
+        <Step status="wait" title="Step 3" />
+        <Step status="wait" title="Step 4" />
+      </Steps>
+      <Steps
+        type="navigation"
+        size="small"
+        current={current}
+        onChange={onChange}
+        className="site-navigation-steps"
+      >
+        <Step status="finish" title="finish 1" />
+        <Step status="finish" title="finish 2" />
+        <Step status="process" title="current process" />
+        <Step status="wait" title="wait" disabled />
+      </Steps>
+    </>
+  );
+};
 
-  render() {
-    const { current } = this.state;
-    return (
-      <>
-        <Steps
-          type="navigation"
-          size="small"
-          current={current}
-          onChange={this.onChange}
-          className="site-navigation-steps"
-        >
-          <Step
-            title="Step 1"
-            subTitle="00:00:05"
-            status="finish"
-            description="This is a description."
-          />
-          <Step
-            title="Step 2"
-            subTitle="00:01:02"
-            status="process"
-            description="This is a description."
-          />
-          <Step
-            title="Step 3"
-            subTitle="waiting for longlong time"
-            status="wait"
-            description="This is a description."
-          />
-        </Steps>
-        <Steps
-          type="navigation"
-          current={current}
-          onChange={this.onChange}
-          className="site-navigation-steps"
-        >
-          <Step status="finish" title="Step 1" />
-          <Step status="process" title="Step 2" />
-          <Step status="wait" title="Step 3" />
-          <Step status="wait" title="Step 4" />
-        </Steps>
-        <Steps
-          type="navigation"
-          size="small"
-          current={current}
-          onChange={this.onChange}
-          className="site-navigation-steps"
-        >
-          <Step status="finish" title="finish 1" />
-          <Step status="finish" title="finish 2" />
-          <Step status="process" title="current process" />
-          <Step status="wait" title="wait" disabled />
-        </Steps>
-      </>
-    );
-  }
-}
-
-export default Demo;
+export default App;
 ```
 
 ```css
diff --git a/components/steps/demo/progress-debug.md b/components/steps/demo/progress-debug.md
index 61a92b3ec6..ce1e470510 100644
--- a/components/steps/demo/progress-debug.md
+++ b/components/steps/demo/progress-debug.md
@@ -14,18 +14,20 @@ Buggy!
 
 Buggy!
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Steps, Button } from 'antd';
+import type { StepsProps } from 'antd';
 
 const { Step } = Steps;
 
-function Demo() {
-  const [percent, setPercentage] = React.useState(0);
-  const [current, setCurrent] = React.useState(1);
-  const [status, setStatus] = React.useState('process');
+const App: React.FC = () => {
+  const [percent, setPercentage] = useState(0);
+  const [current, setCurrent] = useState(1);
+  const [status, setStatus] = useState<StepsProps['status']>('process');
   return (
     <>
-      <Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
+      <Button onClick={() => setPercentage(0)}>Percentage to undefined</Button>
       <Button onClick={() => setPercentage((percent + 10) % 100)}>Percentage +</Button>
       <Button
         onClick={() => {
@@ -61,7 +63,7 @@ function Demo() {
       </Steps>
     </>
   );
-}
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/steps/demo/progress-dot-small.md b/components/steps/demo/progress-dot-small.md
index 443f3d8f21..902fd6808d 100644
--- a/components/steps/demo/progress-dot-small.md
+++ b/components/steps/demo/progress-dot-small.md
@@ -14,12 +14,13 @@ debug: true
 
 Steps with progress dot style.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps, Divider } from 'antd';
 
 const { Step } = Steps;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Steps progressDot current={1} size="small">
       <Step title="Finished" description="This is a description." />
@@ -36,4 +37,6 @@ export default () => (
     </Steps>
   </>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/progress-dot.md b/components/steps/demo/progress-dot.md
index 8fd6fa03dd..597569915b 100644
--- a/components/steps/demo/progress-dot.md
+++ b/components/steps/demo/progress-dot.md
@@ -13,12 +13,13 @@ title:
 
 Steps with progress dot style.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps, Divider } from 'antd';
 
 const { Step } = Steps;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Steps progressDot current={1}>
       <Step title="Finished" description="This is a description." />
@@ -35,4 +36,6 @@ export default () => (
     </Steps>
   </>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/progress.md b/components/steps/demo/progress.md
index b806119115..94c9e65704 100644
--- a/components/steps/demo/progress.md
+++ b/components/steps/demo/progress.md
@@ -13,16 +13,19 @@ title:
 
 Steps with progress.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-export default () => (
+const App: React.FC = () => (
   <Steps current={1} percent={60}>
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
   </Steps>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md
index 3f2d787479..228acefd6c 100644
--- a/components/steps/demo/simple.md
+++ b/components/steps/demo/simple.md
@@ -13,16 +13,19 @@ title:
 
 The most basic step bar.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-export default () => (
+const App: React.FC = () => (
   <Steps current={1}>
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
   </Steps>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md
index b94cdb9bb4..c8b5f05b2e 100644
--- a/components/steps/demo/small-size.md
+++ b/components/steps/demo/small-size.md
@@ -13,16 +13,19 @@ title:
 
 By setting like this: `<Steps size="small">`, you can get a mini version.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-export default () => (
+const App: React.FC = () => (
   <Steps size="small" current={1}>
     <Step title="Finished" />
     <Step title="In Progress" />
     <Step title="Waiting" />
   </Steps>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index b41621fc8e..d4a7693257 100644
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@@ -13,7 +13,8 @@ title:
 
 Cooperate with the content and buttons, to represent the progress of a process.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Steps, Button, message } from 'antd';
 
 const { Step } = Steps;
@@ -33,8 +34,8 @@ const steps = [
   },
 ];
 
-const App = () => {
-  const [current, setCurrent] = React.useState(0);
+const App: React.FC = () => {
+  const [current, setCurrent] = useState(0);
 
   const next = () => {
     setCurrent(current + 1);
diff --git a/components/steps/demo/steps-in-steps.md b/components/steps/demo/steps-in-steps.md
index 588738f94b..185e77d434 100644
--- a/components/steps/demo/steps-in-steps.md
+++ b/components/steps/demo/steps-in-steps.md
@@ -14,14 +14,16 @@ title:
 
 Test style of Steps inside Steps.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Steps, Radio, Card } from 'antd';
+import type { StepsProps } from 'antd';
 
 const { Step } = Steps;
 
-const App = () => {
-  const [size, setSize] = useState('default');
+const App: React.FC = () => {
+  const [size, setSize] = useState<StepsProps['size']>('default');
+
   const horizontalSteps = (
     <Card>
       <Steps size={size}>
@@ -31,6 +33,7 @@ const App = () => {
       </Steps>
     </Card>
   );
+
   return (
     <>
       <Radio.Group
diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md
index 25354e4cfb..ab87b559ab 100644
--- a/components/steps/demo/vertical-small.md
+++ b/components/steps/demo/vertical-small.md
@@ -13,16 +13,19 @@ title:
 
 A simple mini version step bar in the vertical direction.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-export default () => (
+const App: React.FC = () => (
   <Steps direction="vertical" size="small" current={1}>
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
   </Steps>
 );
+
+export default App;
 ```
diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md
index e412227d55..7158aacbd7 100644
--- a/components/steps/demo/vertical.md
+++ b/components/steps/demo/vertical.md
@@ -13,16 +13,19 @@ title:
 
 A simple step bar in the vertical direction.
 
-```jsx
+```tsx
+import React from 'react';
 import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-export default () => (
+const App: React.FC = () => (
   <Steps direction="vertical" current={1}>
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
   </Steps>
 );
+
+export default App;
 ```
diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
index a69c11b6f1..20709acb72 100644
--- a/components/switch/demo/basic.md
+++ b/components/switch/demo/basic.md
@@ -13,14 +13,17 @@ title:
 
 The most basic usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Switch } from 'antd';
 
-function onChange(checked) {
+const onChange = (checked: boolean) => {
   console.log(`switch to ${checked}`);
-}
+};
 
-export default () => <Switch defaultChecked onChange={onChange} />;
+const App: React.FC = () => <Switch defaultChecked onChange={onChange} />;
+
+export default App;
 ```
 
 <style>
diff --git a/components/switch/demo/disabled.md b/components/switch/demo/disabled.md
index 2094e721b0..2950d3fa70 100644
--- a/components/switch/demo/disabled.md
+++ b/components/switch/demo/disabled.md
@@ -13,11 +13,12 @@ Switch 失效状态。
 
 Disabled state of `Switch`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Switch, Button } from 'antd';
 
-const App = () => {
-  const [disabled, setDisabled] = React.useState(true);
+const App: React.FC = () => {
+  const [disabled, setDisabled] = useState(true);
 
   const toggle = () => {
     setDisabled(!disabled);
diff --git a/components/switch/demo/loading.md b/components/switch/demo/loading.md
index c5757e4702..7635e93db0 100644
--- a/components/switch/demo/loading.md
+++ b/components/switch/demo/loading.md
@@ -13,14 +13,17 @@ title:
 
 Mark a pending state of switch.
 
-```jsx
+```tsx
+import React from 'react';
 import { Switch } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Switch loading defaultChecked />
     <br />
     <Switch size="small" loading />
   </>
 );
+
+export default App;
 ```
diff --git a/components/switch/demo/size.md b/components/switch/demo/size.md
index 2a8268c247..d24bd8dde5 100644
--- a/components/switch/demo/size.md
+++ b/components/switch/demo/size.md
@@ -13,14 +13,17 @@ title:
 
 `size="small"` represents a small sized switch.
 
-```jsx
+```tsx
+import React from 'react';
 import { Switch } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Switch defaultChecked />
     <br />
     <Switch size="small" defaultChecked />
   </>
 );
+
+export default App;
 ```
diff --git a/components/switch/demo/text.md b/components/switch/demo/text.md
index e6424a7cf3..41038e4e30 100644
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@@ -13,11 +13,12 @@ title:
 
 With text and icon.
 
-```jsx
+```tsx
+import React from 'react';
 import { Switch } from 'antd';
 import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
     <br />
@@ -30,4 +31,6 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 10f53c3cd1..f46602c202 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2751,14 +2751,14 @@ Array [
                     checked=""
                     class="ant-radio-button-input"
                     type="radio"
-                    value="default"
+                    value="large"
                   />
                   <span
                     class="ant-radio-button-inner"
                   />
                 </span>
                 <span>
-                  Default
+                  Large
                 </span>
               </label>
               <label
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 21d24aa19b..3212cfb01e 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -2260,14 +2260,14 @@ Array [
                     checked=""
                     class="ant-radio-button-input"
                     type="radio"
-                    value="default"
+                    value="large"
                   />
                   <span
                     class="ant-radio-button-inner"
                   />
                 </span>
                 <span>
-                  Default
+                  Large
                 </span>
               </label>
               <label
diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md
index 2832ae4bf9..ea78027605 100644
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@@ -25,11 +25,34 @@ Setting `rowSelection.preserveSelectedRowKeys` to keep the `key` when enable sel
 
 **Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.**
 
-```jsx
+```tsx
+import React, { useState, useEffect } from 'react';
 import { Table } from 'antd';
 import qs from 'qs';
+import type { FilterValue, SorterResult } from 'antd/lib/table/interface';
+import type { ColumnsType, TablePaginationConfig } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  name: {
+    first: string;
+    last: string;
+  };
+  gender: string;
+  email: string;
+  login: {
+    uuid: string;
+  };
+}
+
+interface Params {
+  pagination?: TablePaginationConfig;
+  sorter?: SorterResult<any> | SorterResult<any>[];
+  total?: number;
+  sortField?: string;
+  sortOrder?: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -52,69 +75,64 @@ const columns = [
   },
 ];
 
-const getRandomuserParams = params => ({
-  results: params.pagination.pageSize,
-  page: params.pagination.current,
+const getRandomuserParams = (params: Params) => ({
+  results: params.pagination?.pageSize,
+  page: params.pagination?.current,
   ...params,
 });
 
-class App extends React.Component {
-  state = {
-    data: [],
-    pagination: {
-      current: 1,
-      pageSize: 10,
-    },
-    loading: false,
-  };
+const App: React.FC = () => {
+  const [data, setData] = useState();
+  const [loading, setLoading] = useState(false);
+  const [pagination, setPagination] = useState<TablePaginationConfig>({
+    current: 1,
+    pageSize: 10,
+  });
 
-  componentDidMount() {
-    const { pagination } = this.state;
-    this.fetch({ pagination });
-  }
-
-  handleTableChange = (pagination, filters, sorter) => {
-    this.fetch({
-      sortField: sorter.field,
-      sortOrder: sorter.order,
-      pagination,
-      ...filters,
-    });
-  };
-
-  fetch = (params = {}) => {
-    this.setState({ loading: true });
+  const fetchData = (params: Params = {}) => {
+    setLoading(true);
     fetch(`https://randomuser.me/api?${qs.stringify(getRandomuserParams(params))}`)
       .then(res => res.json())
-      .then(data => {
-        console.log(data);
-        this.setState({
-          loading: false,
-          data: data.results,
-          pagination: {
-            ...params.pagination,
-            total: 200,
-            // 200 is mock data, you should read it from server
-            // total: data.totalCount,
-          },
+      .then(({ results }) => {
+        setData(results);
+        setLoading(false);
+        setPagination({
+          ...params.pagination,
+          total: 200,
+          // 200 is mock data, you should read it from server
+          // total: data.totalCount,
         });
       });
   };
 
-  render() {
-    const { data, pagination, loading } = this.state;
-    return (
-      <Table
-        columns={columns}
-        rowKey={record => record.login.uuid}
-        dataSource={data}
-        pagination={pagination}
-        loading={loading}
-        onChange={this.handleTableChange}
-      />
-    );
-  }
-}
+  useEffect(() => {
+    fetchData({ pagination });
+  }, []);
+
+  const handleTableChange = (
+    newPagination: TablePaginationConfig,
+    filters: Record<string, FilterValue>,
+    sorter: SorterResult<DataType>,
+  ) => {
+    fetchData({
+      sortField: sorter.field as string,
+      sortOrder: sorter.order as string,
+      pagination: newPagination,
+      ...filters,
+    });
+  };
+
+  return (
+    <Table
+      columns={columns}
+      rowKey={record => record.login.uuid}
+      dataSource={data}
+      pagination={pagination}
+      loading={loading}
+      onChange={handleTableChange}
+    />
+  );
+};
 
 export default App;
 ```
diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md
index 848cbfa3e1..1f4c55076b 100644
--- a/components/table/demo/basic.md
+++ b/components/table/demo/basic.md
@@ -13,10 +13,20 @@ title:
 
 Simple table with actions.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table, Tag, Space } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+  tags: string[];
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -37,7 +47,7 @@ const columns = [
     title: 'Tags',
     key: 'tags',
     dataIndex: 'tags',
-    render: tags => (
+    render: (_, { tags }) => (
       <>
         {tags.map(tag => {
           let color = tag.length > 5 ? 'geekblue' : 'green';
@@ -56,7 +66,7 @@ const columns = [
   {
     title: 'Action',
     key: 'action',
-    render: (text, record) => (
+    render: (_, record) => (
       <Space size="middle">
         <a>Invite {record.name}</a>
         <a>Delete</a>
@@ -65,7 +75,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -89,5 +99,7 @@ const data = [
   },
 ];
 
-export default () => <Table columns={columns} dataSource={data} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} />;
+
+export default App;
 ```
diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md
index 7b486b718b..6945b5e9bd 100644
--- a/components/table/demo/bordered.md
+++ b/components/table/demo/bordered.md
@@ -13,10 +13,19 @@ title:
 
 Add border, title and footer for table.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: string;
+  name: string;
+  money: string;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -34,7 +43,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -55,7 +64,7 @@ const data = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <Table
     columns={columns}
     dataSource={data}
@@ -64,4 +73,6 @@ export default () => (
     footer={() => 'Footer'}
   />
 );
+
+export default App;
 ```
diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md
index bf436c6ebf..fb7e7f2015 100644
--- a/components/table/demo/colspan-rowspan.md
+++ b/components/table/demo/colspan-rowspan.md
@@ -18,24 +18,37 @@ Table column title supports `colSpan` that set in `column`.
 
 Table cell supports `colSpan` and `rowSpan` that set in render return object. When each of them is set to `0`, the cell will not be rendered.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  tel: string;
+  phone: number;
+  address: string;
+}
 
 // In the fifth row, other columns are merged into first column
 // by setting it's colSpan to be 0
-const sharedOnCell = (_, index) => {
+const sharedOnCell = (_: DataType, index: number) => {
   if (index === 4) {
     return { colSpan: 0 };
   }
+
+  return {};
 };
 
-const columns = [
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
-    render: (text, row, index) => <a>{text}</a>,
+    render: text => <a>{text}</a>,
     onCell: (_, index) => ({
-      colSpan: index < 4 ? 1 : 5,
+      colSpan: (index as number) < 4 ? 1 : 5,
     }),
   },
   {
@@ -58,6 +71,8 @@ const columns = [
       if (index === 4) {
         return { colSpan: 0 };
       }
+
+      return {};
     },
   },
   {
@@ -73,7 +88,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -116,5 +131,7 @@ const data = [
   },
 ];
 
-export default () => <Table columns={columns} dataSource={data} bordered />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} bordered />;
+
+export default App;
 ```
diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
index 71addf74d9..8576bbe0eb 100644
--- a/components/table/demo/custom-filter-panel.md
+++ b/components/table/demo/custom-filter-panel.md
@@ -17,12 +17,25 @@ Implement a customized column search example via `filterDropdown`.
 
 Add the `boolean` type parameter `closeDropdown` to the function `clearFilters`. Whether to close the filter menu is `true` by default. Add the `boolean` type parameter `confirm` to clear whether to submit the option during filtering. The default is `true`.
 
-```jsx
+```tsx
+import React, { useRef, useState } from 'react';
 import { Table, Input, Button, Space } from 'antd';
 import Highlighter from 'react-highlight-words';
 import { SearchOutlined } from '@ant-design/icons';
+import type { FilterConfirmProps } from 'antd/lib/table/interface';
+import type { ColumnsType, ColumnType } from 'antd/lib/table';
+import type { InputRef } from 'antd';
 
-const data = [
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+}
+
+type DataIndex = keyof DataType;
+
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -49,36 +62,52 @@ const data = [
   },
 ];
 
-class App extends React.Component {
-  state = {
-    searchText: '',
-    searchedColumn: '',
+const App: React.FC = () => {
+  const [searchText, setSearchText] = useState('');
+  const [searchedColumn, setSearchedColumn] = useState('');
+  const searchInput = useRef<InputRef>(null);
+
+  const handleSearch = (
+    selectedKeys: string[],
+    confirm: (param?: FilterConfirmProps) => void,
+    dataIndex: DataIndex,
+  ) => {
+    confirm();
+    setSearchText(selectedKeys[0]);
+    setSearchedColumn(dataIndex);
   };
 
-  getColumnSearchProps = dataIndex => ({
+  const handleReset = (clearFilters: () => void) => {
+    clearFilters();
+    setSearchText('');
+  };
+
+  const getColumnSearchProps = (dataIndex: DataIndex): ColumnType<DataType> => ({
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
       <div style={{ padding: 8 }}>
         <Input
-          ref={node => {
-            this.searchInput = node;
-          }}
+          ref={searchInput}
           placeholder={`Search ${dataIndex}`}
           value={selectedKeys[0]}
           onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
-          onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
+          onPressEnter={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
           style={{ marginBottom: 8, display: 'block' }}
         />
         <Space>
           <Button
             type="primary"
-            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
+            onClick={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
             icon={<SearchOutlined />}
             size="small"
             style={{ width: 90 }}
           >
             Search
           </Button>
-          <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
+          <Button
+            onClick={() => clearFilters && handleReset(clearFilters)}
+            size="small"
+            style={{ width: 90 }}
+          >
             Reset
           </Button>
           <Button
@@ -86,10 +115,8 @@ class App extends React.Component {
             size="small"
             onClick={() => {
               confirm({ closeDropdown: false });
-              this.setState({
-                searchText: selectedKeys[0],
-                searchedColumn: dataIndex,
-              });
+              setSearchText((selectedKeys as string[])[0]);
+              setSearchedColumn(dataIndex);
             }}
           >
             Filter
@@ -97,21 +124,24 @@ class App extends React.Component {
         </Space>
       </div>
     ),
-    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
+    filterIcon: (filtered: boolean) => (
+      <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
+    ),
     onFilter: (value, record) =>
       record[dataIndex]
-        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
-        : '',
+        .toString()
+        .toLowerCase()
+        .includes((value as string).toLowerCase()),
     onFilterDropdownVisibleChange: visible => {
       if (visible) {
-        setTimeout(() => this.searchInput.select(), 100);
+        setTimeout(() => searchInput.current?.select(), 100);
       }
     },
     render: text =>
-      this.state.searchedColumn === dataIndex ? (
+      searchedColumn === dataIndex ? (
         <Highlighter
           highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
-          searchWords={[this.state.searchText]}
+          searchWords={[searchText]}
           autoEscape
           textToHighlight={text ? text.toString() : ''}
         />
@@ -120,47 +150,33 @@ class App extends React.Component {
       ),
   });
 
-  handleSearch = (selectedKeys, confirm, dataIndex) => {
-    confirm();
-    this.setState({
-      searchText: selectedKeys[0],
-      searchedColumn: dataIndex,
-    });
-  };
+  const columns: ColumnsType<DataType> = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      width: '30%',
+      ...getColumnSearchProps('name'),
+    },
+    {
+      title: 'Age',
+      dataIndex: 'age',
+      key: 'age',
+      width: '20%',
+      ...getColumnSearchProps('age'),
+    },
+    {
+      title: 'Address',
+      dataIndex: 'address',
+      key: 'address',
+      ...getColumnSearchProps('address'),
+      sorter: (a, b) => a.address.length - b.address.length,
+      sortDirections: ['descend', 'ascend'],
+    },
+  ];
 
-  handleReset = clearFilters => {
-    clearFilters();
-    this.setState({ searchText: '' });
-  };
-
-  render() {
-    const columns = [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-        width: '30%',
-        ...this.getColumnSearchProps('name'),
-      },
-      {
-        title: 'Age',
-        dataIndex: 'age',
-        key: 'age',
-        width: '20%',
-        ...this.getColumnSearchProps('age'),
-      },
-      {
-        title: 'Address',
-        dataIndex: 'address',
-        key: 'address',
-        ...this.getColumnSearchProps('address'),
-        sorter: (a, b) => a.address.length - b.address.length,
-        sortDirections: ['descend', 'ascend'],
-      },
-    ];
-    return <Table columns={columns} dataSource={data} />;
-  }
-}
+  return <Table columns={columns} dataSource={data} />;
+};
 
 export default App;
 ```
diff --git a/components/table/demo/drag-sorting-handler.md b/components/table/demo/drag-sorting-handler.md
index 61686d39ea..0c8d35094e 100644
--- a/components/table/demo/drag-sorting-handler.md
+++ b/components/table/demo/drag-sorting-handler.md
@@ -13,15 +13,26 @@ title:
 
 Alternatively you can implement drag sorting with handler using [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc).
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table } from 'antd';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import { MenuOutlined } from '@ant-design/icons';
 import { arrayMoveImmutable } from 'array-move';
+import type { ColumnsType } from 'antd/lib/table';
+import type { SortableContainerProps, SortEnd } from 'react-sortable-hoc';
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+  index: number;
+}
 
 const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
 
-const columns = [
+const columns: ColumnsType<DataType> = [
   {
     title: 'Sort',
     dataIndex: 'sort',
@@ -44,7 +55,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -68,63 +79,59 @@ const data = [
   },
 ];
 
-const SortableItem = SortableElement(props => <tr {...props} />);
-const SortableBody = SortableContainer(props => <tbody {...props} />);
+const SortableItem = SortableElement((props: React.HTMLAttributes<HTMLTableRowElement>) => (
+  <tr {...props} />
+));
+const SortableBody = SortableContainer((props: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <tbody {...props} />
+));
 
-class SortableTable extends React.Component {
-  state = {
-    dataSource: data,
-  };
+const App: React.FC = () => {
+  const [dataSource, setDataSource] = useState(data);
 
-  onSortEnd = ({ oldIndex, newIndex }) => {
-    const { dataSource } = this.state;
+  const onSortEnd = ({ oldIndex, newIndex }: SortEnd) => {
     if (oldIndex !== newIndex) {
-      const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
-        el => !!el,
+      const newData = arrayMoveImmutable(dataSource.slice(), oldIndex, newIndex).filter(
+        (el: DataType) => !!el,
       );
       console.log('Sorted items: ', newData);
-      this.setState({ dataSource: newData });
+      setDataSource(newData);
     }
   };
 
-  DraggableContainer = props => (
+  const DraggableContainer = (props: SortableContainerProps) => (
     <SortableBody
       useDragHandle
       disableAutoscroll
       helperClass="row-dragging"
-      onSortEnd={this.onSortEnd}
+      onSortEnd={onSortEnd}
       {...props}
     />
   );
 
-  DraggableBodyRow = ({ className, style, ...restProps }) => {
-    const { dataSource } = this.state;
+  const DraggableBodyRow: React.FC<any> = ({ className, style, ...restProps }) => {
     // function findIndex base on Table rowKey props and should always be a right array index
     const index = dataSource.findIndex(x => x.index === restProps['data-row-key']);
     return <SortableItem index={index} {...restProps} />;
   };
 
-  render() {
-    const { dataSource } = this.state;
+  return (
+    <Table
+      pagination={false}
+      dataSource={dataSource}
+      columns={columns}
+      rowKey="index"
+      components={{
+        body: {
+          wrapper: DraggableContainer,
+          row: DraggableBodyRow,
+        },
+      }}
+    />
+  );
+};
 
-    return (
-      <Table
-        pagination={false}
-        dataSource={dataSource}
-        columns={columns}
-        rowKey="index"
-        components={{
-          body: {
-            wrapper: this.DraggableContainer,
-            row: this.DraggableBodyRow,
-          },
-        }}
-      />
-    );
-  }
-}
-
-export default () => <SortableTable />;
+export default App;
 ```
 
 ```css
diff --git a/components/table/demo/drag-sorting.md b/components/table/demo/drag-sorting.md
index a393aa06e2..ed1e62058b 100644
--- a/components/table/demo/drag-sorting.md
+++ b/components/table/demo/drag-sorting.md
@@ -13,17 +13,36 @@ title:
 
 By using `components`, we can integrate table with [react-dnd](https://github.com/react-dnd/react-dnd) to implement drag sorting function.
 
-```jsx
+```tsx
 import React, { useState, useCallback, useRef } from 'react';
 import { Table } from 'antd';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
+import type { ColumnsType } from 'antd/lib/table';
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+}
+
+interface DraggableBodyRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  index: number;
+  moveRow: (dragIndex: number, hoverIndex: number) => void;
+}
 
 const type = 'DraggableBodyRow';
 
-const DraggableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
-  const ref = useRef();
+const DraggableBodyRow = ({
+  index,
+  moveRow,
+  className,
+  style,
+  ...restProps
+}: DraggableBodyRowProps) => {
+  const ref = useRef<HTMLTableRowElement>(null);
   const [{ isOver, dropClassName }, drop] = useDrop({
     accept: type,
     collect: monitor => {
@@ -36,7 +55,7 @@ const DraggableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
         dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
       };
     },
-    drop: item => {
+    drop: (item: { index: number }) => {
       moveRow(item.index, index);
     },
   });
@@ -59,7 +78,7 @@ const DraggableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
   );
 };
 
-const columns = [
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -77,7 +96,7 @@ const columns = [
   },
 ];
 
-const DragSortingTable: React.FC = () => {
+const App: React.FC = () => {
   const [data, setData] = useState([
     {
       key: '1',
@@ -106,7 +125,7 @@ const DragSortingTable: React.FC = () => {
   };
 
   const moveRow = useCallback(
-    (dragIndex, hoverIndex) => {
+    (dragIndex: number, hoverIndex: number) => {
       const dragRow = data[dragIndex];
       setData(
         update(data, {
@@ -126,16 +145,19 @@ const DragSortingTable: React.FC = () => {
         columns={columns}
         dataSource={data}
         components={components}
-        onRow={(record, index) => ({
-          index,
-          moveRow,
-        })}
+        onRow={(_, index) => {
+          const attr = {
+            index,
+            moveRow,
+          };
+          return attr as React.HTMLAttributes<any>;
+        }}
       />
     </DndProvider>
   );
 };
 
-export default () => <DragSortingTable />;
+export default App;
 ```
 
 ```css
diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md
index a3b26bf5e6..7fd60a182a 100644
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@@ -13,11 +13,32 @@ title:
 
 Select different settings to see the result.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table, Switch, Radio, Form, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import type { ExpandableConfig, TableRowSelection } from 'antd/lib/table/interface';
+import type { RadioChangeEvent } from 'antd';
+import type { ColumnsType, TableProps } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: number;
+  name: string;
+  age: number;
+  address: string;
+  description: string;
+}
+
+type TablePaginationPosition =
+  | 'topLeft'
+  | 'topCenter'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomCenter'
+  | 'bottomRight';
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -40,7 +61,7 @@ const columns = [
         value: 'New York',
       },
     ],
-    onFilter: (value, record) => record.address.indexOf(value) === 0,
+    onFilter: (value, record) => record.address.indexOf(value as string) === 0,
   },
   {
     title: 'Action',
@@ -60,203 +81,215 @@ const columns = [
   },
 ];
 
-const data = [];
+const data: DataType[] = [];
 for (let i = 1; i <= 10; i++) {
   data.push({
     key: i,
     name: 'John Brown',
-    age: `${i}2`,
+    age: Number(`${i}2`),
     address: `New York No. ${i} Lake Park`,
     description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
   });
 }
 
-const expandable = { expandedRowRender: record => <p>{record.description}</p> };
-const title = () => 'Here is title';
-const showHeader = true;
-const footer = () => 'Here is footer';
-const pagination = { position: 'bottom' };
+const defaultExpandable = { expandedRowRender: (record: DataType) => <p>{record.description}</p> };
+const defaultTitle = () => 'Here is title';
+const defaultFooter = () => 'Here is footer';
 
-class Demo extends React.Component {
-  state = {
-    bordered: false,
-    loading: false,
-    pagination,
-    size: 'default',
-    expandable,
-    title: undefined,
-    showHeader,
-    footer,
-    rowSelection: {},
-    scroll: undefined,
-    hasData: true,
-    tableLayout: undefined,
-    top: 'none',
-    bottom: 'bottomRight',
+const App: React.FC = () => {
+  const [bordered, setBordered] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [size, setSize] = useState<SizeType>('large');
+  const [expandable, setExpandable] = useState<ExpandableConfig<DataType> | undefined>(
+    defaultExpandable,
+  );
+  const [showTitle, setShowTitle] = useState(false);
+  const [showHeader, setShowHeader] = useState(true);
+  const [showfooter, setShowFooter] = useState(true);
+  const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});
+  const [hasData, setHasData] = useState(true);
+  const [tableLayout, setTableLayout] = useState(undefined);
+  const [top, setTop] = useState<TablePaginationPosition | 'none'>('none');
+  const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
+  const [ellipsis, setEllipsis] = useState(false);
+  const [yScroll, setYScroll] = useState(false);
+  const [xScroll, setXScroll] = useState<string | undefined>(undefined);
+
+  const handleBorderChange = (enable: boolean) => {
+    setBordered(enable);
   };
 
-  handleToggle = prop => enable => {
-    this.setState({ [prop]: enable });
+  const handleLoadingChange = (enable: boolean) => {
+    setLoading(enable);
   };
 
-  handleSizeChange = e => {
-    this.setState({ size: e.target.value });
+  const handleSizeChange = (e: RadioChangeEvent) => {
+    setSize(e.target.value);
   };
 
-  handleTableLayoutChange = e => {
-    this.setState({ tableLayout: e.target.value });
+  const handleTableLayoutChange = (e: RadioChangeEvent) => {
+    setTableLayout(e.target.value);
   };
 
-  handleExpandChange = enable => {
-    this.setState({ expandable: enable ? expandable : undefined });
+  const handleExpandChange = (enable: boolean) => {
+    setExpandable(enable ? defaultExpandable : undefined);
   };
 
-  handleEllipsisChange = enable => {
-    this.setState({ ellipsis: enable });
+  const handleEllipsisChange = (enable: boolean) => {
+    setEllipsis(enable);
   };
 
-  handleTitleChange = enable => {
-    this.setState({ title: enable ? title : undefined });
+  const handleTitleChange = (enable: boolean) => {
+    setShowTitle(enable);
   };
 
-  handleHeaderChange = enable => {
-    this.setState({ showHeader: enable ? showHeader : false });
+  const handleHeaderChange = (enable: boolean) => {
+    setShowHeader(enable);
   };
 
-  handleFooterChange = enable => {
-    this.setState({ footer: enable ? footer : undefined });
+  const handleFooterChange = (enable: boolean) => {
+    setShowFooter(enable);
   };
 
-  handleRowSelectionChange = enable => {
-    this.setState({ rowSelection: enable ? {} : undefined });
+  const handleRowSelectionChange = (enable: boolean) => {
+    setRowSelection(enable ? {} : undefined);
   };
 
-  handleYScrollChange = enable => {
-    this.setState({ yScroll: enable });
+  const handleYScrollChange = (enable: boolean) => {
+    setYScroll(enable);
   };
 
-  handleXScrollChange = e => {
-    this.setState({ xScroll: e.target.value });
+  const handleXScrollChange = (e: RadioChangeEvent) => {
+    setXScroll(e.target.value);
   };
 
-  handleDataChange = hasData => {
-    this.setState({ hasData });
+  const handleDataChange = (newHasData: boolean) => {
+    setHasData(newHasData);
   };
 
-  render() {
-    const { xScroll, yScroll, ...state } = this.state;
-
-    const scroll = {};
-    if (yScroll) {
-      scroll.y = 240;
-    }
-    if (xScroll) {
-      scroll.x = '100vw';
-    }
-
-    const tableColumns = columns.map(item => ({ ...item, ellipsis: state.ellipsis }));
-    if (xScroll === 'fixed') {
-      tableColumns[0].fixed = true;
-      tableColumns[tableColumns.length - 1].fixed = 'right';
-    }
-
-    return (
-      <>
-        <Form
-          layout="inline"
-          className="components-table-demo-control-bar"
-          style={{ marginBottom: 16 }}
-        >
-          <Form.Item label="Bordered">
-            <Switch checked={state.bordered} onChange={this.handleToggle('bordered')} />
-          </Form.Item>
-          <Form.Item label="loading">
-            <Switch checked={state.loading} onChange={this.handleToggle('loading')} />
-          </Form.Item>
-          <Form.Item label="Title">
-            <Switch checked={!!state.title} onChange={this.handleTitleChange} />
-          </Form.Item>
-          <Form.Item label="Column Header">
-            <Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} />
-          </Form.Item>
-          <Form.Item label="Footer">
-            <Switch checked={!!state.footer} onChange={this.handleFooterChange} />
-          </Form.Item>
-          <Form.Item label="Expandable">
-            <Switch checked={!!state.expandable} onChange={this.handleExpandChange} />
-          </Form.Item>
-          <Form.Item label="Checkbox">
-            <Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} />
-          </Form.Item>
-          <Form.Item label="Fixed Header">
-            <Switch checked={!!yScroll} onChange={this.handleYScrollChange} />
-          </Form.Item>
-          <Form.Item label="Has Data">
-            <Switch checked={!!state.hasData} onChange={this.handleDataChange} />
-          </Form.Item>
-          <Form.Item label="Ellipsis">
-            <Switch checked={!!state.ellipsis} onChange={this.handleEllipsisChange} />
-          </Form.Item>
-          <Form.Item label="Size">
-            <Radio.Group value={state.size} onChange={this.handleSizeChange}>
-              <Radio.Button value="default">Default</Radio.Button>
-              <Radio.Button value="middle">Middle</Radio.Button>
-              <Radio.Button value="small">Small</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Table Scroll">
-            <Radio.Group value={xScroll} onChange={this.handleXScrollChange}>
-              <Radio.Button value={undefined}>Unset</Radio.Button>
-              <Radio.Button value="scroll">Scroll</Radio.Button>
-              <Radio.Button value="fixed">Fixed Columns</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Table Layout">
-            <Radio.Group value={state.tableLayout} onChange={this.handleTableLayoutChange}>
-              <Radio.Button value={undefined}>Unset</Radio.Button>
-              <Radio.Button value="fixed">Fixed</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Pagination Top">
-            <Radio.Group
-              value={this.state.top}
-              onChange={e => {
-                this.setState({ top: e.target.value });
-              }}
-            >
-              <Radio.Button value="topLeft">TopLeft</Radio.Button>
-              <Radio.Button value="topCenter">TopCenter</Radio.Button>
-              <Radio.Button value="topRight">TopRight</Radio.Button>
-              <Radio.Button value="none">None</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item label="Pagination Bottom">
-            <Radio.Group
-              value={this.state.bottom}
-              onChange={e => {
-                this.setState({ bottom: e.target.value });
-              }}
-            >
-              <Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
-              <Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
-              <Radio.Button value="bottomRight">BottomRight</Radio.Button>
-              <Radio.Button value="none">None</Radio.Button>
-            </Radio.Group>
-          </Form.Item>
-        </Form>
-        <Table
-          {...this.state}
-          pagination={{ position: [this.state.top, this.state.bottom] }}
-          columns={tableColumns}
-          dataSource={state.hasData ? data : null}
-          scroll={scroll}
-        />
-      </>
-    );
+  const scroll: { x?: number | string; y?: number | string } = {};
+  if (yScroll) {
+    scroll.y = 240;
+  }
+  if (xScroll) {
+    scroll.x = '100vw';
   }
-}
 
-export default Demo;
+  const tableColumns = columns.map(item => ({ ...item, ellipsis }));
+  if (xScroll === 'fixed') {
+    tableColumns[0].fixed = true;
+    tableColumns[tableColumns.length - 1].fixed = 'right';
+  }
+
+  const tableProps: TableProps<DataType> = {
+    bordered,
+    loading,
+    size,
+    expandable,
+    title: showTitle ? defaultTitle : undefined,
+    showHeader,
+    footer: showfooter ? defaultFooter : undefined,
+    rowSelection,
+    scroll,
+    tableLayout,
+  };
+
+  return (
+    <>
+      <Form
+        layout="inline"
+        className="components-table-demo-control-bar"
+        style={{ marginBottom: 16 }}
+      >
+        <Form.Item label="Bordered">
+          <Switch checked={bordered} onChange={handleBorderChange} />
+        </Form.Item>
+        <Form.Item label="loading">
+          <Switch checked={loading} onChange={handleLoadingChange} />
+        </Form.Item>
+        <Form.Item label="Title">
+          <Switch checked={showTitle} onChange={handleTitleChange} />
+        </Form.Item>
+        <Form.Item label="Column Header">
+          <Switch checked={showHeader} onChange={handleHeaderChange} />
+        </Form.Item>
+        <Form.Item label="Footer">
+          <Switch checked={showfooter} onChange={handleFooterChange} />
+        </Form.Item>
+        <Form.Item label="Expandable">
+          <Switch checked={!!expandable} onChange={handleExpandChange} />
+        </Form.Item>
+        <Form.Item label="Checkbox">
+          <Switch checked={!!rowSelection} onChange={handleRowSelectionChange} />
+        </Form.Item>
+        <Form.Item label="Fixed Header">
+          <Switch checked={!!yScroll} onChange={handleYScrollChange} />
+        </Form.Item>
+        <Form.Item label="Has Data">
+          <Switch checked={!!hasData} onChange={handleDataChange} />
+        </Form.Item>
+        <Form.Item label="Ellipsis">
+          <Switch checked={!!ellipsis} onChange={handleEllipsisChange} />
+        </Form.Item>
+        <Form.Item label="Size">
+          <Radio.Group value={size} onChange={handleSizeChange}>
+            <Radio.Button value="large">Large</Radio.Button>
+            <Radio.Button value="middle">Middle</Radio.Button>
+            <Radio.Button value="small">Small</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Table Scroll">
+          <Radio.Group value={xScroll} onChange={handleXScrollChange}>
+            <Radio.Button value={undefined}>Unset</Radio.Button>
+            <Radio.Button value="scroll">Scroll</Radio.Button>
+            <Radio.Button value="fixed">Fixed Columns</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Table Layout">
+          <Radio.Group value={tableLayout} onChange={handleTableLayoutChange}>
+            <Radio.Button value={undefined}>Unset</Radio.Button>
+            <Radio.Button value="fixed">Fixed</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Pagination Top">
+          <Radio.Group
+            value={top}
+            onChange={e => {
+              setTop(e.target.value);
+            }}
+          >
+            <Radio.Button value="topLeft">TopLeft</Radio.Button>
+            <Radio.Button value="topCenter">TopCenter</Radio.Button>
+            <Radio.Button value="topRight">TopRight</Radio.Button>
+            <Radio.Button value="none">None</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Pagination Bottom">
+          <Radio.Group
+            value={bottom}
+            onChange={e => {
+              setBottom(e.target.value);
+            }}
+          >
+            <Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
+            <Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
+            <Radio.Button value="bottomRight">BottomRight</Radio.Button>
+            <Radio.Button value="none">None</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+      <Table
+        {...tableProps}
+        pagination={{ position: [top as TablePaginationPosition, bottom] }}
+        columns={tableColumns}
+        dataSource={hasData ? data : []}
+        scroll={scroll}
+      />
+    </>
+  );
+};
+
+export default App;
 ```
 
 <style>
diff --git a/components/table/demo/edit-cell.md b/components/table/demo/edit-cell.md
index 75e6528a11..146b97a488 100644
--- a/components/table/demo/edit-cell.md
+++ b/components/table/demo/edit-cell.md
@@ -15,8 +15,8 @@ Table with editable cells. When work with `shouldCellUpdate`, please take care o
 
 ```tsx
 import React, { useContext, useState, useEffect, useRef } from 'react';
-import type { InputRef } from 'antd';
 import { Table, Input, Button, Popconfirm, Form } from 'antd';
+import type { InputRef } from 'antd';
 import type { FormInstance } from 'antd/lib/form';
 
 const EditableContext = React.createContext<FormInstance<any> | null>(null);
@@ -122,136 +122,120 @@ interface DataType {
   address: string;
 }
 
-interface EditableTableState {
-  dataSource: DataType[];
-  count: number;
-}
-
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
 
-class EditableTable extends React.Component<EditableTableProps, EditableTableState> {
-  columns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[];
+const App: React.FC = () => {
+  const [dataSource, setDataSource] = useState<DataType[]>([
+    {
+      key: '0',
+      name: 'Edward King 0',
+      age: '32',
+      address: 'London, Park Lane no. 0',
+    },
+    {
+      key: '1',
+      name: 'Edward King 1',
+      age: '32',
+      address: 'London, Park Lane no. 1',
+    },
+  ]);
 
-  constructor(props: EditableTableProps) {
-    super(props);
+  const [count, setCount] = useState(2);
 
-    this.columns = [
-      {
-        title: 'name',
-        dataIndex: 'name',
-        width: '30%',
-        editable: true,
-      },
-      {
-        title: 'age',
-        dataIndex: 'age',
-      },
-      {
-        title: 'address',
-        dataIndex: 'address',
-      },
-      {
-        title: 'operation',
-        dataIndex: 'operation',
-        render: (_, record: { key: React.Key }) =>
-          this.state.dataSource.length >= 1 ? (
-            <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
-              <a>Delete</a>
-            </Popconfirm>
-          ) : null,
-      },
-    ];
-
-    this.state = {
-      dataSource: [
-        {
-          key: '0',
-          name: 'Edward King 0',
-          age: '32',
-          address: 'London, Park Lane no. 0',
-        },
-        {
-          key: '1',
-          name: 'Edward King 1',
-          age: '32',
-          address: 'London, Park Lane no. 1',
-        },
-      ],
-      count: 2,
-    };
-  }
-
-  handleDelete = (key: React.Key) => {
-    const dataSource = [...this.state.dataSource];
-    this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
+  const handleDelete = (key: React.Key) => {
+    const newData = dataSource.filter(item => item.key !== key);
+    setDataSource(newData);
   };
 
-  handleAdd = () => {
-    const { count, dataSource } = this.state;
+  const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
+    {
+      title: 'name',
+      dataIndex: 'name',
+      width: '30%',
+      editable: true,
+    },
+    {
+      title: 'age',
+      dataIndex: 'age',
+    },
+    {
+      title: 'address',
+      dataIndex: 'address',
+    },
+    {
+      title: 'operation',
+      dataIndex: 'operation',
+      render: (_, record: { key: React.Key }) =>
+        dataSource.length >= 1 ? (
+          <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}>
+            <a>Delete</a>
+          </Popconfirm>
+        ) : null,
+    },
+  ];
+
+  const handleAdd = () => {
     const newData: DataType = {
       key: count,
       name: `Edward King ${count}`,
       age: '32',
       address: `London, Park Lane no. ${count}`,
     };
-    this.setState({
-      dataSource: [...dataSource, newData],
-      count: count + 1,
-    });
+    setDataSource([...dataSource, newData]);
+    setCount(count + 1);
   };
 
-  handleSave = (row: DataType) => {
-    const newData = [...this.state.dataSource];
+  const handleSave = (row: DataType) => {
+    const newData = [...dataSource];
     const index = newData.findIndex(item => row.key === item.key);
     const item = newData[index];
     newData.splice(index, 1, {
       ...item,
       ...row,
     });
-    this.setState({ dataSource: newData });
+    setDataSource(newData);
   };
 
-  render() {
-    const { dataSource } = this.state;
-    const components = {
-      body: {
-        row: EditableRow,
-        cell: EditableCell,
-      },
-    };
-    const columns = this.columns.map(col => {
-      if (!col.editable) {
-        return col;
-      }
-      return {
-        ...col,
-        onCell: (record: DataType) => ({
-          record,
-          editable: col.editable,
-          dataIndex: col.dataIndex,
-          title: col.title,
-          handleSave: this.handleSave,
-        }),
-      };
-    });
-    return (
-      <div>
-        <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
-          Add a row
-        </Button>
-        <Table
-          components={components}
-          rowClassName={() => 'editable-row'}
-          bordered
-          dataSource={dataSource}
-          columns={columns as ColumnTypes}
-        />
-      </div>
-    );
-  }
-}
+  const components = {
+    body: {
+      row: EditableRow,
+      cell: EditableCell,
+    },
+  };
 
-export default () => <EditableTable />;
+  const columns = defaultColumns.map(col => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: (record: DataType) => ({
+        record,
+        editable: col.editable,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        handleSave,
+      }),
+    };
+  });
+
+  return (
+    <div>
+      <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
+        Add a row
+      </Button>
+      <Table
+        components={components}
+        rowClassName={() => 'editable-row'}
+        bordered
+        dataSource={dataSource}
+        columns={columns as ColumnTypes}
+      />
+    </div>
+  );
+};
+
+export default App;
 ```
 
 ```css
diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md
index ab1cfb1948..3e20734352 100644
--- a/components/table/demo/edit-row.md
+++ b/components/table/demo/edit-row.md
@@ -79,7 +79,7 @@ const EditableCell: React.FC<EditableCellProps> = ({
   );
 };
 
-const EditableTable = () => {
+const App: React.FC = () => {
   const [form] = Form.useForm();
   const [data, setData] = useState(originData);
   const [editingKey, setEditingKey] = useState('');
@@ -197,7 +197,7 @@ const EditableTable = () => {
   );
 };
 
-export default () => <EditableTable />;
+export default App;
 ```
 
 ```css
diff --git a/components/table/demo/ellipsis-custom-tooltip.md b/components/table/demo/ellipsis-custom-tooltip.md
index c095f688c0..1b638086d4 100644
--- a/components/table/demo/ellipsis-custom-tooltip.md
+++ b/components/table/demo/ellipsis-custom-tooltip.md
@@ -13,10 +13,19 @@ title:
 
 Ellipsis cell content via setting `column.ellipsis.showTitle`, use `Tooltip` instead of the html title attribute.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table, Tooltip } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -84,7 +93,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -105,5 +114,7 @@ const data = [
   },
 ];
 
-export default () => <Table columns={columns} dataSource={data} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} />;
+
+export default App;
 ```
diff --git a/components/table/demo/ellipsis.md b/components/table/demo/ellipsis.md
index fe59cdb40d..9c0a44fab7 100644
--- a/components/table/demo/ellipsis.md
+++ b/components/table/demo/ellipsis.md
@@ -17,10 +17,19 @@ Ellipsis cell content via setting `column.ellipsis`.
 
 > Cannot ellipsis table header with sorters and filters for now.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -84,5 +93,7 @@ const data = [
   },
 ];
 
-export default () => <Table columns={columns} dataSource={data} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} />;
+
+export default App;
 ```
diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md
index ba5cd416f3..845456e7db 100644
--- a/components/table/demo/expand.md
+++ b/components/table/demo/expand.md
@@ -13,10 +13,20 @@ title:
 
 When there's too much information to show and the table can't display all at once.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+  description: string;
+}
+
+const columns: ColumnsType<DataType> = [
   { title: 'Name', dataIndex: 'name', key: 'name' },
   { title: 'Age', dataIndex: 'age', key: 'age' },
   { title: 'Address', dataIndex: 'address', key: 'address' },
@@ -28,7 +38,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: 1,
     name: 'John Brown',
@@ -59,7 +69,7 @@ const data = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <Table
     columns={columns}
     expandable={{
@@ -69,4 +79,6 @@ export default () => (
     dataSource={data}
   />
 );
+
+export default App;
 ```
diff --git a/components/table/demo/filter-in-tree.md b/components/table/demo/filter-in-tree.md
index f607912f91..1c0d8b61bb 100644
--- a/components/table/demo/filter-in-tree.md
+++ b/components/table/demo/filter-in-tree.md
@@ -16,10 +16,19 @@ You can use `filterMode` to change default filter interface, options: `menu`(def
 
 > `filterSearch` is used for making filter dropdown items searchable.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType, TableProps } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -59,7 +68,7 @@ const columns = [
     ],
     filterMode: 'tree',
     filterSearch: true,
-    onFilter: (value, record) => record.name.includes(value),
+    onFilter: (value: string, record) => record.name.includes(value),
     width: '30%',
   },
   {
@@ -80,13 +89,13 @@ const columns = [
         value: 'New York',
       },
     ],
-    onFilter: (value, record) => record.address.startsWith(value),
+    onFilter: (value: string, record) => record.address.startsWith(value),
     filterSearch: true,
     width: '40%',
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -113,9 +122,11 @@ const data = [
   },
 ];
 
-function onChange(pagination, filters, sorter, extra) {
+const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
   console.log('params', pagination, filters, sorter, extra);
-}
+};
 
-export default () => <Table columns={columns} dataSource={data} onChange={onChange} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
+
+export default App;
 ```
diff --git a/components/table/demo/filter-search.md b/components/table/demo/filter-search.md
index 8de6321aa2..d50bf6d8f3 100644
--- a/components/table/demo/filter-search.md
+++ b/components/table/demo/filter-search.md
@@ -14,10 +14,19 @@ title:
 
 `filterSearch` is used to enable search of filter items, and you can set a custom filter method through `filterSearch:(input, record) => boolean`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType, TableProps } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -37,7 +46,7 @@ const columns = [
     ],
     filterMode: 'tree',
     filterSearch: true,
-    onFilter: (value, record) => record.address.startsWith(value),
+    onFilter: (value: string, record) => record.address.startsWith(value),
     width: '30%',
   },
   {
@@ -58,13 +67,13 @@ const columns = [
         value: 'New York',
       },
     ],
-    onFilter: (value, record) => record.address.startsWith(value),
-    filterSearch: (input, record) => record.value.indexOf(input) > -1,
+    onFilter: (value: string, record) => record.address.startsWith(value),
+    filterSearch: true,
     width: '40%',
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -91,9 +100,11 @@ const data = [
   },
 ];
 
-function onChange(pagination, filters, sorter, extra) {
+const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
   console.log('params', pagination, filters, sorter, extra);
-}
+};
 
-export default () => <Table columns={columns} dataSource={data} onChange={onChange} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
+
+export default App;
 ```
diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md
index 11207395e6..a5d3459b07 100644
--- a/components/table/demo/fixed-columns-header.md
+++ b/components/table/demo/fixed-columns-header.md
@@ -21,10 +21,19 @@ A Solution for displaying large amounts of data with long columns.
 >
 > A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Full Name',
     width: 100,
@@ -91,7 +100,7 @@ const columns = [
   },
 ];
 
-const data = [];
+const data: DataType[] = [];
 for (let i = 0; i < 100; i++) {
   data.push({
     key: i,
@@ -101,5 +110,9 @@ for (let i = 0; i < 100; i++) {
   });
 }
 
-export default () => <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />;
+const App: React.FC = () => (
+  <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />
+);
+
+export default App;
 ```
diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md
index eb336d1a02..3a5450d93e 100644
--- a/components/table/demo/fixed-columns.md
+++ b/components/table/demo/fixed-columns.md
@@ -25,10 +25,19 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
 
 **Note: v4 using sticky to implement fixed effect. IE 11 will downgrade to horizontal scroll.**
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Full Name',
     width: 100,
@@ -60,7 +69,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -75,5 +84,7 @@ const data = [
   },
 ];
 
-export default () => <Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />;
+
+export default App;
 ```
diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md
index 2e625d4923..c70d34de7b 100644
--- a/components/table/demo/fixed-header.md
+++ b/components/table/demo/fixed-header.md
@@ -17,10 +17,19 @@ Display large amounts of data in scrollable view.
 
 > Specify width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no [long word to break table layout](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241).
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -37,7 +46,7 @@ const columns = [
   },
 ];
 
-const data = [];
+const data: DataType[] = [];
 for (let i = 0; i < 100; i++) {
   data.push({
     key: i,
@@ -47,7 +56,9 @@ for (let i = 0; i < 100; i++) {
   });
 }
 
-export default () => (
+const App: React.FC = () => (
   <Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
 );
+
+export default App;
 ```
diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md
index 985087fae0..8d35264e42 100644
--- a/components/table/demo/grouping-columns.md
+++ b/components/table/demo/grouping-columns.md
@@ -13,10 +13,24 @@ title:
 
 Group table head with `columns[n].children`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  street: string;
+  building: string;
+  number: number;
+  companyAddress: string;
+  companyName: string;
+  gender: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -33,7 +47,7 @@ const columns = [
         value: 'John',
       },
     ],
-    onFilter: (value, record) => record.name.indexOf(value) === 0,
+    onFilter: (value: string, record) => record.name.indexOf(value) === 0,
   },
   {
     title: 'Other',
@@ -100,7 +114,7 @@ const columns = [
   },
 ];
 
-const data = [];
+const data: DataType[] = [];
 for (let i = 0; i < 100; i++) {
   data.push({
     key: i,
@@ -115,7 +129,7 @@ for (let i = 0; i < 100; i++) {
   });
 }
 
-export default () => (
+const App: React.FC = () => (
   <Table
     columns={columns}
     dataSource={data}
@@ -124,4 +138,6 @@ export default () => (
     scroll={{ x: 'calc(700px + 50%)', y: 240 }}
   />
 );
+
+export default App;
 ```
diff --git a/components/table/demo/head.md b/components/table/demo/head.md
index d896fe0619..2a2950ce81 100644
--- a/components/table/demo/head.md
+++ b/components/table/demo/head.md
@@ -29,10 +29,19 @@ Uses `defaultSortOrder` to make a column sorted by default.
 
 If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `descend`, you can access this value from within the function passed to the `sorter` as explained above. Such a function can take the form: `function(a, b, sortOrder) { ... }`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType, TableProps } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -62,7 +71,7 @@ const columns = [
     ],
     // specify the condition of filtering result
     // here is that finding the name started with `value`
-    onFilter: (value, record) => record.name.indexOf(value) === 0,
+    onFilter: (value: string, record) => record.name.indexOf(value) === 0,
     sorter: (a, b) => a.name.length - b.name.length,
     sortDirections: ['descend'],
   },
@@ -85,7 +94,7 @@ const columns = [
         value: 'New York',
       },
     ],
-    onFilter: (value, record) => record.address.indexOf(value) === 0,
+    onFilter: (value: string, record) => record.address.indexOf(value) === 0,
   },
 ];
 
@@ -116,9 +125,11 @@ const data = [
   },
 ];
 
-function onChange(pagination, filters, sorter, extra) {
+const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
   console.log('params', pagination, filters, sorter, extra);
-}
+};
 
-export default () => <Table columns={columns} dataSource={data} onChange={onChange} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
+
+export default App;
 ```
diff --git a/components/table/demo/jsx.md b/components/table/demo/jsx.md
index dd6853b0f2..eeaab813a6 100644
--- a/components/table/demo/jsx.md
+++ b/components/table/demo/jsx.md
@@ -17,12 +17,22 @@ Using JSX style API (introduced in 2.5.0)
 
 > Since this is just a syntax sugar for the prop `columns`, you can't compose `Column` and `ColumnGroup` with other Components.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table, Tag, Space } from 'antd';
 
 const { Column, ColumnGroup } = Table;
 
-const data = [
+interface DataType {
+  key: React.Key;
+  firstName: string;
+  lastName: string;
+  age: number;
+  address: string;
+  tags: string[];
+}
+
+const data: DataType[] = [
   {
     key: '1',
     firstName: 'John',
@@ -49,7 +59,7 @@ const data = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <Table dataSource={data}>
     <ColumnGroup title="Name">
       <Column title="First Name" dataIndex="firstName" key="firstName" />
@@ -61,7 +71,7 @@ export default () => (
       title="Tags"
       dataIndex="tags"
       key="tags"
-      render={tags => (
+      render={(tags: string[]) => (
         <>
           {tags.map(tag => (
             <Tag color="blue" key={tag}>
@@ -74,7 +84,7 @@ export default () => (
     <Column
       title="Action"
       key="action"
-      render={(text, record) => (
+      render={(_: any, record: DataType) => (
         <Space size="middle">
           <a>Invite {record.lastName}</a>
           <a>Delete</a>
@@ -83,4 +93,6 @@ export default () => (
     />
   </Table>
 );
+
+export default App;
 ```
diff --git a/components/table/demo/multiple-sorter.md b/components/table/demo/multiple-sorter.md
index aeffb9f10a..90e20a88b1 100644
--- a/components/table/demo/multiple-sorter.md
+++ b/components/table/demo/multiple-sorter.md
@@ -13,10 +13,20 @@ title:
 
 `column.sorter` support `multiple` to config the priority of sort columns. Though `sorter.compare` to customize compare function. You can also leave it empty to use the interactive only.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType, TableProps } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  chinese: number;
+  math: number;
+  english: number;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -47,7 +57,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -78,9 +88,11 @@ const data = [
   },
 ];
 
-function onChange(pagination, filters, sorter, extra) {
+const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
   console.log('params', pagination, filters, sorter, extra);
-}
+};
 
-export default () => <Table columns={columns} dataSource={data} onChange={onChange} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
+
+export default App;
 ```
diff --git a/components/table/demo/narrow.md b/components/table/demo/narrow.md
index 51c7b1a0fb..120b45e49f 100644
--- a/components/table/demo/narrow.md
+++ b/components/table/demo/narrow.md
@@ -14,10 +14,19 @@ debug: true
 
 There are two compacted table sizes: `middle` and `small`. The `small` size is used in Modals only.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -32,7 +41,7 @@ const columns = [
   },
 ];
 
-const data = [];
+const data: DataType[] = [];
 
 for (let i = 0; i < 200; i += 1) {
   data.push({
@@ -43,9 +52,11 @@ for (let i = 0; i < 200; i += 1) {
   });
 }
 
-export default () => (
+const App: React.FC = () => (
   <div style={{ width: 300 }}>
     <Table columns={columns} dataSource={data} size="small" pagination={{ defaultCurrent: 13 }} />
   </div>
 );
+
+export default App;
 ```
diff --git a/components/table/demo/nest-table-border-debug.md b/components/table/demo/nest-table-border-debug.md
index c21c74b5b6..6cfd3308ee 100644
--- a/components/table/demo/nest-table-border-debug.md
+++ b/components/table/demo/nest-table-border-debug.md
@@ -14,14 +14,40 @@ debug: true
 
 To see if bordered style applied to other tables.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table, Badge, Menu, Dropdown, Switch, Form, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
+import type { ColumnsType } from 'antd/lib/table';
 
-const menu = <Menu items={[{ label: 'Action 1' }, { label: 'Action 2' }]} />;
+interface DataType {
+  key: React.Key;
+  name: string;
+  platform: string;
+  version: string;
+  upgradeNum: number;
+  creator: string;
+  createdAt: string;
+}
 
-function NestedTable() {
-  const createExpandedRowRender = bordered => () => {
+interface ExpandedDataType {
+  key: React.Key;
+  date: string;
+  name: string;
+  upgradeNum: string;
+}
+
+const menu = (
+  <Menu
+    items={[
+      { key: '1', label: 'Action 1' },
+      { key: '2', label: 'Action 2' },
+    ]}
+  />
+);
+
+const App: React.FC = () => {
+  const createExpandedRowRender = (bordered: boolean) => () => {
     const columns = [
       { title: 'Date', dataIndex: 'date', key: 'date' },
       { title: 'Name', dataIndex: 'name', key: 'name' },
@@ -54,7 +80,7 @@ function NestedTable() {
       },
     ];
 
-    const data = [];
+    const data: ExpandedDataType[] = [];
     for (let i = 0; i < 3; ++i) {
       data.push({
         key: i,
@@ -63,10 +89,11 @@ function NestedTable() {
         upgradeNum: 'Upgraded: 56',
       });
     }
+
     return <Table columns={columns} dataSource={data} pagination={false} bordered={bordered} />;
   };
 
-  const columns = [
+  const columns: ColumnsType<DataType> = [
     { title: 'Name', dataIndex: 'name', key: 'name' },
     { title: 'Platform', dataIndex: 'platform', key: 'platform' },
     { title: 'Version', dataIndex: 'version', key: 'version' },
@@ -76,7 +103,7 @@ function NestedTable() {
     { title: 'Action', key: 'operation', render: () => <a>Publish</a> },
   ];
 
-  const data = [];
+  const data: DataType[] = [];
   for (let i = 0; i < 3; ++i) {
     data.push({
       key: i,
@@ -89,8 +116,8 @@ function NestedTable() {
     });
   }
 
-  const [rootTableBordered, setRootTableBordered] = React.useState(true);
-  const [childTableBordered, setChildTableBordered] = React.useState(true);
+  const [rootTableBordered, setRootTableBordered] = useState(true);
+  const [childTableBordered, setChildTableBordered] = useState(true);
   return (
     <>
       <Form
@@ -116,7 +143,7 @@ function NestedTable() {
       />
     </>
   );
-}
+};
 
-export default () => <NestedTable />;
+export default App;
 ```
diff --git a/components/table/demo/nested-table.md b/components/table/demo/nested-table.md
index d48115c073..1f44b6e7e9 100644
--- a/components/table/demo/nested-table.md
+++ b/components/table/demo/nested-table.md
@@ -13,15 +13,41 @@ title:
 
 Showing more detailed info of every row.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table, Badge, Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
+import type { ColumnsType } from 'antd/lib/table';
 
-const menu = <Menu items={[{ label: 'Action 1' }, { label: 'Action 2' }]} />;
+interface DataType {
+  key: React.Key;
+  name: string;
+  platform: string;
+  version: string;
+  upgradeNum: number;
+  creator: string;
+  createdAt: string;
+}
 
-function NestedTable() {
+interface ExpandedDataType {
+  key: React.Key;
+  date: string;
+  name: string;
+  upgradeNum: string;
+}
+
+const menu = (
+  <Menu
+    items={[
+      { key: '1', label: 'Action 1' },
+      { key: '2', label: 'Action 2' },
+    ]}
+  />
+);
+
+const App: React.FC = () => {
   const expandedRowRender = () => {
-    const columns = [
+    const columns: ColumnsType<ExpandedDataType> = [
       { title: 'Date', dataIndex: 'date', key: 'date' },
       { title: 'Name', dataIndex: 'name', key: 'name' },
       {
@@ -65,7 +91,7 @@ function NestedTable() {
     return <Table columns={columns} dataSource={data} pagination={false} />;
   };
 
-  const columns = [
+  const columns: ColumnsType<DataType> = [
     { title: 'Name', dataIndex: 'name', key: 'name' },
     { title: 'Platform', dataIndex: 'platform', key: 'platform' },
     { title: 'Version', dataIndex: 'version', key: 'version' },
@@ -75,7 +101,7 @@ function NestedTable() {
     { title: 'Action', key: 'operation', render: () => <a>Publish</a> },
   ];
 
-  const data = [];
+  const data: DataType[] = [];
   for (let i = 0; i < 3; ++i) {
     data.push({
       key: i,
@@ -96,7 +122,7 @@ function NestedTable() {
       dataSource={data}
     />
   );
-}
+};
 
-export default () => <NestedTable />;
+export default App;
 ```
diff --git a/components/table/demo/order-column.md b/components/table/demo/order-column.md
index f091153103..5e3782fe59 100644
--- a/components/table/demo/order-column.md
+++ b/components/table/demo/order-column.md
@@ -14,10 +14,20 @@ title:
 
 You can control the order of the expand and select columns by using `Table.EXPAND_COLUMN` and `Table.SELECT_COLUMN`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+  description: string;
+}
+
+const columns: ColumnsType<DataType> = [
   { title: 'Name', dataIndex: 'name', key: 'name' },
   Table.EXPAND_COLUMN,
   { title: 'Age', dataIndex: 'age', key: 'age' },
@@ -25,7 +35,7 @@ const columns = [
   { title: 'Address', dataIndex: 'address', key: 'address' },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: 1,
     name: 'John Brown',
@@ -56,7 +66,7 @@ const data = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <Table
     columns={columns}
     rowSelection={{}}
@@ -66,4 +76,6 @@ export default () => (
     dataSource={data}
   />
 );
+
+export default App;
 ```
diff --git a/components/table/demo/pagination.md b/components/table/demo/pagination.md
index de132201e0..df03e4a5ea 100644
--- a/components/table/demo/pagination.md
+++ b/components/table/demo/pagination.md
@@ -13,8 +13,26 @@ title:
 
 Table pagination settings.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table, Tag, Radio, Space } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+  tags: string[];
+}
+
+type TablePaginationPosition =
+  | 'topLeft'
+  | 'topCenter'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomCenter'
+  | 'bottomRight';
 
 const topOptions = [
   { label: 'topLeft', value: 'topLeft' },
@@ -30,7 +48,7 @@ const bottomOptions = [
   { label: 'none', value: 'none' },
 ];
 
-const columns = [
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -51,7 +69,7 @@ const columns = [
     title: 'Tags',
     key: 'tags',
     dataIndex: 'tags',
-    render: tags => (
+    render: (tags: string[]) => (
       <span>
         {tags.map(tag => {
           let color = tag.length > 5 ? 'geekblue' : 'green';
@@ -70,7 +88,7 @@ const columns = [
   {
     title: 'Action',
     key: 'action',
-    render: (text, record) => (
+    render: (_, record) => (
       <Space size="middle">
         <a>Invite {record.name}</a>
         <a>Delete</a>
@@ -79,7 +97,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -103,42 +121,34 @@ const data = [
   },
 ];
 
-class Demo extends React.Component {
-  state = {
-    top: 'topLeft',
-    bottom: 'bottomRight',
-  };
+const App: React.FC = () => {
+  const [top, setTop] = useState<TablePaginationPosition>('topLeft');
+  const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
 
-  render() {
-    return (
+  return (
+    <div>
       <div>
-        <div>
-          <Radio.Group
-            style={{ marginBottom: 10 }}
-            options={topOptions}
-            value={this.state.top}
-            onChange={e => {
-              this.setState({ top: e.target.value });
-            }}
-          />
-        </div>
         <Radio.Group
           style={{ marginBottom: 10 }}
-          options={bottomOptions}
-          value={this.state.bottom}
+          options={topOptions}
+          value={top}
           onChange={e => {
-            this.setState({ bottom: e.target.value });
+            setTop(e.target.value);
           }}
         />
-        <Table
-          columns={columns}
-          pagination={{ position: [this.state.top, this.state.bottom] }}
-          dataSource={data}
-        />
       </div>
-    );
-  }
-}
+      <Radio.Group
+        style={{ marginBottom: 10 }}
+        options={bottomOptions}
+        value={bottom}
+        onChange={e => {
+          setBottom(e.target.value);
+        }}
+      />
+      <Table columns={columns} pagination={{ position: [top, bottom] }} dataSource={data} />
+    </div>
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md
index 1c0fbd9a07..779e2ca2d5 100644
--- a/components/table/demo/reset-filter.md
+++ b/components/table/demo/reset-filter.md
@@ -21,10 +21,20 @@ Control filters and sorters by `filteredValue` and `sortOrder`.
 > 2. Make sure `sortOrder` is assigned for only one column.
 > 3. `column.key` is required.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table, Button, Space } from 'antd';
+import type { TableProps } from 'antd';
+import type { ColumnsType, FilterValue, SorterResult } from 'antd/lib/table/interface';
 
-const data = [
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -51,94 +61,82 @@ const data = [
   },
 ];
 
-class App extends React.Component {
-  state = {
-    filteredInfo: null,
-    sortedInfo: null,
-  };
+const App: React.FC = () => {
+  const [filteredInfo, setFilteredInfo] = useState<Record<string, FilterValue | null>>({});
+  const [sortedInfo, setSortedInfo] = useState<SorterResult<DataType>>({});
 
-  handleChange = (pagination, filters, sorter) => {
+  const handleChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter) => {
     console.log('Various parameters', pagination, filters, sorter);
-    this.setState({
-      filteredInfo: filters,
-      sortedInfo: sorter,
+    setFilteredInfo(filters);
+    setSortedInfo(sorter as SorterResult<DataType>);
+  };
+
+  const clearFilters = () => {
+    setFilteredInfo({});
+  };
+
+  const clearAll = () => {
+    setFilteredInfo({});
+    setSortedInfo({});
+  };
+
+  const setAgeSort = () => {
+    setSortedInfo({
+      order: 'descend',
+      columnKey: 'age',
     });
   };
 
-  clearFilters = () => {
-    this.setState({ filteredInfo: null });
-  };
+  const columns: ColumnsType<DataType> = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      filters: [
+        { text: 'Joe', value: 'Joe' },
+        { text: 'Jim', value: 'Jim' },
+      ],
+      filteredValue: filteredInfo.name || null,
+      onFilter: (value: string, record) => record.name.includes(value),
+      sorter: (a, b) => a.name.length - b.name.length,
+      sortOrder: sortedInfo.columnKey === 'name' ? sortedInfo.order : null,
+      ellipsis: true,
+    },
+    {
+      title: 'Age',
+      dataIndex: 'age',
+      key: 'age',
+      sorter: (a, b) => a.age - b.age,
+      sortOrder: sortedInfo.columnKey === 'age' ? sortedInfo.order : null,
+      ellipsis: true,
+    },
+    {
+      title: 'Address',
+      dataIndex: 'address',
+      key: 'address',
+      filters: [
+        { text: 'London', value: 'London' },
+        { text: 'New York', value: 'New York' },
+      ],
+      filteredValue: filteredInfo.address || null,
+      onFilter: (value: string, record) => record.address.includes(value),
+      sorter: (a, b) => a.address.length - b.address.length,
+      sortOrder: sortedInfo.columnKey === 'address' ? sortedInfo.order : null,
+      ellipsis: true,
+    },
+  ];
 
-  clearAll = () => {
-    this.setState({
-      filteredInfo: null,
-      sortedInfo: null,
-    });
-  };
-
-  setAgeSort = () => {
-    this.setState({
-      sortedInfo: {
-        order: 'descend',
-        columnKey: 'age',
-      },
-    });
-  };
-
-  render() {
-    let { sortedInfo, filteredInfo } = this.state;
-    sortedInfo = sortedInfo || {};
-    filteredInfo = filteredInfo || {};
-    const columns = [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-        filters: [
-          { text: 'Joe', value: 'Joe' },
-          { text: 'Jim', value: 'Jim' },
-        ],
-        filteredValue: filteredInfo.name || null,
-        onFilter: (value, record) => record.name.includes(value),
-        sorter: (a, b) => a.name.length - b.name.length,
-        sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
-        ellipsis: true,
-      },
-      {
-        title: 'Age',
-        dataIndex: 'age',
-        key: 'age',
-        sorter: (a, b) => a.age - b.age,
-        sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
-        ellipsis: true,
-      },
-      {
-        title: 'Address',
-        dataIndex: 'address',
-        key: 'address',
-        filters: [
-          { text: 'London', value: 'London' },
-          { text: 'New York', value: 'New York' },
-        ],
-        filteredValue: filteredInfo.address || null,
-        onFilter: (value, record) => record.address.includes(value),
-        sorter: (a, b) => a.address.length - b.address.length,
-        sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
-        ellipsis: true,
-      },
-    ];
-    return (
-      <>
-        <Space style={{ marginBottom: 16 }}>
-          <Button onClick={this.setAgeSort}>Sort age</Button>
-          <Button onClick={this.clearFilters}>Clear filters</Button>
-          <Button onClick={this.clearAll}>Clear filters and sorters</Button>
-        </Space>
-        <Table columns={columns} dataSource={data} onChange={this.handleChange} />
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Space style={{ marginBottom: 16 }}>
+        <Button onClick={setAgeSort}>Sort age</Button>
+        <Button onClick={clearFilters}>Clear filters</Button>
+        <Button onClick={clearAll}>Clear filters and sorters</Button>
+      </Space>
+      <Table columns={columns} dataSource={data} onChange={handleChange} />
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/table/demo/resizable-column.md b/components/table/demo/resizable-column.md
index e33315b72d..d943940b15 100644
--- a/components/table/demo/resizable-column.md
+++ b/components/table/demo/resizable-column.md
@@ -14,11 +14,27 @@ debug: true
 
 Implement resizable column by integrate with [react-resizable](https://github.com/STRML/react-resizable). When sort needed, you can use [additional mark](https://codesandbox.io/s/zrj8xvyzxx) to prevent resize trigger sort.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table } from 'antd';
 import { Resizable } from 'react-resizable';
+import type { ResizeCallbackData } from 'react-resizable';
+import type { ColumnsType, ColumnType } from 'antd/lib/table';
 
-const ResizableTitle = props => {
+interface DataType {
+  key: React.Key;
+  date: string;
+  amount: number;
+  type: string;
+  note: string;
+}
+
+const ResizableTitle = (
+  props: React.HTMLAttributes<any> & {
+    onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
+    width: number;
+  },
+) => {
   const { onResize, width, ...restProps } = props;
 
   if (!width) {
@@ -45,45 +61,36 @@ const ResizableTitle = props => {
   );
 };
 
-class Demo extends React.Component {
-  state = {
-    columns: [
-      {
-        title: 'Date',
-        dataIndex: 'date',
-        width: 200,
-      },
-      {
-        title: 'Amount',
-        dataIndex: 'amount',
-        width: 100,
-        sorter: (a, b) => a.amount - b.amount,
-      },
-      {
-        title: 'Type',
-        dataIndex: 'type',
-        width: 100,
-      },
-      {
-        title: 'Note',
-        dataIndex: 'note',
-        width: 100,
-      },
-      {
-        title: 'Action',
-        key: 'action',
-        render: () => <a>Delete</a>,
-      },
-    ],
-  };
-
-  components = {
-    header: {
-      cell: ResizableTitle,
+const App: React.FC = () => {
+  const [columns, setColumns] = useState<ColumnsType<DataType>>([
+    {
+      title: 'Date',
+      dataIndex: 'date',
+      width: 200,
     },
-  };
-
-  data = [
+    {
+      title: 'Amount',
+      dataIndex: 'amount',
+      width: 100,
+      sorter: (a, b) => a.amount - b.amount,
+    },
+    {
+      title: 'Type',
+      dataIndex: 'type',
+      width: 100,
+    },
+    {
+      title: 'Note',
+      dataIndex: 'note',
+      width: 100,
+    },
+    {
+      title: 'Action',
+      key: 'action',
+      render: () => <a>Delete</a>,
+    },
+  ]);
+  const data: DataType[] = [
     {
       key: 0,
       date: '2018-02-11',
@@ -107,33 +114,40 @@ class Demo extends React.Component {
     },
   ];
 
-  handleResize =
-    index =>
-    (e, { size }) => {
-      this.setState(({ columns }) => {
-        const nextColumns = [...columns];
-        nextColumns[index] = {
-          ...nextColumns[index],
-          width: size.width,
-        };
-        return { columns: nextColumns };
-      });
+  const handleResize =
+    (index: number) =>
+    (_: React.SyntheticEvent<Element>, { size }: ResizeCallbackData) => {
+      const newColumns = [...columns];
+      newColumns[index] = {
+        ...newColumns[index],
+        width: size.width,
+      };
+      setColumns(newColumns);
     };
 
-  render() {
-    const columns = this.state.columns.map((col, index) => ({
-      ...col,
-      onHeaderCell: column => ({
-        width: column.width,
-        onResize: this.handleResize(index),
-      }),
-    }));
+  const mergeColumns: ColumnsType<DataType> = columns.map((col, index) => ({
+    ...col,
+    onHeaderCell: column => ({
+      width: (column as ColumnType<DataType>).width,
+      onResize: handleResize(index),
+    }),
+  }));
 
-    return <Table bordered components={this.components} columns={columns} dataSource={this.data} />;
-  }
-}
+  return (
+    <Table
+      bordered
+      components={{
+        header: {
+          cell: ResizableTitle,
+        },
+      }}
+      columns={mergeColumns}
+      dataSource={data}
+    />
+  );
+};
 
-export default Demo;
+export default App;
 ```
 
 ```css
diff --git a/components/table/demo/responsive.md b/components/table/demo/responsive.md
index 42e91a61dc..b72951565b 100644
--- a/components/table/demo/responsive.md
+++ b/components/table/demo/responsive.md
@@ -13,10 +13,19 @@ title:
 
 Responsive columns.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name (all screens)',
     dataIndex: 'name',
@@ -37,7 +46,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -46,5 +55,7 @@ const data = [
   },
 ];
 
-export default () => <Table columns={columns} dataSource={data} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} />;
+
+export default App;
 ```
diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md
index d0efcb43ec..5435f2d372 100644
--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@@ -13,10 +13,19 @@ title:
 
 To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table, Button } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -31,7 +40,7 @@ const columns = [
   },
 ];
 
-const data = [];
+const data: DataType[] = [];
 for (let i = 0; i < 46; i++) {
   data.push({
     key: i,
@@ -41,50 +50,44 @@ for (let i = 0; i < 46; i++) {
   });
 }
 
-class App extends React.Component {
-  state = {
-    selectedRowKeys: [], // Check here to configure the default column
-    loading: false,
-  };
+const App: React.FC = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [loading, setLoading] = useState(false);
 
-  start = () => {
-    this.setState({ loading: true });
+  const start = () => {
+    setLoading(true);
     // ajax request after empty completing
     setTimeout(() => {
-      this.setState({
-        selectedRowKeys: [],
-        loading: false,
-      });
+      setSelectedRowKeys([]);
+      setLoading(false);
     }, 1000);
   };
 
-  onSelectChange = selectedRowKeys => {
+  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
     console.log('selectedRowKeys changed: ', selectedRowKeys);
-    this.setState({ selectedRowKeys });
+    setSelectedRowKeys(newSelectedRowKeys);
   };
 
-  render() {
-    const { loading, selectedRowKeys } = this.state;
-    const rowSelection = {
-      selectedRowKeys,
-      onChange: this.onSelectChange,
-    };
-    const hasSelected = selectedRowKeys.length > 0;
-    return (
-      <div>
-        <div style={{ marginBottom: 16 }}>
-          <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
-            Reload
-          </Button>
-          <span style={{ marginLeft: 8 }}>
-            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
-          </span>
-        </div>
-        <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+  const hasSelected = selectedRowKeys.length > 0;
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
+          Reload
+        </Button>
+        <span style={{ marginLeft: 8 }}>
+          {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
+        </span>
       </div>
-    );
-  }
-}
+      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+    </div>
+  );
+};
 
 export default App;
 ```
diff --git a/components/table/demo/row-selection-custom-debug.md b/components/table/demo/row-selection-custom-debug.md
index 0bacb7c422..54c36332ed 100644
--- a/components/table/demo/row-selection-custom-debug.md
+++ b/components/table/demo/row-selection-custom-debug.md
@@ -14,17 +14,25 @@ debug: true
 
 Customize selection group.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { TableRowSelection } from 'antd/lib/table/interface';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
   },
 ];
 
-const data = [];
+const data: DataType[] = [];
 for (let i = 0; i < 46; i++) {
   data.push({
     key: i,
@@ -32,9 +40,9 @@ for (let i = 0; i < 46; i++) {
   });
 }
 
-const App = () => {
-  const rowSelection = {
-    renderCell: (checked, record, index, node) => ({
+const App: React.FC = () => {
+  const rowSelection: TableRowSelection<DataType> = {
+    renderCell: (checked, _record, index, node) => ({
       props: { rowSpan: index % 2 === 0 ? 2 : 0 },
       children: (
         <>
diff --git a/components/table/demo/row-selection-custom.md b/components/table/demo/row-selection-custom.md
index f6d11279b8..1ff373a602 100644
--- a/components/table/demo/row-selection-custom.md
+++ b/components/table/demo/row-selection-custom.md
@@ -13,10 +13,20 @@ title:
 
 Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table } from 'antd';
+import type { TableRowSelection } from 'antd/lib/table/interface';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -31,7 +41,7 @@ const columns = [
   },
 ];
 
-const data = [];
+const data: DataType[] = [];
 for (let i = 0; i < 46; i++) {
   data.push({
     key: i,
@@ -41,58 +51,54 @@ for (let i = 0; i < 46; i++) {
   });
 }
 
-class App extends React.Component {
-  state = {
-    selectedRowKeys: [], // Check here to configure the default column
-  };
+const App: React.FC = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
 
-  onSelectChange = selectedRowKeys => {
+  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
     console.log('selectedRowKeys changed: ', selectedRowKeys);
-    this.setState({ selectedRowKeys });
+    setSelectedRowKeys(newSelectedRowKeys);
   };
 
-  render() {
-    const { selectedRowKeys } = this.state;
-    const rowSelection = {
-      selectedRowKeys,
-      onChange: this.onSelectChange,
-      selections: [
-        Table.SELECTION_ALL,
-        Table.SELECTION_INVERT,
-        Table.SELECTION_NONE,
-        {
-          key: 'odd',
-          text: 'Select Odd Row',
-          onSelect: changableRowKeys => {
-            let newSelectedRowKeys = [];
-            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
-              if (index % 2 !== 0) {
-                return false;
-              }
-              return true;
-            });
-            this.setState({ selectedRowKeys: newSelectedRowKeys });
-          },
-        },
-        {
-          key: 'even',
-          text: 'Select Even Row',
-          onSelect: changableRowKeys => {
-            let newSelectedRowKeys = [];
-            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
-              if (index % 2 !== 0) {
-                return true;
-              }
+  const rowSelection: TableRowSelection<DataType> = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+    selections: [
+      Table.SELECTION_ALL,
+      Table.SELECTION_INVERT,
+      Table.SELECTION_NONE,
+      {
+        key: 'odd',
+        text: 'Select Odd Row',
+        onSelect: changableRowKeys => {
+          let newSelectedRowKeys = [];
+          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
+            if (index % 2 !== 0) {
               return false;
-            });
-            this.setState({ selectedRowKeys: newSelectedRowKeys });
-          },
+            }
+            return true;
+          });
+          setSelectedRowKeys(newSelectedRowKeys);
         },
-      ],
-    };
-    return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
-  }
-}
+      },
+      {
+        key: 'even',
+        text: 'Select Even Row',
+        onSelect: changableRowKeys => {
+          let newSelectedRowKeys = [];
+          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
+            if (index % 2 !== 0) {
+              return true;
+            }
+            return false;
+          });
+          setSelectedRowKeys(newSelectedRowKeys);
+        },
+      },
+    ],
+  };
+
+  return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
+};
 
 export default App;
 ```
diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md
index 1e9596fe6f..07cf9f4fa9 100644
--- a/components/table/demo/row-selection.md
+++ b/components/table/demo/row-selection.md
@@ -20,8 +20,16 @@ Rows can be selectable by making first column as a selectable column. You can us
 ```tsx
 import React, { useState } from 'react';
 import { Table, Radio, Divider } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -37,13 +45,6 @@ const columns = [
   },
 ];
 
-interface DataType {
-  key: React.Key;
-  name: string;
-  age: number;
-  address: string;
-}
-
 const data: DataType[] = [
   {
     key: '1',
@@ -82,7 +83,7 @@ const rowSelection = {
   }),
 };
 
-const Demo = () => {
+const App: React.FC = () => {
   const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
 
   return (
@@ -111,5 +112,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/table/demo/size.md b/components/table/demo/size.md
index 02336e2ea5..d1469b3d86 100644
--- a/components/table/demo/size.md
+++ b/components/table/demo/size.md
@@ -13,10 +13,19 @@ title:
 
 There are two compacted table sizes: `middle` and `small`. The `small` size is used in Modals only.
 
-```jsx
+```tsx
+import React from 'react';
 import { Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -30,7 +39,8 @@ const columns = [
     dataIndex: 'address',
   },
 ];
-const data = [
+
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -51,7 +61,7 @@ const data = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <div>
     <h4>Middle size table</h4>
     <Table columns={columns} dataSource={data} size="middle" />
@@ -59,6 +69,8 @@ export default () => (
     <Table columns={columns} dataSource={data} size="small" />
   </div>
 );
+
+export default App;
 ```
 
 <style>#components-table-demo-size h4 { margin-bottom: 16px; }</style>
diff --git a/components/table/demo/sticky.md b/components/table/demo/sticky.md
index 16bb4ce505..59acec7087 100644
--- a/components/table/demo/sticky.md
+++ b/components/table/demo/sticky.md
@@ -13,10 +13,19 @@ title:
 
 For long table，need to scroll to view the header and scroll bar，then you can now set the fixed header and scroll bar to follow the page.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table, Switch } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Full Name',
     width: 100,
@@ -83,7 +92,7 @@ const columns = [
   },
 ];
 
-const data = [];
+const data: DataType[] = [];
 for (let i = 0; i < 100; i++) {
   data.push({
     key: i,
@@ -93,15 +102,15 @@ for (let i = 0; i < 100; i++) {
   });
 }
 
-const Demo = () => {
-  const [fixedTop, setFixedTop] = React.useState(false);
+const App: React.FC = () => {
+  const [fixedTop, setFixedTop] = useState(false);
 
   return (
     <Table
       columns={columns}
       dataSource={data}
       scroll={{ x: 1500 }}
-      summary={pageData => (
+      summary={() => (
         <Table.Summary fixed={fixedTop ? 'top' : 'bottom'}>
           <Table.Summary.Row>
             <Table.Summary.Cell index={0} colSpan={2}>
@@ -126,5 +135,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/table/demo/summary.md b/components/table/demo/summary.md
index de47e6f9d0..9a8f00e6fa 100644
--- a/components/table/demo/summary.md
+++ b/components/table/demo/summary.md
@@ -13,12 +13,27 @@ title:
 
 Set summary content by `summary` prop. Sync column fixed status with `Table.Summary.Cell`. You can fixed it by set `Table.Summary` `fixed` prop(since `4.16.0`).
 
-```jsx
+```tsx
+import React from 'react';
 import { Table, Typography } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
 
 const { Text } = Typography;
 
-const columns = [
+interface DataType {
+  key: string;
+  name: string;
+  borrow: number;
+  repayment: number;
+}
+
+interface FixedDataType {
+  key: React.Key;
+  name: string;
+  description: string;
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -33,7 +48,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: '1',
     name: 'John Brown',
@@ -60,7 +75,7 @@ const data = [
   },
 ];
 
-const fixedColumns = [
+const fixedColumns: ColumnsType<FixedDataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -73,7 +88,7 @@ const fixedColumns = [
   },
 ];
 
-const fixedData = [];
+const fixedData: FixedDataType[] = [];
 for (let i = 0; i < 20; i += 1) {
   fixedData.push({
     key: i,
@@ -82,7 +97,7 @@ for (let i = 0; i < 20; i += 1) {
   });
 }
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Table
       columns={columns}
@@ -101,17 +116,17 @@ export default () => (
         return (
           <>
             <Table.Summary.Row>
-              <Table.Summary.Cell>Total</Table.Summary.Cell>
-              <Table.Summary.Cell>
+              <Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
+              <Table.Summary.Cell index={1}>
                 <Text type="danger">{totalBorrow}</Text>
               </Table.Summary.Cell>
-              <Table.Summary.Cell>
+              <Table.Summary.Cell index={2}>
                 <Text>{totalRepayment}</Text>
               </Table.Summary.Cell>
             </Table.Summary.Row>
             <Table.Summary.Row>
-              <Table.Summary.Cell>Balance</Table.Summary.Cell>
-              <Table.Summary.Cell colSpan={2}>
+              <Table.Summary.Cell index={0}>Balance</Table.Summary.Cell>
+              <Table.Summary.Cell index={1} colSpan={2}>
                 <Text type="danger">{totalBorrow - totalRepayment}</Text>
               </Table.Summary.Cell>
             </Table.Summary.Row>
@@ -139,6 +154,8 @@ export default () => (
     />
   </>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/table/demo/tree-data.md b/components/table/demo/tree-data.md
index e11365a062..d2f50c212c 100644
--- a/components/table/demo/tree-data.md
+++ b/components/table/demo/tree-data.md
@@ -17,10 +17,21 @@ Display tree structure data in Table when there is field key `children` in dataS
 
 You can control the indent width by setting `indentSize`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Table, Switch, Space } from 'antd';
+import type { TableRowSelection } from 'antd/lib/table/interface';
+import type { ColumnsType } from 'antd/lib/table';
 
-const columns = [
+interface DataType {
+  key: React.ReactNode;
+  name: string;
+  age: number;
+  address: string;
+  children?: DataType[];
+}
+
+const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -40,7 +51,7 @@ const columns = [
   },
 ];
 
-const data = [
+const data: DataType[] = [
   {
     key: 1,
     name: 'John Brown sr.',
@@ -106,7 +117,7 @@ const data = [
 ];
 
 // rowSelection objects indicates the need for row selection
-const rowSelection = {
+const rowSelection: TableRowSelection<DataType> = {
   onChange: (selectedRowKeys, selectedRows) => {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
   },
@@ -118,8 +129,9 @@ const rowSelection = {
   },
 };
 
-function TreeData() {
-  const [checkStrictly, setCheckStrictly] = React.useState(false);
+const App: React.FC = () => {
+  const [checkStrictly, setCheckStrictly] = useState(false);
+
   return (
     <>
       <Space align="center" style={{ marginBottom: 16 }}>
@@ -132,7 +144,7 @@ function TreeData() {
       />
     </>
   );
-}
+};
 
-export default () => <TreeData />;
+export default App;
 ```
diff --git a/components/table/demo/virtual-list.md b/components/table/demo/virtual-list.md
index c3723c7d1e..6314ce392b 100644
--- a/components/table/demo/virtual-list.md
+++ b/components/table/demo/virtual-list.md
@@ -20,7 +20,7 @@ import ResizeObserver from 'rc-resize-observer';
 import classNames from 'classnames';
 import { Table } from 'antd';
 
-function VirtualTable(props: Parameters<typeof Table>[0]) {
+const VirtualTable = (props: Parameters<typeof Table>[0]) => {
   const { columns, scroll } = props;
   const [tableWidth, setTableWidth] = useState(0);
 
@@ -122,7 +122,7 @@ function VirtualTable(props: Parameters<typeof Table>[0]) {
       />
     </ResizeObserver>
   );
-}
+};
 
 // Usage
 const columns = [
@@ -136,9 +136,11 @@ const columns = [
 
 const data = Array.from({ length: 100000 }, (_, key) => ({ key }));
 
-export default () => (
+const App: React.FC = () => (
   <VirtualTable columns={columns} dataSource={data} scroll={{ y: 300, x: '100vw' }} />
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3d4c0f48fb..5745a6792d 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -951,7 +951,8 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
         style="transform:translate(0px, 0px)"
       >
         <div
-          class="dragnode "
+          class=""
+          style="margin-right:24px"
         >
           <div
             class="ant-tabs-tab ant-tabs-tab-active"
@@ -967,7 +968,8 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
           </div>
         </div>
         <div
-          class="dragnode "
+          class=""
+          style="margin-right:24px"
         >
           <div
             class="ant-tabs-tab"
@@ -983,7 +985,8 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
           </div>
         </div>
         <div
-          class="dragnode "
+          class=""
+          style="margin-right:24px"
         >
           <div
             class="ant-tabs-tab"
@@ -3558,14 +3561,14 @@ exports[`renders ./components/tabs/demo/size.md extend context correctly 1`] = `
         <input
           class="ant-radio-button-input"
           type="radio"
-          value="default"
+          value="middle"
         />
         <span
           class="ant-radio-button-inner"
         />
       </span>
       <span>
-        Default
+        Middle
       </span>
     </label>
     <label
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index 8948380c37..5954228a2f 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -831,7 +831,8 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
         style="transform:translate(0px, 0px)"
       >
         <div
-          class="dragnode "
+          class=""
+          style="margin-right:24px"
         >
           <div
             class="ant-tabs-tab ant-tabs-tab-active"
@@ -847,7 +848,8 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="dragnode "
+          class=""
+          style="margin-right:24px"
         >
           <div
             class="ant-tabs-tab"
@@ -863,7 +865,8 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="dragnode "
+          class=""
+          style="margin-right:24px"
         >
           <div
             class="ant-tabs-tab"
@@ -2840,14 +2843,14 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
         <input
           class="ant-radio-button-input"
           type="radio"
-          value="default"
+          value="middle"
         />
         <span
           class="ant-radio-button-inner"
         />
       </span>
       <span>
-        Default
+        Middle
       </span>
     </label>
     <label
diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md
index 8a4468b805..c34583e3e4 100644
--- a/components/tabs/demo/basic.md
+++ b/components/tabs/demo/basic.md
@@ -13,17 +13,18 @@ title:
 
 Default activate first tab.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tabs } from 'antd';
 
 const { TabPane } = Tabs;
 
-function callback(key) {
+const onChange = (key: string) => {
   console.log(key);
-}
+};
 
-const Demo = () => (
-  <Tabs defaultActiveKey="1" onChange={callback}>
+const App: React.FC = () => (
+  <Tabs defaultActiveKey="1" onChange={onChange}>
     <TabPane tab="Tab 1" key="1">
       Content of Tab Pane 1
     </TabPane>
@@ -36,5 +37,5 @@ const Demo = () => (
   </Tabs>
 );
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index 7a924699df..d87c97e6cb 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -13,12 +13,13 @@ title:
 
 Should be used at the top of container, needs to override styles.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tabs } from 'antd';
 
 const { TabPane } = Tabs;
 
-export default () => (
+const App: React.FC = () => (
   <div className="card-container">
     <Tabs type="card">
       <TabPane tab="Tab Title 1" key="1">
@@ -39,6 +40,8 @@ export default () => (
     </Tabs>
   </div>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md
index 9fc39d3860..fd59eafee1 100644
--- a/components/tabs/demo/card.md
+++ b/components/tabs/demo/card.md
@@ -13,17 +13,18 @@ title:
 
 Another type of Tabs, which doesn't support vertical mode.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tabs } from 'antd';
 
 const { TabPane } = Tabs;
 
-function callback(key) {
+const onChange = (key: string) => {
   console.log(key);
-}
+};
 
-export default () => (
-  <Tabs onChange={callback} type="card">
+const App: React.FC = () => (
+  <Tabs onChange={onChange} type="card">
     <TabPane tab="Tab 1" key="1">
       Content of Tab Pane 1
     </TabPane>
@@ -35,4 +36,6 @@ export default () => (
     </TabPane>
   </Tabs>
 );
+
+export default App;
 ```
diff --git a/components/tabs/demo/centered.md b/components/tabs/demo/centered.md
index a61892493a..67d940932a 100644
--- a/components/tabs/demo/centered.md
+++ b/components/tabs/demo/centered.md
@@ -13,12 +13,13 @@ title:
 
 Centered tabs.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tabs } from 'antd';
 
 const { TabPane } = Tabs;
 
-const Demo = () => (
+const App: React.FC = () => (
   <Tabs defaultActiveKey="1" centered>
     <TabPane tab="Tab 1" key="1">
       Content of Tab Pane 1
@@ -32,5 +33,5 @@ const Demo = () => (
   </Tabs>
 );
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md
index 2421c381b2..55d5127f21 100644
--- a/components/tabs/demo/custom-add-trigger.md
+++ b/components/tabs/demo/custom-add-trigger.md
@@ -13,82 +13,75 @@ title:
 
 Hide default plus icon, and bind event for customized trigger.
 
-```jsx
+```tsx
+import React, { useRef, useState } from 'react';
 import { Tabs, Button } from 'antd';
 
 const { TabPane } = Tabs;
 
-class Demo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.newTabIndex = 0;
-    const panes = new Array(2).fill(null).map((_, index) => {
-      const id = String(index + 1);
-      return { title: `Tab ${id}`, content: `Content of Tab Pane ${id}`, key: id };
-    });
-    this.state = {
-      activeKey: panes[0].key,
-      panes,
-    };
-  }
+const defaultPanes = Array.from({ length: 2 }).map((_, index) => {
+  const id = String(index + 1);
+  return { title: `Tab ${id}`, content: `Content of Tab Pane ${index + 1}`, key: id };
+});
 
-  onChange = activeKey => {
-    this.setState({ activeKey });
+const App: React.FC = () => {
+  const [activeKey, setActiveKey] = useState(defaultPanes[0].key);
+  const [panes, setPanes] = useState(defaultPanes);
+  const newTabIndex = useRef(0);
+
+  const onChange = (key: string) => {
+    setActiveKey(key);
   };
 
-  onEdit = (targetKey, action) => {
-    this[action](targetKey);
+  const add = () => {
+    const newActiveKey = `newTab${newTabIndex.current++}`;
+    setPanes([...panes, { title: 'New Tab', content: 'New Tab Pane', key: newActiveKey }]);
+    setActiveKey(newActiveKey);
   };
 
-  add = () => {
-    const { panes } = this.state;
-    const activeKey = `newTab${this.newTabIndex++}`;
-    panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
-    this.setState({ panes, activeKey });
-  };
-
-  remove = targetKey => {
-    let { activeKey } = this.state;
-    let lastIndex;
-    this.state.panes.forEach((pane, i) => {
+  const remove = (targetKey: string) => {
+    let lastIndex = -1;
+    panes.forEach((pane, i) => {
       if (pane.key === targetKey) {
         lastIndex = i - 1;
       }
     });
-    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
     if (panes.length && activeKey === targetKey) {
+      let newActiveKey: string;
       if (lastIndex >= 0) {
-        activeKey = panes[lastIndex].key;
+        newActiveKey = panes[lastIndex].key;
       } else {
-        activeKey = panes[0].key;
+        newActiveKey = panes[0].key;
       }
+      setActiveKey(newActiveKey);
     }
-    this.setState({ panes, activeKey });
+    const newPanes = panes.filter(pane => pane.key !== targetKey);
+    setPanes(newPanes);
   };
 
-  render() {
-    return (
-      <div>
-        <div style={{ marginBottom: 16 }}>
-          <Button onClick={this.add}>ADD</Button>
-        </div>
-        <Tabs
-          hideAdd
-          onChange={this.onChange}
-          activeKey={this.state.activeKey}
-          type="editable-card"
-          onEdit={this.onEdit}
-        >
-          {this.state.panes.map(pane => (
-            <TabPane tab={pane.title} key={pane.key}>
-              {pane.content}
-            </TabPane>
-          ))}
-        </Tabs>
-      </div>
-    );
-  }
-}
+  const onEdit = (targetKey: string, action: 'add' | 'remove') => {
+    if (action === 'add') {
+      add();
+    } else {
+      remove(targetKey);
+    }
+  };
 
-export default Demo;
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Button onClick={add}>ADD</Button>
+      </div>
+      <Tabs hideAdd onChange={onChange} activeKey={activeKey} type="editable-card" onEdit={onEdit}>
+        {panes.map(pane => (
+          <TabPane tab={pane.title} key={pane.key}>
+            {pane.content}
+          </TabPane>
+        ))}
+      </Tabs>
+    </div>
+  );
+};
+
+export default App;
 ```
diff --git a/components/tabs/demo/custom-tab-bar-node.md b/components/tabs/demo/custom-tab-bar-node.md
index d3604877cb..c254a881c1 100644
--- a/components/tabs/demo/custom-tab-bar-node.md
+++ b/components/tabs/demo/custom-tab-bar-node.md
@@ -13,18 +13,23 @@ title:
 
 Use `react-dnd@15+` to make tabs draggable.
 
-```jsx
-import React, { useRef, cloneElement } from 'react';
+```tsx
+import React, { useState, useRef } from 'react';
 import { Tabs } from 'antd';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import type { TabsProps } from 'antd';
 
 const { TabPane } = Tabs;
 
 const type = 'DraggableTabNode';
+interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
+  index: React.Key;
+  moveNode: (dragIndex: React.Key, hoverIndex: React.Key) => void;
+}
 
-const DraggableTabNode = ({ index, children, moveNode }) => {
-  const ref = useRef();
+const DraggableTabNode = ({ index, children, moveNode }: DraggableTabPaneProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   const [{ isOver, dropClassName }, drop] = useDrop({
     accept: type,
     collect: monitor => {
@@ -37,7 +42,7 @@ const DraggableTabNode = ({ index, children, moveNode }) => {
         dropClassName: 'dropping',
       };
     },
-    drop: item => {
+    drop: (item: { index: React.Key }) => {
       moveNode(item.index, index);
     },
   });
@@ -49,24 +54,23 @@ const DraggableTabNode = ({ index, children, moveNode }) => {
     }),
   });
   drop(drag(ref));
+
   return (
-    <div ref={ref} className={`dragnode ${isOver ? dropClassName : ''}`}>
+    <div ref={ref} style={{ marginRight: 24 }} className={isOver ? dropClassName : ''}>
       {children}
     </div>
   );
 };
 
-class DraggableTabs extends React.Component {
-  state = {
-    order: [],
-  };
+const DraggableTabs: React.FC<{ children: React.ReactNode }> = props => {
+  const { children } = props;
+  const [order, setOrder] = useState<React.Key[]>([]);
 
-  moveTabNode = (dragKey, hoverKey) => {
-    const newOrder = this.state.order.slice();
-    const { children } = this.props;
+  const moveTabNode = (dragKey: React.Key, hoverKey: React.Key) => {
+    const newOrder = order.slice();
 
-    React.Children.forEach(children, c => {
-      if (newOrder.indexOf(c.key) === -1) {
+    React.Children.forEach(children, (c: React.ReactElement) => {
+      if (c.key && newOrder.indexOf(c.key) === -1) {
         newOrder.push(c.key);
       }
     });
@@ -77,61 +81,54 @@ class DraggableTabs extends React.Component {
     newOrder.splice(dragIndex, 1);
     newOrder.splice(hoverIndex, 0, dragKey);
 
-    this.setState({
-      order: newOrder,
-    });
+    setOrder(newOrder);
   };
 
-  renderTabBar = (props, DefaultTabBar) => (
-    <DefaultTabBar {...props}>
+  const renderTabBar: TabsProps['renderTabBar'] = (tabBarProps, DefaultTabBar) => (
+    <DefaultTabBar {...tabBarProps}>
       {node => (
-        <DraggableTabNode key={node.key} index={node.key} moveNode={this.moveTabNode}>
+        <DraggableTabNode key={node.key} index={node.key!} moveNode={moveTabNode}>
           {node}
         </DraggableTabNode>
       )}
     </DefaultTabBar>
   );
 
-  render() {
-    const { order } = this.state;
-    const { children } = this.props;
+  const tabs: React.ReactElement[] = [];
+  React.Children.forEach(children, (c: React.ReactElement) => {
+    tabs.push(c);
+  });
 
-    const tabs = [];
-    React.Children.forEach(children, c => {
-      tabs.push(c);
-    });
+  const orderTabs = tabs.slice().sort((a, b) => {
+    const orderA = order.indexOf(a.key!);
+    const orderB = order.indexOf(b.key!);
 
-    const orderTabs = tabs.slice().sort((a, b) => {
-      const orderA = order.indexOf(a.key);
-      const orderB = order.indexOf(b.key);
+    if (orderA !== -1 && orderB !== -1) {
+      return orderA - orderB;
+    }
+    if (orderA !== -1) {
+      return -1;
+    }
+    if (orderB !== -1) {
+      return 1;
+    }
 
-      if (orderA !== -1 && orderB !== -1) {
-        return orderA - orderB;
-      }
-      if (orderA !== -1) {
-        return -1;
-      }
-      if (orderB !== -1) {
-        return 1;
-      }
+    const ia = tabs.indexOf(a);
+    const ib = tabs.indexOf(b);
 
-      const ia = tabs.indexOf(a);
-      const ib = tabs.indexOf(b);
+    return ia - ib;
+  });
 
-      return ia - ib;
-    });
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <Tabs renderTabBar={renderTabBar} {...props}>
+        {orderTabs}
+      </Tabs>
+    </DndProvider>
+  );
+};
 
-    return (
-      <DndProvider backend={HTML5Backend}>
-        <Tabs renderTabBar={this.renderTabBar} {...this.props}>
-          {orderTabs}
-        </Tabs>
-      </DndProvider>
-    );
-  }
-}
-
-export default () => (
+const App: React.FC = () => (
   <DraggableTabs>
     <TabPane tab="tab 1" key="1">
       Content of Tab Pane 1
@@ -144,6 +141,8 @@ export default () => (
     </TabPane>
   </DraggableTabs>
 );
+
+export default App;
 ```
 
 ```css
@@ -151,8 +150,4 @@ export default () => (
   background: #fefefe;
   transition: all 0.3s;
 }
-
-.dragnode {
-  margin-inline-end: 24px;
-}
 ```
diff --git a/components/tabs/demo/custom-tab-bar.md b/components/tabs/demo/custom-tab-bar.md
index d541359e88..c5113dcf87 100644
--- a/components/tabs/demo/custom-tab-bar.md
+++ b/components/tabs/demo/custom-tab-bar.md
@@ -13,13 +13,15 @@ title:
 
 Use react-sticky.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tabs } from 'antd';
 import { StickyContainer, Sticky } from 'react-sticky';
+import type { TabsProps } from 'antd';
 
 const { TabPane } = Tabs;
 
-const renderTabBar = (props, DefaultTabBar) => (
+const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
   <Sticky bottomOffset={80}>
     {({ style }) => (
       <DefaultTabBar {...props} className="site-custom-tab-bar" style={{ ...style }} />
@@ -27,7 +29,7 @@ const renderTabBar = (props, DefaultTabBar) => (
   </Sticky>
 );
 
-export default () => (
+const App: React.FC = () => (
   <StickyContainer>
     <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
       <TabPane tab="Tab 1" key="1" style={{ height: 200 }}>
@@ -42,6 +44,8 @@ export default () => (
     </Tabs>
   </StickyContainer>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md
index 4a137dcd04..c4bc11ba81 100644
--- a/components/tabs/demo/disabled.md
+++ b/components/tabs/demo/disabled.md
@@ -13,12 +13,13 @@ title:
 
 Disabled a tab.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tabs } from 'antd';
 
 const { TabPane } = Tabs;
 
-export default () => (
+const App: React.FC = () => (
   <Tabs defaultActiveKey="1">
     <TabPane tab="Tab 1" key="1">
       Tab 1
@@ -31,4 +32,6 @@ export default () => (
     </TabPane>
   </Tabs>
 );
+
+export default App;
 ```
diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index 7bceef20ff..28cd9e4613 100644
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@@ -13,7 +13,8 @@ title:
 
 Only card type Tabs support adding & closable. +Use `closable={false}` to disable close.
 
-```jsx
+```tsx
+import React, { useRef, useState } from 'react';
 import { Tabs } from 'antd';
 
 const { TabPane } = Tabs;
@@ -29,37 +30,26 @@ const initialPanes = [
   },
 ];
 
-class Demo extends React.Component {
-  newTabIndex = 0;
+const App: React.FC = () => {
+  const [activeKey, setActiveKey] = useState(initialPanes[0].key);
+  const [panes, setPanes] = useState(initialPanes);
+  const newTabIndex = useRef(0);
 
-  state = {
-    activeKey: initialPanes[0].key,
-    panes: initialPanes,
+  const onChange = (newActiveKey: string) => {
+    setActiveKey(newActiveKey);
   };
 
-  onChange = activeKey => {
-    this.setState({ activeKey });
-  };
-
-  onEdit = (targetKey, action) => {
-    this[action](targetKey);
-  };
-
-  add = () => {
-    const { panes } = this.state;
-    const activeKey = `newTab${this.newTabIndex++}`;
+  const add = () => {
+    const newActiveKey = `newTab${newTabIndex.current++}`;
     const newPanes = [...panes];
-    newPanes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
-    this.setState({
-      panes: newPanes,
-      activeKey,
-    });
+    newPanes.push({ title: 'New Tab', content: 'Content of new Tab', key: newActiveKey });
+    setPanes(newPanes);
+    setActiveKey(newActiveKey);
   };
 
-  remove = targetKey => {
-    const { panes, activeKey } = this.state;
+  const remove = (targetKey: string) => {
     let newActiveKey = activeKey;
-    let lastIndex;
+    let lastIndex = -1;
     panes.forEach((pane, i) => {
       if (pane.key === targetKey) {
         lastIndex = i - 1;
@@ -73,30 +63,28 @@ class Demo extends React.Component {
         newActiveKey = newPanes[0].key;
       }
     }
-    this.setState({
-      panes: newPanes,
-      activeKey: newActiveKey,
-    });
+    setPanes(newPanes);
+    setActiveKey(newActiveKey);
   };
 
-  render() {
-    const { panes, activeKey } = this.state;
-    return (
-      <Tabs
-        type="editable-card"
-        onChange={this.onChange}
-        activeKey={activeKey}
-        onEdit={this.onEdit}
-      >
-        {panes.map(pane => (
-          <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
-            {pane.content}
-          </TabPane>
-        ))}
-      </Tabs>
-    );
-  }
-}
+  const onEdit = (targetKey: string, action: 'add' | 'remove') => {
+    if (action === 'add') {
+      add();
+    } else {
+      remove(targetKey);
+    }
+  };
 
-export default Demo;
+  return (
+    <Tabs type="editable-card" onChange={onChange} activeKey={activeKey} onEdit={onEdit}>
+      {panes.map(pane => (
+        <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
+          {pane.content}
+        </TabPane>
+      ))}
+    </Tabs>
+  );
+};
+
+export default App;
 ```
diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md
index bbc01a4f22..33c6ab2fc7 100644
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@@ -13,7 +13,8 @@ title:
 
 You can add extra actions to the right or left or even both side of Tabs.
 
-```jsx
+```tsx
+import React, { useMemo, useState } from 'react';
 import { Tabs, Button, Divider, Checkbox } from 'antd';
 
 const { TabPane } = Tabs;
@@ -22,17 +23,19 @@ const CheckboxGroup = Checkbox.Group;
 
 const operations = <Button>Extra Action</Button>;
 
-const OperationsSlot = {
+const OperationsSlot: Record<PositionType, React.ReactNode> = {
   left: <Button className="tabs-extra-demo-button">Left Extra Action</Button>,
   right: <Button>Right Extra Action</Button>,
 };
 
 const options = ['left', 'right'];
 
-const Demo = () => {
-  const [position, setPosition] = React.useState(['left', 'right']);
+type PositionType = 'left' | 'right';
 
-  const slot = React.useMemo(() => {
+const App: React.FC = () => {
+  const [position, setPosition] = useState<PositionType[]>(['left', 'right']);
+
+  const slot = useMemo(() => {
     if (position.length === 0) return null;
 
     return position.reduce(
@@ -63,7 +66,7 @@ const Demo = () => {
         options={options}
         value={position}
         onChange={value => {
-          setPosition(value);
+          setPosition(value as PositionType[]);
         }}
       />
       <br />
@@ -83,7 +86,7 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
 
 ```css
diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md
index 5a3f7c161c..1ba4e1815f 100644
--- a/components/tabs/demo/icon.md
+++ b/components/tabs/demo/icon.md
@@ -13,13 +13,14 @@ title:
 
 The Tab with Icon.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tabs } from 'antd';
 import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
 
 const { TabPane } = Tabs;
 
-export default () => (
+const App: React.FC = () => (
   <Tabs defaultActiveKey="2">
     <TabPane
       tab={
@@ -45,4 +46,6 @@ export default () => (
     </TabPane>
   </Tabs>
 );
+
+export default App;
 ```
diff --git a/components/tabs/demo/nest.md b/components/tabs/demo/nest.md
index 5363e56751..a7866a5e21 100644
--- a/components/tabs/demo/nest.md
+++ b/components/tabs/demo/nest.md
@@ -14,7 +14,8 @@ title:
 
 Default activate first tab.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Tabs, Select } from 'antd';
 
 const { TabPane } = Tabs;
@@ -22,92 +23,86 @@ const { Option } = Select;
 
 const positionList = ['left', 'right', 'top', 'bottom'];
 
-const list = new Array(20).fill().map((_, index) => index);
+const list = Array.from({ length: 20 }).map((_, index) => index);
 
-class Demo extends React.Component {
-  state = {
-    parentPos: undefined,
-    childPos: undefined,
-    parentType: undefined,
-    childType: undefined,
-  };
+const App: React.FC = () => {
+  const [parentPos, setParentPos] = useState(undefined);
+  const [childPos, setChildPos] = useState(undefined);
+  const [parentType, setParentType] = useState(undefined);
+  const [childType, setChildType] = useState(undefined);
 
-  render() {
-    const { parentPos, childPos, parentType, childType } = this.state;
+  return (
+    <div>
+      <Select
+        style={{ width: 200 }}
+        onChange={val => {
+          setParentPos(val);
+        }}
+      >
+        {positionList.map(pos => (
+          <Option key={pos} value={pos}>
+            Parent - {pos}
+          </Option>
+        ))}
+      </Select>
 
-    return (
-      <div>
-        <Select
-          style={{ width: 200 }}
-          onChange={val => {
-            this.setState({ parentPos: val });
-          }}
-        >
-          {positionList.map(pos => (
-            <Option key={pos} value={pos}>
-              Parent - {pos}
-            </Option>
-          ))}
-        </Select>
+      <Select
+        style={{ width: 200 }}
+        onChange={val => {
+          setChildPos(val);
+        }}
+      >
+        {positionList.map(pos => (
+          <Option key={pos} value={pos}>
+            Child - {pos}
+          </Option>
+        ))}
+      </Select>
 
-        <Select
-          style={{ width: 200 }}
-          onChange={val => {
-            this.setState({ childPos: val });
-          }}
-        >
-          {positionList.map(pos => (
-            <Option key={pos} value={pos}>
-              Child - {pos}
-            </Option>
-          ))}
-        </Select>
+      <Select
+        style={{ width: 200 }}
+        onChange={val => {
+          setParentType(val);
+        }}
+      >
+        <Option value="line">Parent - line</Option>
+        <Option value="card">Parent - card</Option>
+        <Option value="editable-card">Parent - card edit</Option>
+      </Select>
 
-        <Select
-          style={{ width: 200 }}
-          onChange={val => {
-            this.setState({ parentType: val });
-          }}
-        >
-          <Option value="line">Parent - line</Option>
-          <Option value="card">Parent - card</Option>
-          <Option value="editable-card">Parent - card edit</Option>
-        </Select>
+      <Select
+        style={{ width: 200 }}
+        onChange={val => {
+          setChildType(val);
+        }}
+      >
+        <Option value="line">Child - line</Option>
+        <Option value="card">Child - card</Option>
+        <Option value="editable-card">Parent - card edit</Option>
+      </Select>
 
-        <Select
-          style={{ width: 200 }}
-          onChange={val => {
-            this.setState({ childType: val });
-          }}
-        >
-          <Option value="line">Child - line</Option>
-          <Option value="card">Child - card</Option>
-          <Option value="editable-card">Parent - card edit</Option>
-        </Select>
+      <Tabs defaultActiveKey="1" tabPosition={parentPos} type={parentType}>
+        <TabPane tab="Tab 1" key="1">
+          <Tabs
+            defaultActiveKey="1"
+            tabPosition={childPos}
+            type={childType}
+            style={{ height: 300 }}
+          >
+            {list.map(key => (
+              <TabPane tab={`Tab ${key}`} key={key}>
+                TTTT {key}
+              </TabPane>
+            ))}
+          </Tabs>
+        </TabPane>
+        <TabPane tab="Tab 2" key="2">
+          Content of Tab Pane 2
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
 
-        <Tabs defaultActiveKey="1" tabPosition={parentPos} type={parentType}>
-          <TabPane tab="Tab 1" key="1">
-            <Tabs
-              defaultActiveKey="1"
-              tabPosition={childPos}
-              type={childType}
-              style={{ height: 300 }}
-            >
-              {list.map(key => (
-                <TabPane tab={`Tab ${key}`} key={key}>
-                  TTTT {key}
-                </TabPane>
-              ))}
-            </Tabs>
-          </TabPane>
-          <TabPane tab="Tab 2" key="2">
-            Content of Tab Pane 2
-          </TabPane>
-        </Tabs>
-      </div>
-    );
-  }
-}
-
-export default Demo;
+export default App;
 ```
diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md
index aec71b79fd..bfd1298331 100644
--- a/components/tabs/demo/position.md
+++ b/components/tabs/demo/position.md
@@ -13,48 +13,47 @@ title:
 
 Tab's position: left, right, top or bottom. Will auto switch to `top` in mobile.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Tabs, Radio, Space } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
 const { TabPane } = Tabs;
 
-class Demo extends React.Component {
-  state = {
-    tabPosition: 'left',
+type TabPosition = 'left' | 'right' | 'top' | 'bottom';
+
+const App: React.FC = () => {
+  const [tabPosition, setTabPosition] = useState<TabPosition>('left');
+
+  const changeTabPosition = (e: RadioChangeEvent) => {
+    setTabPosition(e.target.value);
   };
 
-  changeTabPosition = e => {
-    this.setState({ tabPosition: e.target.value });
-  };
+  return (
+    <>
+      <Space style={{ marginBottom: 24 }}>
+        Tab position:
+        <Radio.Group value={tabPosition} onChange={changeTabPosition}>
+          <Radio.Button value="top">top</Radio.Button>
+          <Radio.Button value="bottom">bottom</Radio.Button>
+          <Radio.Button value="left">left</Radio.Button>
+          <Radio.Button value="right">right</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Tabs tabPosition={tabPosition}>
+        <TabPane tab="Tab 1" key="1">
+          Content of Tab 1
+        </TabPane>
+        <TabPane tab="Tab 2" key="2">
+          Content of Tab 2
+        </TabPane>
+        <TabPane tab="Tab 3" key="3">
+          Content of Tab 3
+        </TabPane>
+      </Tabs>
+    </>
+  );
+};
 
-  render() {
-    const { tabPosition } = this.state;
-    return (
-      <>
-        <Space style={{ marginBottom: 24 }}>
-          Tab position:
-          <Radio.Group value={tabPosition} onChange={this.changeTabPosition}>
-            <Radio.Button value="top">top</Radio.Button>
-            <Radio.Button value="bottom">bottom</Radio.Button>
-            <Radio.Button value="left">left</Radio.Button>
-            <Radio.Button value="right">right</Radio.Button>
-          </Radio.Group>
-        </Space>
-        <Tabs tabPosition={tabPosition}>
-          <TabPane tab="Tab 1" key="1">
-            Content of Tab 1
-          </TabPane>
-          <TabPane tab="Tab 2" key="2">
-            Content of Tab 2
-          </TabPane>
-          <TabPane tab="Tab 3" key="3">
-            Content of Tab 3
-          </TabPane>
-        </Tabs>
-      </>
-    );
-  }
-}
-
-export default Demo;
+export default App;
 ```
diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md
index 28b3aa995c..81755e40b7 100644
--- a/components/tabs/demo/size.md
+++ b/components/tabs/demo/size.md
@@ -13,53 +13,53 @@ title:
 
 Large size tabs are usually used in page header, and small size could be used in Modal.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Tabs, Radio } from 'antd';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import type { RadioChangeEvent } from 'antd';
 
 const { TabPane } = Tabs;
 
-class Demo extends React.Component {
-  state = { size: 'small' };
+const App: React.FC = () => {
+  const [size, setSize] = useState<SizeType>('small');
 
-  onChange = e => {
-    this.setState({ size: e.target.value });
+  const onChange = (e: RadioChangeEvent) => {
+    setSize(e.target.value);
   };
 
-  render() {
-    const { size } = this.state;
-    return (
-      <div>
-        <Radio.Group value={size} onChange={this.onChange} style={{ marginBottom: 16 }}>
-          <Radio.Button value="small">Small</Radio.Button>
-          <Radio.Button value="default">Default</Radio.Button>
-          <Radio.Button value="large">Large</Radio.Button>
-        </Radio.Group>
-        <Tabs defaultActiveKey="1" size={size} style={{ marginBottom: 32 }}>
-          <TabPane tab="Tab 1" key="1">
-            Content of tab 1
-          </TabPane>
-          <TabPane tab="Tab 2" key="2">
-            Content of tab 2
-          </TabPane>
-          <TabPane tab="Tab 3" key="3">
-            Content of tab 3
-          </TabPane>
-        </Tabs>
-        <Tabs defaultActiveKey="1" type="card" size={size}>
-          <TabPane tab="Card Tab 1" key="1">
-            Content of card tab 1
-          </TabPane>
-          <TabPane tab="Card Tab 2" key="2">
-            Content of card tab 2
-          </TabPane>
-          <TabPane tab="Card Tab 3" key="3">
-            Content of card tab 3
-          </TabPane>
-        </Tabs>
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      <Radio.Group value={size} onChange={onChange} style={{ marginBottom: 16 }}>
+        <Radio.Button value="small">Small</Radio.Button>
+        <Radio.Button value="middle">Middle</Radio.Button>
+        <Radio.Button value="large">Large</Radio.Button>
+      </Radio.Group>
+      <Tabs defaultActiveKey="1" size={size} style={{ marginBottom: 32 }}>
+        <TabPane tab="Tab 1" key="1">
+          Content of tab 1
+        </TabPane>
+        <TabPane tab="Tab 2" key="2">
+          Content of tab 2
+        </TabPane>
+        <TabPane tab="Tab 3" key="3">
+          Content of tab 3
+        </TabPane>
+      </Tabs>
+      <Tabs defaultActiveKey="1" type="card" size={size}>
+        <TabPane tab="Card Tab 1" key="1">
+          Content of card tab 1
+        </TabPane>
+        <TabPane tab="Card Tab 2" key="2">
+          Content of card tab 2
+        </TabPane>
+        <TabPane tab="Card Tab 3" key="3">
+          Content of card tab 3
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
index 5009fe4aa2..6321228ba5 100644
--- a/components/tabs/demo/slide.md
+++ b/components/tabs/demo/slide.md
@@ -13,43 +13,38 @@ title:
 
 In order to fit in more tabs, they can slide left and right (or up and down).
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Tabs, Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
 const { TabPane } = Tabs;
 
-class SlidingTabsDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      mode: 'top',
-    };
-  }
+type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 
-  handleModeChange = e => {
-    const mode = e.target.value;
-    this.setState({ mode });
+const App: React.FC = () => {
+  const [mode, setMode] = useState<TabPosition>('top');
+
+  const handleModeChange = (e: RadioChangeEvent) => {
+    setMode(e.target.value);
   };
 
-  render() {
-    const { mode } = this.state;
-    return (
-      <div>
-        <Radio.Group onChange={this.handleModeChange} value={mode} style={{ marginBottom: 8 }}>
-          <Radio.Button value="top">Horizontal</Radio.Button>
-          <Radio.Button value="left">Vertical</Radio.Button>
-        </Radio.Group>
-        <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
-          {[...Array.from({ length: 30 }, (v, i) => i)].map(i => (
-            <TabPane tab={`Tab-${i}`} key={i} disabled={i === 28}>
-              Content of tab {i}
-            </TabPane>
-          ))}
-        </Tabs>
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      <Radio.Group onChange={handleModeChange} value={mode} style={{ marginBottom: 8 }}>
+        <Radio.Button value="top">Horizontal</Radio.Button>
+        <Radio.Button value="left">Vertical</Radio.Button>
+      </Radio.Group>
+      <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
+        {[...Array.from({ length: 30 }, (_, i) => i)].map(i => (
+          <TabPane tab={`Tab-${i}`} key={i} disabled={i === 28}>
+            Content of tab {i}
+          </TabPane>
+        ))}
+      </Tabs>
+    </div>
+  );
+};
 
-export default () => <SlidingTabsDemo />;
+export default App;
 ```
diff --git a/components/tag/demo/animation.md b/components/tag/demo/animation.md
index e9e4f6f511..af5078f164 100644
--- a/components/tag/demo/animation.md
+++ b/components/tag/demo/animation.md
@@ -13,57 +13,54 @@ title:
 
 Animating the Tag by using [rc-tween-one](https://github.com/react-component/tween-one).
 
-```jsx
+```tsx
+import React, { useEffect, useState, useRef } from 'react';
 import { Tag, Input } from 'antd';
 import { TweenOneGroup } from 'rc-tween-one';
 import { PlusOutlined } from '@ant-design/icons';
+import type { InputRef } from 'antd';
 
-class EditableTagGroup extends React.Component {
-  state = {
-    tags: ['Tag 1', 'Tag 2', 'Tag 3'],
-    inputVisible: false,
-    inputValue: '',
-  };
+const App: React.FC = () => {
+  const [tags, setTags] = useState<string[]>(['Tag 1', 'Tag 2', 'Tag 3']);
+  const [inputVisible, setInputVisible] = useState<boolean>(false);
+  const [inputValue, setInputValue] = useState('');
+  const inputRef = useRef<InputRef>(null);
 
-  handleClose = removedTag => {
-    const tags = this.state.tags.filter(tag => tag !== removedTag);
-    console.log(tags);
-    this.setState({ tags });
-  };
-
-  showInput = () => {
-    this.setState({ inputVisible: true }, () => this.input.focus());
-  };
-
-  handleInputChange = e => {
-    this.setState({ inputValue: e.target.value });
-  };
-
-  handleInputConfirm = () => {
-    const { inputValue } = this.state;
-    let { tags } = this.state;
-    if (inputValue && tags.indexOf(inputValue) === -1) {
-      tags = [...tags, inputValue];
+  useEffect(() => {
+    if (inputVisible) {
+      inputRef.current?.focus();
     }
-    console.log(tags);
-    this.setState({
-      tags,
-      inputVisible: false,
-      inputValue: '',
-    });
+  }, []);
+
+  const handleClose = (removedTag: string) => {
+    const newTags = tags.filter(tag => tag !== removedTag);
+    console.log(newTags);
+    setTags(newTags);
   };
 
-  saveInputRef = input => {
-    this.input = input;
+  const showInput = () => {
+    setInputVisible(true);
   };
 
-  forMap = tag => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleInputConfirm = () => {
+    if (inputValue && tags.indexOf(inputValue) === -1) {
+      setTags([...tags, inputValue]);
+    }
+    setInputVisible(false);
+    setInputValue('');
+  };
+
+  const forMap = (tag: string) => {
     const tagElem = (
       <Tag
         closable
         onClose={e => {
           e.preventDefault();
-          this.handleClose(tag);
+          handleClose(tag);
         }}
       >
         {tag}
@@ -76,53 +73,50 @@ class EditableTagGroup extends React.Component {
     );
   };
 
-  render() {
-    const { tags, inputVisible, inputValue } = this.state;
-    const tagChild = tags.map(this.forMap);
-    return (
-      <>
-        <div style={{ marginBottom: 16 }}>
-          <TweenOneGroup
-            enter={{
-              scale: 0.8,
-              opacity: 0,
-              type: 'from',
-              duration: 100,
-            }}
-            onEnd={e => {
-              if (e.type === 'appear' || e.type === 'enter') {
-                e.target.style = 'display: inline-block';
-              }
-            }}
-            leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
-            appear={false}
-          >
-            {tagChild}
-          </TweenOneGroup>
-        </div>
-        {inputVisible && (
-          <Input
-            ref={this.saveInputRef}
-            type="text"
-            size="small"
-            style={{ width: 78 }}
-            value={inputValue}
-            onChange={this.handleInputChange}
-            onBlur={this.handleInputConfirm}
-            onPressEnter={this.handleInputConfirm}
-          />
-        )}
-        {!inputVisible && (
-          <Tag onClick={this.showInput} className="site-tag-plus">
-            <PlusOutlined /> New Tag
-          </Tag>
-        )}
-      </>
-    );
-  }
-}
+  const tagChild = tags.map(forMap);
+  return (
+    <>
+      <div style={{ marginBottom: 16 }}>
+        <TweenOneGroup
+          enter={{
+            scale: 0.8,
+            opacity: 0,
+            type: 'from',
+            duration: 100,
+          }}
+          onEnd={e => {
+            if (e.type === 'appear' || e.type === 'enter') {
+              (e.target as any).style = 'display: inline-block';
+            }
+          }}
+          leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
+          appear={false}
+        >
+          {tagChild}
+        </TweenOneGroup>
+      </div>
+      {inputVisible && (
+        <Input
+          ref={inputRef}
+          type="text"
+          size="small"
+          style={{ width: 78 }}
+          value={inputValue}
+          onChange={handleInputChange}
+          onBlur={handleInputConfirm}
+          onPressEnter={handleInputConfirm}
+        />
+      )}
+      {!inputVisible && (
+        <Tag onClick={showInput} className="site-tag-plus">
+          <PlusOutlined /> New Tag
+        </Tag>
+      )}
+    </>
+  );
+};
 
-export default () => <EditableTagGroup />;
+export default App;
 ```
 
 ```css
diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md
index a7353e6353..120241c620 100644
--- a/components/tag/demo/basic.md
+++ b/components/tag/demo/basic.md
@@ -13,19 +13,20 @@ title:
 
 Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` events.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tag } from 'antd';
 
-function log(e) {
+const log = (e: React.MouseEvent<HTMLElement>) => {
   console.log(e);
-}
+};
 
-function preventDefault(e) {
+const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
   e.preventDefault();
   console.log('Clicked! But prevent default.');
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Tag>Tag 1</Tag>
     <Tag>
@@ -39,4 +40,6 @@ export default () => (
     </Tag>
   </>
 );
+
+export default App;
 ```
diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md
index 073ba3cbc1..092b93524f 100644
--- a/components/tag/demo/checkable.md
+++ b/components/tag/demo/checkable.md
@@ -17,43 +17,38 @@ title:
 
 > it is an absolute controlled component and has no uncontrolled mode.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Tag } from 'antd';
 
 const { CheckableTag } = Tag;
 
 const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
 
-class HotTags extends React.Component {
-  state = {
-    selectedTags: ['Books'],
-  };
+const App: React.FC = () => {
+  const [selectedTags, setSelectedTags] = useState<string[]>(['Books']);
 
-  handleChange(tag, checked) {
-    const { selectedTags } = this.state;
+  const handleChange = (tag: string, checked: boolean) => {
     const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
     console.log('You are interested in: ', nextSelectedTags);
-    this.setState({ selectedTags: nextSelectedTags });
-  }
+    setSelectedTags(nextSelectedTags);
+  };
 
-  render() {
-    const { selectedTags } = this.state;
-    return (
-      <>
-        <span style={{ marginRight: 8 }}>Categories:</span>
-        {tagsData.map(tag => (
-          <CheckableTag
-            key={tag}
-            checked={selectedTags.indexOf(tag) > -1}
-            onChange={checked => this.handleChange(tag, checked)}
-          >
-            {tag}
-          </CheckableTag>
-        ))}
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <span style={{ marginRight: 8 }}>Categories:</span>
+      {tagsData.map(tag => (
+        <CheckableTag
+          key={tag}
+          checked={selectedTags.indexOf(tag) > -1}
+          onChange={checked => handleChange(tag, checked)}
+        >
+          {tag}
+        </CheckableTag>
+      ))}
+    </>
+  );
+};
 
-export default () => <HotTags />;
+export default App;
 ```
diff --git a/components/tag/demo/colorful-inverse.md b/components/tag/demo/colorful-inverse.md
index 8e8c5bc121..4814a9050b 100644
--- a/components/tag/demo/colorful-inverse.md
+++ b/components/tag/demo/colorful-inverse.md
@@ -14,10 +14,11 @@ debug: true
 
 Internal inverse color tag
 
-```jsx
+```tsx
+import React from 'react';
 import { Tag, Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Presets Inverse</Divider>
     <div>
@@ -35,6 +36,8 @@ export default () => (
     </div>
   </>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
index 8d4d5643f0..c80728a796 100644
--- a/components/tag/demo/colorful.md
+++ b/components/tag/demo/colorful.md
@@ -13,10 +13,11 @@ title:
 
 We preset a series of colorful tag 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 { Tag, Divider } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Presets</Divider>
     <div>
@@ -41,6 +42,8 @@ export default () => (
     </div>
   </>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
index 685e6c9bfb..ee030cfe69 100644
--- a/components/tag/demo/control.md
+++ b/components/tag/demo/control.md
@@ -13,146 +13,135 @@ title:
 
 Generating a set of Tags by array, you can add and remove dynamically.
 
-```jsx
+```tsx
+import React, { useEffect, useRef, useState } from 'react';
 import { Tag, Input, Tooltip } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
+import type { InputRef } from 'antd';
 
-class EditableTagGroup extends React.Component {
-  state = {
-    tags: ['Unremovable', 'Tag 2', 'Tag 3'],
-    inputVisible: false,
-    inputValue: '',
-    editInputIndex: -1,
-    editInputValue: '',
-  };
+const App: React.FC = () => {
+  const [tags, setTags] = useState<string[]>(['Unremovable', 'Tag 2', 'Tag 3']);
+  const [inputVisible, setInputVisible] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [editInputIndex, setEditInputIndex] = useState(-1);
+  const [editInputValue, setEditInputValue] = useState('');
+  const inputRef = useRef<InputRef>(null);
+  const editInputRef = useRef<InputRef>(null);
 
-  handleClose = removedTag => {
-    const tags = this.state.tags.filter(tag => tag !== removedTag);
-    console.log(tags);
-    this.setState({ tags });
-  };
-
-  showInput = () => {
-    this.setState({ inputVisible: true }, () => this.input.focus());
-  };
-
-  handleInputChange = e => {
-    this.setState({ inputValue: e.target.value });
-  };
-
-  handleInputConfirm = () => {
-    const { inputValue } = this.state;
-    let { tags } = this.state;
-    if (inputValue && tags.indexOf(inputValue) === -1) {
-      tags = [...tags, inputValue];
+  useEffect(() => {
+    if (inputVisible) {
+      inputRef.current?.focus();
     }
-    console.log(tags);
-    this.setState({
-      tags,
-      inputVisible: false,
-      inputValue: '',
-    });
+  }, [inputVisible]);
+
+  useEffect(() => {
+    editInputRef.current?.focus();
+  }, [inputValue]);
+
+  const handleClose = (removedTag: string) => {
+    const newTags = tags.filter(tag => tag !== removedTag);
+    console.log(newTags);
+    setTags(newTags);
   };
 
-  handleEditInputChange = e => {
-    this.setState({ editInputValue: e.target.value });
+  const showInput = () => {
+    setInputVisible(true);
   };
 
-  handleEditInputConfirm = () => {
-    this.setState(({ tags, editInputIndex, editInputValue }) => {
-      const newTags = [...tags];
-      newTags[editInputIndex] = editInputValue;
-
-      return {
-        tags: newTags,
-        editInputIndex: -1,
-        editInputValue: '',
-      };
-    });
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
   };
 
-  saveInputRef = input => {
-    this.input = input;
+  const handleInputConfirm = () => {
+    if (inputValue && tags.indexOf(inputValue) === -1) {
+      setTags([...tags, inputValue]);
+    }
+    setInputVisible(false);
+    setInputValue('');
   };
 
-  saveEditInputRef = input => {
-    this.editInput = input;
+  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditInputValue(e.target.value);
   };
 
-  render() {
-    const { tags, inputVisible, inputValue, editInputIndex, editInputValue } = this.state;
-    return (
-      <>
-        {tags.map((tag, index) => {
-          if (editInputIndex === index) {
-            return (
-              <Input
-                ref={this.saveEditInputRef}
-                key={tag}
-                size="small"
-                className="tag-input"
-                value={editInputValue}
-                onChange={this.handleEditInputChange}
-                onBlur={this.handleEditInputConfirm}
-                onPressEnter={this.handleEditInputConfirm}
-              />
-            );
-          }
+  const handleEditInputConfirm = () => {
+    const newTags = [...tags];
+    newTags[editInputIndex] = editInputValue;
+    setTags(newTags);
+    setEditInputIndex(-1);
+    setInputValue('');
+  };
 
-          const isLongTag = tag.length > 20;
-
-          const tagElem = (
-            <Tag
-              className="edit-tag"
+  return (
+    <>
+      {tags.map((tag, index) => {
+        if (editInputIndex === index) {
+          return (
+            <Input
+              ref={editInputRef}
               key={tag}
-              closable={index !== 0}
-              onClose={() => this.handleClose(tag)}
-            >
-              <span
-                onDoubleClick={e => {
-                  if (index !== 0) {
-                    this.setState({ editInputIndex: index, editInputValue: tag }, () => {
-                      this.editInput.focus();
-                    });
-                    e.preventDefault();
-                  }
-                }}
-              >
-                {isLongTag ? `${tag.slice(0, 20)}...` : tag}
-              </span>
-            </Tag>
+              size="small"
+              className="tag-input"
+              value={editInputValue}
+              onChange={handleEditInputChange}
+              onBlur={handleEditInputConfirm}
+              onPressEnter={handleEditInputConfirm}
+            />
           );
-          return isLongTag ? (
-            <Tooltip title={tag} key={tag}>
-              {tagElem}
-            </Tooltip>
-          ) : (
-            tagElem
-          );
-        })}
-        {inputVisible && (
-          <Input
-            ref={this.saveInputRef}
-            type="text"
-            size="small"
-            className="tag-input"
-            value={inputValue}
-            onChange={this.handleInputChange}
-            onBlur={this.handleInputConfirm}
-            onPressEnter={this.handleInputConfirm}
-          />
-        )}
-        {!inputVisible && (
-          <Tag className="site-tag-plus" onClick={this.showInput}>
-            <PlusOutlined /> New Tag
-          </Tag>
-        )}
-      </>
-    );
-  }
-}
+        }
 
-export default () => <EditableTagGroup />;
+        const isLongTag = tag.length > 20;
+
+        const tagElem = (
+          <Tag
+            className="edit-tag"
+            key={tag}
+            closable={index !== 0}
+            onClose={() => handleClose(tag)}
+          >
+            <span
+              onDoubleClick={e => {
+                if (index !== 0) {
+                  setEditInputIndex(index);
+                  setEditInputValue(tag);
+                  e.preventDefault();
+                }
+              }}
+            >
+              {isLongTag ? `${tag.slice(0, 20)}...` : tag}
+            </span>
+          </Tag>
+        );
+        return isLongTag ? (
+          <Tooltip title={tag} key={tag}>
+            {tagElem}
+          </Tooltip>
+        ) : (
+          tagElem
+        );
+      })}
+      {inputVisible && (
+        <Input
+          ref={inputRef}
+          type="text"
+          size="small"
+          className="tag-input"
+          value={inputValue}
+          onChange={handleInputChange}
+          onBlur={handleInputConfirm}
+          onPressEnter={handleInputConfirm}
+        />
+      )}
+      {!inputVisible && (
+        <Tag className="site-tag-plus" onClick={showInput}>
+          <PlusOutlined /> New Tag
+        </Tag>
+      )}
+    </>
+  );
+};
+
+export default App;
 ```
 
 ```css
diff --git a/components/tag/demo/controlled.md b/components/tag/demo/controlled.md
index b5630a1291..ce2a8de95e 100644
--- a/components/tag/demo/controlled.md
+++ b/components/tag/demo/controlled.md
@@ -13,32 +13,25 @@ title:
 
 By using the `visible` prop, you can control the close state of Tag.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Tag, Button } from 'antd';
 
-class Demo extends React.Component {
-  state = {
-    visible: true,
-  };
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(true);
 
-  render() {
-    return (
-      <>
-        <Tag
-          closable
-          visible={this.state.visible}
-          onClose={() => this.setState({ visible: false })}
-        >
-          Movies
-        </Tag>
-        <br />
-        <Button size="small" onClick={() => this.setState({ visible: !this.state.visible })}>
-          Toggle
-        </Button>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Tag closable visible={visible} onClose={() => setVisible(false)}>
+        Movies
+      </Tag>
+      <br />
+      <Button size="small" onClick={() => setVisible(!visible)}>
+        Toggle
+      </Button>
+    </>
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tag/demo/customize.md b/components/tag/demo/customize.md
index 234987686e..f7f6e513b9 100644
--- a/components/tag/demo/customize.md
+++ b/components/tag/demo/customize.md
@@ -14,11 +14,12 @@ title:
 
 The close icon can be customized using `closeIcon`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tag } from 'antd';
 import { CloseCircleOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Tag closable closeIcon="关 闭">
       Tag1
@@ -28,4 +29,6 @@ export default () => (
     </Tag>
   </>
 );
+
+export default App;
 ```
diff --git a/components/tag/demo/icon.md b/components/tag/demo/icon.md
index 774f8d610c..d95dba5c24 100644
--- a/components/tag/demo/icon.md
+++ b/components/tag/demo/icon.md
@@ -17,7 +17,8 @@ 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 `Tag` rather than using the `icon` property.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tag } from 'antd';
 import {
   TwitterOutlined,
@@ -26,7 +27,7 @@ import {
   LinkedinOutlined,
 } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Tag icon={<TwitterOutlined />} color="#55acee">
       Twitter
@@ -42,4 +43,6 @@ export default () => (
     </Tag>
   </>
 );
+
+export default App;
 ```
diff --git a/components/tag/demo/status.md b/components/tag/demo/status.md
index f6fb298b63..a69cd9e53f 100644
--- a/components/tag/demo/status.md
+++ b/components/tag/demo/status.md
@@ -13,7 +13,8 @@ title:
 
 We preset five different colors, you can set color property such as `success`,`processing`,`error`,`default` and `warning` to indicate specific status.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tag, Divider } from 'antd';
 import {
   CheckCircleOutlined,
@@ -24,7 +25,7 @@ import {
   MinusCircleOutlined,
 } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Without icon</Divider>
     <div>
@@ -57,4 +58,6 @@ export default () => (
     </div>
   </>
 );
+
+export default App;
 ```
diff --git a/components/time-picker/demo/12hours.md b/components/time-picker/demo/12hours.md
index 807c598372..e5eea30757 100644
--- a/components/time-picker/demo/12hours.md
+++ b/components/time-picker/demo/12hours.md
@@ -13,18 +13,22 @@ title:
 
 TimePicker of 12 hours format, with default format `h:mm:ss a`.
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
+import type { Moment } from 'moment';
 
-function onChange(time, timeString) {
+const onChange = (time: Moment, timeString: string) => {
   console.log(time, timeString);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <>
     <TimePicker use12Hours onChange={onChange} />
     <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} style={{ width: 140 }} />
     <TimePicker use12Hours format="h:mm a" onChange={onChange} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md
index 30e98d13a2..6bfdf7c771 100644
--- a/components/time-picker/demo/addon.md
+++ b/components/time-picker/demo/addon.md
@@ -13,32 +13,25 @@ title:
 
 Render addon contents to time picker panel's bottom.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { TimePicker, Button } from 'antd';
 
-class TimePickerAddonDemo extends React.Component {
-  state = { open: false };
+const App: React.FC = () => {
+  const [open, setOpen] = useState(false);
 
-  handleOpenChange = open => {
-    this.setState({ open });
-  };
+  return (
+    <TimePicker
+      open={open}
+      onOpenChange={setOpen}
+      renderExtraFooter={() => (
+        <Button size="small" type="primary" onClick={() => setOpen(false)}>
+          OK
+        </Button>
+      )}
+    />
+  );
+};
 
-  handleClose = () => this.setState({ open: false });
-
-  render() {
-    return (
-      <TimePicker
-        open={this.state.open}
-        onOpenChange={this.handleOpenChange}
-        renderExtraFooter={() => (
-          <Button size="small" type="primary" onClick={this.handleClose}>
-            OK
-          </Button>
-        )}
-      />
-    );
-  }
-}
-
-export default () => <TimePickerAddonDemo />;
+export default App;
 ```
diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md
index 2a8da1f9a7..6cc0f99368 100644
--- a/components/time-picker/demo/basic.md
+++ b/components/time-picker/demo/basic.md
@@ -13,15 +13,19 @@ title:
 
 Click `TimePicker`, and then we could select or input a time in panel.
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
 import moment from 'moment';
+import type { Moment } from 'moment';
 
-function onChange(time, timeString) {
+const onChange = (time: Moment, timeString: string) => {
   console.log(time, timeString);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
 );
+
+export default App;
 ```
diff --git a/components/time-picker/demo/bordered.md b/components/time-picker/demo/bordered.md
index c51c4b4a8e..0d16d0797c 100644
--- a/components/time-picker/demo/bordered.md
+++ b/components/time-picker/demo/bordered.md
@@ -13,15 +13,18 @@ title:
 
 Bordered-less style component.
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
 
 const { RangePicker } = TimePicker;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <TimePicker bordered={false} />
     <RangePicker bordered={false} />
   </>
 );
+
+export default App;
 ```
diff --git a/components/time-picker/demo/colored-popup.md b/components/time-picker/demo/colored-popup.md
index d97c3cee26..8727d5b92f 100644
--- a/components/time-picker/demo/colored-popup.md
+++ b/components/time-picker/demo/colored-popup.md
@@ -14,21 +14,25 @@ debug: true
 
 Passing custom class to `TimePicker` popup
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
 import moment from 'moment';
+import type { Moment } from 'moment';
 
-const onChange = (time, timeString) => {
+const onChange = (time: Moment, timeString: string) => {
   console.log(time, timeString);
 };
 
-export default () => (
+const App: React.FC = () => (
   <TimePicker
     onChange={onChange}
     defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
     popupClassName="myCustomClassName"
   />
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md
index 817579af6c..d4a900e514 100644
--- a/components/time-picker/demo/disabled.md
+++ b/components/time-picker/demo/disabled.md
@@ -13,9 +13,12 @@ title:
 
 A disabled state of the `TimePicker`.
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
-export default () => <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />;
+const App: React.FC = () => <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />;
+
+export default App;
 ```
diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md
index dc29f5b659..a79ac3239a 100644
--- a/components/time-picker/demo/hide-column.md
+++ b/components/time-picker/demo/hide-column.md
@@ -13,11 +13,14 @@ TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的
 
 While part of `format` is omitted, the corresponding column in panel will disappear, too.
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
 const format = 'HH:mm';
 
-export default () => <TimePicker defaultValue={moment('12:08', format)} format={format} />;
+const App: React.FC = () => <TimePicker defaultValue={moment('12:08', format)} format={format} />;
+
+export default App;
 ```
diff --git a/components/time-picker/demo/interval-options.md b/components/time-picker/demo/interval-options.md
index 9fda91e959..a81d1bb4f9 100644
--- a/components/time-picker/demo/interval-options.md
+++ b/components/time-picker/demo/interval-options.md
@@ -13,8 +13,11 @@ title:
 
 Show stepped options by `hourStep` `minuteStep` `secondStep`.
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
 
-export default () => <TimePicker minuteStep={15} secondStep={10} />;
+const App: React.FC = () => <TimePicker minuteStep={15} secondStep={10} />;
+
+export default App;
 ```
diff --git a/components/time-picker/demo/range-picker.md b/components/time-picker/demo/range-picker.md
index 7d1a188925..1c2a126fdc 100644
--- a/components/time-picker/demo/range-picker.md
+++ b/components/time-picker/demo/range-picker.md
@@ -13,8 +13,11 @@ title:
 
 Use time range picker with `TimePicker.RangePicker`.
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
 
-export default () => <TimePicker.RangePicker />;
+const App: React.FC = () => <TimePicker.RangePicker />;
+
+export default App;
 ```
diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md
index 34d1c98987..c0f9bddb05 100644
--- a/components/time-picker/demo/size.md
+++ b/components/time-picker/demo/size.md
@@ -13,15 +13,18 @@ title:
 
 The input box comes in three sizes. large is used in the form, while the medium size is the default.
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
   </>
 );
+
+export default App;
 ```
diff --git a/components/time-picker/demo/status.md b/components/time-picker/demo/status.md
index a30d164dc4..7b928ee11d 100644
--- a/components/time-picker/demo/status.md
+++ b/components/time-picker/demo/status.md
@@ -15,9 +15,10 @@ title:
 Add status to TimePicker with `status`, which could be `error` or `warning`.
 
 ```tsx
+import React from 'react';
 import { TimePicker, Space } from 'antd';
 
-const Status: React.FC = () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <TimePicker status="error" />
     <TimePicker status="warning" />
@@ -26,5 +27,5 @@ const Status: React.FC = () => (
   </Space>
 );
 
-export default () => <Status />;
+export default App;
 ```
diff --git a/components/time-picker/demo/suffix.md b/components/time-picker/demo/suffix.md
index ca226c4ddc..58141bfaaa 100644
--- a/components/time-picker/demo/suffix.md
+++ b/components/time-picker/demo/suffix.md
@@ -14,20 +14,24 @@ title:
 
 Click `TimePicker`, and then we could select or input a time in panel.
 
-```jsx
+```tsx
+import React from 'react';
 import { TimePicker } from 'antd';
 import moment from 'moment';
 import { SmileOutlined } from '@ant-design/icons';
+import type { Moment } from 'moment';
 
-function onChange(time, timeString) {
+const onChange = (time: Moment, timeString: string) => {
   console.log(time, timeString);
-}
+};
 
-export default () => (
+const App: React.FC = () => (
   <TimePicker
     suffixIcon={<SmileOutlined />}
     onChange={onChange}
     defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
   />
 );
+
+export default App;
 ```
diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md
index 00e43758b6..f1f80bd3cd 100644
--- a/components/time-picker/demo/value.md
+++ b/components/time-picker/demo/value.md
@@ -13,19 +13,20 @@ value 和 onChange 需要配合使用。
 
 `value` and `onChange` should be used together,
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { TimePicker } from 'antd';
+import type { Moment } from 'moment';
 
-const Demo = () => {
-  const [value, setValue] = useState(null);
+const App: React.FC = () => {
+  const [value, setValue] = useState<Moment | null>(null);
 
-  const onChange = time => {
+  const onChange = (time: Moment) => {
     setValue(time);
   };
 
   return <TimePicker value={value} onChange={onChange} />;
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/timeline/demo/alternate.md b/components/timeline/demo/alternate.md
index 15412710a9..c1927f2f43 100644
--- a/components/timeline/demo/alternate.md
+++ b/components/timeline/demo/alternate.md
@@ -13,11 +13,12 @@ title:
 
 Alternate timeline.
 
-```jsx
+```tsx
+import React from 'react';
 import { Timeline } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Timeline mode="alternate">
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
@@ -33,4 +34,6 @@ export default () => (
     </Timeline.Item>
   </Timeline>
 );
+
+export default App;
 ```
diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md
index 9f490c911d..5d9d326f5a 100644
--- a/components/timeline/demo/basic.md
+++ b/components/timeline/demo/basic.md
@@ -13,10 +13,11 @@ title:
 
 Basic timeline.
 
-```jsx
+```tsx
+import React from 'react';
 import { Timeline } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Timeline>
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
@@ -24,4 +25,6 @@ export default () => (
     <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
   </Timeline>
 );
+
+export default App;
 ```
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
index 06b56f6219..a1335f4941 100644
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@@ -13,11 +13,12 @@ title:
 
 Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status, `gray` for unfinished or disabled status.
 
-```jsx
+```tsx
+import React from 'react';
 import { Timeline } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Timeline>
     <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
@@ -46,4 +47,6 @@ export default () => (
     </Timeline.Item>
   </Timeline>
 );
+
+export default App;
 ```
diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md
index 4ca3c2c921..4fc05cefdb 100644
--- a/components/timeline/demo/custom.md
+++ b/components/timeline/demo/custom.md
@@ -13,11 +13,12 @@ title:
 
 Set a node as an icon or other custom element.
 
-```jsx
+```tsx
+import React from 'react';
 import { Timeline } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Timeline>
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
@@ -27,6 +28,8 @@ export default () => (
     <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
   </Timeline>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/timeline/demo/label.md b/components/timeline/demo/label.md
index 53319ef7e1..6b0d47cf8c 100644
--- a/components/timeline/demo/label.md
+++ b/components/timeline/demo/label.md
@@ -13,14 +13,15 @@ title:
 
 Use `label` show time alone.
 
-```jsx
-import { useState } from 'react';
+```tsx
+import React, { useState } from 'react';
 import { Timeline, Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
-function TimelimeLabelDemo() {
-  const [mode, setMode] = useState('left');
+const App: React.FC = () => {
+  const [mode, setMode] = useState<'left' | 'alternate' | 'right'>('left');
 
-  const onChange = e => {
+  const onChange = (e: RadioChangeEvent) => {
     setMode(e.target.value);
   };
 
@@ -45,7 +46,7 @@ function TimelimeLabelDemo() {
       </Timeline>
     </>
   );
-}
+};
 
-export default () => <TimelimeLabelDemo />;
+export default App;
 ```
diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md
index 7151d54f20..fd7012bfb7 100644
--- a/components/timeline/demo/pending.md
+++ b/components/timeline/demo/pending.md
@@ -13,33 +13,30 @@ title:
 
 When the timeline is incomplete and ongoing, put a ghost node at last. Set `pending` as truthy value to enable displaying pending item. You can customize the pending content by passing a React Element. Meanwhile, `pendingDot={a React Element}` is used to customize the dot of the pending item. `reverse={true}` is used for reversing nodes.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Timeline, Button } from 'antd';
 
-class PendingTimeLine extends React.Component {
-  state = {
-    reverse: false,
+const App: React.FC = () => {
+  const [reverse, setReverse] = useState(false);
+
+  const handleClick = () => {
+    setReverse(!reverse);
   };
 
-  handleClick = () => {
-    this.setState({ reverse: !this.state.reverse });
-  };
+  return (
+    <div>
+      <Timeline pending="Recording..." reverse={reverse}>
+        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+        <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
+        <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
+      </Timeline>
+      <Button type="primary" style={{ marginTop: 16 }} onClick={handleClick}>
+        Toggle Reverse
+      </Button>
+    </div>
+  );
+};
 
-  render() {
-    return (
-      <div>
-        <Timeline pending="Recording..." reverse={this.state.reverse}>
-          <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
-          <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
-          <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
-        </Timeline>
-        <Button type="primary" style={{ marginTop: 16 }} onClick={this.handleClick}>
-          Toggle Reverse
-        </Button>
-      </div>
-    );
-  }
-}
-
-export default () => <PendingTimeLine />;
+export default App;
 ```
diff --git a/components/timeline/demo/right.md b/components/timeline/demo/right.md
index 4360661ae4..f533cd382b 100644
--- a/components/timeline/demo/right.md
+++ b/components/timeline/demo/right.md
@@ -13,11 +13,12 @@ title:
 
 Right alternate timeline.
 
-```jsx
+```tsx
+import React from 'react';
 import { Timeline } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Timeline mode="right">
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
@@ -27,4 +28,6 @@ export default () => (
     <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
   </Timeline>
 );
+
+export default App;
 ```
diff --git a/components/tooltip/demo/arrow-point-at-center.md b/components/tooltip/demo/arrow-point-at-center.md
index 67c077506c..938abc5993 100644
--- a/components/tooltip/demo/arrow-point-at-center.md
+++ b/components/tooltip/demo/arrow-point-at-center.md
@@ -13,10 +13,11 @@ title:
 
 By specifying `arrowPointAtCenter` prop, the arrow will point to the center of the target element.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tooltip, Button } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Tooltip placement="topLeft" title="Prompt Text">
       <Button>Align edge / 边缘对齐</Button>
@@ -26,4 +27,6 @@ export default () => (
     </Tooltip>
   </>
 );
+
+export default App;
 ```
diff --git a/components/tooltip/demo/auto-adjust-overflow.md b/components/tooltip/demo/auto-adjust-overflow.md
index 6114dc13df..61da6db937 100644
--- a/components/tooltip/demo/auto-adjust-overflow.md
+++ b/components/tooltip/demo/auto-adjust-overflow.md
@@ -14,22 +14,23 @@ debug: true
 
 Adjust placement automatically when tooltip is invisible.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tooltip, Button } from 'antd';
 
-const wrapStyles = {
+const wrapStyles: React.CSSProperties = {
   overflow: 'hidden',
   position: 'relative',
   padding: '24px',
   border: '1px solid #e9e9e9',
 };
 
-export default () => (
+const App: React.FC = () => (
   <div style={wrapStyles}>
     <Tooltip
       placement="left"
       title="Prompt Text"
-      getPopupContainer={trigger => trigger.parentElement}
+      getPopupContainer={trigger => trigger.parentElement!}
     >
       <Button>Adjust automatically / 自动调整</Button>
     </Tooltip>
@@ -37,11 +38,13 @@ export default () => (
     <Tooltip
       placement="left"
       title="Prompt Text"
-      getPopupContainer={trigger => trigger.parentElement}
+      getPopupContainer={trigger => trigger.parentElement!}
       autoAdjustOverflow={false}
     >
       <Button>Ignore / 不处理</Button>
     </Tooltip>
   </div>
 );
+
+export default App;
 ```
diff --git a/components/tooltip/demo/basic.md b/components/tooltip/demo/basic.md
index d38d7d970f..33a5f508e5 100644
--- a/components/tooltip/demo/basic.md
+++ b/components/tooltip/demo/basic.md
@@ -13,12 +13,15 @@ title:
 
 The simplest usage.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tooltip } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Tooltip title="prompt text">
     <span>Tooltip will show on mouse enter.</span>
   </Tooltip>
 );
+
+export default App;
 ```
diff --git a/components/tooltip/demo/colorful.md b/components/tooltip/demo/colorful.md
index ee1ad02713..9d4f697736 100644
--- a/components/tooltip/demo/colorful.md
+++ b/components/tooltip/demo/colorful.md
@@ -13,7 +13,8 @@ title:
 
 We preset a series of colorful Tooltip styles for use in different situations.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tooltip, Button, Divider } from 'antd';
 
 const colors = [
@@ -33,7 +34,7 @@ const colors = [
 ];
 const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Divider orientation="left">Presets</Divider>
     <div>
@@ -53,6 +54,8 @@ export default () => (
     </div>
   </>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/tooltip/demo/destroy-tooltip-on-hide.md b/components/tooltip/demo/destroy-tooltip-on-hide.md
index 4d1bdb7afc..14a11f2639 100644
--- a/components/tooltip/demo/destroy-tooltip-on-hide.md
+++ b/components/tooltip/demo/destroy-tooltip-on-hide.md
@@ -14,12 +14,15 @@ title:
 
 Setting `destroyTooltipOnHide` to control whether destroy dom node of tooltip when hidden.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tooltip } from 'antd';
 
-export default () => (
+const App: React.FC = () => (
   <Tooltip destroyTooltipOnHide={{ keepParent: false }} title="prompt text">
     <span>Tooltip will destroy when hidden.</span>
   </Tooltip>
 );
+
+export default App;
 ```
diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md
index d201b41a6c..c1453405b1 100644
--- a/components/tooltip/demo/placement.md
+++ b/components/tooltip/demo/placement.md
@@ -13,14 +13,15 @@ title:
 
 There are 12 placement options available.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tooltip, Button } from 'antd';
 
 const text = <span>prompt text</span>;
 
 const buttonWidth = 70;
 
-export default () => (
+const App: React.FC = () => (
   <div className="demo">
     <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
       <Tooltip placement="topLeft" title={text}>
@@ -68,6 +69,8 @@ export default () => (
     </div>
   </div>
 );
+
+export default App;
 ```
 
 <style>
diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
index 189ca698cc..b24c2f7675 100644
--- a/components/tooltip/style/index.less
+++ b/components/tooltip/style/index.less
@@ -65,7 +65,7 @@
     text-decoration: none;
     word-wrap: break-word;
     background-color: @tooltip-bg;
-    border-radius: @tooltip-border-radius;
+    border-radius: @border-radius-base;
     box-shadow: @box-shadow-base;
   }
 
diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md
index a2317385a7..886c04398e 100644
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@@ -15,22 +15,25 @@ Advanced Usage of Transfer.
 
 You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.
 
-```jsx
+```tsx
+import React, { useState, useEffect } from 'react';
 import { Transfer, Button } from 'antd';
+import type { TransferDirection, TransferListProps } from 'antd/es/transfer';
 
-class App extends React.Component {
-  state = {
-    mockData: [],
-    targetKeys: [],
-  };
+interface RecordType {
+  key: string;
+  title: string;
+  description: string;
+  chosen: boolean;
+}
 
-  componentDidMount() {
-    this.getMock();
-  }
+const App: React.FC = () => {
+  const [mockData, setMockData] = useState<RecordType[]>([]);
+  const [targetKeys, setTargetKeys] = useState<string[]>([]);
 
-  getMock = () => {
-    const targetKeys = [];
-    const mockData = [];
+  const getMock = () => {
+    const tempTargetKeys = [];
+    const tempMockData = [];
     for (let i = 0; i < 20; i++) {
       const data = {
         key: i.toString(),
@@ -39,50 +42,60 @@ class App extends React.Component {
         chosen: Math.random() * 2 > 1,
       };
       if (data.chosen) {
-        targetKeys.push(data.key);
+        tempTargetKeys.push(data.key);
       }
-      mockData.push(data);
+      tempMockData.push(data);
     }
-    this.setState({ mockData, targetKeys });
+    setMockData(tempMockData);
+    setTargetKeys(tempTargetKeys);
   };
 
-  handleChange = targetKeys => {
-    this.setState({ targetKeys });
+  useEffect(() => {
+    getMock();
+  }, []);
+
+  const handleChange = (newTargetKeys: string[]) => {
+    setTargetKeys(newTargetKeys);
   };
 
-  renderFooter = (props, { direction }) => {
+  const renderFooter = (
+    _: TransferListProps<any>,
+    {
+      direction,
+    }: {
+      direction: TransferDirection;
+    },
+  ) => {
     if (direction === 'left') {
       return (
-        <Button size="small" style={{ float: 'left', margin: 5 }} onClick={this.getMock}>
+        <Button size="small" style={{ float: 'left', margin: 5 }} onClick={getMock}>
           Left button reload
         </Button>
       );
     }
     return (
-      <Button size="small" style={{ float: 'right', margin: 5 }} onClick={this.getMock}>
+      <Button size="small" style={{ float: 'right', margin: 5 }} onClick={getMock}>
         Right button reload
       </Button>
     );
   };
 
-  render() {
-    return (
-      <Transfer
-        dataSource={this.state.mockData}
-        showSearch
-        listStyle={{
-          width: 250,
-          height: 300,
-        }}
-        operations={['to right', 'to left']}
-        targetKeys={this.state.targetKeys}
-        onChange={this.handleChange}
-        render={item => `${item.title}-${item.description}`}
-        footer={this.renderFooter}
-      />
-    );
-  }
-}
+  return (
+    <Transfer
+      dataSource={mockData}
+      showSearch
+      listStyle={{
+        width: 250,
+        height: 300,
+      }}
+      operations={['to right', 'to left']}
+      targetKeys={targetKeys}
+      onChange={handleChange}
+      render={item => `${item.title}-${item.description}`}
+      footer={renderFooter}
+    />
+  );
+};
 
 export default App;
 ```
diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md
index 70a2586c77..d34e56dc35 100644
--- a/components/transfer/demo/basic.md
+++ b/components/transfer/demo/basic.md
@@ -13,38 +13,43 @@ title:
 
 The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and some callback functions.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Transfer } from 'antd';
+import type { TransferDirection } from 'antd/es/transfer';
 
-const mockData = [];
-for (let i = 0; i < 20; i++) {
-  mockData.push({
-    key: i.toString(),
-    title: `content${i + 1}`,
-    description: `description of content${i + 1}`,
-  });
+interface RecordType {
+  key: string;
+  title: string;
+  description: string;
 }
 
-const initialTargetKeys = mockData.filter(item => +item.key > 10).map(item => item.key);
+const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
+  key: i.toString(),
+  title: `content${i + 1}`,
+  description: `description of content${i + 1}`,
+}));
 
-const App = () => {
+const initialTargetKeys = mockData.filter(item => Number(item.key) > 10).map(item => item.key);
+
+const App: React.FC = () => {
   const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const onChange = (nextTargetKeys, direction, moveKeys) => {
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  const onChange = (nextTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
     console.log('targetKeys:', nextTargetKeys);
     console.log('direction:', direction);
     console.log('moveKeys:', moveKeys);
     setTargetKeys(nextTargetKeys);
   };
 
-  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  const onSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
     console.log('sourceSelectedKeys:', sourceSelectedKeys);
     console.log('targetSelectedKeys:', targetSelectedKeys);
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
   };
 
-  const onScroll = (direction, e) => {
+  const onScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => {
     console.log('direction:', direction);
     console.log('target:', e.target);
   };
diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md
index 698c6f200f..c8f95a7ed7 100644
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@@ -13,22 +13,25 @@ title:
 
 Custom each Transfer Item, and in this way you can render a complex datasource.
 
-```jsx
+```tsx
+import React, { useEffect, useState } from 'react';
 import { Transfer } from 'antd';
+import type { TransferDirection } from 'antd/es/transfer';
 
-class App extends React.Component {
-  state = {
-    mockData: [],
-    targetKeys: [],
-  };
+interface RecordType {
+  key: string;
+  title: string;
+  description: string;
+  chosen: boolean;
+}
 
-  componentDidMount() {
-    this.getMock();
-  }
+const App: React.FC = () => {
+  const [mockData, setMockData] = useState<RecordType[]>([]);
+  const [targetKeys, setTargetKeys] = useState<string[]>([]);
 
-  getMock = () => {
-    const targetKeys = [];
-    const mockData = [];
+  const getMock = () => {
+    const tempTargetKeys = [];
+    const tempMockData = [];
     for (let i = 0; i < 20; i++) {
       const data = {
         key: i.toString(),
@@ -37,19 +40,28 @@ class App extends React.Component {
         chosen: Math.random() * 2 > 1,
       };
       if (data.chosen) {
-        targetKeys.push(data.key);
+        tempTargetKeys.push(data.key);
       }
-      mockData.push(data);
+      tempMockData.push(data);
     }
-    this.setState({ mockData, targetKeys });
+    setMockData(tempMockData);
+    setTargetKeys(tempTargetKeys);
   };
 
-  handleChange = (targetKeys, direction, moveKeys) => {
-    console.log(targetKeys, direction, moveKeys);
-    this.setState({ targetKeys });
+  useEffect(() => {
+    getMock();
+  }, []);
+
+  const handleChange = (
+    newTargetKeys: string[],
+    direction: TransferDirection,
+    moveKeys: string[],
+  ) => {
+    console.log(newTargetKeys, direction, moveKeys);
+    setTargetKeys(newTargetKeys);
   };
 
-  renderItem = item => {
+  const renderItem = (item: RecordType) => {
     const customLabel = (
       <span className="custom-item">
         {item.title} - {item.description}
@@ -62,21 +74,19 @@ class App extends React.Component {
     };
   };
 
-  render() {
-    return (
-      <Transfer
-        dataSource={this.state.mockData}
-        listStyle={{
-          width: 300,
-          height: 300,
-        }}
-        targetKeys={this.state.targetKeys}
-        onChange={this.handleChange}
-        render={this.renderItem}
-      />
-    );
-  }
-}
+  return (
+    <Transfer
+      dataSource={mockData}
+      listStyle={{
+        width: 300,
+        height: 300,
+      }}
+      targetKeys={targetKeys}
+      onChange={handleChange}
+      render={renderItem}
+    />
+  );
+};
 
 export default App;
 ```
diff --git a/components/transfer/demo/custom-select-all-labels.md b/components/transfer/demo/custom-select-all-labels.md
index dd133c6877..5bf14f6f43 100644
--- a/components/transfer/demo/custom-select-all-labels.md
+++ b/components/transfer/demo/custom-select-all-labels.md
@@ -14,27 +14,31 @@ title:
 
 Custom the labels for select all checkboxs.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Transfer } from 'antd';
+import type { SelectAllLabel } from 'antd/es/transfer';
 
-const mockData = [];
-for (let i = 0; i < 10; i++) {
-  mockData.push({
-    key: i.toString(),
-    title: `content${i + 1}`,
-    description: `description of content${i + 1}`,
-  });
+interface RecordType {
+  key: string;
+  title: string;
+  description: string;
 }
 
-const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
+const mockData: RecordType[] = Array.from({ length: 10 }).map((_, i) => ({
+  key: i.toString(),
+  title: `content${i + 1}`,
+  description: `description of content${i + 1}`,
+}));
 
-const selectAllLabels = [
+const oriTargetKeys = mockData.filter(item => Number(item.key) % 3 > 1).map(item => item.key);
+
+const selectAllLabels: SelectAllLabel[] = [
   'Select All',
   ({ selectedCount, totalCount }) => `${selectedCount}/${totalCount}`,
 ];
 
-const App = () => {
+const App: React.FC = () => {
   const [targetKeys, setTargetKeys] = useState(oriTargetKeys);
   return (
     <Transfer
diff --git a/components/transfer/demo/large-data.md b/components/transfer/demo/large-data.md
index 1d9eb1bd9c..527259ba21 100644
--- a/components/transfer/demo/large-data.md
+++ b/components/transfer/demo/large-data.md
@@ -13,15 +13,24 @@ title:
 
 large count of items with pagination.
 
-```jsx
+```tsx
+import React, { useState, useEffect } from 'react';
 import { Transfer, Switch } from 'antd';
+import type { TransferDirection } from 'antd/es/transfer';
 
-const App = () => {
-  const [oneWay, setOneWay] = React.useState(false);
-  const [mockData, setMockData] = React.useState([]);
-  const [targetKeys, setTargetKeys] = React.useState([]);
+interface RecordType {
+  key: string;
+  title: string;
+  description: string;
+  chosen: boolean;
+}
 
-  React.useEffect(() => {
+const App: React.FC = () => {
+  const [oneWay, setOneWay] = useState(false);
+  const [mockData, setMockData] = useState<RecordType[]>([]);
+  const [targetKeys, setTargetKeys] = useState<string[]>([]);
+
+  useEffect(() => {
     const newTargetKeys = [];
     const newMockData = [];
     for (let i = 0; i < 2000; i++) {
@@ -41,7 +50,7 @@ const App = () => {
     setMockData(newMockData);
   }, []);
 
-  const onChange = (newTargetKeys, direction, moveKeys) => {
+  const onChange = (newTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
     console.log(newTargetKeys, direction, moveKeys);
     setTargetKeys(newTargetKeys);
   };
diff --git a/components/transfer/demo/oneWay.md b/components/transfer/demo/oneWay.md
index f1c737faae..cc9185b086 100644
--- a/components/transfer/demo/oneWay.md
+++ b/components/transfer/demo/oneWay.md
@@ -13,79 +13,87 @@ title:
 
 Use `oneWay` to makes Transfer to one way style.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Transfer, Switch } from 'antd';
+import type { TransferDirection } from 'antd/es/transfer';
 
-const mockData = [];
-for (let i = 0; i < 20; i++) {
-  mockData.push({
-    key: i.toString(),
-    title: `content${i + 1}`,
-    description: `description of content${i + 1}`,
-    disabled: i % 3 < 1,
-  });
+interface RecordType {
+  key: string;
+  title: string;
+  description: string;
+  disabled: boolean;
 }
 
-const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
+const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
+  key: i.toString(),
+  title: `content${i + 1}`,
+  description: `description of content${i + 1}`,
+  disabled: i % 3 < 1,
+}));
 
-class App extends React.Component {
-  state = {
-    targetKeys: oriTargetKeys,
-    selectedKeys: [],
-    disabled: false,
-  };
+const oriTargetKeys = mockData.filter(item => Number(item.key) % 3 > 1).map(item => item.key);
 
-  handleChange = (nextTargetKeys, direction, moveKeys) => {
-    this.setState({ targetKeys: nextTargetKeys });
+const App: React.FC = () => {
+  const [targetKeys, setTargetKeys] = useState<string[]>(oriTargetKeys);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [disabled, setDisabled] = useState(false);
 
-    console.log('targetKeys: ', nextTargetKeys);
+  const handleChange = (
+    newTargetKeys: string[],
+    direction: TransferDirection,
+    moveKeys: string[],
+  ) => {
+    setTargetKeys(newTargetKeys);
+
+    console.log('targetKeys: ', newTargetKeys);
     console.log('direction: ', direction);
     console.log('moveKeys: ', moveKeys);
   };
 
-  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
-    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
+  const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
+    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
 
     console.log('sourceSelectedKeys: ', sourceSelectedKeys);
     console.log('targetSelectedKeys: ', targetSelectedKeys);
   };
 
-  handleScroll = (direction, e) => {
+  const handleScroll = (
+    direction: TransferDirection,
+    e: React.SyntheticEvent<HTMLUListElement, Event>,
+  ) => {
     console.log('direction:', direction);
     console.log('target:', e.target);
   };
 
-  handleDisable = disabled => {
-    this.setState({ disabled });
+  const handleDisable = (checked: boolean) => {
+    setDisabled(checked);
   };
 
-  render() {
-    const { targetKeys, selectedKeys, disabled } = this.state;
-    return (
-      <>
-        <Transfer
-          dataSource={mockData}
-          titles={['Source', 'Target']}
-          targetKeys={targetKeys}
-          selectedKeys={selectedKeys}
-          onChange={this.handleChange}
-          onSelectChange={this.handleSelectChange}
-          onScroll={this.handleScroll}
-          render={item => item.title}
-          disabled={disabled}
-          oneWay
-          style={{ marginBottom: 16 }}
-        />
-        <Switch
-          unCheckedChildren="disabled"
-          checkedChildren="disabled"
-          checked={disabled}
-          onChange={this.handleDisable}
-        />
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Transfer
+        dataSource={mockData}
+        titles={['Source', 'Target']}
+        targetKeys={targetKeys}
+        selectedKeys={selectedKeys}
+        onChange={handleChange}
+        onSelectChange={handleSelectChange}
+        onScroll={handleScroll}
+        render={item => item.title}
+        disabled={disabled}
+        oneWay
+        style={{ marginBottom: 16 }}
+      />
+      <Switch
+        unCheckedChildren="disabled"
+        checkedChildren="disabled"
+        checked={disabled}
+        onChange={handleDisable}
+      />
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md
index a9f418142e..3fd336cb5f 100644
--- a/components/transfer/demo/search.md
+++ b/components/transfer/demo/search.md
@@ -13,22 +13,25 @@ title:
 
 Transfer with a search box.
 
-```jsx
+```tsx
+import React, { useState, useEffect } from 'react';
 import { Transfer } from 'antd';
+import type { TransferDirection } from 'antd/es/transfer';
 
-class App extends React.Component {
-  state = {
-    mockData: [],
-    targetKeys: [],
-  };
+interface RecordType {
+  key: string;
+  title: string;
+  description: string;
+  chosen: boolean;
+}
 
-  componentDidMount() {
-    this.getMock();
-  }
+const App: React.FC = () => {
+  const [mockData, setMockData] = useState<RecordType[]>([]);
+  const [targetKeys, setTargetKeys] = useState<string[]>([]);
 
-  getMock = () => {
-    const targetKeys = [];
-    const mockData = [];
+  const getMock = () => {
+    const tempTargetKeys = [];
+    const tempMockData = [];
     for (let i = 0; i < 20; i++) {
       const data = {
         key: i.toString(),
@@ -37,37 +40,41 @@ class App extends React.Component {
         chosen: Math.random() * 2 > 1,
       };
       if (data.chosen) {
-        targetKeys.push(data.key);
+        tempTargetKeys.push(data.key);
       }
-      mockData.push(data);
+      tempMockData.push(data);
     }
-    this.setState({ mockData, targetKeys });
+    setMockData(tempMockData);
+    setTargetKeys(tempTargetKeys);
   };
 
-  filterOption = (inputValue, option) => option.description.indexOf(inputValue) > -1;
+  useEffect(() => {
+    getMock();
+  }, []);
 
-  handleChange = targetKeys => {
-    this.setState({ targetKeys });
+  const filterOption = (inputValue: string, option: RecordType) =>
+    option.description.indexOf(inputValue) > -1;
+
+  const handleChange = (newTargetKeys: string[]) => {
+    setTargetKeys(newTargetKeys);
   };
 
-  handleSearch = (dir, value) => {
+  const handleSearch = (dir: TransferDirection, value: string) => {
     console.log('search:', dir, value);
   };
 
-  render() {
-    return (
-      <Transfer
-        dataSource={this.state.mockData}
-        showSearch
-        filterOption={this.filterOption}
-        targetKeys={this.state.targetKeys}
-        onChange={this.handleChange}
-        onSearch={this.handleSearch}
-        render={item => item.title}
-      />
-    );
-  }
-}
+  return (
+    <Transfer
+      dataSource={mockData}
+      showSearch
+      filterOption={filterOption}
+      targetKeys={targetKeys}
+      onChange={handleChange}
+      onSearch={handleSearch}
+      render={item => item.title}
+    />
+  );
+};
 
 export default App;
 ```
diff --git a/components/transfer/demo/status.md b/components/transfer/demo/status.md
index ff3483edcf..35fd63bdff 100644
--- a/components/transfer/demo/status.md
+++ b/components/transfer/demo/status.md
@@ -14,16 +14,16 @@ title:
 
 Add status to Transfer with `status`, which could be `error` or `warning`.
 
-```jsx
+```tsx
 import React from 'react';
 import { Transfer, Space } from 'antd';
 
-const Status = () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <Transfer status="error" />
     <Transfer status="warning" showSearch />
   </Space>
 );
 
-export default () => <Status />;
+export default App;
 ```
diff --git a/components/transfer/demo/table-transfer.md b/components/transfer/demo/table-transfer.md
index a7cd5c3f00..7db9b1d719 100644
--- a/components/transfer/demo/table-transfer.md
+++ b/components/transfer/demo/table-transfer.md
@@ -13,12 +13,35 @@ title:
 
 Customize render list with Table component.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Transfer, Switch, Table, Tag } from 'antd';
 import difference from 'lodash/difference';
+import type { TransferItem, TransferProps } from 'antd/es/transfer';
+import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
+
+interface RecordType {
+  key: string;
+  title: string;
+  description: string;
+  disabled: boolean;
+  tag: string;
+}
+
+interface DataType {
+  title: string;
+  tag: string;
+  description: string;
+}
+
+interface TableTransferProps extends TransferProps<TransferItem> {
+  dataSource: DataType[];
+  leftColumns: ColumnsType<DataType>;
+  rightColumns: ColumnsType<DataType>;
+}
 
 // Customize Table Transfer
-const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
+const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransferProps) => (
   <Transfer {...restProps}>
     {({
       direction,
@@ -30,7 +53,7 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
     }) => {
       const columns = direction === 'left' ? leftColumns : rightColumns;
 
-      const rowSelection = {
+      const rowSelection: TableRowSelection<TransferItem> = {
         getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
         onSelectAll(selected, selectedRows) {
           const treeSelectedKeys = selectedRows
@@ -39,10 +62,10 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
           const diffKeys = selected
             ? difference(treeSelectedKeys, listSelectedKeys)
             : difference(listSelectedKeys, treeSelectedKeys);
-          onItemSelectAll(diffKeys, selected);
+          onItemSelectAll(diffKeys as string[], selected);
         },
         onSelect({ key }, selected) {
-          onItemSelect(key, selected);
+          onItemSelect(key as string, selected);
         },
         selectedRowKeys: listSelectedKeys,
       };
@@ -53,11 +76,11 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
           columns={columns}
           dataSource={filteredItems}
           size="small"
-          style={{ pointerEvents: listDisabled ? 'none' : null }}
+          style={{ pointerEvents: listDisabled ? 'none' : undefined }}
           onRow={({ key, disabled: itemDisabled }) => ({
             onClick: () => {
               if (itemDisabled || listDisabled) return;
-              onItemSelect(key, !listSelectedKeys.includes(key));
+              onItemSelect(key as string, !listSelectedKeys.includes(key as string));
             },
           })}
         />
@@ -68,20 +91,17 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
 
 const mockTags = ['cat', 'dog', 'bird'];
 
-const mockData = [];
-for (let i = 0; i < 20; i++) {
-  mockData.push({
-    key: i.toString(),
-    title: `content${i + 1}`,
-    description: `description of content${i + 1}`,
-    disabled: i % 4 === 0,
-    tag: mockTags[i % 3],
-  });
-}
+const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
+  key: i.toString(),
+  title: `content${i + 1}`,
+  description: `description of content${i + 1}`,
+  disabled: i % 4 === 0,
+  tag: mockTags[i % 3],
+}));
 
-const originTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
+const originTargetKeys = mockData.filter(item => Number(item.key) % 3 > 1).map(item => item.key);
 
-const leftTableColumns = [
+const leftTableColumns: ColumnsType<DataType> = [
   {
     dataIndex: 'title',
     title: 'Name',
@@ -96,66 +116,62 @@ const leftTableColumns = [
     title: 'Description',
   },
 ];
-const rightTableColumns = [
+
+const rightTableColumns: ColumnsType<Pick<DataType, 'title'>> = [
   {
     dataIndex: 'title',
     title: 'Name',
   },
 ];
 
-class App extends React.Component {
-  state = {
-    targetKeys: originTargetKeys,
-    disabled: false,
-    showSearch: false,
+const App: React.FC = () => {
+  const [targetKeys, setTargetKeys] = useState<string[]>(originTargetKeys);
+  const [disabled, setDisabled] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
+
+  const onChange = (nextTargetKeys: string[]) => {
+    setTargetKeys(nextTargetKeys);
   };
 
-  onChange = nextTargetKeys => {
-    this.setState({ targetKeys: nextTargetKeys });
+  const triggerDisable = (checked: boolean) => {
+    setDisabled(checked);
   };
 
-  triggerDisable = disabled => {
-    this.setState({ disabled });
+  const triggerShowSearch = (checked: boolean) => {
+    setShowSearch(checked);
   };
 
-  triggerShowSearch = showSearch => {
-    this.setState({ showSearch });
-  };
-
-  render() {
-    const { targetKeys, disabled, showSearch } = this.state;
-    return (
-      <>
-        <TableTransfer
-          dataSource={mockData}
-          targetKeys={targetKeys}
-          disabled={disabled}
-          showSearch={showSearch}
-          onChange={this.onChange}
-          filterOption={(inputValue, item) =>
-            item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
-          }
-          leftColumns={leftTableColumns}
-          rightColumns={rightTableColumns}
-        />
-        <Switch
-          unCheckedChildren="disabled"
-          checkedChildren="disabled"
-          checked={disabled}
-          onChange={this.triggerDisable}
-          style={{ marginTop: 16 }}
-        />
-        <Switch
-          unCheckedChildren="showSearch"
-          checkedChildren="showSearch"
-          checked={showSearch}
-          onChange={this.triggerShowSearch}
-          style={{ marginTop: 16 }}
-        />
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <TableTransfer
+        dataSource={mockData}
+        targetKeys={targetKeys}
+        disabled={disabled}
+        showSearch={showSearch}
+        onChange={onChange}
+        filterOption={(inputValue, item) =>
+          item.title!.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
+        }
+        leftColumns={leftTableColumns}
+        rightColumns={rightTableColumns}
+      />
+      <Switch
+        unCheckedChildren="disabled"
+        checkedChildren="disabled"
+        checked={disabled}
+        onChange={triggerDisable}
+        style={{ marginTop: 16 }}
+      />
+      <Switch
+        unCheckedChildren="showSearch"
+        checkedChildren="showSearch"
+        checked={showSearch}
+        onChange={triggerShowSearch}
+        style={{ marginTop: 16 }}
+      />
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/transfer/demo/tree-transfer.md b/components/transfer/demo/tree-transfer.md
index 4fe7622ca2..d601244a4c 100644
--- a/components/transfer/demo/tree-transfer.md
+++ b/components/transfer/demo/tree-transfer.md
@@ -13,25 +13,34 @@ title:
 
 Customize render list with Tree component.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Transfer, Tree } from 'antd';
+import type { TransferDirection, TransferItem } from 'antd/es/transfer';
+import type { DataNode } from 'antd/es/tree';
+
+interface TreeTransferProps {
+  dataSource: DataNode[];
+  targetKeys: string[];
+  onChange: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
+}
 
 // Customize Table Transfer
-const isChecked = (selectedKeys, eventKey) => selectedKeys.indexOf(eventKey) !== -1;
+const isChecked = (selectedKeys: (string | number)[], eventKey: string | number) =>
+  selectedKeys.includes(eventKey);
 
-const generateTree = (treeNodes = [], checkedKeys = []) =>
+const generateTree = (treeNodes: DataNode[] = [], checkedKeys: string[] = []): DataNode[] =>
   treeNodes.map(({ children, ...props }) => ({
     ...props,
-    disabled: checkedKeys.includes(props.key),
+    disabled: checkedKeys.includes(props.key as string),
     children: generateTree(children, checkedKeys),
   }));
 
-const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
-  const transferDataSource = [];
-  function flatten(list = []) {
+const TreeTransfer = ({ dataSource, targetKeys, ...restProps }: TreeTransferProps) => {
+  const transferDataSource: TransferItem[] = [];
+  function flatten(list: DataNode[] = []) {
     list.forEach(item => {
-      transferDataSource.push(item);
+      transferDataSource.push(item as TransferItem);
       flatten(item.children);
     });
   }
@@ -43,7 +52,7 @@ const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
       targetKeys={targetKeys}
       dataSource={transferDataSource}
       className="tree-transfer"
-      render={item => item.title}
+      render={item => item.title!}
       showSelectAll={false}
     >
       {({ direction, onItemSelect, selectedKeys }) => {
@@ -58,10 +67,10 @@ const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
               checkedKeys={checkedKeys}
               treeData={generateTree(dataSource, targetKeys)}
               onCheck={(_, { node: { key } }) => {
-                onItemSelect(key, !isChecked(checkedKeys, key));
+                onItemSelect(key as string, !isChecked(checkedKeys, key));
               }}
               onSelect={(_, { node: { key } }) => {
-                onItemSelect(key, !isChecked(checkedKeys, key));
+                onItemSelect(key as string, !isChecked(checkedKeys, key));
               }}
             />
           );
@@ -71,7 +80,7 @@ const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
   );
 };
 
-const treeData = [
+const treeData: DataNode[] = [
   { key: '0-0', title: '0-0' },
   {
     key: '0-1',
@@ -84,9 +93,9 @@ const treeData = [
   { key: '0-2', title: '0-3' },
 ];
 
-const App = () => {
-  const [targetKeys, setTargetKeys] = useState([]);
-  const onChange = keys => {
+const App: React.FC = () => {
+  const [targetKeys, setTargetKeys] = useState<string[]>([]);
+  const onChange = (keys: string[]) => {
     setTargetKeys(keys);
   };
   return <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />;
diff --git a/components/tree-select/demo/async.md b/components/tree-select/demo/async.md
index 7480ae93c3..3a4857c1bf 100644
--- a/components/tree-select/demo/async.md
+++ b/components/tree-select/demo/async.md
@@ -13,20 +13,21 @@ title:
 
 Asynchronous loading tree node.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { TreeSelect } from 'antd';
+import type { DefaultOptionType } from 'antd/es/select';
+import type { TreeSelectProps } from 'antd';
 
-class Demo extends React.Component {
-  state = {
-    value: undefined,
-    treeData: [
-      { id: 1, pId: 0, value: '1', title: 'Expand to load' },
-      { id: 2, pId: 0, value: '2', title: 'Expand to load' },
-      { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
-    ],
-  };
+const App: React.FC = () => {
+  const [value, setValue] = useState<string>();
+  const [treeData, setTreeData] = useState<Omit<DefaultOptionType, 'label'>[]>([
+    { id: 1, pId: 0, value: '1', title: 'Expand to load' },
+    { id: 2, pId: 0, value: '2', title: 'Expand to load' },
+    { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
+  ]);
 
-  genTreeNode = (parentId, isLeaf = false) => {
+  const genTreeNode = (parentId: number, isLeaf = false) => {
     const random = Math.random().toString(36).substring(2, 6);
     return {
       id: random,
@@ -37,41 +38,34 @@ class Demo extends React.Component {
     };
   };
 
-  onLoadData = ({ id }) =>
+  const onLoadData: TreeSelectProps['loadData'] = ({ id }) =>
     new Promise(resolve => {
       setTimeout(() => {
-        this.setState({
-          treeData: this.state.treeData.concat([
-            this.genTreeNode(id, false),
-            this.genTreeNode(id, true),
-            this.genTreeNode(id, true),
-          ]),
-        });
-        resolve();
+        setTreeData(
+          treeData.concat([genTreeNode(id, false), genTreeNode(id, true), genTreeNode(id, true)]),
+        );
+        resolve(undefined);
       }, 300);
     });
 
-  onChange = value => {
-    console.log(value);
-    this.setState({ value });
+  const onChange = (newValue: string) => {
+    console.log(newValue);
+    setValue(newValue);
   };
 
-  render() {
-    const { treeData } = this.state;
-    return (
-      <TreeSelect
-        treeDataSimpleMode
-        style={{ width: '100%' }}
-        value={this.state.value}
-        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-        placeholder="Please select"
-        onChange={this.onChange}
-        loadData={this.onLoadData}
-        treeData={treeData}
-      />
-    );
-  }
-}
+  return (
+    <TreeSelect
+      treeDataSimpleMode
+      style={{ width: '100%' }}
+      value={value}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      placeholder="Please select"
+      onChange={onChange}
+      loadData={onLoadData}
+      treeData={treeData}
+    />
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md
index 49277b7c13..715a357a91 100644
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@@ -13,17 +13,19 @@ title:
 
 The most basic usage.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { TreeSelect } from 'antd';
 
 const { TreeNode } = TreeSelect;
 
-const Demo = () => {
-  const [value, setValue] = useState(undefined);
-  const onChange = () => {
-    setValue(value);
+const App: React.FC = () => {
+  const [value, setValue] = useState<string | undefined>(undefined);
+
+  const onChange = (newValue: string) => {
+    setValue(newValue);
   };
+
   return (
     <TreeSelect
       showSearch
@@ -48,5 +50,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md
index 1140c5d983..b7a81253a7 100644
--- a/components/tree-select/demo/checkable.md
+++ b/components/tree-select/demo/checkable.md
@@ -13,7 +13,8 @@ title:
 
 Multiple and checkable.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { TreeSelect } from 'antd';
 
 const { SHOW_PARENT } = TreeSelect;
@@ -55,31 +56,28 @@ const treeData = [
   },
 ];
 
-class Demo extends React.Component {
-  state = {
-    value: ['0-0-0'],
-  };
+const App: React.FC = () => {
+  const [value, setValue] = useState(['0-0-0']);
 
-  onChange = value => {
+  const onChange = (newValue: string[]) => {
     console.log('onChange ', value);
-    this.setState({ value });
+    setValue(newValue);
   };
 
-  render() {
-    const tProps = {
-      treeData,
-      value: this.state.value,
-      onChange: this.onChange,
-      treeCheckable: true,
-      showCheckedStrategy: SHOW_PARENT,
-      placeholder: 'Please select',
-      style: {
-        width: '100%',
-      },
-    };
-    return <TreeSelect {...tProps} />;
-  }
-}
+  const tProps = {
+    treeData,
+    value,
+    onChange,
+    treeCheckable: true,
+    showCheckedStrategy: SHOW_PARENT,
+    placeholder: 'Please select',
+    style: {
+      width: '100%',
+    },
+  };
 
-export default Demo;
+  return <TreeSelect {...tProps} />;
+};
+
+export default App;
 ```
diff --git a/components/tree-select/demo/multiple.md b/components/tree-select/demo/multiple.md
index 482fcc12e7..49f4d2dfed 100644
--- a/components/tree-select/demo/multiple.md
+++ b/components/tree-select/demo/multiple.md
@@ -13,47 +13,44 @@ title:
 
 Multiple selection usage.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { TreeSelect } from 'antd';
 
 const { TreeNode } = TreeSelect;
 
-class Demo extends React.Component {
-  state = {
-    value: undefined,
+const App: React.FC = () => {
+  const [value, setValue] = useState<string>();
+
+  const onChange = (newValue: string) => {
+    console.log(newValue);
+    setValue(newValue);
   };
 
-  onChange = value => {
-    console.log(value);
-    this.setState({ value });
-  };
-
-  render() {
-    return (
-      <TreeSelect
-        showSearch
-        style={{ width: '100%' }}
-        value={this.state.value}
-        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-        placeholder="Please select"
-        allowClear
-        multiple
-        treeDefaultExpandAll
-        onChange={this.onChange}
-      >
-        <TreeNode value="parent 1" title="parent 1">
-          <TreeNode value="parent 1-0" title="parent 1-0">
-            <TreeNode value="leaf1" title="my leaf" />
-            <TreeNode value="leaf2" title="your leaf" />
-          </TreeNode>
-          <TreeNode value="parent 1-1" title="parent 1-1">
-            <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
-          </TreeNode>
+  return (
+    <TreeSelect
+      showSearch
+      style={{ width: '100%' }}
+      value={value}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      placeholder="Please select"
+      allowClear
+      multiple
+      treeDefaultExpandAll
+      onChange={onChange}
+    >
+      <TreeNode value="parent 1" title="parent 1">
+        <TreeNode value="parent 1-0" title="parent 1-0">
+          <TreeNode value="leaf1" title="my leaf" />
+          <TreeNode value="leaf2" title="your leaf" />
         </TreeNode>
-      </TreeSelect>
-    );
-  }
-}
+        <TreeNode value="parent 1-1" title="parent 1-1">
+          <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
+        </TreeNode>
+      </TreeNode>
+    </TreeSelect>
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree-select/demo/placement.md b/components/tree-select/demo/placement.md
index 4b8f8a2106..9eab613426 100644
--- a/components/tree-select/demo/placement.md
+++ b/components/tree-select/demo/placement.md
@@ -13,16 +13,18 @@ title:
 
 You can manually specify the position of the popup via `placement`.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { TreeSelect, Radio } from 'antd';
+import type { SelectCommonPlacement } from 'antd/es/_util/motion';
+import type { RadioChangeEvent } from 'antd';
 
 const { TreeNode } = TreeSelect;
 
-const Demo = () => {
-  const [placement, SetPlacement] = useState('topLeft');
+const App: React.FC = () => {
+  const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');
 
-  const placementChange = e => {
+  const placementChange = (e: RadioChangeEvent) => {
     SetPlacement(e.target.value);
   };
 
@@ -60,5 +62,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree-select/demo/status.md b/components/tree-select/demo/status.md
index ec6efdfb8d..dcdb9b693a 100644
--- a/components/tree-select/demo/status.md
+++ b/components/tree-select/demo/status.md
@@ -15,9 +15,10 @@ title:
 Add status to TreeSelect with `status`, which could be `error` or `warning`.
 
 ```tsx
+import React from 'react';
 import { TreeSelect, Space } from 'antd';
 
-const Status: React.FC = () => (
+const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <TreeSelect status="error" style={{ width: '100%' }} placeholder="Error" />
     <TreeSelect
@@ -29,5 +30,5 @@ const Status: React.FC = () => (
   </Space>
 );
 
-export default () => <Status />;
+export default App;
 ```
diff --git a/components/tree-select/demo/suffix.md b/components/tree-select/demo/suffix.md
index 5714cd64cf..bebe42327f 100644
--- a/components/tree-select/demo/suffix.md
+++ b/components/tree-select/demo/suffix.md
@@ -14,49 +14,46 @@ title:
 
 The most basic usage.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { TreeSelect } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
 const { TreeNode } = TreeSelect;
 const icon = <SmileOutlined />;
 
-class Demo extends React.Component {
-  state = {
-    value: undefined,
+const App: React.FC = () => {
+  const [value, setValue] = useState<string>();
+
+  const onChange = (newValue: string) => {
+    console.log(newValue);
+    setValue(newValue);
   };
 
-  onChange = value => {
-    console.log(value);
-    this.setState({ value });
-  };
-
-  render() {
-    return (
-      <TreeSelect
-        showSearch
-        suffixIcon={icon}
-        style={{ width: '100%' }}
-        value={this.state.value}
-        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-        placeholder="Please select"
-        allowClear
-        treeDefaultExpandAll
-        onChange={this.onChange}
-      >
-        <TreeNode value="parent 1" title="parent 1">
-          <TreeNode value="parent 1-0" title="parent 1-0">
-            <TreeNode value="leaf1" title="my leaf" />
-            <TreeNode value="leaf2" title="your leaf" />
-          </TreeNode>
-          <TreeNode value="parent 1-1" title="parent 1-1">
-            <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
-          </TreeNode>
+  return (
+    <TreeSelect
+      showSearch
+      suffixIcon={icon}
+      style={{ width: '100%' }}
+      value={value}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      placeholder="Please select"
+      allowClear
+      treeDefaultExpandAll
+      onChange={onChange}
+    >
+      <TreeNode value="parent 1" title="parent 1">
+        <TreeNode value="parent 1-0" title="parent 1-0">
+          <TreeNode value="leaf1" title="my leaf" />
+          <TreeNode value="leaf2" title="your leaf" />
         </TreeNode>
-      </TreeSelect>
-    );
-  }
-}
+        <TreeNode value="parent 1-1" title="parent 1-1">
+          <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
+        </TreeNode>
+      </TreeNode>
+    </TreeSelect>
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree-select/demo/treeData.md b/components/tree-select/demo/treeData.md
index eda685c32a..60913dcb83 100644
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@@ -13,7 +13,8 @@ title:
 
 The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { TreeSelect } from 'antd';
 
 const treeData = [
@@ -37,30 +38,26 @@ const treeData = [
   },
 ];
 
-class Demo extends React.Component {
-  state = {
-    value: undefined,
+const App: React.FC = () => {
+  const [value, setValue] = useState<string>();
+
+  const onChange = (newValue: string) => {
+    console.log(newValue);
+    setValue(newValue);
   };
 
-  onChange = value => {
-    console.log(value);
-    this.setState({ value });
-  };
+  return (
+    <TreeSelect
+      style={{ width: '100%' }}
+      value={value}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      treeData={treeData}
+      placeholder="Please select"
+      treeDefaultExpandAll
+      onChange={onChange}
+    />
+  );
+};
 
-  render() {
-    return (
-      <TreeSelect
-        style={{ width: '100%' }}
-        value={this.state.value}
-        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-        treeData={treeData}
-        placeholder="Please select"
-        treeDefaultExpandAll
-        onChange={this.onChange}
-      />
-    );
-  }
-}
-
-export default Demo;
+export default App;
 ```
diff --git a/components/tree-select/demo/treeLine.md b/components/tree-select/demo/treeLine.md
index 91dda21893..decc335e29 100644
--- a/components/tree-select/demo/treeLine.md
+++ b/components/tree-select/demo/treeLine.md
@@ -14,13 +14,14 @@ title:
 Use `treeLine` to show the line style.
 
 ```tsx
+import React, { useState } from 'react';
 import { TreeSelect, Switch, Space } from 'antd';
 
 const { TreeNode } = TreeSelect;
 
-const Demo = () => {
-  const [treeLine, setTreeLine] = React.useState(true);
-  const [showLeafIcon, setShowLeafIcon] = React.useState(false);
+const App: React.FC = () => {
+  const [treeLine, setTreeLine] = useState(true);
+  const [showLeafIcon, setShowLeafIcon] = useState(false);
 
   return (
     <Space direction="vertical">
@@ -52,5 +53,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md
index e1f7c5f39c..ef25a2f57f 100644
--- a/components/tree/demo/basic-controlled.md
+++ b/components/tree/demo/basic-controlled.md
@@ -16,8 +16,9 @@ Controlled mode lets parent nodes reflect the status of child nodes more intelli
 ```tsx
 import React, { useState } from 'react';
 import { Tree } from 'antd';
+import type { DataNode } from 'antd/lib/tree';
 
-const treeData = [
+const treeData: DataNode[] = [
   {
     title: '0-0',
     key: '0-0',
@@ -61,7 +62,7 @@ const treeData = [
   },
 ];
 
-const Demo = () => {
+const App: React.FC = () => {
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>(['0-0-0', '0-0-1']);
   const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(['0-0-0']);
   const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
@@ -100,5 +101,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md
index 2a827e7e7f..8569b975a7 100644
--- a/components/tree/demo/basic.md
+++ b/components/tree/demo/basic.md
@@ -14,9 +14,11 @@ title:
 The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
 
 ```tsx
+import React from 'react';
 import { Tree } from 'antd';
+import type { DataNode, TreeProps } from 'antd/lib/tree';
 
-const treeData = [
+const treeData: DataNode[] = [
   {
     title: 'parent 1',
     key: '0-0',
@@ -46,12 +48,12 @@ const treeData = [
   },
 ];
 
-const Demo = () => {
-  const onSelect = (selectedKeys: React.Key[], info: any) => {
+const App: React.FC = () => {
+  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
     console.log('selected', selectedKeys, info);
   };
 
-  const onCheck = (checkedKeys: React.Key[], info: any) => {
+  const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
     console.log('onCheck', checkedKeys, info);
   };
 
@@ -68,5 +70,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/big-data.md b/components/tree/demo/big-data.md
index 428a77ada3..6a78419a0a 100644
--- a/components/tree/demo/big-data.md
+++ b/components/tree/demo/big-data.md
@@ -14,13 +14,15 @@ debug: true
 
 Plenty of tree nodes.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tree } from 'antd';
+import type { DataNode } from 'antd/lib/tree';
 
-const treeData = [];
+const treeData: DataNode[] = [];
 
 for (let i = 0; i < 100; i += 1) {
-  const children = [];
+  const children: DataNode[] = [];
 
   for (let j = 0; j < 100; j += 1) {
     children.push({
@@ -36,7 +38,7 @@ for (let i = 0; i < 100; i += 1) {
   });
 }
 
-const Demo = () => <Tree defaultExpandAll height={400} treeData={treeData} />;
+const App: React.FC = () => <Tree defaultExpandAll height={400} treeData={treeData} />;
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/customized-icon.md b/components/tree/demo/customized-icon.md
index 193ba37084..871e32a740 100644
--- a/components/tree/demo/customized-icon.md
+++ b/components/tree/demo/customized-icon.md
@@ -13,7 +13,8 @@ title:
 
 You can customize icons for different nodes.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tree } from 'antd';
 import {
   DownOutlined,
@@ -22,8 +23,9 @@ import {
   MehOutlined,
   FrownFilled,
 } from '@ant-design/icons';
+import type { DataNode } from 'antd/lib/tree';
 
-const treeData = [
+const treeData: DataNode[] = [
   {
     title: 'parent 1',
     key: '0-0',
@@ -43,7 +45,7 @@ const treeData = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <Tree
     showIcon
     defaultExpandAll
@@ -52,4 +54,6 @@ export default () => (
     treeData={treeData}
   />
 );
+
+export default App;
 ```
diff --git a/components/tree/demo/directory.md b/components/tree/demo/directory.md
index 01422d2e31..a0e7bd1ff6 100644
--- a/components/tree/demo/directory.md
+++ b/components/tree/demo/directory.md
@@ -14,11 +14,13 @@ title:
 Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` selection.
 
 ```tsx
+import React from 'react';
 import { Tree } from 'antd';
+import type { DataNode, DirectoryTreeProps } from 'antd/lib/tree';
 
 const { DirectoryTree } = Tree;
 
-const treeData = [
+const treeData: DataNode[] = [
   {
     title: 'parent 0',
     key: '0-0',
@@ -37,13 +39,13 @@ const treeData = [
   },
 ];
 
-const Demo: React.FC<{}> = () => {
-  const onSelect = (keys: React.Key[], info: any) => {
+const App: React.FC = () => {
+  const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
     console.log('Trigger Select', keys, info);
   };
 
-  const onExpand = () => {
-    console.log('Trigger Expand');
+  const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
+    console.log('Trigger Expand', keys, info);
   };
 
   return (
@@ -57,5 +59,5 @@ const Demo: React.FC<{}> = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/drag-debug.md b/components/tree/demo/drag-debug.md
index c4c436d191..d001bcc1d2 100644
--- a/components/tree/demo/drag-debug.md
+++ b/components/tree/demo/drag-debug.md
@@ -7,6 +7,7 @@ debug: true
 ---
 
 ```jsx
+import React from 'react';
 import { Tree, Switch } from 'antd';
 import { CarryOutOutlined } from '@ant-design/icons';
 
@@ -38,7 +39,7 @@ const generateData = (_level, _preKey, _tns) => {
 };
 generateData(z);
 
-class Demo extends React.Component {
+class App extends React.Component {
   state = {
     gData,
     expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
@@ -181,5 +182,5 @@ class Demo extends React.Component {
   }
 }
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md
index 8ebd885bc6..a38b19ef90 100644
--- a/components/tree/demo/draggable.md
+++ b/components/tree/demo/draggable.md
@@ -13,17 +13,19 @@ title:
 
 Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Tree } from 'antd';
+import type { DataNode, TreeProps } from 'antd/lib/tree';
 
 const x = 3;
 const y = 2;
 const z = 1;
-const gData = [];
+const defaultData: DataNode[] = [];
 
-const generateData = (_level, _preKey, _tns) => {
+const generateData = (_level: number, _preKey?: React.Key, _tns?: DataNode[]) => {
   const preKey = _preKey || '0';
-  const tns = _tns || gData;
+  const tns = _tns || defaultData;
 
   const children = [];
   for (let i = 0; i < x; i++) {
@@ -44,41 +46,41 @@ const generateData = (_level, _preKey, _tns) => {
 };
 generateData(z);
 
-class Demo extends React.Component {
-  state = {
-    gData,
-    expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
-  };
+const App: React.FC = () => {
+  const [gData, setGData] = useState(defaultData);
+  const [expandedKeys] = useState(['0-0', '0-0-0', '0-0-0-0']);
 
-  onDragEnter = info => {
+  const onDragEnter: TreeProps['onDragEnter'] = info => {
     console.log(info);
     // expandedKeys 需要受控时设置
-    // this.setState({
-    //   expandedKeys: info.expandedKeys,
-    // });
+    // setExpandedKeys(info.expandedKeys)
   };
 
-  onDrop = info => {
+  const onDrop: TreeProps['onDrop'] = info => {
     console.log(info);
     const dropKey = info.node.key;
     const dragKey = info.dragNode.key;
     const dropPos = info.node.pos.split('-');
     const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
 
-    const loop = (data, key, callback) => {
+    const loop = (
+      data: DataNode[],
+      key: React.Key,
+      callback: (node: DataNode, i: number, data: DataNode[]) => void,
+    ) => {
       for (let i = 0; i < data.length; i++) {
         if (data[i].key === key) {
           return callback(data[i], i, data);
         }
         if (data[i].children) {
-          loop(data[i].children, key, callback);
+          loop(data[i].children!, key, callback);
         }
       }
     };
-    const data = [...this.state.gData];
+    const data = [...gData];
 
     // Find dragObject
-    let dragObj;
+    let dragObj: DataNode;
     loop(data, dragKey, (item, index, arr) => {
       arr.splice(index, 1);
       dragObj = item;
@@ -92,8 +94,8 @@ class Demo extends React.Component {
         item.children.unshift(dragObj);
       });
     } else if (
-      (info.node.props.children || []).length > 0 && // Has children
-      info.node.props.expanded && // Is expanded
+      ((info.node as any).props.children || []).length > 0 && // Has children
+      (info.node as any).props.expanded && // Is expanded
       dropPosition === 1 // On the bottom gap
     ) {
       loop(data, dropKey, item => {
@@ -104,38 +106,33 @@ class Demo extends React.Component {
         // item to the tail of the children
       });
     } else {
-      let ar;
-      let i;
-      loop(data, dropKey, (item, index, arr) => {
+      let ar: DataNode[] = [];
+      let i: number;
+      loop(data, dropKey, (_item, index, arr) => {
         ar = arr;
         i = index;
       });
       if (dropPosition === -1) {
-        ar.splice(i, 0, dragObj);
+        ar.splice(i!, 0, dragObj!);
       } else {
-        ar.splice(i + 1, 0, dragObj);
+        ar.splice(i! + 1, 0, dragObj!);
       }
     }
-
-    this.setState({
-      gData: data,
-    });
+    setGData(data);
   };
 
-  render() {
-    return (
-      <Tree
-        className="draggable-tree"
-        defaultExpandedKeys={this.state.expandedKeys}
-        draggable
-        blockNode
-        onDragEnter={this.onDragEnter}
-        onDrop={this.onDrop}
-        treeData={this.state.gData}
-      />
-    );
-  }
-}
+  return (
+    <Tree
+      className="draggable-tree"
+      defaultExpandedKeys={expandedKeys}
+      draggable
+      blockNode
+      onDragEnter={onDragEnter}
+      onDrop={onDrop}
+      treeData={gData}
+    />
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md
index e630f6c740..e8d37d59a4 100644
--- a/components/tree/demo/dynamic.md
+++ b/components/tree/demo/dynamic.md
@@ -31,8 +31,8 @@ const initTreeData: DataNode[] = [
 ];
 
 // It's just a simple demo. You can use tree map to optimize update perf.
-function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] {
-  return list.map(node => {
+const updateTreeData = (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] =>
+  list.map(node => {
     if (node.key === key) {
       return {
         ...node,
@@ -47,9 +47,8 @@ function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]):
     }
     return node;
   });
-}
 
-const Demo: React.FC<{}> = () => {
+const App: React.FC = () => {
   const [treeData, setTreeData] = useState(initTreeData);
 
   const onLoadData = ({ key, children }: any) =>
@@ -73,5 +72,5 @@ const Demo: React.FC<{}> = () => {
   return <Tree loadData={onLoadData} treeData={treeData} />;
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/line.md b/components/tree/demo/line.md
index c21e683a97..29cdaf0f0a 100644
--- a/components/tree/demo/line.md
+++ b/components/tree/demo/line.md
@@ -17,8 +17,9 @@ Tree with connected line between nodes, turn on by `showLine`, customize the pre
 import React, { useState } from 'react';
 import { Tree, Switch } from 'antd';
 import { CarryOutOutlined, FormOutlined } from '@ant-design/icons';
+import type { DataNode } from 'antd/lib/tree';
 
-const treeData = [
+const treeData: DataNode[] = [
   {
     title: 'parent 1',
     key: '0-0',
@@ -83,7 +84,7 @@ const treeData = [
   },
 ];
 
-const Demo: React.FC<{}> = () => {
+const App: React.FC = () => {
   const [showLine, setShowLine] = useState<boolean | { showLeafIcon: boolean }>(true);
   const [showIcon, setShowIcon] = useState<boolean>(false);
   const [showLeafIcon, setShowLeafIcon] = useState<boolean>(true);
@@ -123,5 +124,5 @@ const Demo: React.FC<{}> = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md
index c36efcb18a..0ac14c5ce0 100644
--- a/components/tree/demo/search.md
+++ b/components/tree/demo/search.md
@@ -13,19 +13,21 @@ title:
 
 Searchable Tree.
 
-```jsx
+```tsx
+import React, { useMemo, useState } from 'react';
 import { Tree, Input } from 'antd';
+import type { DataNode } from 'antd/lib/tree';
 
 const { Search } = Input;
 
 const x = 3;
 const y = 2;
 const z = 1;
-const gData = [];
+const defaultData: DataNode[] = [];
 
-const generateData = (_level, _preKey, _tns) => {
+const generateData = (_level: number, _preKey?: React.Key, _tns?: DataNode[]) => {
   const preKey = _preKey || '0';
-  const tns = _tns || gData;
+  const tns = _tns || defaultData;
 
   const children = [];
   for (let i = 0; i < x; i++) {
@@ -46,21 +48,21 @@ const generateData = (_level, _preKey, _tns) => {
 };
 generateData(z);
 
-const dataList = [];
-const generateList = data => {
+const dataList: { key: React.Key; title: string }[] = [];
+const generateList = (data: DataNode[]) => {
   for (let i = 0; i < data.length; i++) {
     const node = data[i];
     const { key } = node;
-    dataList.push({ key, title: key });
+    dataList.push({ key, title: key as string });
     if (node.children) {
       generateList(node.children);
     }
   }
 };
-generateList(gData);
+generateList(defaultData);
 
-const getParentKey = (key, tree) => {
-  let parentKey;
+const getParentKey = (key: React.Key, tree: DataNode[]): React.Key => {
+  let parentKey: React.Key;
   for (let i = 0; i < tree.length; i++) {
     const node = tree[i];
     if (node.children) {
@@ -71,47 +73,41 @@ const getParentKey = (key, tree) => {
       }
     }
   }
-  return parentKey;
+  return parentKey!;
 };
 
-class SearchTree extends React.Component {
-  state = {
-    expandedKeys: [],
-    searchValue: '',
-    autoExpandParent: true,
+const App: React.FC = () => {
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [searchValue, setSearchValue] = useState('');
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
+
+  const onExpand = (newExpandedKeys: string[]) => {
+    setExpandedKeys(newExpandedKeys);
+    setAutoExpandParent(false);
   };
 
-  onExpand = expandedKeys => {
-    this.setState({
-      expandedKeys,
-      autoExpandParent: false,
-    });
-  };
-
-  onChange = e => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
-    const expandedKeys = dataList
+    const newExpandedKeys = dataList
       .map(item => {
         if (item.title.indexOf(value) > -1) {
-          return getParentKey(item.key, gData);
+          return getParentKey(item.key, defaultData);
         }
         return null;
       })
       .filter((item, i, self) => item && self.indexOf(item) === i);
-    this.setState({
-      expandedKeys,
-      searchValue: value,
-      autoExpandParent: true,
-    });
+    setExpandedKeys(newExpandedKeys as React.Key[]);
+    setSearchValue(value);
+    setAutoExpandParent(true);
   };
 
-  render() {
-    const { searchValue, expandedKeys, autoExpandParent } = this.state;
-    const loop = data =>
+  const treeData = useMemo(() => {
+    const loop = (data: DataNode[]): DataNode[] =>
       data.map(item => {
-        const index = item.title.indexOf(searchValue);
-        const beforeStr = item.title.substring(0, index);
-        const afterStr = item.title.slice(index + searchValue.length);
+        const strTitle = item.title as string;
+        const index = strTitle.indexOf(searchValue);
+        const beforeStr = strTitle.substring(0, index);
+        const afterStr = strTitle.slice(index + searchValue.length);
         const title =
           index > -1 ? (
             <span>
@@ -131,21 +127,24 @@ class SearchTree extends React.Component {
           key: item.key,
         };
       });
-    return (
-      <div>
-        <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
-        <Tree
-          onExpand={this.onExpand}
-          expandedKeys={expandedKeys}
-          autoExpandParent={autoExpandParent}
-          treeData={loop(gData)}
-        />
-      </div>
-    );
-  }
-}
 
-export default () => <SearchTree />;
+    return loop(defaultData);
+  }, [searchValue]);
+
+  return (
+    <div>
+      <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onChange} />
+      <Tree
+        onExpand={onExpand}
+        expandedKeys={expandedKeys}
+        autoExpandParent={autoExpandParent}
+        treeData={treeData}
+      />
+    </div>
+  );
+};
+
+export default App;
 ```
 
 ```css
diff --git a/components/tree/demo/switcher-icon.md b/components/tree/demo/switcher-icon.md
index dbffd4e9ce..258283b3db 100644
--- a/components/tree/demo/switcher-icon.md
+++ b/components/tree/demo/switcher-icon.md
@@ -13,76 +13,78 @@ title:
 
 customize collapse/expand icon of tree node
 
-```jsx
+```tsx
+import React from 'react';
 import { Tree } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
+import type { DataNode, TreeProps } from 'antd/lib/tree';
 
-class Demo extends React.Component {
-  onSelect = (selectedKeys, info) => {
+const treeData: DataNode[] = [
+  {
+    title: 'parent 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'parent 1-0',
+        key: '0-0-0',
+        children: [
+          {
+            title: 'leaf',
+            key: '0-0-0-0',
+          },
+          {
+            title: 'leaf',
+            key: '0-0-0-1',
+          },
+          {
+            title: 'leaf',
+            key: '0-0-0-2',
+          },
+        ],
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [
+          {
+            title: 'leaf',
+            key: '0-0-1-0',
+          },
+        ],
+      },
+      {
+        title: 'parent 1-2',
+        key: '0-0-2',
+        children: [
+          {
+            title: 'leaf',
+            key: '0-0-2-0',
+          },
+          {
+            title: 'leaf',
+            key: '0-0-2-1',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const App: React.FC = () => {
+  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
     console.log('selected', selectedKeys, info);
   };
 
-  render() {
-    return (
-      <Tree
-        showLine
-        switcherIcon={<DownOutlined />}
-        defaultExpandedKeys={['0-0-0']}
-        onSelect={this.onSelect}
-        treeData={[
-          {
-            title: 'parent 1',
-            key: '0-0',
-            children: [
-              {
-                title: 'parent 1-0',
-                key: '0-0-0',
-                children: [
-                  {
-                    title: 'leaf',
-                    key: '0-0-0-0',
-                  },
-                  {
-                    title: 'leaf',
-                    key: '0-0-0-1',
-                  },
-                  {
-                    title: 'leaf',
-                    key: '0-0-0-2',
-                  },
-                ],
-              },
-              {
-                title: 'parent 1-1',
-                key: '0-0-1',
-                children: [
-                  {
-                    title: 'leaf',
-                    key: '0-0-1-0',
-                  },
-                ],
-              },
-              {
-                title: 'parent 1-2',
-                key: '0-0-2',
-                children: [
-                  {
-                    title: 'leaf',
-                    key: '0-0-2-0',
-                  },
-                  {
-                    title: 'leaf',
-                    key: '0-0-2-1',
-                  },
-                ],
-              },
-            ],
-          },
-        ]}
-      />
-    );
-  }
-}
+  return (
+    <Tree
+      showLine
+      switcherIcon={<DownOutlined />}
+      defaultExpandedKeys={['0-0-0']}
+      onSelect={onSelect}
+      treeData={treeData}
+    />
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/tree/demo/virtual-scroll.md b/components/tree/demo/virtual-scroll.md
index dccca17411..b581e35b5f 100644
--- a/components/tree/demo/virtual-scroll.md
+++ b/components/tree/demo/virtual-scroll.md
@@ -13,14 +13,16 @@ title:
 
 Use virtual list through `height` prop.
 
-```jsx
+```tsx
+import React from 'react';
 import { Tree } from 'antd';
+import type { DataNode } from 'antd/lib/tree';
 
-function dig(path = '0', level = 3) {
+const dig = (path = '0', level = 3) => {
   const list = [];
   for (let i = 0; i < 10; i += 1) {
     const key = `${path}-${i}`;
-    const treeNode = {
+    const treeNode: DataNode = {
       title: key,
       key,
     };
@@ -32,9 +34,11 @@ function dig(path = '0', level = 3) {
     list.push(treeNode);
   }
   return list;
-}
+};
 
 const treeData = dig();
 
-export default () => <Tree treeData={treeData} height={233} defaultExpandAll />;
+const App: React.FC = () => <Tree treeData={treeData} height={233} defaultExpandAll />;
+
+export default App;
 ```
diff --git a/components/typography/demo/basic.md b/components/typography/demo/basic.md
index 294f46b42a..d27b7db735 100644
--- a/components/typography/demo/basic.md
+++ b/components/typography/demo/basic.md
@@ -13,7 +13,8 @@ title:
 
 Display the document sample.
 
-```jsx
+```tsx
+import React from 'react';
 import { Typography, Divider } from 'antd';
 
 const { Title, Paragraph, Text, Link } = Typography;
@@ -21,7 +22,7 @@ const { Title, Paragraph, Text, Link } = Typography;
 const blockContent = `AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。
 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。`;
 
-export default () => (
+const App: React.FC = () => (
   <Typography>
     <Title>Introduction</Title>
     <Paragraph>
@@ -106,4 +107,6 @@ export default () => (
     </Paragraph>
   </Typography>
 );
+
+export default App;
 ```
diff --git a/components/typography/demo/ellipsis-debug.md b/components/typography/demo/ellipsis-debug.md
index d095afda14..75a437390c 100644
--- a/components/typography/demo/ellipsis-debug.md
+++ b/components/typography/demo/ellipsis-debug.md
@@ -14,67 +14,55 @@ debug: true
 
 Multiple line ellipsis support.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Typography, Slider, Switch } from 'antd';
 
 const { Text, Paragraph } = Typography;
 
-class Demo extends React.Component {
-  state = {
-    rows: 1,
-    longText: true,
-    copyable: false,
-    editable: false,
-    expandable: false,
-  };
+const App: React.FC = () => {
+  const [rows, setRows] = useState(1);
+  const [longText, setLongText] = useState(true);
+  const [copyable, setCopyable] = useState(false);
+  const [editable, setEditable] = useState(false);
+  const [expandable, setExpandable] = useState(false);
 
-  onChange = rows => {
-    this.setState({ rows });
-  };
+  return (
+    <>
+      <Switch checked={longText} checkedChildren="Long Text" onChange={setLongText} />
+      <Switch checked={copyable} onChange={setCopyable} />
+      <Switch checked={editable} onChange={setEditable} />
+      <Switch checked={expandable} onChange={setExpandable} />
+      <Slider value={rows} min={1} max={10} onChange={setRows} />
+      {longText ? (
+        <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
+          Ant Design, a design language for background applications, is refined by Ant UED Team.
+          This is a nest sample{' '}
+          <Text code strong delete>
+            Test
+          </Text>{' '}
+          case. Bnt Design, a design language for background applications, is refined by Ant UED
+          Team. Cnt Design, a design language for background applications, is refined by Ant UED
+          Team. Dnt Design, a design language for background applications, is refined by Ant UED
+          Team. Ent Design, a design language for background applications, is refined by Ant UED
+          Team.
+        </Paragraph>
+      ) : (
+        <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
+          Hello World
+        </Paragraph>
+      )}
 
-  render() {
-    const { rows, longText, copyable, editable, expandable } = this.state;
-    return (
-      <>
-        <Switch
-          checked={longText}
-          checkedChildren="Long Text"
-          onChange={val => this.setState({ longText: val })}
-        />
-        <Switch checked={copyable} onChange={val => this.setState({ copyable: val })} />
-        <Switch checked={editable} onChange={val => this.setState({ editable: val })} />
-        <Switch checked={expandable} onChange={val => this.setState({ expandable: val })} />
-        <Slider value={rows} min={1} max={10} onChange={this.onChange} />
-        {longText ? (
-          <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
-            Ant Design, a design language for background applications, is refined by Ant UED Team.
-            This is a nest sample{' '}
-            <Text code strong delete>
-              Test
-            </Text>{' '}
-            case. Bnt Design, a design language for background applications, is refined by Ant UED
-            Team. Cnt Design, a design language for background applications, is refined by Ant UED
-            Team. Dnt Design, a design language for background applications, is refined by Ant UED
-            Team. Ent Design, a design language for background applications, is refined by Ant UED
-            Team.
-          </Paragraph>
-        ) : (
-          <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
-            Hello World
-          </Paragraph>
-        )}
+      <Text style={{ width: 100 }} ellipsis copyable>
+        Ant Design is a design language for background applications, is refined by Ant UED Team.
+      </Text>
 
-        <Text style={{ width: 100 }} ellipsis copyable>
-          Ant Design is a design language for background applications, is refined by Ant UED Team.
-        </Text>
+      <p>
+        [Before]<Text ellipsis>not ellipsis</Text>[After]
+      </p>
+    </>
+  );
+};
 
-        <p>
-          [Before]<Text ellipsis>not ellipsis</Text>[After]
-        </p>
-      </>
-    );
-  }
-}
-
-export default Demo;
+export default App;
 ```
diff --git a/components/typography/demo/ellipsis-middle.md b/components/typography/demo/ellipsis-middle.md
index 2d855df3de..0a4aa5427d 100644
--- a/components/typography/demo/ellipsis-middle.md
+++ b/components/typography/demo/ellipsis-middle.md
@@ -13,12 +13,16 @@ title:
 
 You can ellipsis content from middle by customize `ellipsis={{ suffix: ... }}`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Typography } from 'antd';
 
 const { Text } = Typography;
 
-const EllipsisMiddle = ({ suffixCount, children }) => {
+const EllipsisMiddle: React.FC<{ suffixCount: number; children: string }> = ({
+  suffixCount,
+  children,
+}) => {
   const start = children.slice(0, children.length - suffixCount).trim();
   const suffix = children.slice(-suffixCount).trim();
   return (
@@ -28,11 +32,13 @@ const EllipsisMiddle = ({ suffixCount, children }) => {
   );
 };
 
-export default () => (
+const App: React.FC = () => (
   <EllipsisMiddle suffixCount={12}>
     In the process of internal desktop applications development, many different design specs and
     implementations would be involved, which might cause designers and developers difficulties and
     duplication and reduce the efficiency of development.
   </EllipsisMiddle>
 );
+
+export default App;
 ```
diff --git a/components/typography/demo/ellipsis.md b/components/typography/demo/ellipsis.md
index 8cf495c958..2815f34346 100644
--- a/components/typography/demo/ellipsis.md
+++ b/components/typography/demo/ellipsis.md
@@ -14,12 +14,13 @@ title:
 Multiple line ellipsis support. You can use `tooltip` to config ellipsis tooltip. Recommend `expandable` when have lots of content.
 
 ```tsx
+import React, { useState } from 'react';
 import { Typography, Switch } from 'antd';
 
 const { Paragraph, Text } = Typography;
 
-const Demo = () => {
-  const [ellipsis, setEllipsis] = React.useState(true);
+const App: React.FC = () => {
+  const [ellipsis, setEllipsis] = useState(true);
 
   return (
     <>
@@ -58,5 +59,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/typography/demo/interactive.md b/components/typography/demo/interactive.md
index 304ac5a245..e4c57cc836 100644
--- a/components/typography/demo/interactive.md
+++ b/components/typography/demo/interactive.md
@@ -13,20 +13,20 @@ title:
 
 Provide additional interactive capacity of editable and copyable.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
-import { Checkbox, Radio, Typography, Divider } from 'antd';
+import { Radio, Typography, Divider } from 'antd';
 import { CheckOutlined, HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons';
 
 const { Paragraph } = Typography;
 
-const Demo = () => {
+const App: React.FC = () => {
   const [editableStr, setEditableStr] = useState('This is an editable text.');
   const [customIconStr, setCustomIconStr] = useState('Custom Edit icon and replace tooltip text.');
   const [clickTriggerStr, setClickTriggerStr] = useState(
     'Text or icon as trigger - click to start editing.',
   );
-  const [chooseTrigger, setChooseTrigger] = useState('icon');
+  const [chooseTrigger, setChooseTrigger] = useState<('icon' | 'text')[]>(['icon']);
   const [customEnterIconStr, setCustomEnterIconStr] = useState(
     'Editable text with a custom enter icon in edit field.',
   );
@@ -38,7 +38,7 @@ const Demo = () => {
     'This is an editable text with limited length.',
   );
 
-  const radioToState = input => {
+  const radioToState = (input: string): ('icon' | 'text')[] => {
     switch (input) {
       case 'text':
         return ['text'];
@@ -150,5 +150,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/typography/demo/paragraph-debug.md b/components/typography/demo/paragraph-debug.md
index deab315458..6ac3bd8824 100644
--- a/components/typography/demo/paragraph-debug.md
+++ b/components/typography/demo/paragraph-debug.md
@@ -14,12 +14,13 @@ debug: true
 
 Display the title and paragraph.
 
-```jsx
+```tsx
+import React from 'react';
 import { Typography } from 'antd';
 
 const { Title, Paragraph, Text } = Typography;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Title>Introduction</Title>
     <Paragraph>
@@ -112,4 +113,6 @@ export default () => (
     </Paragraph>
   </>
 );
+
+export default App;
 ```
diff --git a/components/typography/demo/suffix.md b/components/typography/demo/suffix.md
index c1c5c6be1b..a6ef2a852a 100644
--- a/components/typography/demo/suffix.md
+++ b/components/typography/demo/suffix.md
@@ -13,44 +13,37 @@ title:
 
 add suffix ellipsis support.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Typography, Slider } from 'antd';
 
 const { Paragraph } = Typography;
 
-class Demo extends React.Component {
-  state = {
-    rows: 1,
-  };
+const App: React.FC = () => {
+  const [rows, setRows] = useState(1);
 
-  onChange = rows => {
-    this.setState({ rows });
-  };
+  const article =
+    "To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life";
 
-  render() {
-    const { rows } = this.state;
-    const article =
-      "To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life";
-    return (
-      <>
-        <Slider value={rows} min={1} max={10} onChange={this.onChange} />
-        <Paragraph
-          ellipsis={{
-            rows,
-            expandable: true,
-            suffix: '--William Shakespeare',
-            onEllipsis: ellipsis => {
-              console.log('Ellipsis changed:', ellipsis);
-            },
-          }}
-          title={`${article}--William Shakespeare`}
-        >
-          {article}
-        </Paragraph>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Slider value={rows} min={1} max={10} onChange={setRows} />
+      <Paragraph
+        ellipsis={{
+          rows,
+          expandable: true,
+          suffix: '--William Shakespeare',
+          onEllipsis: ellipsis => {
+            console.log('Ellipsis changed:', ellipsis);
+          },
+        }}
+        title={`${article}--William Shakespeare`}
+      >
+        {article}
+      </Paragraph>
+    </>
+  );
+};
 
-export default Demo;
+export default App;
 ```
diff --git a/components/typography/demo/text.md b/components/typography/demo/text.md
index d9ca1e9674..ef26a9fd8c 100644
--- a/components/typography/demo/text.md
+++ b/components/typography/demo/text.md
@@ -13,12 +13,13 @@ title:
 
 Provides multiple types of text and link.
 
-```jsx
+```tsx
+import React from 'react';
 import { Typography, Space } from 'antd';
 
 const { Text, Link } = Typography;
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical">
     <Text>Ant Design (default)</Text>
     <Text type="secondary">Ant Design (secondary)</Text>
@@ -38,4 +39,6 @@ export default () => (
     </Link>
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/typography/demo/title.md b/components/typography/demo/title.md
index 67c61c6395..beba2681e8 100644
--- a/components/typography/demo/title.md
+++ b/components/typography/demo/title.md
@@ -13,12 +13,13 @@ title:
 
 Display title in different level.
 
-```jsx
+```tsx
+import React from 'react';
 import { Typography } from 'antd';
 
 const { Title } = Typography;
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Title>h1. Ant Design</Title>
     <Title level={2}>h2. Ant Design</Title>
@@ -27,4 +28,6 @@ export default () => (
     <Title level={5}>h5. Ant Design</Title>
   </>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md
index 811158cc98..e069e290f4 100644
--- a/components/upload/demo/avatar.md
+++ b/components/upload/demo/avatar.md
@@ -17,17 +17,20 @@ Click to upload user's avatar, and validate size and format of picture with `bef
 
 > The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](https://upload-react-component.vercel.app/demo/before-upload#beforeupload)
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Upload, message } from 'antd';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import type { UploadChangeParam } from 'antd/es/upload';
+import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
 
-function getBase64(img, callback) {
+const getBase64 = (img: RcFile, callback: (url: string) => void) => {
   const reader = new FileReader();
-  reader.addEventListener('load', () => callback(reader.result));
+  reader.addEventListener('load', () => callback(reader.result as string));
   reader.readAsDataURL(img);
-}
+};
 
-function beforeUpload(file) {
+const beforeUpload = (file: RcFile) => {
   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
   if (!isJpgOrPng) {
     message.error('You can only upload JPG/PNG file!');
@@ -37,52 +40,47 @@ function beforeUpload(file) {
     message.error('Image must smaller than 2MB!');
   }
   return isJpgOrPng && isLt2M;
-}
+};
 
-class Avatar extends React.Component {
-  state = {
-    loading: false,
-  };
+const App: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const [imageUrl, setImageUrl] = useState<string>();
 
-  handleChange = info => {
+  const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
     if (info.file.status === 'uploading') {
-      this.setState({ loading: true });
+      setLoading(true);
       return;
     }
     if (info.file.status === 'done') {
       // Get this url from response in real world.
-      getBase64(info.file.originFileObj, imageUrl =>
-        this.setState({
-          imageUrl,
-          loading: false,
-        }),
-      );
+      getBase64(info.file.originFileObj as RcFile, url => {
+        setLoading(false);
+        setImageUrl(url);
+      });
     }
   };
 
-  render() {
-    const { loading, imageUrl } = this.state;
-    const uploadButton = (
-      <div>
-        {loading ? <LoadingOutlined /> : <PlusOutlined />}
-        <div style={{ marginTop: 8 }}>Upload</div>
-      </div>
-    );
-    return (
-      <Upload
-        name="avatar"
-        listType="picture-card"
-        className="avatar-uploader"
-        showUploadList={false}
-        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-        beforeUpload={beforeUpload}
-        onChange={this.handleChange}
-      >
-        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
-      </Upload>
-    );
-  }
-}
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  );
 
-export default Avatar;
+  return (
+    <Upload
+      name="avatar"
+      listType="picture-card"
+      className="avatar-uploader"
+      showUploadList={false}
+      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+      beforeUpload={beforeUpload}
+      onChange={handleChange}
+    >
+      {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
+    </Upload>
+  );
+};
+
+export default App;
 ```
diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md
index 9098f45a51..5f7733460d 100644
--- a/components/upload/demo/basic.md
+++ b/components/upload/demo/basic.md
@@ -13,11 +13,13 @@ title:
 
 Classic mode. File selection dialog pops up when upload button is clicked.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, message, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
 
-const props = {
+const props: UploadProps = {
   name: 'file',
   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   headers: {
@@ -35,9 +37,11 @@ const props = {
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Click to Upload</Button>
   </Upload>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/crop-image.md b/components/upload/demo/crop-image.md
index 50b1d0a3a3..1853e1558f 100644
--- a/components/upload/demo/crop-image.md
+++ b/components/upload/demo/crop-image.md
@@ -13,13 +13,14 @@ title:
 
 Use [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) to crop image before uploading.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Upload } from 'antd';
 import ImgCrop from 'antd-img-crop';
+import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
 
-const Demo = () => {
-  const [fileList, setFileList] = useState([
+const App: React.FC = () => {
+  const [fileList, setFileList] = useState<UploadFile[]>([
     {
       uid: '-1',
       name: 'image.png',
@@ -28,23 +29,23 @@ const Demo = () => {
     },
   ]);
 
-  const onChange = ({ fileList: newFileList }) => {
+  const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
     setFileList(newFileList);
   };
 
-  const onPreview = async file => {
-    let src = file.url;
+  const onPreview = async (file: UploadFile) => {
+    let src = file.url as string;
     if (!src) {
       src = await new Promise(resolve => {
         const reader = new FileReader();
-        reader.readAsDataURL(file.originFileObj);
-        reader.onload = () => resolve(reader.result);
+        reader.readAsDataURL(file.originFileObj as RcFile);
+        reader.onload = () => resolve(reader.result as string);
       });
     }
     const image = new Image();
     image.src = src;
     const imgWindow = window.open(src);
-    imgWindow.document.write(image.outerHTML);
+    imgWindow?.document.write(image.outerHTML);
   };
 
   return (
@@ -62,5 +63,5 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default App;
 ```
diff --git a/components/upload/demo/customize-progress-bar.md b/components/upload/demo/customize-progress-bar.md
index ad0b1e23b6..d0f00dc507 100644
--- a/components/upload/demo/customize-progress-bar.md
+++ b/components/upload/demo/customize-progress-bar.md
@@ -13,11 +13,13 @@ title:
 
 Use `progress` for customize progress bar.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, message, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
 
-const props = {
+const props: UploadProps = {
   name: 'file',
   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   headers: {
@@ -39,13 +41,15 @@ const props = {
       '100%': '#87d068',
     },
     strokeWidth: 3,
-    format: percent => `${parseFloat(percent.toFixed(2))}%`,
+    format: percent => percent && `${parseFloat(percent.toFixed(2))}%`,
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Click to Upload</Button>
   </Upload>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md
index b02e85b956..45be939abf 100644
--- a/components/upload/demo/defaultFileList.md
+++ b/components/upload/demo/defaultFileList.md
@@ -13,11 +13,13 @@ title:
 
 Use `defaultFileList` for uploaded files when page init.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
 
-const props = {
+const props: UploadProps = {
   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   onChange({ file, fileList }) {
     if (file.status !== 'uploading') {
@@ -48,9 +50,11 @@ const props = {
   ],
 };
 
-export default () => (
+const App: React.FC = () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
   </Upload>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/directory.md b/components/upload/demo/directory.md
index ab9215dbaa..df794376b2 100644
--- a/components/upload/demo/directory.md
+++ b/components/upload/demo/directory.md
@@ -13,13 +13,16 @@ title:
 
 You can select and upload a whole directory.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
     <Button icon={<UploadOutlined />}>Upload Directory</Button>
   </Upload>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/drag-sorting.md b/components/upload/demo/drag-sorting.md
index edbe6d31a0..8ffdc3b477 100644
--- a/components/upload/demo/drag-sorting.md
+++ b/components/upload/demo/drag-sorting.md
@@ -13,18 +13,31 @@ title:
 
 By using `itemRender`, we can integrate upload with react-dnd to implement drag sorting of uploadList.
 
-```jsx
+```tsx
 import React, { useState, useCallback, useRef } from 'react';
 import { Upload, Button, Tooltip } from 'antd';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
 
 const type = 'DragableUploadList';
 
-const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
-  const ref = React.useRef();
+interface DragableUploadListItemProps {
+  originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+  file: UploadFile;
+  fileList: UploadFile[];
+  moveRow: (dragIndex: any, hoverIndex: any) => void;
+}
+
+const DragableUploadListItem = ({
+  originNode,
+  moveRow,
+  file,
+  fileList,
+}: DragableUploadListItemProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   const index = fileList.indexOf(file);
   const [{ isOver, dropClassName }, drop] = useDrop({
     accept: type,
@@ -38,7 +51,7 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
         dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
       };
     },
-    drop: item => {
+    drop: (item: any) => {
       moveRow(item.index, index);
     },
   });
@@ -62,8 +75,8 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
   );
 };
 
-const DragSortingUpload = () => {
-  const [fileList, setFileList] = useState([
+const App: React.FC = () => {
+  const [fileList, setFileList] = useState<UploadFile[]>([
     {
       uid: '-1',
       name: 'image1.png',
@@ -96,7 +109,7 @@ const DragSortingUpload = () => {
   ]);
 
   const moveRow = useCallback(
-    (dragIndex, hoverIndex) => {
+    (dragIndex: number, hoverIndex: number) => {
       const dragRow = fileList[dragIndex];
       setFileList(
         update(fileList, {
@@ -110,7 +123,7 @@ const DragSortingUpload = () => {
     [fileList],
   );
 
-  const onChange = ({ fileList: newFileList }) => {
+  const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
     setFileList(newFileList);
   };
 
@@ -135,7 +148,7 @@ const DragSortingUpload = () => {
   );
 };
 
-export default DragSortingUpload;
+export default App;
 ```
 
 ```css
diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md
index a607835ac8..bdb4f31ace 100644
--- a/components/upload/demo/drag.md
+++ b/components/upload/demo/drag.md
@@ -17,13 +17,15 @@ You can drag files to a specific area, to upload. Alternatively, you can also up
 
 We can upload serveral files at once in modern browsers by giving the input the `multiple` attribute.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, message } from 'antd';
 import { InboxOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
 
 const { Dragger } = Upload;
 
-const props = {
+const props: UploadProps = {
   name: 'file',
   multiple: true,
   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
@@ -43,7 +45,7 @@ const props = {
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <Dragger {...props}>
     <p className="ant-upload-drag-icon">
       <InboxOutlined />
@@ -55,4 +57,6 @@ export default () => (
     </p>
   </Dragger>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/file-type.md b/components/upload/demo/file-type.md
index 20f6c2692c..65b0e3278f 100644
--- a/components/upload/demo/file-type.md
+++ b/components/upload/demo/file-type.md
@@ -14,7 +14,8 @@ title:
 
 Displays the corresponding by default by type icon
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Upload, Modal } from 'antd';
 import {
   LoadingOutlined,
@@ -25,67 +26,64 @@ import {
   FileExcelTwoTone,
   PlusOutlined,
 } from '@ant-design/icons';
+import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
 
-function getBase64(file) {
-  return new Promise((resolve, reject) => {
+const getBase64 = (file: RcFile): Promise<string> =>
+  new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
+    reader.onload = () => resolve(reader.result as string);
     reader.onerror = error => reject(error);
   });
-}
 
-class App extends React.Component {
-  state = {
-    previewVisible: false,
-    previewImage: '',
-    fileList: [
-      {
-        uid: '-2',
-        name: 'pdf.pdf',
-        status: 'done',
-        url: 'http://cdn07.foxitsoftware.cn/pub/foxit/cpdf/FoxitCompanyProfile.pdf',
-      },
-      {
-        uid: '-3',
-        name: 'doc.doc',
-        status: 'done',
-        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.doc',
-      },
-      {
-        uid: '-4',
-        name: 'image.png',
-        status: 'error',
-      },
-      {
-        uid: '-5',
-        name: 'pdf.pdf',
-        status: 'error',
-      },
-      {
-        uid: '-6',
-        name: 'doc.doc',
-        status: 'error',
-      },
-    ],
-  };
+const App: React.FC = () => {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+  const [fileList, setFileList] = useState<UploadFile[]>([
+    {
+      uid: '-2',
+      name: 'pdf.pdf',
+      status: 'done',
+      url: 'http://cdn07.foxitsoftware.cn/pub/foxit/cpdf/FoxitCompanyProfile.pdf',
+    },
+    {
+      uid: '-3',
+      name: 'doc.doc',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.doc',
+    },
+    {
+      uid: '-4',
+      name: 'image.png',
+      status: 'error',
+    },
+    {
+      uid: '-5',
+      name: 'pdf.pdf',
+      status: 'error',
+    },
+    {
+      uid: '-6',
+      name: 'doc.doc',
+      status: 'error',
+    },
+  ]);
 
-  handleCancel = () => this.setState({ previewVisible: false });
+  const handleCancel = () => setPreviewVisible(false);
 
-  handlePreview = async file => {
+  const handlePreview = async (file: UploadFile) => {
     if (!file.url && !file.preview) {
-      file.preview = await getBase64(file.originFileObj);
+      file.preview = await getBase64(file.originFileObj as RcFile);
     }
 
-    this.setState({
-      previewImage: file.url || file.preview,
-      previewVisible: true,
-    });
+    setPreviewVisible(true);
+    setPreviewImage(file.url || (file.preview as string));
   };
 
-  handleChange = ({ fileList }) => this.setState({ fileList });
+  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
+    setFileList(newFileList);
 
-  handleIconRender = (file, listType) => {
+  const handleIconRender: UploadProps['iconRender'] = (file, listType) => {
     const fileSufIconList = [
       { type: <FilePdfTwoTone />, suf: ['.pdf'] },
       { type: <FileExcelTwoTone />, suf: ['.xlsx', '.xls', '.csv'] },
@@ -111,33 +109,31 @@ class App extends React.Component {
     return icon;
   };
 
-  render() {
-    const { previewVisible, previewImage, fileList } = this.state;
-    const uploadButton = (
-      <div>
-        <PlusOutlined />
-        <div style={{ marginTop: 8 }}>Upload</div>
-      </div>
-    );
-    return (
-      <>
-        <Upload
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          listType="picture-card"
-          fileList={fileList}
-          onPreview={this.handlePreview}
-          onChange={this.handleChange}
-          iconRender={this.handleIconRender}
-        >
-          {fileList.length >= 8 ? null : uploadButton}
-        </Upload>
-        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
-          <img alt="example" style={{ width: '100%' }} src={previewImage} />
-        </Modal>
-      </>
-    );
-  }
-}
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  );
+
+  return (
+    <>
+      <Upload
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        listType="picture-card"
+        fileList={fileList}
+        onPreview={handlePreview}
+        onChange={handleChange}
+        iconRender={handleIconRender}
+      >
+        {fileList.length >= 8 ? null : uploadButton}
+      </Upload>
+      <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
+        <img alt="example" style={{ width: '100%' }} src={previewImage} />
+      </Modal>
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md
index d4021c6dd4..fb7ada2d1a 100644
--- a/components/upload/demo/fileList.md
+++ b/components/upload/demo/fileList.md
@@ -21,31 +21,32 @@ You can gain full control over filelist by configuring `fileList`. You can accom
 
 2. read from response and show file link.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadFile } from 'antd/es/upload/interface';
+import type { UploadProps } from 'antd';
 
-class App extends React.Component {
-  state = {
-    fileList: [
-      {
-        uid: '-1',
-        name: 'xxx.png',
-        status: 'done',
-        url: 'http://www.baidu.com/xxx.png',
-      },
-    ],
-  };
+const App: React.FC = () => {
+  const [fileList, setFileList] = useState<UploadFile[]>([
+    {
+      uid: '-1',
+      name: 'xxx.png',
+      status: 'done',
+      url: 'http://www.baidu.com/xxx.png',
+    },
+  ]);
 
-  handleChange = info => {
-    let fileList = [...info.fileList];
+  const handleChange: UploadProps['onChange'] = info => {
+    let newFileList = [...info.fileList];
 
     // 1. Limit the number of uploaded files
     // Only to show two recent uploaded files, and old ones will be replaced by the new
-    fileList = fileList.slice(-2);
+    newFileList = fileList.slice(-2);
 
     // 2. Read from response and show file link
-    fileList = fileList.map(file => {
+    newFileList = fileList.map(file => {
       if (file.response) {
         // Component will show file.url as link
         file.url = file.response.url;
@@ -53,22 +54,20 @@ class App extends React.Component {
       return file;
     });
 
-    this.setState({ fileList });
+    setFileList(newFileList);
   };
 
-  render() {
-    const props = {
-      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-      onChange: this.handleChange,
-      multiple: true,
-    };
-    return (
-      <Upload {...props} fileList={this.state.fileList}>
-        <Button icon={<UploadOutlined />}>Upload</Button>
-      </Upload>
-    );
-  }
-}
+  const props = {
+    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+    onChange: handleChange,
+    multiple: true,
+  };
+  return (
+    <Upload {...props} fileList={fileList}>
+      <Button icon={<UploadOutlined />}>Upload</Button>
+    </Upload>
+  );
+};
 
 export default App;
 ```
diff --git a/components/upload/demo/max-count.md b/components/upload/demo/max-count.md
index b4799fb7e0..c98ee90ab2 100644
--- a/components/upload/demo/max-count.md
+++ b/components/upload/demo/max-count.md
@@ -13,11 +13,12 @@ title:
 
 Limit files with `maxCount`. Will replace current one when `maxCount` is `1`.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, Button, Space } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 
-export default () => (
+const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }} size="large">
     <Upload
       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
@@ -36,4 +37,6 @@ export default () => (
     </Upload>
   </Space>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index 68db2396c4..71b768458c 100644
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@@ -13,111 +13,102 @@ title:
 
 After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Upload, Modal } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
+import type { UploadFile } from 'antd/es/upload/interface';
+import type { RcFile, UploadProps } from 'antd/es/upload';
 
-function getBase64(file) {
-  return new Promise((resolve, reject) => {
+const getBase64 = (file: RcFile): Promise<string> =>
+  new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
+    reader.onload = () => resolve(reader.result as string);
     reader.onerror = error => reject(error);
   });
-}
 
-class App extends React.Component {
-  state = {
-    previewVisible: false,
-    previewImage: '',
-    previewTitle: '',
-    fileList: [
-      {
-        uid: '-1',
-        name: 'image.png',
-        status: 'done',
-        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      },
-      {
-        uid: '-2',
-        name: 'image.png',
-        status: 'done',
-        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      },
-      {
-        uid: '-3',
-        name: 'image.png',
-        status: 'done',
-        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      },
-      {
-        uid: '-4',
-        name: 'image.png',
-        status: 'done',
-        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      },
-      {
-        uid: '-xxx',
-        percent: 50,
-        name: 'image.png',
-        status: 'uploading',
-        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      },
-      {
-        uid: '-5',
-        name: 'image.png',
-        status: 'error',
-      },
-    ],
-  };
+const App: React.FC = () => {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+  const [previewTitle, setPreviewTitle] = useState('');
+  const [fileList, setFileList] = useState<UploadFile[]>([
+    {
+      uid: '-1',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-2',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-3',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-4',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-xxx',
+      percent: 50,
+      name: 'image.png',
+      status: 'uploading',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-5',
+      name: 'image.png',
+      status: 'error',
+    },
+  ]);
 
-  handleCancel = () => this.setState({ previewVisible: false });
+  const handleCancel = () => setPreviewVisible(false);
 
-  handlePreview = async file => {
+  const handlePreview = async (file: UploadFile) => {
     if (!file.url && !file.preview) {
-      file.preview = await getBase64(file.originFileObj);
+      file.preview = await getBase64(file.originFileObj as RcFile);
     }
 
-    this.setState({
-      previewImage: file.url || file.preview,
-      previewVisible: true,
-      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
-    });
+    setPreviewImage(file.url || (file.preview as string));
+    setPreviewVisible(true);
+    setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
   };
 
-  handleChange = ({ fileList }) => this.setState({ fileList });
+  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
+    setFileList(newFileList);
 
-  render() {
-    const { previewVisible, previewImage, fileList, previewTitle } = this.state;
-    const uploadButton = (
-      <div>
-        <PlusOutlined />
-        <div style={{ marginTop: 8 }}>Upload</div>
-      </div>
-    );
-    return (
-      <>
-        <Upload
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          listType="picture-card"
-          fileList={fileList}
-          onPreview={this.handlePreview}
-          onChange={this.handleChange}
-        >
-          {fileList.length >= 8 ? null : uploadButton}
-        </Upload>
-        <Modal
-          visible={previewVisible}
-          title={previewTitle}
-          footer={null}
-          onCancel={this.handleCancel}
-        >
-          <img alt="example" style={{ width: '100%' }} src={previewImage} />
-        </Modal>
-      </>
-    );
-  }
-}
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  );
+  return (
+    <>
+      <Upload
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        listType="picture-card"
+        fileList={fileList}
+        onPreview={handlePreview}
+        onChange={handleChange}
+      >
+        {fileList.length >= 8 ? null : uploadButton}
+      </Upload>
+      <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
+        <img alt="example" style={{ width: '100%' }} src={previewImage} />
+      </Modal>
+    </>
+  );
+};
 
 export default App;
 ```
diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
index 5169fd9c91..0affe120c6 100644
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@@ -13,11 +13,13 @@ title:
 
 If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadFile } from 'antd/es/upload/interface';
 
-const fileList = [
+const fileList: UploadFile[] = [
   {
     uid: '-1',
     name: 'xxx.png',
@@ -32,7 +34,7 @@ const fileList = [
   },
 ];
 
-export default () => (
+const App: React.FC = () => (
   <>
     <Upload
       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
@@ -53,6 +55,8 @@ export default () => (
     </Upload>
   </>
 );
+
+export default App;
 ```
 
 ```css
diff --git a/components/upload/demo/preview-file.md b/components/upload/demo/preview-file.md
index 0c36225367..f5004898a3 100644
--- a/components/upload/demo/preview-file.md
+++ b/components/upload/demo/preview-file.md
@@ -13,11 +13,13 @@ title:
 
 Customize local preview. Can handle with non-image format files such as video.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
 
-const props = {
+const props: UploadProps = {
   action: '//jsonplaceholder.typicode.com/posts/',
   listType: 'picture',
   previewFile(file) {
@@ -32,9 +34,11 @@ const props = {
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
   </Upload>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/transform-file.md b/components/upload/demo/transform-file.md
index 5ff42d68ab..74553a144b 100644
--- a/components/upload/demo/transform-file.md
+++ b/components/upload/demo/transform-file.md
@@ -13,11 +13,13 @@ title:
 
 Use `beforeUpload` for transform file before request such as add a watermark.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
 
-const props = {
+const props: UploadProps = {
   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   listType: 'picture',
   beforeUpload(file) {
@@ -26,27 +28,29 @@ const props = {
       reader.readAsDataURL(file);
       reader.onload = () => {
         const img = document.createElement('img');
-        img.src = reader.result;
+        img.src = reader.result as string;
         img.onload = () => {
           const canvas = document.createElement('canvas');
           canvas.width = img.naturalWidth;
           canvas.height = img.naturalHeight;
-          const ctx = canvas.getContext('2d');
+          const ctx = canvas.getContext('2d')!;
           ctx.drawImage(img, 0, 0);
           ctx.fillStyle = 'red';
           ctx.textBaseline = 'middle';
           ctx.font = '33px Arial';
           ctx.fillText('Ant Design', 20, 20);
-          canvas.toBlob(resolve);
+          canvas.toBlob(result => resolve(result as any));
         };
       };
     });
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
   </Upload>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/upload-custom-action-icon.md b/components/upload/demo/upload-custom-action-icon.md
index 0941924964..3485cb2c9a 100644
--- a/components/upload/demo/upload-custom-action-icon.md
+++ b/components/upload/demo/upload-custom-action-icon.md
@@ -13,11 +13,13 @@ title:
 
 Use `showUploadList` for custom action icons of files.
 
-```jsx
+```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined, StarOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
 
-const props = {
+const props: UploadProps = {
   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   onChange({ file, fileList }) {
     if (file.status !== 'uploading') {
@@ -54,9 +56,11 @@ const props = {
   },
 };
 
-export default () => (
+const App: React.FC = () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
   </Upload>
 );
+
+export default App;
 ```
diff --git a/components/upload/demo/upload-manually.md b/components/upload/demo/upload-manually.md
index f136d1e08d..aeca6f8fb0 100644
--- a/components/upload/demo/upload-manually.md
+++ b/components/upload/demo/upload-manually.md
@@ -13,25 +13,22 @@ title:
 
 Upload files manually after `beforeUpload` returns `false`.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Upload, Button, message } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
 
-class Demo extends React.Component {
-  state = {
-    fileList: [],
-    uploading: false,
-  };
+const App: React.FC = () => {
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const [uploading, setUploading] = useState(false);
 
-  handleUpload = () => {
-    const { fileList } = this.state;
+  const handleUpload = () => {
     const formData = new FormData();
     fileList.forEach(file => {
-      formData.append('files[]', file);
-    });
-    this.setState({
-      uploading: true,
+      formData.append('files[]', file.originFileObj as RcFile);
     });
+    setUploading(true);
     // You can use any AJAX library you like
     fetch('https://www.mocky.io/v2/5cc8019d300000980a055e76', {
       method: 'POST',
@@ -39,61 +36,49 @@ class Demo extends React.Component {
     })
       .then(res => res.json())
       .then(() => {
-        this.setState({
-          fileList: [],
-        });
+        setFileList([]);
         message.success('upload successfully.');
       })
       .catch(() => {
         message.error('upload failed.');
       })
       .finally(() => {
-        this.setState({
-          uploading: false,
-        });
+        setUploading(false);
       });
   };
 
-  render() {
-    const { uploading, fileList } = this.state;
-    const props = {
-      onRemove: file => {
-        this.setState(state => {
-          const index = state.fileList.indexOf(file);
-          const newFileList = state.fileList.slice();
-          newFileList.splice(index, 1);
-          return {
-            fileList: newFileList,
-          };
-        });
-      },
-      beforeUpload: file => {
-        this.setState(state => ({
-          fileList: [...state.fileList, file],
-        }));
-        return false;
-      },
-      fileList,
-    };
+  const props: UploadProps = {
+    onRemove: file => {
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+      setFileList(newFileList);
+    },
+    beforeUpload: file => {
+      setFileList([...fileList, file]);
 
-    return (
-      <>
-        <Upload {...props}>
-          <Button icon={<UploadOutlined />}>Select File</Button>
-        </Upload>
-        <Button
-          type="primary"
-          onClick={this.handleUpload}
-          disabled={fileList.length === 0}
-          loading={uploading}
-          style={{ marginTop: 16 }}
-        >
-          {uploading ? 'Uploading' : 'Start Upload'}
-        </Button>
-      </>
-    );
-  }
-}
+      return false;
+    },
+    fileList,
+  };
 
-export default Demo;
+  return (
+    <>
+      <Upload {...props}>
+        <Button icon={<UploadOutlined />}>Select File</Button>
+      </Upload>
+      <Button
+        type="primary"
+        onClick={handleUpload}
+        disabled={fileList.length === 0}
+        loading={uploading}
+        style={{ marginTop: 16 }}
+      >
+        {uploading ? 'Uploading' : 'Start Upload'}
+      </Button>
+    </>
+  );
+};
+
+export default App;
 ```
diff --git a/components/upload/demo/upload-png-only.md b/components/upload/demo/upload-png-only.md
index 9cb86d2780..49c2fd2074 100644
--- a/components/upload/demo/upload-png-only.md
+++ b/components/upload/demo/upload-png-only.md
@@ -13,30 +13,30 @@ title:
 
 `beforeUpload` only prevent upload behavior when return false or reject promise, the prevented file would still show in file list. Here is the example you can keep prevented files out of list by return `UPLOAD.LIST_IGNORE`.
 
-```jsx
-import React, { useState } from 'react';
+```tsx
+import React from 'react';
 import { Upload, Button, message } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
 
-const App = () => {
-  const props = {
-    beforeUpload: file => {
-      const isPNG = file.type === 'image/png';
-      if (!isPNG) {
-        message.error(`${file.name} is not a png file`);
-      }
-      return isPNG || Upload.LIST_IGNORE;
-    },
-    onChange: info => {
-      console.log(info.fileList);
-    },
-  };
-  return (
-    <Upload {...props}>
-      <Button icon={<UploadOutlined />}>Upload png only</Button>
-    </Upload>
-  );
+const props: UploadProps = {
+  beforeUpload: file => {
+    const isPNG = file.type === 'image/png';
+    if (!isPNG) {
+      message.error(`${file.name} is not a png file`);
+    }
+    return isPNG || Upload.LIST_IGNORE;
+  },
+  onChange: info => {
+    console.log(info.fileList);
+  },
 };
 
+const App: React.FC = () => (
+  <Upload {...props}>
+    <Button icon={<UploadOutlined />}>Upload png only</Button>
+  </Upload>
+);
+
 export default App;
 ```
diff --git a/components/upload/demo/upload-with-aliyun-oss.md b/components/upload/demo/upload-with-aliyun-oss.md
index 11dcfe41d4..cb1f1454ee 100644
--- a/components/upload/demo/upload-with-aliyun-oss.md
+++ b/components/upload/demo/upload-with-aliyun-oss.md
@@ -13,34 +13,33 @@ title:
 
 Use Aliyun OSS upload example.
 
-```jsx
+```tsx
+import React, { useState, useEffect } from 'react';
 import { Form, Upload, message, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
+import type { UploadFile } from 'antd/es/upload/interface';
 
-class AliyunOSSUpload extends React.Component {
-  state = {
-    OSSData: {},
-  };
+interface OSSDataType {
+  dir: string;
+  expire: string;
+  host: string;
+  accessId: string;
+  policy: string;
+  signature: string;
+}
 
-  async componentDidMount() {
-    await this.init();
-  }
+interface AliyunOSSUploadProps {
+  value?: UploadFile[];
+  onChange?: (fileList: UploadFile[]) => void;
+}
 
-  init = async () => {
-    try {
-      const OSSData = await this.mockGetOSSData();
-
-      this.setState({
-        OSSData,
-      });
-    } catch (error) {
-      message.error(error);
-    }
-  };
+const AliyunOSSUpload = ({ value, onChange }: AliyunOSSUploadProps) => {
+  const [OSSData, setOSSData] = useState<OSSDataType>();
 
   // Mock get OSS api
   // https://help.aliyun.com/document_detail/31988.html
-  mockGetOSSData = () => ({
+  const mockGetOSSData = () => ({
     dir: 'user-dir/',
     expire: '1577811661',
     host: '//www.mocky.io/v2/5cc8019d300000980a055e76',
@@ -49,70 +48,74 @@ class AliyunOSSUpload extends React.Component {
     signature: 'ZGFob25nc2hhbw==',
   });
 
-  onChange = ({ fileList }) => {
-    const { onChange } = this.props;
-    console.log('Aliyun OSS:', fileList);
-    if (onChange) {
-      onChange([...fileList]);
+  const init = async () => {
+    try {
+      const result = await mockGetOSSData();
+      setOSSData(result);
+    } catch (error) {
+      message.error(error);
     }
   };
 
-  onRemove = file => {
-    const { value, onChange } = this.props;
+  useEffect(() => {
+    init();
+  }, []);
 
-    const files = value.filter(v => v.url !== file.url);
+  const handleChange: UploadProps['onChange'] = ({ fileList }) => {
+    console.log('Aliyun OSS:', fileList);
+    onChange?.([...fileList]);
+  };
+
+  const onRemove = (file: UploadFile) => {
+    const files = (value || []).filter(v => v.url !== file.url);
 
     if (onChange) {
       onChange(files);
     }
   };
 
-  getExtraData = file => {
-    const { OSSData } = this.state;
+  const getExtraData: UploadProps['data'] = file => ({
+    key: file.url,
+    OSSAccessKeyId: OSSData?.accessId,
+    policy: OSSData?.policy,
+    Signature: OSSData?.signature,
+  });
 
-    return {
-      key: file.url,
-      OSSAccessKeyId: OSSData.accessId,
-      policy: OSSData.policy,
-      Signature: OSSData.signature,
-    };
-  };
+  const beforeUpload: UploadProps['beforeUpload'] = async file => {
+    if (!OSSData) return false;
 
-  beforeUpload = async file => {
-    const { OSSData } = this.state;
-    const expire = OSSData.expire * 1000;
+    const expire = Number(OSSData.expire) * 1000;
 
     if (expire < Date.now()) {
-      await this.init();
+      await init();
     }
 
     const suffix = file.name.slice(file.name.lastIndexOf('.'));
     const filename = Date.now() + suffix;
+    // @ts-ignore
     file.url = OSSData.dir + filename;
 
     return file;
   };
 
-  render() {
-    const { value } = this.props;
-    const props = {
-      name: 'file',
-      fileList: value,
-      action: this.state.OSSData.host,
-      onChange: this.onChange,
-      onRemove: this.onRemove,
-      data: this.getExtraData,
-      beforeUpload: this.beforeUpload,
-    };
-    return (
-      <Upload {...props}>
-        <Button icon={<UploadOutlined />}>Click to Upload</Button>
-      </Upload>
-    );
-  }
-}
+  const uploadProps: UploadProps = {
+    name: 'file',
+    fileList: value,
+    action: OSSData?.host,
+    onChange: handleChange,
+    onRemove,
+    data: getExtraData,
+    beforeUpload,
+  };
 
-const App = () => (
+  return (
+    <Upload {...uploadProps}>
+      <Button icon={<UploadOutlined />}>Click to Upload</Button>
+    </Upload>
+  );
+};
+
+const App: React.FC = () => (
   <Form labelCol={{ span: 4 }}>
     <Form.Item label="Photos" name="photos">
       <AliyunOSSUpload />
diff --git a/package.json b/package.json
index 98346b8c42..fb7753e09d 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,7 @@
     "@ant-design/react-slick": "~0.28.1",
     "@babel/runtime": "^7.12.5",
     "@ctrl/tinycolor": "^3.4.0",
+    "@types/qs": "^6.9.7",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "lodash": "^4.17.21",
@@ -179,6 +180,9 @@
     "@types/react-color": "^3.0.1",
     "@types/react-copy-to-clipboard": "^5.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/react-highlight-words": "^0.16.4",
+    "@types/react-resizable": "^1.7.4",
+    "@types/react-sticky": "^6.0.4",
     "@types/react-window": "^1.8.2",
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",