From fe5aebc42bf64152d6814d2b5fa5c8217054f6af Mon Sep 17 00:00:00 2001
From: HaixingOoO <974758671@qq.com>
Date: Fri, 3 May 2024 21:56:02 +0800
Subject: [PATCH] fix(all components): fix all components

---
 src/affix/_example/container.tsx              |  4 +--
 src/anchor/_example/base.tsx                  |  6 ++--
 src/auto-complete/_example/base.tsx           |  6 ++--
 src/auto-complete/_example/filter.tsx         |  8 ++---
 .../_example/trigger-element.tsx              | 21 ++++--------
 src/calendar/_example/card.tsx                |  6 ++--
 src/calendar/_example/cell-append.tsx         |  4 +--
 src/calendar/_example/cell.tsx                | 15 ++++++---
 src/calendar/_example/controller-config.tsx   | 28 ++++++++--------
 src/calendar/_example/event-props-api.tsx     | 14 ++++----
 src/calendar/_example/events.tsx              | 14 ++++----
 src/calendar/_example/filter.tsx              |  2 +-
 src/calendar/_example/first-day-of-week.tsx   |  2 +-
 src/calendar/_example/mode.tsx                |  6 ++--
 src/calendar/_example/slot-props-api.tsx      | 19 +++++++----
 src/calendar/_example/week.tsx                |  4 +--
 src/card/_example/footer-actions.tsx          | 25 ++++++++++----
 src/card/_example/footer-content-actions.tsx  |  4 +--
 src/card/_example/footer.tsx                  |  6 ++--
 src/card/_example/header-footer-actions.tsx   | 10 +++---
 .../header-subtitle-footer-actions.tsx        | 10 +++---
 src/cascader/_example/base.tsx                |  6 ++--
 src/cascader/_example/check-strictly.tsx      | 10 +++---
 src/cascader/_example/collapsed.tsx           |  6 ++--
 src/cascader/_example/ellipsis.tsx            |  6 ++--
 src/cascader/_example/filterable.tsx          | 10 +++---
 src/cascader/_example/keys.tsx                | 10 +++---
 src/cascader/_example/load.tsx                | 17 +++++-----
 src/cascader/_example/max.tsx                 |  6 ++--
 src/cascader/_example/multiple.tsx            |  6 ++--
 src/cascader/_example/panel.tsx               | 10 +++---
 src/cascader/_example/show-all-levels.tsx     | 10 +++---
 src/cascader/_example/size.tsx                |  6 ++--
 src/cascader/_example/trigger.tsx             |  6 ++--
 src/cascader/_example/value-display.tsx       | 22 ++++++-------
 src/cascader/_example/value-mode.tsx          | 14 ++++----
 src/cascader/_example/value-type.tsx          | 10 +++---
 src/cascader/type.ts                          |  5 +--
 src/checkbox/_example/group.tsx               |  2 +-
 src/checkbox/_example/max.tsx                 |  2 +-
 src/color-picker/_example/enable-alpha.tsx    |  4 +--
 src/color-picker/_example/panel.tsx           |  8 ++---
 src/config-provider/_example/calendar.tsx     |  2 +-
 src/config-provider/_example/date-picker.tsx  |  6 ++--
 src/config-provider/_example/others.tsx       |  3 +-
 src/config-provider/_example/table.tsx        |  4 +--
 src/date-picker/_example/base.tsx             |  6 ++--
 src/date-picker/_example/custom-icon.tsx      |  6 ++--
 src/date-picker/_example/date-presets-alt.tsx | 14 ++++----
 src/date-picker/_example/date-range.tsx       | 20 +++++++----
 src/date-picker/_example/date-time.tsx        | 10 +++---
 src/date-picker/_example/disable-date.tsx     |  2 +-
 .../_example/first-day-of-week.tsx            |  2 +-
 src/date-picker/_example/month.tsx            | 12 ++++---
 src/date-picker/_example/panel.tsx            | 28 ++++++++++++----
 src/date-picker/_example/quarter.tsx          | 12 ++++---
 src/date-picker/_example/week.tsx             | 12 ++++---
 src/date-picker/_example/year.tsx             | 12 ++++---
 src/descriptions/_example/colon.tsx           |  2 +-
 src/descriptions/_example/column.tsx          |  7 +++-
 src/descriptions/_example/custom-style.tsx    |  4 +--
 src/descriptions/_example/layout.tsx          | 15 ++++++---
 src/descriptions/_example/size.tsx            | 10 ++++--
 src/dialog/_example/attach.tsx                |  4 +--
 src/dialog/_example/base.tsx                  | 14 ++++----
 src/dialog/_example/modal.tsx                 |  4 +--
 src/dialog/_example/position.tsx              |  5 +--
 src/drawer/_example/attach-parent.tsx         | 12 ++++---
 src/drawer/_example/placement.tsx             |  6 ++--
 src/drawer/_example/popup.tsx                 |  6 ++--
 src/drawer/_example/size-draggable.tsx        |  6 ++--
 src/drawer/_example/size.tsx                  |  4 +--
 src/dropdown/_example/base.tsx                |  4 +--
 src/dropdown/_example/button.tsx              |  4 +--
 src/dropdown/_example/child.tsx               |  4 +--
 src/dropdown/_example/custom.tsx              |  4 +--
 src/dropdown/_example/disabled.tsx            |  4 +--
 src/dropdown/_example/icon.tsx                |  4 +--
 src/dropdown/_example/left.tsx                |  4 +--
 src/dropdown/_example/long.tsx                |  4 +--
 src/dropdown/_example/multiple.tsx            |  4 +--
 src/dropdown/_example/split.tsx               |  4 +--
 src/dropdown/_example/theme.tsx               |  8 ++---
 src/form/_example/align.tsx                   |  6 ++--
 src/form/_example/base.tsx                    | 18 ++++++++--
 src/form/_example/clear-validate.tsx          | 28 +++++++++++-----
 src/form/_example/custom-validator.tsx        | 33 ++++++++++++-------
 src/form/_example/disabled.tsx                | 15 ++++++---
 src/form/_example/error-message.tsx           |  3 +-
 src/form/_example/layout.tsx                  |  6 ++--
 src/form/_example/login.tsx                   |  6 ++--
 src/form/_example/nested-data.tsx             |  8 ++---
 src/form/_example/reset.tsx                   | 12 ++++---
 .../_example/validate-complicated-data.tsx    | 24 +++++++++-----
 src/form/_example/validate-message.tsx        | 13 ++++++--
 src/form/_example/validator-status.tsx        | 20 ++++++++---
 src/form/_example/validator.tsx               | 20 +++++++----
 src/form/index.ts                             |  1 +
 src/grid/_example-js/responsive.jsx           |  2 +-
 src/grid/_example/responsive.tsx              |  2 +-
 src/grid/type.ts                              | 10 +++---
 src/table/_example/expandable.tsx             |  2 +-
 tsconfig.build.json                           |  1 -
 103 files changed, 543 insertions(+), 375 deletions(-)

diff --git a/src/affix/_example/container.tsx b/src/affix/_example/container.tsx
index cd8a33c68..417549af7 100644
--- a/src/affix/_example/container.tsx
+++ b/src/affix/_example/container.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Affix, Button } from 'tdesign-react';
+import { Affix, Button, type AffixProps } from 'tdesign-react';
 
 export default function ContainerExample() {
   const [container, setContainer] = useState(null);
   const [affixed, setAffixed] = useState(false);
   const affixRef = useRef(null);
 
-  const handleFixedChange = (affixed, { top }) => {
+  const handleFixedChange: AffixProps['onFixedChange'] = (affixed, { top }) => {
     console.log('top', top);
     setAffixed(affixed);
   };
diff --git a/src/anchor/_example/base.tsx b/src/anchor/_example/base.tsx
index 42b49b00d..d60b2dfaa 100644
--- a/src/anchor/_example/base.tsx
+++ b/src/anchor/_example/base.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Anchor, type TdAnchorProps } from 'tdesign-react';
+import { Anchor, type AnchorProps } from 'tdesign-react';
 
 const { AnchorItem } = Anchor;
 
 export default function AnchorBase() {
-  const handleClick = ({ e, href, title }) => {
+  const handleClick: AnchorProps['onClick'] = ({ e, href, title }) => {
     console.log('handleClick', e, href, title);
   };
-  const handleChange: TdAnchorProps['onChange'] = (currentLink, prevLink) => {
+  const handleChange: AnchorProps['onChange'] = (currentLink, prevLink) => {
     console.log('currentLink', currentLink, 'prevLink', prevLink);
   };
   return (
diff --git a/src/auto-complete/_example/base.tsx b/src/auto-complete/_example/base.tsx
index 4cb8a9dc0..ed701baba 100644
--- a/src/auto-complete/_example/base.tsx
+++ b/src/auto-complete/_example/base.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Space, AutoComplete, Button } from 'tdesign-react';
+import { Space, AutoComplete, Button, type AutoCompleteProps } from 'tdesign-react';
 import { SearchIcon } from 'tdesign-icons-react';
 
 const classStyles = `
@@ -13,7 +13,7 @@ const classStyles = `
 </style>
 `;
 
-let timer = null;
+let timer: ReturnType<typeof setTimeout> = null;
 const AutoCompleteBase = () => {
   const [value, setValue] = useState('');
   const [value2, setValue2] = useState('');
@@ -21,7 +21,7 @@ const AutoCompleteBase = () => {
   const [options2] = useState(['第一个默认联想词', '第二个默认联想词', '第三个默认联想词']);
 
   // 输入框内容发生变化时进行搜索，100ms 搜索一次
-  const onChange = (val) => {
+  const onChange: AutoCompleteProps['onChange'] = (val) => {
     setValue(val);
     clearTimeout(timer);
     timer = setTimeout(() => {
diff --git a/src/auto-complete/_example/filter.tsx b/src/auto-complete/_example/filter.tsx
index 1ecef5780..cafa8e2f1 100644
--- a/src/auto-complete/_example/filter.tsx
+++ b/src/auto-complete/_example/filter.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Space, AutoComplete } from 'tdesign-react';
+import { Space, AutoComplete, type AutoCompleteProps } from 'tdesign-react';
 import escapeRegExp from 'lodash/escapeRegExp';
 
 const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词'];
@@ -8,10 +8,10 @@ const AutoCompleteBaseFilter = () => {
   const [value1, setValue1] = useState('');
   const [value2, setValue2] = useState('');
 
-  function filterWords(keyword, option) {
+  const filterWords: AutoCompleteProps['filter'] = (keyword, option: string) => {
     const regExp = new RegExp(escapeRegExp(keyword));
-    return regExp.test(option.text);
-  }
+    return regExp.test(option);
+  };
 
   return (
     <Space style={{ width: '100%' }}>
diff --git a/src/auto-complete/_example/trigger-element.tsx b/src/auto-complete/_example/trigger-element.tsx
index c337920dd..db6a80dd9 100644
--- a/src/auto-complete/_example/trigger-element.tsx
+++ b/src/auto-complete/_example/trigger-element.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { AutoComplete, Textarea } from 'tdesign-react';
+import { AutoComplete, Textarea, type AutoCompleteProps } from 'tdesign-react';
 
-let timer = null;
+let timer: ReturnType<typeof setTimeout> = null;
 
 const AutoCompleteTriggerElement = () => {
   const [value, setValue] = useState('');
@@ -12,7 +12,7 @@ const AutoCompleteTriggerElement = () => {
   ]);
 
   // 输入框内容发生变化时进行搜索，200ms 搜索一次
-  function onChange(val) {
+  const onChange: AutoCompleteProps['onChange'] = (val) => {
     setValue(val);
     clearTimeout(timer);
     timer = setTimeout(() => {
@@ -21,20 +21,11 @@ const AutoCompleteTriggerElement = () => {
       setOptions([`${pureValue}First ${text}`, `${pureValue}Second ${text}`, `${pureValue}Third ${text}`]);
       clearTimeout(timer);
     }, 200);
-  }
+  };
 
   return (
-    <AutoComplete
-      value={value}
-      options={options}
-      onChange={onChange}
-      highlightKeyword
-    >
-      <Textarea
-        value={value}
-        onChange={setValue}
-        placeholder="自定义联想词触发元素"
-      />
+    <AutoComplete value={value} options={options} onChange={onChange} highlightKeyword>
+      <Textarea value={value} onChange={setValue} placeholder="自定义联想词触发元素" />
     </AutoComplete>
   );
 };
diff --git a/src/calendar/_example/card.tsx b/src/calendar/_example/card.tsx
index 802f6dfa1..b2344ead6 100644
--- a/src/calendar/_example/card.tsx
+++ b/src/calendar/_example/card.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { Button, Calendar, Select, Switch, Space } from 'tdesign-react';
 
+type Theme = 'card' | 'full';
+
 export default function CalendarExample() {
   const ref = React.useRef(null);
-  const [theme, setTheme] = React.useState('card');
+  const [theme, setTheme] = React.useState<Theme>('card');
   const [fillWithZero, setFillWithZero] = React.useState(false);
   const toCurrent = React.useCallback(() => {
     ref.current.toCurrent();
@@ -24,7 +26,7 @@ export default function CalendarExample() {
             { label: '卡片风格', value: 'card' },
             { label: '全屏风格', value: 'full' },
           ]}
-          onChange={(value) => setTheme(value)}
+          onChange={(value: Theme) => setTheme(value)}
         />
         <Button theme="primary" style={{ marginLeft: '12px' }} onClick={toCurrent}>
           回到今天
diff --git a/src/calendar/_example/cell-append.tsx b/src/calendar/_example/cell-append.tsx
index ae34c3d23..e80bbe642 100644
--- a/src/calendar/_example/cell-append.tsx
+++ b/src/calendar/_example/cell-append.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { Calendar, Tag } from 'tdesign-react';
+import { Calendar, Tag, type CalendarCell } from 'tdesign-react';
 import dayjs from 'dayjs';
 
 export default function CalendarExample() {
-  const getShow = (data) =>
+  const getShow = (data: CalendarCell) =>
     data.mode === 'month'
       ? dayjs().format('YYYY-MM-DD') === data.formattedDate
       : data.date.getMonth() === new Date().getMonth();
diff --git a/src/calendar/_example/cell.tsx b/src/calendar/_example/cell.tsx
index b455a246b..c000bc891 100644
--- a/src/calendar/_example/cell.tsx
+++ b/src/calendar/_example/cell.tsx
@@ -1,19 +1,26 @@
 import React from 'react';
-import { Calendar, Tag, Space } from 'tdesign-react';
+import { Calendar, Tag, Space, type CalendarCell } from 'tdesign-react';
 import dayjs from 'dayjs';
 
+type TagTheme = 'default' | 'danger' | 'warning' | 'success' | 'primary';
+
+interface DataList {
+  label: string;
+  value: TagTheme;
+}
+
 export default function CalendarExample() {
-  const displayNum = React.useCallback((date) => {
+  const displayNum = React.useCallback((date: CalendarCell) => {
     if (date.mode === 'month') {
       return date.date.getDate();
     }
     return date.date.getMonth() + 1;
   }, []);
 
-  const isShow = (data) =>
+  const isShow = (data: CalendarCell) =>
     data.mode === 'month' ? dayjs(data.formattedDate).date() === 15 : dayjs(data.formattedDate).month() === 7;
 
-  const dataList = [
+  const dataList: DataList[] = [
     {
       value: 'danger',
       label: '错误事件',
diff --git a/src/calendar/_example/controller-config.tsx b/src/calendar/_example/controller-config.tsx
index 10c38a602..b1aa55124 100644
--- a/src/calendar/_example/controller-config.tsx
+++ b/src/calendar/_example/controller-config.tsx
@@ -112,12 +112,12 @@ export default function CalendarExample() {
           <legend>控件全局</legend>
           <p>
             <label>是否显示（全部控件）：</label>
-            <Switch value={visible} onChange={setVisible} />
+            <Switch value={visible} onChange={(val) => setVisible(val)} />
           </p>
           <br />
           <p>
             <label>是否禁用（全部控件）：</label>
-            <Switch value={disabled} onChange={setDisabled} />
+            <Switch value={disabled} onChange={(val) => setDisabled(val)} />
           </p>
           <br />
         </fieldset>
@@ -125,41 +125,41 @@ export default function CalendarExample() {
           <legend>控件局部</legend>
           <p>
             <label>是否显示“模式切换”控件：</label>
-            <Switch value={modeVisible} onChange={setModeVisible} />
+            <Switch value={modeVisible} onChange={(val) => setModeVisible(val)} />
             <label>是否禁用“模式切换”控件：</label>
-            <Switch value={modeDisabled} onChange={setModeDisabled} />
+            <Switch value={modeDisabled} onChange={(val) => setModeDisabled(val)} />
           </p>
           <br />
           <p>
             <label>是否显示“年份选择”控件：</label>
-            <Switch value={yearVisible} onChange={setYearVisible} />
+            <Switch value={yearVisible} onChange={(val) => setYearVisible(val)} />
             <label>是否禁用“年份选择”控件：</label>
-            <Switch value={yearDisabled} onChange={setYearDisabled} />
+            <Switch value={yearDisabled} onChange={(val) => setYearDisabled(val)} />
           </p>
           <br />
           <p>
             <label>是否显示“月份选择”控件：</label>
-            <Switch value={monthVisible} onChange={setMonthVisible} />
+            <Switch value={monthVisible} onChange={(val) => setMonthVisible(val)} />
             <label>是否禁用“月份选择”控件：</label>
-            <Switch value={monthDisabled} onChange={setMonthDisabled} />
+            <Switch value={monthDisabled} onChange={(val) => setMonthDisabled(val)} />
           </p>
           <br />
           <p>
             <label>是否禁用“隐藏周末”控件：</label>
-            <Switch value={weekendHideButtonDisabled} onChange={setWeekendHideButtonDisabled} />
+            <Switch value={weekendHideButtonDisabled} onChange={(val) => setWeekendHideButtonDisabled(val)} />
             <label>是否禁用“显示周末”控件：</label>
-            <Switch value={weekendShowButtonDisabled} onChange={setWeekendShowButtonDisabled} />
+            <Switch value={weekendShowButtonDisabled} onChange={(val) => setWeekendShowButtonDisabled(val)} />
             <label>是否显示“隐藏\显示周末”控件：</label>
-            <Switch value={weekendToggleVisible} onChange={setWeekendToggleVisible} />
+            <Switch value={weekendToggleVisible} onChange={(val) => setWeekendToggleVisible(val)} />
           </p>
           <br />
           <p>
             <label>是否显示“今天\本月”控件：</label>
-            <Switch value={currentVisible} onChange={setCurrentVisible} />
+            <Switch value={currentVisible} onChange={(val) => setCurrentVisible(val)} />
             <label>是否禁用“今天”按钮控件：</label>
-            <Switch value={currentDayButtonDisabled} onChange={setCurrentDayButtonDisabled} />
+            <Switch value={currentDayButtonDisabled} onChange={(val) => setCurrentDayButtonDisabled(val)} />
             <label>是否禁用“本月”按钮控件：</label>
-            <Switch value={currentMonthButtonDisabled} onChange={setCurrentMonthButtonDisabled} />
+            <Switch value={currentMonthButtonDisabled} onChange={(val) => setCurrentMonthButtonDisabled(val)} />
           </p>
           <br />
           <Calendar
diff --git a/src/calendar/_example/event-props-api.tsx b/src/calendar/_example/event-props-api.tsx
index 5f4404296..0c3aab971 100644
--- a/src/calendar/_example/event-props-api.tsx
+++ b/src/calendar/_example/event-props-api.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Switch, Calendar, List } from 'tdesign-react';
+import { Alert, Switch, Calendar, List, type CalendarProps, type CalendarCell } from 'tdesign-react';
 
 const { ListItem } = List;
 
@@ -7,7 +7,7 @@ export default function CalendarExample() {
   const [preventCellContextmenu, setPreventCellContextmenu] = React.useState(false);
   const [histories, setHistories] = React.useState([]);
 
-  const getDateStr = React.useCallback((calendarCell) => {
+  const getDateStr = React.useCallback((calendarCell: CalendarCell) => {
     const y = calendarCell.date.getFullYear();
     const m = calendarCell.date.getMonth() + 1;
     const d = calendarCell.date.getDate();
@@ -16,7 +16,7 @@ export default function CalendarExample() {
   }, []);
 
   const appendHistories = React.useCallback(
-    (content, data) => {
+    (content: string, data: CalendarCell) => {
       histories.unshift(`${content}`);
       setHistories([...histories]);
       console.info(data);
@@ -24,7 +24,7 @@ export default function CalendarExample() {
     [histories, setHistories],
   );
 
-  const onCellClick = React.useCallback(
+  const onCellClick = React.useCallback<CalendarProps['onCellClick']>(
     (cellEmitData) => {
       const output = getDateStr(cellEmitData.cell);
       appendHistories(`鼠标左键单击单元格 ${output}`, cellEmitData.cell);
@@ -32,7 +32,7 @@ export default function CalendarExample() {
     [getDateStr, appendHistories],
   );
 
-  const onCellDoubleClick = React.useCallback(
+  const onCellDoubleClick = React.useCallback<CalendarProps['onCellDoubleClick']>(
     (cellEmitData) => {
       const output = getDateStr(cellEmitData.cell);
       appendHistories(`鼠标双击单元格 ${output}`, cellEmitData.cell);
@@ -40,7 +40,7 @@ export default function CalendarExample() {
     [getDateStr, appendHistories],
   );
 
-  const onCellRightClick = React.useCallback(
+  const onCellRightClick = React.useCallback<CalendarProps['onCellRightClick']>(
     (cellEmitData) => {
       const output = getDateStr(cellEmitData.cell);
       appendHistories(`鼠标右键单击单元格 ${output}`, cellEmitData.cell);
@@ -48,7 +48,7 @@ export default function CalendarExample() {
     [getDateStr, appendHistories],
   );
 
-  const onControllerChange = React.useCallback(
+  const onControllerChange = React.useCallback<CalendarProps['onControllerChange']>(
     (data) => {
       appendHistories('控件值变化', data);
     },
diff --git a/src/calendar/_example/events.tsx b/src/calendar/_example/events.tsx
index d99d998ee..7279ceb83 100644
--- a/src/calendar/_example/events.tsx
+++ b/src/calendar/_example/events.tsx
@@ -1,26 +1,26 @@
 import React from 'react';
-import { Switch, Calendar } from 'tdesign-react';
+import { Switch, Calendar, type CalendarProps } from 'tdesign-react';
 
 export default function CalendarExample() {
   const [preventCellContextmenu, setPreventCellContextmenu] = React.useState(false);
 
-  const cellClick = (options) => {
+  const cellClick: CalendarProps['onCellClick'] = (options) => {
     console.log(`鼠标左键单击单元格 ${options.cell.formattedDate}`);
   };
 
-  const cellDoubleClick = (options) => {
+  const cellDoubleClick: CalendarProps['onCellDoubleClick'] = (options) => {
     console.log(`鼠标双击单元格 ${options.cell.formattedDate}`);
   };
 
-  const cellRightClick = (options) => {
+  const cellRightClick: CalendarProps['onCellRightClick'] = (options) => {
     console.log(`鼠标右键点击元格 ${options.cell.formattedDate}`);
   };
 
-  const controllerChange = (data) => {
+  const controllerChange: CalendarProps['onControllerChange'] = (data) => {
     console.log('控件值变化', data);
   };
 
-  const monthChange = (data) => {
+  const monthChange: CalendarProps['onMonthChange'] = (data) => {
     console.log('月份变化', data);
   };
 
@@ -28,7 +28,7 @@ export default function CalendarExample() {
     <div>
       <div style={{ margin: '12px 0' }}>
         <label>禁用单元格右键菜单：</label>
-        <Switch value={preventCellContextmenu} onChange={setPreventCellContextmenu} />
+        <Switch value={preventCellContextmenu} onChange={(val) => setPreventCellContextmenu(val)} />
       </div>
       <Calendar
         preventCellContextmenu={preventCellContextmenu}
diff --git a/src/calendar/_example/filter.tsx b/src/calendar/_example/filter.tsx
index ff55afcd6..ee05299f5 100644
--- a/src/calendar/_example/filter.tsx
+++ b/src/calendar/_example/filter.tsx
@@ -8,7 +8,7 @@ export default function CalendarExample() {
     <div>
       <div style={{ margin: '12px 0' }}>
         <label>{`${isShowWeekendDefault ? '显示' : '隐藏'}周末`}</label>
-        <Switch value={isShowWeekendDefault} onChange={setIsShowWeekendDefault} />
+        <Switch value={isShowWeekendDefault} onChange={(val) => setIsShowWeekendDefault(val)} />
       </div>
       <Calendar isShowWeekendDefault={isShowWeekendDefault} />
     </div>
diff --git a/src/calendar/_example/first-day-of-week.tsx b/src/calendar/_example/first-day-of-week.tsx
index d4469abe6..57934a415 100644
--- a/src/calendar/_example/first-day-of-week.tsx
+++ b/src/calendar/_example/first-day-of-week.tsx
@@ -24,7 +24,7 @@ export default function CalendarExample() {
             { label: '周六', value: 6 },
             { label: '周日', value: 7 },
           ]}
-          onChange={(value) => setFirstDayOfWeek(value)}
+          onChange={(value: number) => setFirstDayOfWeek(value)}
         />
       </Space>
       <Calendar firstDayOfWeek={firstDayOfWeek} />
diff --git a/src/calendar/_example/mode.tsx b/src/calendar/_example/mode.tsx
index 361d357d1..ee8708b24 100644
--- a/src/calendar/_example/mode.tsx
+++ b/src/calendar/_example/mode.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { Select, Calendar, Space } from 'tdesign-react';
 
+type Mode = 'year' | 'month';
+
 export default function CalendarExample() {
-  const [mode, setMode] = React.useState('year');
+  const [mode, setMode] = React.useState<Mode>('year');
 
   return (
     <div>
@@ -19,7 +21,7 @@ export default function CalendarExample() {
             { label: '月历', value: 'year' },
             { label: '日历', value: 'month' },
           ]}
-          onChange={(value) => setMode(value)}
+          onChange={(value: Mode) => setMode(value)}
         />
       </Space>
       <Calendar mode={mode} />
diff --git a/src/calendar/_example/slot-props-api.tsx b/src/calendar/_example/slot-props-api.tsx
index 9fc9a13d6..c9f6b7c54 100644
--- a/src/calendar/_example/slot-props-api.tsx
+++ b/src/calendar/_example/slot-props-api.tsx
@@ -1,19 +1,26 @@
 import React from 'react';
-import { Calendar, Space, Tag } from 'tdesign-react';
+import { Calendar, Space, Tag, type CalendarCell, type ControllerOptions } from 'tdesign-react';
 import dayjs from 'dayjs';
 
+type TagTheme = 'default' | 'danger' | 'warning' | 'success' | 'primary';
+
+interface DataList {
+  label: string;
+  value: TagTheme;
+}
+
 export default function CalendarExample() {
-  const displayNum = React.useCallback((date) => {
+  const displayNum = React.useCallback((date: CalendarCell) => {
     if (date.mode === 'month') {
       return date.date.getDate();
     }
     return date.date.getMonth() + 1;
   }, []);
 
-  const isShow = (data) =>
+  const isShow = (data: CalendarCell) =>
     data.mode === 'month' ? dayjs(data.formattedDate).date() === 15 : dayjs(data.formattedDate).month() === 7;
 
-  const dataList = [
+  const dataList: DataList[] = [
     {
       value: 'danger',
       label: '错误事件',
@@ -28,8 +35,8 @@ export default function CalendarExample() {
     },
   ];
 
-  const renderHead = (params) => {
-    let title = params.filterDate.getFullYear();
+  const renderHead = (params: ControllerOptions) => {
+    let title = `${params.filterDate.getFullYear()}`;
     if (params.mode === 'month') {
       title += `-${params.filterDate.getMonth() + 1}`;
     }
diff --git a/src/calendar/_example/week.tsx b/src/calendar/_example/week.tsx
index 584644b9b..0fc229b9c 100644
--- a/src/calendar/_example/week.tsx
+++ b/src/calendar/_example/week.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Calendar } from 'tdesign-react';
+import { Calendar, type CalendarWeek } from 'tdesign-react';
 
 export default function CalendarExample() {
-  const getWeekText = React.useCallback((calendarWeek) => {
+  const getWeekText = React.useCallback((calendarWeek: CalendarWeek) => {
     const output = `星期${calendarWeek.day}`;
     return output;
   }, []);
diff --git a/src/card/_example/footer-actions.tsx b/src/card/_example/footer-actions.tsx
index 42cf683d1..d921870df 100644
--- a/src/card/_example/footer-actions.tsx
+++ b/src/card/_example/footer-actions.tsx
@@ -1,5 +1,16 @@
 import React from 'react';
-import { Card, Avatar, Row, Col, Button, Divider, Dropdown, MessagePlugin, Space } from 'tdesign-react';
+import {
+  Card,
+  Avatar,
+  Row,
+  Col,
+  Button,
+  Divider,
+  Dropdown,
+  MessagePlugin,
+  Space,
+  type TdDropdownProps,
+} from 'tdesign-react';
 import { UserIcon, ChatIcon, ShareIcon, ThumbUpIcon, HeartIcon, MoreIcon } from 'tdesign-icons-react';
 
 const { Group: AvatarGroup } = Avatar;
@@ -15,7 +26,7 @@ const options = [
   },
 ];
 
-const clickHandler = (data) => {
+const clickHandler: TdDropdownProps['onClick'] = (data) => {
   MessagePlugin.success(`选中【${data.value}】`);
 };
 
@@ -29,19 +40,19 @@ export default function FooterActionsCard() {
         style={{ width: '400px' }}
         footer={
           <Row align="middle" justify="center">
-            <Col flex="auto" align="middle">
+            <Col flex="auto">
               <Button variant="text" shape="square">
                 <ThumbUpIcon></ThumbUpIcon>
               </Button>
             </Col>
             <Divider layout="vertical"></Divider>
-            <Col flex="auto" align="middle">
+            <Col flex="auto">
               <Button variant="text" shape="square">
                 <ChatIcon></ChatIcon>
               </Button>
             </Col>
             <Divider layout="vertical"></Divider>
-            <Col flex="auto" align="middle">
+            <Col flex="auto">
               <Button variant="text" shape="square">
                 <ShareIcon></ShareIcon>
               </Button>
@@ -55,7 +66,7 @@ export default function FooterActionsCard() {
         cover="https://tdesign.gtimg.com/site/source/card-demo.png"
         style={{ width: '400px' }}
         actions={
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Dropdown options={options} onClick={clickHandler}>
               <Button variant="text" shape="square">
                 <MoreIcon></MoreIcon>
@@ -82,7 +93,7 @@ export default function FooterActionsCard() {
         cover="https://tdesign.gtimg.com/site/source/card-demo.png"
         style={{ width: '400px' }}
         actions={
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Dropdown options={options} onClick={clickHandler}>
               <Button variant="text" shape="square">
                 <MoreIcon></MoreIcon>
diff --git a/src/card/_example/footer-content-actions.tsx b/src/card/_example/footer-content-actions.tsx
index 374ee6961..6fefe1680 100644
--- a/src/card/_example/footer-content-actions.tsx
+++ b/src/card/_example/footer-content-actions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Button, Dropdown, MessagePlugin, Comment } from 'tdesign-react';
+import { Card, Button, Dropdown, MessagePlugin, Comment, type TdDropdownProps } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 
 const options = [
@@ -13,7 +13,7 @@ const options = [
   },
 ];
 
-const clickHandler = (data) => {
+const clickHandler: TdDropdownProps['onClick'] = (data) => {
   MessagePlugin.success(`选中【${data.value}】`);
 };
 
diff --git a/src/card/_example/footer.tsx b/src/card/_example/footer.tsx
index 826f0d703..f9b6eb0ce 100644
--- a/src/card/_example/footer.tsx
+++ b/src/card/_example/footer.tsx
@@ -16,19 +16,19 @@ export default function FooterCard() {
       }
       footer={
         <Row align="middle" justify="center">
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Button variant="text">
               <ThumbUpIcon></ThumbUpIcon>
             </Button>
           </Col>
           <Divider layout="vertical"></Divider>
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Button variant="text">
               <ChatIcon></ChatIcon>
             </Button>
           </Col>
           <Divider layout="vertical"></Divider>
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Button variant="text">
               <ShareIcon></ShareIcon>
             </Button>
diff --git a/src/card/_example/header-footer-actions.tsx b/src/card/_example/header-footer-actions.tsx
index 5173c6c84..b00decf13 100644
--- a/src/card/_example/header-footer-actions.tsx
+++ b/src/card/_example/header-footer-actions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Row, Col, Button, Divider, Avatar, Dropdown, MessagePlugin } from 'tdesign-react';
+import { Card, Row, Col, Button, Divider, Avatar, Dropdown, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { ChatIcon, ShareIcon, ThumbUpIcon, Icon } from 'tdesign-icons-react';
 
 const options = [
@@ -13,7 +13,7 @@ const options = [
   },
 ];
 
-const clickHandler = (data) => {
+const clickHandler: DropdownProps['onClick'] = (data) => {
   MessagePlugin.success(`选中【${data.value}】`);
 };
 
@@ -35,19 +35,19 @@ export default function HeaderFooterActionsCard() {
       avatar={<Avatar size="40px" image="https://tdesign.gtimg.com/site/avatar-boy.jpg"></Avatar>}
       footer={
         <Row align="middle" justify="center">
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Button variant="text">
               <ThumbUpIcon></ThumbUpIcon>
             </Button>
           </Col>
           <Divider layout="vertical"></Divider>
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Button variant="text">
               <ChatIcon></ChatIcon>
             </Button>
           </Col>
           <Divider layout="vertical"></Divider>
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Button variant="text">
               <ShareIcon></ShareIcon>
             </Button>
diff --git a/src/card/_example/header-subtitle-footer-actions.tsx b/src/card/_example/header-subtitle-footer-actions.tsx
index 441ac652d..87b14f341 100644
--- a/src/card/_example/header-subtitle-footer-actions.tsx
+++ b/src/card/_example/header-subtitle-footer-actions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Row, Col, Button, Divider, Dropdown, MessagePlugin } from 'tdesign-react';
+import { Card, Row, Col, Button, Divider, Dropdown, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { ChatIcon, ShareIcon, ThumbUpIcon, Icon } from 'tdesign-icons-react';
 
 const options = [
@@ -13,7 +13,7 @@ const options = [
   },
 ];
 
-const clickHandler = (data) => {
+const clickHandler: DropdownProps['onClick'] = (data) => {
   MessagePlugin.success(`选中【${data.value}】`);
 };
 
@@ -34,19 +34,19 @@ export default function HeaderSubtitleFooterActionsCard() {
       style={{ width: '400px' }}
       footer={
         <Row align="middle" justify="center">
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Button variant="text">
               <ThumbUpIcon></ThumbUpIcon>
             </Button>
           </Col>
           <Divider layout="vertical"></Divider>
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Button variant="text">
               <ChatIcon></ChatIcon>
             </Button>
           </Col>
           <Divider layout="vertical"></Divider>
-          <Col flex="auto" align="middle">
+          <Col flex="auto">
             <Button variant="text">
               <ShareIcon></ShareIcon>
             </Button>
diff --git a/src/cascader/_example/base.tsx b/src/cascader/_example/base.tsx
index caf69cae4..0c4f311f3 100644
--- a/src/cascader/_example/base.tsx
+++ b/src/cascader/_example/base.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Cascader } from 'tdesign-react';
+import { Cascader, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value, setValue] = useState([]);
+  const [value, setValue] = useState<CascaderValue>([]);
   const [options] = useState([
     {
       label: '选项一',
@@ -38,7 +38,7 @@ export default function Example() {
     },
   ]);
 
-  const onChange = (value) => {
+  const onChange: CascaderProps['onChange'] = (value) => {
     setValue(value);
   };
 
diff --git a/src/cascader/_example/check-strictly.tsx b/src/cascader/_example/check-strictly.tsx
index 5052ca77c..74bd35bbf 100644
--- a/src/cascader/_example/check-strictly.tsx
+++ b/src/cascader/_example/check-strictly.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value1, setValue1] = useState('1.2.2');
-  const [value2, setValue2] = useState(['1.1.2.1', '2']);
+  const [value1, setValue1] = useState<CascaderValue>('1.2.2');
+  const [value2, setValue2] = useState<CascaderValue>(['1.1.2.1', '2']);
   const options = [
     {
       value: '1',
@@ -95,10 +95,10 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
-  const onChange2 = (value) => {
+  const onChange2: CascaderProps['onChange'] = (value) => {
     setValue2(value);
   };
 
diff --git a/src/cascader/_example/collapsed.tsx b/src/cascader/_example/collapsed.tsx
index 76deb2a0d..829ef1140 100644
--- a/src/cascader/_example/collapsed.tsx
+++ b/src/cascader/_example/collapsed.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value, setValue] = useState(['1.1', '1.2', '1.3']);
+  const [value, setValue] = useState<CascaderValue>(['1.1', '1.2', '1.3']);
   const options = [
     {
       label: '选项一',
@@ -38,7 +38,7 @@ export default function Example() {
     },
   ];
 
-  const onChange = (value) => {
+  const onChange: CascaderProps['onChange'] = (value) => {
     setValue(value);
   };
 
diff --git a/src/cascader/_example/ellipsis.tsx b/src/cascader/_example/ellipsis.tsx
index 6c2a99ada..81fbbbc7a 100644
--- a/src/cascader/_example/ellipsis.tsx
+++ b/src/cascader/_example/ellipsis.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Cascader } from 'tdesign-react';
+import { Cascader, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value1, setValue1] = useState('');
+  const [value1, setValue1] = useState<CascaderValue>('');
   const options = [
     {
       label: '当选项一数据展示文本过长时',
@@ -38,7 +38,7 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
 
diff --git a/src/cascader/_example/filterable.tsx b/src/cascader/_example/filterable.tsx
index f57ce05f4..497bc4ce3 100644
--- a/src/cascader/_example/filterable.tsx
+++ b/src/cascader/_example/filterable.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value1, setValue1] = useState('');
-  const [value2, setValue2] = useState(['1.1']);
+  const [value1, setValue1] = useState<CascaderValue>('');
+  const [value2, setValue2] = useState<CascaderValue>(['1.1']);
   const options = [
     {
       label: '当选项一数据展示文本过长时',
@@ -39,11 +39,11 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
 
-  const onChange2 = (value) => {
+  const onChange2: CascaderProps['onChange'] = (value) => {
     setValue2(value);
   };
 
diff --git a/src/cascader/_example/keys.tsx b/src/cascader/_example/keys.tsx
index 5f4eeb299..8bdab70f7 100644
--- a/src/cascader/_example/keys.tsx
+++ b/src/cascader/_example/keys.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value1, setValue1] = useState('');
-  const [value2, setValue2] = useState([]);
+  const [value1, setValue1] = useState<CascaderValue>('');
+  const [value2, setValue2] = useState<CascaderValue>([]);
   const options = [
     {
       name: '选项一',
@@ -39,11 +39,11 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
 
-  const onChange2 = (value) => {
+  const onChange2: CascaderProps['onChange'] = (value) => {
     setValue2(value);
   };
 
diff --git a/src/cascader/_example/load.tsx b/src/cascader/_example/load.tsx
index 10829efbf..ac5357edd 100644
--- a/src/cascader/_example/load.tsx
+++ b/src/cascader/_example/load.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { Cascader } from 'tdesign-react';
+import { Cascader, type CascaderProps, type CascaderValue } from 'tdesign-react';
+import type { TreeOptionData } from '../../common';
 
 export default function Example() {
-  const [value1, setValue1] = useState([]);
+  const [value1, setValue1] = useState<CascaderValue>([]);
   const options = [
     {
       label: '选项1',
@@ -16,23 +17,23 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
 
-  const load = (node) =>
+  const load: CascaderProps['load'] = (node) =>
     new Promise((resolve) => {
       setTimeout(() => {
-        let nodes = [];
-        if (node.level < 3) {
+        let nodes: TreeOptionData[] = [];
+        if (node.getLevel() < 3) {
           nodes = [
             {
               label: `${node.label}.1`,
-              children: node.level < 2,
+              children: node.getLevel() < 2,
             },
             {
               label: `${node.label}.2`,
-              children: node.level < 2,
+              children: node.getLevel() < 2,
             },
           ];
         }
diff --git a/src/cascader/_example/max.tsx b/src/cascader/_example/max.tsx
index 39de4f4e5..e98aa0dbc 100644
--- a/src/cascader/_example/max.tsx
+++ b/src/cascader/_example/max.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Cascader } from 'tdesign-react';
+import { Cascader, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value1, setValue1] = useState([]);
+  const [value1, setValue1] = useState<CascaderValue>([]);
   const options = [
     {
       label: '选项一',
@@ -38,7 +38,7 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
 
diff --git a/src/cascader/_example/multiple.tsx b/src/cascader/_example/multiple.tsx
index 378e05530..10751be7a 100644
--- a/src/cascader/_example/multiple.tsx
+++ b/src/cascader/_example/multiple.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Cascader } from 'tdesign-react';
+import { Cascader, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value, setValue] = useState(['1.1']);
+  const [value, setValue] = useState<CascaderValue>(['1.1']);
   const options = [
     {
       label: '选项一',
@@ -38,7 +38,7 @@ export default function Example() {
     },
   ];
 
-  const onChange = (value) => {
+  const onChange: CascaderProps['onChange'] = (value) => {
     setValue(value);
   };
 
diff --git a/src/cascader/_example/panel.tsx b/src/cascader/_example/panel.tsx
index ca8793ea6..b43d70c28 100644
--- a/src/cascader/_example/panel.tsx
+++ b/src/cascader/_example/panel.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { CascaderPanel, Space } from 'tdesign-react';
+import { CascaderPanel, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value1, setValue1] = useState('');
-  const [value2, setValue2] = useState([]);
+  const [value1, setValue1] = useState<CascaderValue>('');
+  const [value2, setValue2] = useState<CascaderValue>([]);
   const options = [
     {
       label: '选项一',
@@ -39,10 +39,10 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
-  const onChange2 = (value) => {
+  const onChange2: CascaderProps['onChange'] = (value) => {
     setValue2(value);
   };
 
diff --git a/src/cascader/_example/show-all-levels.tsx b/src/cascader/_example/show-all-levels.tsx
index a1ff7175f..a3848358d 100644
--- a/src/cascader/_example/show-all-levels.tsx
+++ b/src/cascader/_example/show-all-levels.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value1, setValue1] = useState('');
-  const [value2, setValue2] = useState([]);
+  const [value1, setValue1] = useState<CascaderValue>('');
+  const [value2, setValue2] = useState<CascaderValue>([]);
   const options = [
     {
       label: '选项一',
@@ -39,10 +39,10 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
-  const onChange2 = (value) => {
+  const onChange2: CascaderProps['onChange'] = (value) => {
     setValue2(value);
   };
 
diff --git a/src/cascader/_example/size.tsx b/src/cascader/_example/size.tsx
index 84f11dadf..8067e9165 100644
--- a/src/cascader/_example/size.tsx
+++ b/src/cascader/_example/size.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value, setValue] = useState([]);
+  const [value, setValue] = useState<CascaderValue>([]);
   const [options] = useState([
     {
       label: '选项一',
@@ -38,7 +38,7 @@ export default function Example() {
     },
   ]);
 
-  const onChange = (value) => {
+  const onChange: CascaderProps['onChange'] = (value) => {
     setValue(value);
   };
 
diff --git a/src/cascader/_example/trigger.tsx b/src/cascader/_example/trigger.tsx
index 2bcc37147..37661cc14 100644
--- a/src/cascader/_example/trigger.tsx
+++ b/src/cascader/_example/trigger.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState<CascaderValue>('');
   const options = [
     {
       label: '选项一',
@@ -38,7 +38,7 @@ export default function Example() {
     },
   ];
 
-  const onChange = (value) => {
+  const onChange: CascaderProps['onChange'] = (value) => {
     setValue(value);
   };
 
diff --git a/src/cascader/_example/value-display.tsx b/src/cascader/_example/value-display.tsx
index aa325d330..296de0986 100644
--- a/src/cascader/_example/value-display.tsx
+++ b/src/cascader/_example/value-display.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Space, Cascader, Tag } from 'tdesign-react';
+import { Space, Cascader, Tag, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
-const SingleValueDisplay = ({ value, selectedOptions }) =>
-  value && (
+const SingleValueDisplay: CascaderProps['valueDisplay'] = ({ value, selectedOptions }) =>
+  value ? (
     <div>
       <img
         src={selectedOptions?.[0]?.avatar}
@@ -15,12 +15,12 @@ const SingleValueDisplay = ({ value, selectedOptions }) =>
         }}
       />
       <span>{selectedOptions?.[0]?.label}</span>
-      <span>({value})</span>
+      <span>({value as string})</span>
     </div>
-  );
+  ) : null;
 
-const MultipleValueDisplay = ({ value, selectedOptions, onClose }) =>
-  value && value.length
+const MultipleValueDisplay: CascaderProps['valueDisplay'] = ({ selectedOptions, onClose }) =>
+  Array.isArray(selectedOptions) && selectedOptions.length
     ? selectedOptions.map((option, index) => (
         <Tag key={option.value} closable onClose={() => onClose(index)}>
           <img
@@ -40,8 +40,8 @@ const MultipleValueDisplay = ({ value, selectedOptions, onClose }) =>
     : null;
 
 export default function Example() {
-  const [value1, setValue1] = React.useState('2.2');
-  const [value2, setValue2] = React.useState(['1.3', '2.1', '2.2']);
+  const [value1, setValue1] = React.useState<CascaderValue>('2.2');
+  const [value2, setValue2] = React.useState<CascaderValue>(['1.3', '2.1', '2.2']);
 
   const AVATAR = 'https://tdesign.gtimg.com/site/avatar.jpg';
 
@@ -91,7 +91,7 @@ export default function Example() {
         value={value1}
         label="单选："
         options={optionsData}
-        valueDisplay={<SingleValueDisplay />}
+        valueDisplay={SingleValueDisplay}
         onChange={(val) => setValue1(val)}
         clearable
       ></Cascader>
@@ -100,7 +100,7 @@ export default function Example() {
         value={value2}
         label="多选："
         options={optionsData}
-        valueDisplay={<MultipleValueDisplay />}
+        valueDisplay={MultipleValueDisplay}
         onChange={(val) => setValue2(val)}
         clearable
         multiple
diff --git a/src/cascader/_example/value-mode.tsx b/src/cascader/_example/value-mode.tsx
index 6a1b2fa23..096edb9d0 100644
--- a/src/cascader/_example/value-mode.tsx
+++ b/src/cascader/_example/value-mode.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value1, setValue1] = useState([]);
-  const [value2, setValue2] = useState([]);
-  const [value3, setValue3] = useState([]);
+  const [value1, setValue1] = useState<CascaderValue>([]);
+  const [value2, setValue2] = useState<CascaderValue>([]);
+  const [value3, setValue3] = useState<CascaderValue>([]);
   const options = [
     {
       label: '选项一',
@@ -40,15 +40,15 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
 
-  const onChange2 = (value) => {
+  const onChange2: CascaderProps['onChange'] = (value) => {
     setValue2(value);
   };
 
-  const onChange3 = (value) => {
+  const onChange3: CascaderProps['onChange'] = (value) => {
     setValue3(value);
   };
 
diff --git a/src/cascader/_example/value-type.tsx b/src/cascader/_example/value-type.tsx
index 250d99680..469c934d7 100644
--- a/src/cascader/_example/value-type.tsx
+++ b/src/cascader/_example/value-type.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, type CascaderProps, type CascaderValue } from 'tdesign-react';
 
 export default function Example() {
-  const [value1, setValue1] = useState(['1', '1.1']);
-  const [value2, setValue2] = useState([
+  const [value1, setValue1] = useState<CascaderValue>(['1', '1.1']);
+  const [value2, setValue2] = useState<CascaderValue>([
     ['1', '1.1'],
     ['1', '1.2'],
   ]);
@@ -42,10 +42,10 @@ export default function Example() {
     },
   ];
 
-  const onChange1 = (value) => {
+  const onChange1: CascaderProps['onChange'] = (value) => {
     setValue1(value);
   };
-  const onChange2 = (value) => {
+  const onChange2: CascaderProps['onChange'] = (value) => {
     setValue2(value);
   };
 
diff --git a/src/cascader/type.ts b/src/cascader/type.ts
index 406a14369..b8403c8cf 100644
--- a/src/cascader/type.ts
+++ b/src/cascader/type.ts
@@ -191,9 +191,10 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
   valueDisplay?:
     | string
     | TNode<{
-        value: CascaderValue<CascaderOption>;
-        onClose: (index: number) => void;
+        value?: CascaderValue<CascaderOption>;
+        onClose?: (index: number) => void;
         displayValue?: CascaderValue<CascaderOption>;
+        selectedOptions?: CascaderOption[];
       }>;
   /**
    * 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaf 表示无论什么情况，选中值仅呈现叶子节点
diff --git a/src/checkbox/_example/group.tsx b/src/checkbox/_example/group.tsx
index 94df9ca65..2b09d0a3d 100644
--- a/src/checkbox/_example/group.tsx
+++ b/src/checkbox/_example/group.tsx
@@ -16,7 +16,7 @@ const options = [
   },
   {
     label: '全选',
-    checkAll: true,
+    checkAll: true as const,
   },
 ];
 
diff --git a/src/checkbox/_example/max.tsx b/src/checkbox/_example/max.tsx
index a40d8f79f..88592dca5 100644
--- a/src/checkbox/_example/max.tsx
+++ b/src/checkbox/_example/max.tsx
@@ -31,7 +31,7 @@ export default function CheckboxExample() {
           value={max}
           max={3}
           min={1}
-          onChange={(value) => {
+          onChange={(value: number) => {
             setMax(value);
           }}
         />
diff --git a/src/color-picker/_example/enable-alpha.tsx b/src/color-picker/_example/enable-alpha.tsx
index 92496e1be..a7a0bf444 100644
--- a/src/color-picker/_example/enable-alpha.tsx
+++ b/src/color-picker/_example/enable-alpha.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { ColorPickerPanel } from 'tdesign-react';
+import { ColorPickerPanel, type ColorPickerProps } from 'tdesign-react';
 
 export default function EnableAlpha() {
   const [value, setValue] = useState('#0052D9CC');
 
-  const handleChange = (value) => {
+  const handleChange: ColorPickerProps['onChange'] = (value) => {
     setValue(value);
   };
 
diff --git a/src/color-picker/_example/panel.tsx b/src/color-picker/_example/panel.tsx
index 4bf5903ea..458628c8e 100644
--- a/src/color-picker/_example/panel.tsx
+++ b/src/color-picker/_example/panel.tsx
@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
-import { ColorPickerPanel } from 'tdesign-react';
+import { ColorPickerPanel, type ColorPickerProps } from 'tdesign-react';
 
 export default function PanelExample() {
   const [recentColors, setRecentColors] = useState([]);
-  const handleChange = (value, context) => {
+  const handleChange: ColorPickerProps['onChange'] = (value, context) => {
     console.log('handleChange', value, context);
   };
 
-  const handlePaletteChange = (context) => {
+  const handlePaletteChange: ColorPickerProps['onPaletteBarChange'] = (context) => {
     console.log('色相面板改变', context);
   };
 
-  const handleRecentColorsChange = (value) => {
+  const handleRecentColorsChange: ColorPickerProps['onRecentColorsChange'] = (value) => {
     console.log('最近使用颜色改变', value);
     setRecentColors(value);
   };
diff --git a/src/config-provider/_example/calendar.tsx b/src/config-provider/_example/calendar.tsx
index e0aba31b3..15c9d8c63 100644
--- a/src/config-provider/_example/calendar.tsx
+++ b/src/config-provider/_example/calendar.tsx
@@ -25,7 +25,7 @@ export default function configDemo() {
       yearSelection: '{year}',
       // 1 表示周一；7 表示周日
       firstDayOfWeek: 7,
-      monthSelection: ({ month }) => MONTHS[month - 1],
+      monthSelection: ({ month }: { month: number }) => MONTHS[month - 1],
       yearRadio: 'Year',
       monthRadio: 'Month',
       hideWeekend: 'Hide Weekend',
diff --git a/src/config-provider/_example/date-picker.tsx b/src/config-provider/_example/date-picker.tsx
index a8bde680c..c7074f0c8 100644
--- a/src/config-provider/_example/date-picker.tsx
+++ b/src/config-provider/_example/date-picker.tsx
@@ -28,15 +28,15 @@ export default function configDemo() {
       <Space direction="vertical">
         <DatePicker mode="date" firstDayOfWeek={7} />
 
-        <DateRangePicker mode="date" range />
+        <DateRangePicker mode="date" />
 
         <DatePicker mode="month" />
 
-        <DateRangePicker mode="month" range />
+        <DateRangePicker mode="month" />
 
         <DatePicker mode="year" />
 
-        <DateRangePicker mode="year" range />
+        <DateRangePicker mode="year" />
       </Space>
     </ConfigProvider>
   );
diff --git a/src/config-provider/_example/others.tsx b/src/config-provider/_example/others.tsx
index 7ee7bc0a5..a2b275456 100644
--- a/src/config-provider/_example/others.tsx
+++ b/src/config-provider/_example/others.tsx
@@ -13,6 +13,7 @@ import {
   Steps,
   Space,
   Image,
+  type ImageProps,
 } from 'tdesign-react';
 import { ChevronRightIcon, CloseIcon, CloseCircleIcon, ErrorIcon } from 'tdesign-icons-react';
 import enConfig from 'tdesign-react/es/locale/en_US';
@@ -22,7 +23,7 @@ export default function configDemo() {
   const globalConfig = merge(enConfig, {
     image: {
       // 全局替换图片地址
-      replaceImageSrc(params) {
+      replaceImageSrc(params: ImageProps) {
         console.log(params);
         return 'https://tdesign.gtimg.com/demo/demo-image-1.png';
       },
diff --git a/src/config-provider/_example/table.tsx b/src/config-provider/_example/table.tsx
index d5d421173..7515a585b 100644
--- a/src/config-provider/_example/table.tsx
+++ b/src/config-provider/_example/table.tsx
@@ -14,7 +14,7 @@ const columns = [
     colKey: 'platform',
     title: 'Platform',
     filter: {
-      type: 'single',
+      type: 'single' as const,
     },
   },
   {
@@ -22,7 +22,7 @@ const columns = [
     title: 'Property',
     sorter: true,
     filter: {
-      type: 'single',
+      type: 'single' as const,
     },
   },
 ];
diff --git a/src/date-picker/_example/base.tsx b/src/date-picker/_example/base.tsx
index cef8b1904..3939d7e84 100644
--- a/src/date-picker/_example/base.tsx
+++ b/src/date-picker/_example/base.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { DatePicker, Space } from 'tdesign-react';
+import { DatePicker, Space, type DatePickerProps } from 'tdesign-react';
 
 export default function YearDatePicker() {
-  function handleChange(value, context) {
+  const handleChange: DatePickerProps['onChange'] = (value, context) => {
     console.log('onChange:', value, context);
     console.log('timestamp', context.dayjsValue.valueOf());
     console.log('YYYYMMDD', context.dayjsValue.format('YYYYMMDD'));
-  }
+  };
 
   return (
     <Space direction="vertical">
diff --git a/src/date-picker/_example/custom-icon.tsx b/src/date-picker/_example/custom-icon.tsx
index eb5937db6..16e68aa89 100644
--- a/src/date-picker/_example/custom-icon.tsx
+++ b/src/date-picker/_example/custom-icon.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { DatePicker, Space } from 'tdesign-react';
+import { DatePicker, Space, type DatePickerProps } from 'tdesign-react';
 import { BrowseIcon, LockOnIcon } from 'tdesign-icons-react';
 
 export default function YearDatePicker() {
-  function handleChange(value) {
+  const handleChange: DatePickerProps['onChange'] = (value) => {
     console.log(value);
-  }
+  };
 
   return (
     <Space>
diff --git a/src/date-picker/_example/date-presets-alt.tsx b/src/date-picker/_example/date-presets-alt.tsx
index 588c3105a..6133c9185 100644
--- a/src/date-picker/_example/date-presets-alt.tsx
+++ b/src/date-picker/_example/date-presets-alt.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 import dayjs from 'dayjs';
-import { DateRangePicker, Space } from 'tdesign-react';
+import { DateRangePicker, Space, type DateRangeValue, type DateRangePickerProps } from 'tdesign-react';
 
 export default function YearDatePicker() {
-  const [presets] = useState({
-    最近7天: [dayjs().subtract(6, 'day'), dayjs()],
-    最近3天: [dayjs().subtract(2, 'day'), dayjs()],
-    今天: [dayjs(), dayjs()],
+  const [presets] = useState<DateRangePickerProps['presets']>({
+    最近7天: [dayjs().subtract(6, 'day').toString(), dayjs().toString()],
+    最近3天: [dayjs().subtract(2, 'day').toString(), dayjs().toString()],
+    今天: [dayjs().toString(), dayjs().toString()],
   });
 
-  const [range1, setRange1] = useState(['2022-01-01', '2022-08-08']);
-  const [range2, setRange2] = useState(['2022-01-01 11:11:11', '2022-08-08 12:12:12']);
+  const [range1, setRange1] = useState<DateRangeValue>(['2022-01-01', '2022-08-08']);
+  const [range2, setRange2] = useState<DateRangeValue>(['2022-01-01 11:11:11', '2022-08-08 12:12:12']);
 
   return (
     <Space direction="vertical">
diff --git a/src/date-picker/_example/date-range.tsx b/src/date-picker/_example/date-range.tsx
index ccb57b455..5e439338e 100644
--- a/src/date-picker/_example/date-range.tsx
+++ b/src/date-picker/_example/date-range.tsx
@@ -1,17 +1,23 @@
 import React from 'react';
-import { DateRangePicker, Space } from 'tdesign-react';
+import { DateRangePicker, Space, type DateRangePickerProps } from 'tdesign-react';
 
 export default function YearDatePicker() {
   // 选中日期时的事件
-  function onPick(value, context) {
+  const onPick: DateRangePickerProps['onPick'] = (value, context) => {
     console.log('onPick:', value, context);
-  }
+  };
 
-  function onChange(value, context) {
+  const onChange: DateRangePickerProps['onChange'] = (value, context) => {
     console.log('onChange:', value, context);
-    console.log('timestamp', context.dayjsValue.map(d => d.valueOf()));
-    console.log('YYYYMMDD', context.dayjsValue.map(d => d.format('YYYYMMDD')));
-  }
+    console.log(
+      'timestamp',
+      context.dayjsValue.map((d) => d.valueOf()),
+    );
+    console.log(
+      'YYYYMMDD',
+      context.dayjsValue.map((d) => d.format('YYYYMMDD')),
+    );
+  };
 
   return (
     <Space direction="vertical">
diff --git a/src/date-picker/_example/date-time.tsx b/src/date-picker/_example/date-time.tsx
index 1b2a950d1..259db6966 100644
--- a/src/date-picker/_example/date-time.tsx
+++ b/src/date-picker/_example/date-time.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
-import { DatePicker, Space } from 'tdesign-react';
+import { DatePicker, Space, type DatePickerProps, type DateValue } from 'tdesign-react';
 
 export default function YearDatePicker() {
-  const [value, setValue] = useState('2022-02-02 12:11:11');
-  const [value2, setValue2] = useState('2022-02-02 am 12:11:11');
+  const [value, setValue] = useState<DateValue>('2022-02-02 12:11:11');
+  const [value2, setValue2] = useState<DateValue>('2022-02-02 am 12:11:11');
 
-  function handleChange(value) {
+  const handleChange: DatePickerProps['onChange'] = (value) => {
     console.log(value);
     setValue(value);
-  }
+  };
 
   return (
     <Space direction="vertical">
diff --git a/src/date-picker/_example/disable-date.tsx b/src/date-picker/_example/disable-date.tsx
index 552ad1ea6..ae4e642f7 100644
--- a/src/date-picker/_example/disable-date.tsx
+++ b/src/date-picker/_example/disable-date.tsx
@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import { DatePicker, DateRangePicker, Space } from 'tdesign-react';
 
 export default function YearDatePicker() {
-  const [pickDate, setPickDate] = useState();
+  const [pickDate, setPickDate] = useState('');
 
   const timePickerProps = useMemo(
     () => ({
diff --git a/src/date-picker/_example/first-day-of-week.tsx b/src/date-picker/_example/first-day-of-week.tsx
index c1d1be62d..9048d638c 100644
--- a/src/date-picker/_example/first-day-of-week.tsx
+++ b/src/date-picker/_example/first-day-of-week.tsx
@@ -6,7 +6,7 @@ export default function YearDatePicker() {
 
   return (
     <Space direction="vertical">
-      <Radio.Group variant="default-filled" value={startWeek} onChange={(value) => setStartWeek(value)}>
+      <Radio.Group variant="default-filled" value={startWeek} onChange={(value: number) => setStartWeek(value)}>
         {[1, 2, 3, 4, 5, 6, 7].map((i) => (
           <Radio.Button key={i} value={i}>
             {i}
diff --git a/src/date-picker/_example/month.tsx b/src/date-picker/_example/month.tsx
index b102f1cfd..e40429b95 100644
--- a/src/date-picker/_example/month.tsx
+++ b/src/date-picker/_example/month.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
-import { DatePicker, DateRangePicker, Space } from 'tdesign-react';
+import { DatePicker, DateRangePicker, Space, type DatePickerProps, type DateRangePickerProps } from 'tdesign-react';
 
 export default function YearDatePicker() {
-  function handleChange(value) {
+  const handleChange: DatePickerProps['onChange'] = (value) => {
     console.log(value);
-  }
+  };
+
+  const handleRangeChange: DateRangePickerProps['onChange'] = (value) => {
+    console.log(value);
+  };
 
   return (
     <Space direction="vertical">
       <DatePicker mode="month" clearable allowInput onChange={handleChange} />
-      <DateRangePicker mode="month" clearable allowInput onChange={handleChange} />
+      <DateRangePicker mode="month" clearable allowInput onChange={handleRangeChange} />
     </Space>
   );
 }
diff --git a/src/date-picker/_example/panel.tsx b/src/date-picker/_example/panel.tsx
index d71ee6e71..3bdcd2c1d 100644
--- a/src/date-picker/_example/panel.tsx
+++ b/src/date-picker/_example/panel.tsx
@@ -1,14 +1,28 @@
 import React from 'react';
-import { DatePickerPanel, DateRangePickerPanel, Space } from 'tdesign-react';
+import {
+  DatePickerPanel,
+  DateRangePickerPanel,
+  Space,
+  type DatePickerPanelProps,
+  type DateRangePickerPanelProps,
+} from 'tdesign-react';
 
 export default function PanelExample() {
-  function handleChange(value) {
+  const handleChange: DatePickerPanelProps['onChange'] = (value) => {
     console.log('onChange', value);
-  }
+  };
 
-  function handleCellClick(value) {
+  const handleCellClick: DatePickerPanelProps['onCellClick'] = (value) => {
     console.log('onCellClick', value);
-  }
+  };
+
+  const handleRangeChange: DateRangePickerPanelProps['onChange'] = (value) => {
+    console.log('onChange', value);
+  };
+
+  const handleRangeCellClick: DateRangePickerPanelProps['onCellClick'] = (value) => {
+    console.log('onCellClick', value);
+  };
 
   return (
     <Space direction="vertical">
@@ -20,10 +34,10 @@ export default function PanelExample() {
       </div>
 
       <div style={{ border: '1px solid var(--td-border-level-2-color)', width: 'fit-content', borderRadius: 3 }}>
-        <DateRangePickerPanel onCellClick={handleCellClick} onChange={handleChange} />
+        <DateRangePickerPanel onCellClick={handleRangeCellClick} onChange={handleRangeChange} />
       </div>
       <div style={{ border: '1px solid var(--td-border-level-2-color)', width: 'fit-content', borderRadius: 3 }}>
-        <DateRangePickerPanel enableTimePicker onCellClick={handleCellClick} onChange={handleChange} />
+        <DateRangePickerPanel enableTimePicker onCellClick={handleRangeCellClick} onChange={handleRangeChange} />
       </div>
     </Space>
   );
diff --git a/src/date-picker/_example/quarter.tsx b/src/date-picker/_example/quarter.tsx
index 80d3950ee..8d684bbef 100644
--- a/src/date-picker/_example/quarter.tsx
+++ b/src/date-picker/_example/quarter.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
-import { DatePicker, DateRangePicker, Space } from 'tdesign-react';
+import { DatePicker, DateRangePicker, Space, type DatePickerProps, type DateRangePickerProps } from 'tdesign-react';
 
 export default function YearDatePicker() {
-  function handleChange(value) {
+  const handleChange: DatePickerProps['onChange'] = (value) => {
     console.log(value);
-  }
+  };
+
+  const handleRangeChange: DateRangePickerProps['onChange'] = (value) => {
+    console.log(value);
+  };
 
   return (
     <Space direction="vertical">
       <DatePicker mode="quarter" clearable allowInput onChange={handleChange} />
-      <DateRangePicker mode="quarter" clearable allowInput onChange={handleChange} />
+      <DateRangePicker mode="quarter" clearable allowInput onChange={handleRangeChange} />
     </Space>
   );
 }
diff --git a/src/date-picker/_example/week.tsx b/src/date-picker/_example/week.tsx
index 1e777a97f..518637253 100644
--- a/src/date-picker/_example/week.tsx
+++ b/src/date-picker/_example/week.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
-import { DatePicker, DateRangePicker, Space } from 'tdesign-react';
+import { DatePicker, DateRangePicker, Space, type DatePickerProps, type DateRangePickerProps } from 'tdesign-react';
 
 export default function YearDatePicker() {
-  function handleChange(value) {
+  const handleChange: DatePickerProps['onChange'] = (value) => {
     console.log(value);
-  }
+  };
+
+  const handleRangeChange: DateRangePickerProps['onChange'] = (value) => {
+    console.log(value);
+  };
 
   return (
     <Space direction="vertical">
       <DatePicker mode="week" clearable allowInput onChange={handleChange} />
-      <DateRangePicker mode="week" clearable allowInput onChange={handleChange} />
+      <DateRangePicker mode="week" clearable allowInput onChange={handleRangeChange} />
     </Space>
   );
 }
diff --git a/src/date-picker/_example/year.tsx b/src/date-picker/_example/year.tsx
index 2f72d7607..e0f83118a 100644
--- a/src/date-picker/_example/year.tsx
+++ b/src/date-picker/_example/year.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
-import { DatePicker, DateRangePicker, Space } from 'tdesign-react';
+import { DatePicker, DateRangePicker, Space, type DatePickerProps, type DateRangePickerProps } from 'tdesign-react';
 
 export default function YearDatePicker() {
-  function handleChange(value) {
+  const handleChange: DatePickerProps['onChange'] = (value) => {
     console.log(value);
-  }
+  };
+
+  const handleRangeChange: DateRangePickerProps['onChange'] = (value) => {
+    console.log(value);
+  };
 
   return (
     <Space direction="vertical">
       <DatePicker mode="year" clearable allowInput onChange={handleChange} />
-      <DateRangePicker mode="year" clearable allowInput onChange={handleChange} />
+      <DateRangePicker mode="year" clearable allowInput onChange={handleRangeChange} />
     </Space>
   );
 }
diff --git a/src/descriptions/_example/colon.tsx b/src/descriptions/_example/colon.tsx
index 9c9eb5f2a..cb8a7c356 100644
--- a/src/descriptions/_example/colon.tsx
+++ b/src/descriptions/_example/colon.tsx
@@ -25,7 +25,7 @@ export default function Colon() {
   return (
     <Space direction="vertical">
       <Space align="center">
-        <Switch size="large" value={checked} onChange={setChecked} />
+        <Switch size="large" value={checked} onChange={(val) => setChecked(val)} />
         展示冒号
       </Space>
       <Descriptions items={items} title="Shipping address" bordered colon={checked} />
diff --git a/src/descriptions/_example/column.tsx b/src/descriptions/_example/column.tsx
index 7dc342e76..24a6892bc 100644
--- a/src/descriptions/_example/column.tsx
+++ b/src/descriptions/_example/column.tsx
@@ -26,7 +26,12 @@ export default function Column() {
   ];
   return (
     <Space direction="vertical">
-      <Radio.Group options={columnOptions} value={column} onChange={setColumn} variant="default-filled" />
+      <Radio.Group
+        options={columnOptions}
+        value={column}
+        onChange={(val: number) => setColumn(val)}
+        variant="default-filled"
+      />
       <Descriptions items={items} title="Shipping address" bordered column={column} />
     </Space>
   );
diff --git a/src/descriptions/_example/custom-style.tsx b/src/descriptions/_example/custom-style.tsx
index 4f44bae17..7d8650ac7 100644
--- a/src/descriptions/_example/custom-style.tsx
+++ b/src/descriptions/_example/custom-style.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { Descriptions } from 'tdesign-react';
 
 export default function CustomStyle() {
-  const customLabelClassName = {
+  const customLabelClassName: React.CSSProperties = {
     width: '100px',
     textAlign: 'left',
   };
-  const customContentClassName = {
+  const customContentClassName: React.CSSProperties = {
     textAlign: 'center',
   };
 
diff --git a/src/descriptions/_example/layout.tsx b/src/descriptions/_example/layout.tsx
index 9cf7d43bc..6b34a2f95 100644
--- a/src/descriptions/_example/layout.tsx
+++ b/src/descriptions/_example/layout.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { Descriptions, Space, Row, Col, Radio } from 'tdesign-react';
 
+type Layout = 'horizontal' | 'vertical';
+
 export default function Layout() {
-  const [layout, setLayout] = React.useState('horizontal');
-  const [itemLayout, setItemLayout] = React.useState('horizontal');
+  const [layout, setLayout] = React.useState<Layout>('horizontal');
+  const [itemLayout, setItemLayout] = React.useState<Layout>('horizontal');
 
   const items = [
     {
@@ -34,7 +36,12 @@ export default function Layout() {
           <span>layout：</span>
         </Col>
         <Col>
-          <Radio.Group variant="default-filled" value={layout} onChange={setLayout} options={layoutOptions} />
+          <Radio.Group
+            variant="default-filled"
+            value={layout}
+            onChange={(val: Layout) => setLayout(val)}
+            options={layoutOptions}
+          />
         </Col>
       </Row>
       <Row align="middle">
@@ -45,7 +52,7 @@ export default function Layout() {
           <Radio.Group
             variant="default-filled"
             value={itemLayout}
-            onChange={setItemLayout}
+            onChange={(val: 'horizontal' | 'vertical') => setItemLayout(val)}
             options={itemLayoutOptions}
           />
         </Col>
diff --git a/src/descriptions/_example/size.tsx b/src/descriptions/_example/size.tsx
index 0c3b4b424..f07c3e2b9 100644
--- a/src/descriptions/_example/size.tsx
+++ b/src/descriptions/_example/size.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Descriptions, Space, Radio } from 'tdesign-react';
 
+type SizeEnum = 'large' | 'medium' | 'small';
 export default function Size() {
-  const [size, setSize] = React.useState('medium');
+  const [size, setSize] = React.useState<SizeEnum>('medium');
 
   const sizeOptions = ['large', 'medium', 'small'];
   const items = [
@@ -25,7 +26,12 @@ export default function Size() {
   ];
   return (
     <Space direction="vertical">
-      <Radio.Group options={sizeOptions} value={size} onChange={setSize} variant="default-filled" />
+      <Radio.Group
+        options={sizeOptions}
+        value={size}
+        onChange={(val: SizeEnum) => setSize(val)}
+        variant="default-filled"
+      />
       <Descriptions items={items} title="Shipping address" bordered size={size} />
     </Space>
   );
diff --git a/src/dialog/_example/attach.tsx b/src/dialog/_example/attach.tsx
index 3278ee82a..b32879c67 100644
--- a/src/dialog/_example/attach.tsx
+++ b/src/dialog/_example/attach.tsx
@@ -12,14 +12,14 @@ export default function AttachModalExample() {
     visibleShowInAttachedElement: false,
   });
 
-  const handleOpen = (visibleName) => {
+  const handleOpen = (visibleName: string) => {
     setState({
       ...state,
       [visibleName]: true,
     });
   };
 
-  const handleClose = (visibleName) => {
+  const handleClose = (visibleName: string) => {
     setState({
       ...state,
       [visibleName]: false,
diff --git a/src/dialog/_example/base.tsx b/src/dialog/_example/base.tsx
index 23a099874..c70904bd8 100644
--- a/src/dialog/_example/base.tsx
+++ b/src/dialog/_example/base.tsx
@@ -1,28 +1,28 @@
 import React, { useState } from 'react';
-import { Dialog, Button } from 'tdesign-react';
+import { Dialog, Button, type DialogProps } from 'tdesign-react';
 
 export default function BasicUsage() {
   const [visible, setVisible] = useState(false);
   const handleClick = () => {
     setVisible(true);
   };
-  const onConfirm = (context) => {
+  const onConfirm: DialogProps['onConfirm'] = (context) => {
     console.log('点击了确认按钮', context);
     setVisible(false);
   };
-  const onCancel = (context) => {
+  const onCancel: DialogProps['onCancel'] = (context) => {
     console.log('点击了取消按钮', context);
   };
-  const onClickCloseBtn = (context) => {
+  const onClickCloseBtn: DialogProps['onCloseBtnClick'] = (context) => {
     console.log('点击了关闭按钮', context);
   };
-  const onKeydownEsc = (context) => {
+  const onKeydownEsc: DialogProps['onEscKeydown'] = (context) => {
     console.log('按下了ESC', context);
   };
-  const onClickOverlay = (context) => {
+  const onClickOverlay: DialogProps['onOverlayClick'] = (context) => {
     console.log('点击了蒙层', context);
   };
-  const handleClose = (context) => {
+  const handleClose: DialogProps['onClose'] = (context) => {
     console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
     setVisible(false);
   };
diff --git a/src/dialog/_example/modal.tsx b/src/dialog/_example/modal.tsx
index 11bac85c7..e8cd04430 100644
--- a/src/dialog/_example/modal.tsx
+++ b/src/dialog/_example/modal.tsx
@@ -19,7 +19,7 @@ export default function NotModalExample() {
   const handleClose2 = () => {
     setVisible2(false);
   };
-  const onChange = (value) => {
+  const onChange = (value: string) => {
     setValue(value);
   };
   return (
@@ -52,7 +52,7 @@ export default function NotModalExample() {
         visible={visible}
         onClose={handleClose}
         onCloseBtnClick={() => {
-          console.log('on click close btn')
+          console.log('on click close btn');
         }}
         onOpened={() => {
           console.log('dialog is open');
diff --git a/src/dialog/_example/position.tsx b/src/dialog/_example/position.tsx
index 1614f663b..9ed79bb2c 100644
--- a/src/dialog/_example/position.tsx
+++ b/src/dialog/_example/position.tsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { Dialog, Button } from 'tdesign-react';
 
+type Placement = 'center' | 'top';
 export default function PositionExample() {
   const [visible, setVisible] = useState(false);
-  const [placement, setPlacement] = useState('center');
+  const [placement, setPlacement] = useState<Placement>('center');
   const [topData, setTopData] = useState('');
   const [visible1, setVisible1] = useState(false);
 
-  const handleClick = (placement) => {
+  const handleClick = (placement: Placement) => {
     setVisible(true);
     setPlacement(placement);
     setTopData('');
diff --git a/src/drawer/_example/attach-parent.tsx b/src/drawer/_example/attach-parent.tsx
index da0188783..db9852adb 100644
--- a/src/drawer/_example/attach-parent.tsx
+++ b/src/drawer/_example/attach-parent.tsx
@@ -1,10 +1,14 @@
 import React, { useState } from 'react';
 import { Drawer, Radio, Button, Space } from 'tdesign-react';
 
+type Placement = 'right' | 'bottom' | 'left' | 'top';
+
+type Mode = 'push' | 'overlay';
+
 export default function () {
   const [visible, setVisible] = useState(false);
-  const [placement, setPlacement] = useState('right');
-  const [mode, setMode] = useState('push');
+  const [placement, setPlacement] = useState<Placement>('right');
+  const [mode, setMode] = useState<Mode>('push');
 
   const handleClick = () => {
     setVisible(true);
@@ -30,7 +34,7 @@ export default function () {
           <p>渲染在当前元素中。</p>
           <div>
             <span>抽屉弹出方向：</span>
-            <Radio.Group value={placement} onChange={(value) => setPlacement(value)}>
+            <Radio.Group value={placement} onChange={(value: Placement) => setPlacement(value)}>
               <Radio.Button value="left">左侧</Radio.Button>
               <Radio.Button value="right">右侧</Radio.Button>
               <Radio.Button value="top">上方</Radio.Button>
@@ -40,7 +44,7 @@ export default function () {
 
           <div>
             <span>抽屉弹出模式：</span>
-            <Radio.Group value={mode} onChange={(value) => setMode(value)}>
+            <Radio.Group value={mode} onChange={(value: Mode) => setMode(value)}>
               <Radio.Button value="push">push</Radio.Button>
               <Radio.Button value="overlay">overlay</Radio.Button>
             </Radio.Group>
diff --git a/src/drawer/_example/placement.tsx b/src/drawer/_example/placement.tsx
index 2ed932520..799906ff9 100644
--- a/src/drawer/_example/placement.tsx
+++ b/src/drawer/_example/placement.tsx
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { Drawer, Radio, Button, Space } from 'tdesign-react';
 
+type Placement = 'right' | 'bottom' | 'left' | 'top';
+
 export default function () {
   const [visible, setVisible] = useState(false);
-  const [placement, setPlacement] = useState('right');
+  const [placement, setPlacement] = useState<Placement>('right');
 
   const handleClick = () => {
     setVisible(true);
@@ -13,7 +15,7 @@ export default function () {
   };
   return (
     <Space>
-      <Radio.Group value={placement} onChange={(value) => setPlacement(value)}>
+      <Radio.Group value={placement} onChange={(value: Placement) => setPlacement(value)}>
         <Radio.Button value="left">左侧</Radio.Button>
         <Radio.Button value="right">右侧</Radio.Button>
         <Radio.Button value="top">上方</Radio.Button>
diff --git a/src/drawer/_example/popup.tsx b/src/drawer/_example/popup.tsx
index fccb0957c..2998d3dd6 100644
--- a/src/drawer/_example/popup.tsx
+++ b/src/drawer/_example/popup.tsx
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { Drawer, Radio, Button, Space } from 'tdesign-react';
 
+type Mode = 'push' | 'overlay';
+
 export default function () {
   const [visible, setVisible] = useState(false);
-  const [mode, setMode] = useState('push');
+  const [mode, setMode] = useState<Mode>('push');
 
   const handleClick = () => {
     setVisible(true);
@@ -15,7 +17,7 @@ export default function () {
     <Space>
       <div>
         <span>抽屉弹出模式：</span>
-        <Radio.Group value={mode} onChange={(value) => setMode(value)}>
+        <Radio.Group value={mode} onChange={(value: Mode) => setMode(value)}>
           <Radio.Button value="push">push</Radio.Button>
           <Radio.Button value="overlay">overlay</Radio.Button>
         </Radio.Group>
diff --git a/src/drawer/_example/size-draggable.tsx b/src/drawer/_example/size-draggable.tsx
index 2585d9b98..7857881b7 100644
--- a/src/drawer/_example/size-draggable.tsx
+++ b/src/drawer/_example/size-draggable.tsx
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { Drawer, Radio, Button, Space } from 'tdesign-react';
 
+type Placement = 'right' | 'bottom' | 'left' | 'top';
+
 export default function () {
   const [visible, setVisible] = useState(false);
-  const [placement, setPlacement] = useState('right');
+  const [placement, setPlacement] = useState<Placement>('right');
 
   const handleClick = () => {
     setVisible(true);
@@ -13,7 +15,7 @@ export default function () {
   };
   return (
     <Space>
-      <Radio.Group value={placement} onChange={(value) => setPlacement(value)}>
+      <Radio.Group value={placement} onChange={(value: Placement) => setPlacement(value)}>
         <Radio.Button value="left">从左侧拖拽抽屉</Radio.Button>
         <Radio.Button value="right">从右侧拖拽抽屉</Radio.Button>
         <Radio.Button value="top">从上方拖拽抽屉</Radio.Button>
diff --git a/src/drawer/_example/size.tsx b/src/drawer/_example/size.tsx
index b0849b039..28088acfb 100644
--- a/src/drawer/_example/size.tsx
+++ b/src/drawer/_example/size.tsx
@@ -13,7 +13,7 @@ export default function () {
   };
   return (
     <Space>
-      <Radio.Group value={size} onChange={(value) => setSize(value)}>
+      <Radio.Group value={size} onChange={(value: string) => setSize(value)}>
         <Radio.Button value="small">small(300px)</Radio.Button>
         <Radio.Button value="medium">medium(500px)</Radio.Button>
         <Radio.Button value="large">large(760px)</Radio.Button>
@@ -26,7 +26,7 @@ export default function () {
           打开抽屉
         </Button>
       </div>
-      <Drawer size={size} title="Drawer" placement="right" visible={visible} onClose={handleClose}>
+      <Drawer size={size} header="Drawer" placement="right" visible={visible} onClose={handleClose}>
         <p>抽屉的内容</p>
       </Drawer>
     </Space>
diff --git a/src/dropdown/_example/base.tsx b/src/dropdown/_example/base.tsx
index 1dd82c8c0..4bbdfc2b1 100644
--- a/src/dropdown/_example/base.tsx
+++ b/src/dropdown/_example/base.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 
 export default function BasicDropdown() {
@@ -22,7 +22,7 @@ export default function BasicDropdown() {
       value: 4,
     },
   ];
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/button.tsx b/src/dropdown/_example/button.tsx
index e496004e5..460c1f759 100644
--- a/src/dropdown/_example/button.tsx
+++ b/src/dropdown/_example/button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 
 export default function BasicDropdown() {
@@ -22,7 +22,7 @@ export default function BasicDropdown() {
       value: 4,
     },
   ];
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/child.tsx b/src/dropdown/_example/child.tsx
index e49a02679..b06d4e631 100644
--- a/src/dropdown/_example/child.tsx
+++ b/src/dropdown/_example/child.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 
 const { DropdownMenu, DropdownItem } = Dropdown;
 export default function BasicDropdown() {
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/custom.tsx b/src/dropdown/_example/custom.tsx
index ba0b96ad6..cebb8a617 100644
--- a/src/dropdown/_example/custom.tsx
+++ b/src/dropdown/_example/custom.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 
 export default function BasicDropdown() {
   const getContent = () => <div>操作四</div>;
@@ -21,7 +21,7 @@ export default function BasicDropdown() {
       value: 4,
     },
   ];
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/disabled.tsx b/src/dropdown/_example/disabled.tsx
index 8e563f2ae..c44c329b4 100644
--- a/src/dropdown/_example/disabled.tsx
+++ b/src/dropdown/_example/disabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 
 export default function BasicDropdown() {
@@ -24,7 +24,7 @@ export default function BasicDropdown() {
       disabled: true,
     },
   ];
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/icon.tsx b/src/dropdown/_example/icon.tsx
index 643619852..bf6eacfd0 100644
--- a/src/dropdown/_example/icon.tsx
+++ b/src/dropdown/_example/icon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { Icon, DiscountIcon } from 'tdesign-icons-react';
 
 export default function BasicDropdown() {
@@ -37,7 +37,7 @@ export default function BasicDropdown() {
       ],
     },
   ];
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/left.tsx b/src/dropdown/_example/left.tsx
index c59708e4c..567af474e 100644
--- a/src/dropdown/_example/left.tsx
+++ b/src/dropdown/_example/left.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 
 export default function LeftDropdown() {
@@ -49,7 +49,7 @@ export default function LeftDropdown() {
       ],
     },
   ];
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/long.tsx b/src/dropdown/_example/long.tsx
index 91f3bb9c1..7166e39e0 100644
--- a/src/dropdown/_example/long.tsx
+++ b/src/dropdown/_example/long.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 
 export default function BasicDropdown() {
   const options = Array.from({ length: 20 }).map((v, k) => ({
     content: `选项${k + 1}`,
     value: k + 1,
   }));
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/multiple.tsx b/src/dropdown/_example/multiple.tsx
index 48c81849e..2b3f0ddaf 100644
--- a/src/dropdown/_example/multiple.tsx
+++ b/src/dropdown/_example/multiple.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 
 export default function BasicDropdown() {
@@ -109,7 +109,7 @@ export default function BasicDropdown() {
       ],
     },
   ];
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/split.tsx b/src/dropdown/_example/split.tsx
index c40794cc6..3f0ecf2a6 100644
--- a/src/dropdown/_example/split.tsx
+++ b/src/dropdown/_example/split.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 
 export default function BasicDropdown() {
@@ -23,7 +23,7 @@ export default function BasicDropdown() {
       value: 4,
     },
   ];
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/dropdown/_example/theme.tsx b/src/dropdown/_example/theme.tsx
index 7cced4fc0..58f9e3ee8 100644
--- a/src/dropdown/_example/theme.tsx
+++ b/src/dropdown/_example/theme.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin, type DropdownProps, type DropdownOption } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 
 export default function ThemeDropdown() {
-  const options = [
+  const options: DropdownOption[] = [
     {
       content: '选项一',
       value: 1,
@@ -45,10 +45,10 @@ export default function ThemeDropdown() {
             },
           ],
         },
-      ],
+      ] as DropdownOption[],
     },
   ];
-  const clickHandler = (data) => {
+  const clickHandler: DropdownProps['onClick'] = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
diff --git a/src/form/_example/align.tsx b/src/form/_example/align.tsx
index 46e31518b..68c458b59 100644
--- a/src/form/_example/align.tsx
+++ b/src/form/_example/align.tsx
@@ -3,11 +3,13 @@ import { Form, Radio, Input, Space } from 'tdesign-react';
 
 const { FormItem } = Form;
 
+type LabelAlign = 'left' | 'right' | 'top';
+
 export default function AlignForm() {
-  const [labelAlign, setLabelAlign] = useState('right');
+  const [labelAlign, setLabelAlign] = useState<LabelAlign>('right');
   return (
     <Space direction="vertical">
-      <Radio.Group value={labelAlign} onChange={(value) => setLabelAlign(value)} variant="default-filled">
+      <Radio.Group value={labelAlign} onChange={(value: LabelAlign) => setLabelAlign(value)} variant="default-filled">
         <Radio.Button value="left">左对齐</Radio.Button>
         <Radio.Button value="right">右对齐</Radio.Button>
         <Radio.Button value="top">顶部对齐</Radio.Button>
diff --git a/src/form/_example/base.tsx b/src/form/_example/base.tsx
index c3ec7582f..eeae32d6c 100644
--- a/src/form/_example/base.tsx
+++ b/src/form/_example/base.tsx
@@ -1,5 +1,17 @@
 import React from 'react';
-import { Form, Input, Radio, Checkbox, Button, Switch, MessagePlugin, DatePicker, Tooltip, Space } from 'tdesign-react';
+import {
+  Form,
+  Input,
+  Radio,
+  Checkbox,
+  Button,
+  Switch,
+  MessagePlugin,
+  DatePicker,
+  Tooltip,
+  Space,
+  type FormProps,
+} from 'tdesign-react';
 
 const { FormItem } = Form;
 
@@ -11,14 +23,14 @@ export default function BaseForm() {
   console.log('name', name);
   console.log('gender', gender);
 
-  const onSubmit = (e) => {
+  const onSubmit: FormProps['onSubmit'] = (e) => {
     console.log(e);
     if (e.validateResult === true) {
       MessagePlugin.info('提交成功');
     }
   };
 
-  const onReset = (e) => {
+  const onReset: FormProps['onReset'] = (e) => {
     console.log(e);
     MessagePlugin.info('重置成功');
   };
diff --git a/src/form/_example/clear-validate.tsx b/src/form/_example/clear-validate.tsx
index c3fd30468..1f1d58982 100644
--- a/src/form/_example/clear-validate.tsx
+++ b/src/form/_example/clear-validate.tsx
@@ -1,17 +1,29 @@
 import React from 'react';
-import { Form, Input, Checkbox, Button, MessagePlugin, Radio, Select } from 'tdesign-react';
+import {
+  Form,
+  Input,
+  Checkbox,
+  Button,
+  MessagePlugin,
+  Radio,
+  Select,
+  type FormProps,
+  type IsDateOptions,
+  type FormRules,
+  type Data,
+} from 'tdesign-react';
 
 const { FormItem } = Form;
 
-const rules = {
+const rules: FormRules<Data> = {
   account: [
     { required: true, message: '姓名必填' },
     { min: 2, message: '至少需要两个字符，一个中文等于两个字符' },
     { max: 10, message: '姓名字符长度超出' },
   ],
   description: [
-    { validator: (val) => val.length >= 5, message: '至少 5 个字，中文长度等于英文长度' },
-    { validator: (val) => val.length < 20, message: '不能超过 20 个字，中文长度等于英文长度' },
+    { validator: (val: string) => val.length >= 5, message: '至少 5 个字，中文长度等于英文长度' },
+    { validator: (val: string) => val.length < 20, message: '不能超过 20 个字，中文长度等于英文长度' },
   ],
   password: [
     { required: true, message: '密码必填' },
@@ -25,7 +37,7 @@ const rules = {
   gender: [{ required: true, message: '性别必填' }],
   course: [
     { required: true, message: '课程必填' },
-    { validator: (val) => val.length <= 2, message: '最多选择 2 门课程' },
+    { validator: (val: string) => val.length <= 2, message: '最多选择 2 门课程' },
   ],
   'content.url': [
     { required: true, message: '个人网站必填' },
@@ -55,7 +67,7 @@ const options = [
 export default function BaseForm() {
   const [form] = Form.useForm();
 
-  const onSubmit = ({ validateResult, firstError }) => {
+  const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
     if (validateResult === true) {
       MessagePlugin.success('提交成功');
     } else {
@@ -83,7 +95,7 @@ export default function BaseForm() {
       <FormItem label="用户名" help="这是用户名字段帮助说明" name="account">
         <Input />
       </FormItem>
-      <FormItem label="个人简介" help="一句话介绍自己" name="description" initialData=''>
+      <FormItem label="个人简介" help="一句话介绍自己" name="description" initialData="">
         <Input />
       </FormItem>
       <FormItem label="密码" name="password">
@@ -113,7 +125,7 @@ export default function BaseForm() {
       <FormItem
         label="入学时间"
         name="date"
-        rules={[{ date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' }]}
+        rules={[{ date: { delimiters: ['/', '-', '.'] } as IsDateOptions, message: '日期格式有误' }]}
       >
         <Input />
       </FormItem>
diff --git a/src/form/_example/custom-validator.tsx b/src/form/_example/custom-validator.tsx
index d85dedde6..f26991d14 100644
--- a/src/form/_example/custom-validator.tsx
+++ b/src/form/_example/custom-validator.tsx
@@ -1,19 +1,29 @@
 import React from 'react';
-import { Form, Input, Button, MessagePlugin } from 'tdesign-react';
+import {
+  Form,
+  Input,
+  Button,
+  MessagePlugin,
+  type FormProps,
+  type InternalFormInstance,
+  type CustomValidator,
+  type FormRules,
+  type Data,
+} from 'tdesign-react';
 
 const { FormItem } = Form;
 
 export default function BaseForm() {
-  const form = React.createRef();
+  const form = React.useRef<InternalFormInstance>();
 
-  const onSubmit = (e) => {
+  const onSubmit: FormProps['onSubmit'] = (e) => {
     console.log(e);
     if (e.validateResult === true) {
       MessagePlugin.info('提交成功');
     }
   };
 
-  const onReset = (e) => {
+  const onReset: FormProps['onReset'] = (e) => {
     console.log(e);
     MessagePlugin.info('重置成功');
   };
@@ -23,27 +33,26 @@ export default function BaseForm() {
   };
 
   // 自定义异步校验器
-  function rePassword(val) {
-    return new Promise((resolve) => {
+  const rePassword: CustomValidator = (val) =>
+    new Promise((resolve) => {
       const timer = setTimeout(() => {
         resolve(form.current.getFieldValue('password') === val);
         clearTimeout(timer);
       });
     });
-  }
 
   // 自定义异步校验器
-  function validateName(name) {
+  const validateName: CustomValidator = (name) => {
     const names = ['张三', '李四', '王五'];
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(!names.includes(name));
       }, 1000);
     });
-  }
+  };
 
   // 自定义校验器，不同的值输出不同的校验结果。支持异步校验（文案选自某密码重置站点，如有侵权，请联系我们删除）
-  function passwordValidator(val) {
+  const passwordValidator: CustomValidator = (val: any) => {
     if (!val || (val.length > 0 && val.length <= 2)) {
       return { result: false, message: '太简单了！再开动一下你的小脑筋吧！', type: 'error' };
     }
@@ -51,9 +60,9 @@ export default function BaseForm() {
       return { result: false, message: '还差一点点，就是一个完美的密码了！', type: 'warning' };
     }
     return { result: true, message: '太强了，你确定自己记得住吗！', type: 'success' };
-  }
+  };
 
-  const rules = {
+  const rules: FormRules<Data> = {
     account: [
       { required: true, message: '姓名必填', type: 'error' },
       { min: 2, message: '至少需要两个字', type: 'error' },
diff --git a/src/form/_example/disabled.tsx b/src/form/_example/disabled.tsx
index a12b460a8..74a63891f 100644
--- a/src/form/_example/disabled.tsx
+++ b/src/form/_example/disabled.tsx
@@ -15,6 +15,7 @@ import {
   Cascader,
   Textarea,
   Space,
+  type FormProps,
 } from 'tdesign-react';
 
 const { FormItem } = Form;
@@ -23,12 +24,12 @@ const INITIAL_DATA = {
   name: '',
   message: true,
   gender: '',
-  course: [],
+  course: [] as string[],
   college: '',
   personalProfile: '',
   address1: 1,
   address2: 2,
-  gradePoint: undefined,
+  gradePoint: 0,
   date: '',
   avatar: [{ url: 'https://tdesign.gtimg.com/site/avatar.jpg', name: 'avatar.jpg', status: 'success' }],
 };
@@ -48,7 +49,7 @@ const ADDRESS_OPTIONS = [
 export default function BaseForm() {
   const [formDisabled, setFormDisabled] = useState(true);
 
-  const onSubmit = ({ validateResult, firstError }) => {
+  const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
     if (validateResult === true) {
       MessagePlugin.success('提交成功');
     } else {
@@ -57,7 +58,7 @@ export default function BaseForm() {
     }
   };
 
-  const onReset = (e) => {
+  const onReset: FormProps['onReset'] = (e) => {
     console.log(e);
     MessagePlugin.info('重置成功');
   };
@@ -71,7 +72,11 @@ export default function BaseForm() {
   return (
     <Space direction="vertical">
       <div style={{ marginLeft: 36 }}>
-        <Radio.Group value={formDisabled} onChange={(value) => setFormDisabled(value)} variant="default-filled">
+        <Radio.Group
+          value={formDisabled}
+          onChange={(value: boolean) => setFormDisabled(value)}
+          variant="default-filled"
+        >
           <Radio.Button value={false}>启用</Radio.Button>
           <Radio.Button value={true}>禁用</Radio.Button>
         </Radio.Group>
diff --git a/src/form/_example/error-message.tsx b/src/form/_example/error-message.tsx
index fecfda217..4bf3b75a8 100644
--- a/src/form/_example/error-message.tsx
+++ b/src/form/_example/error-message.tsx
@@ -13,6 +13,7 @@ import {
   type IsDateOptions,
   type FormRules,
   type Data,
+  type FormProps,
 } from 'tdesign-react';
 
 const { FormItem } = Form;
@@ -78,7 +79,7 @@ export default function BaseForm() {
   const [form] = Form.useForm();
   const [errorConfig, setErrorConfig] = useState<RadioValue>('default');
 
-  const onSubmit = ({ validateResult, firstError }) => {
+  const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
     if (validateResult === true) {
       MessagePlugin.success('提交成功');
     } else {
diff --git a/src/form/_example/layout.tsx b/src/form/_example/layout.tsx
index 8084f7557..7015eada4 100644
--- a/src/form/_example/layout.tsx
+++ b/src/form/_example/layout.tsx
@@ -3,12 +3,14 @@ import { Form, Radio, Input, Space } from 'tdesign-react';
 
 const { FormItem } = Form;
 
+type Layout = 'vertical' | 'inline';
+
 export default function LayoutForm() {
-  const [layout, setLayout] = useState('inline');
+  const [layout, setLayout] = useState<Layout>('inline');
   return (
     <Space direction="vertical">
       <div>
-        <Radio.Group value={layout} onChange={(value) => setLayout(value)} variant="default-filled">
+        <Radio.Group value={layout} onChange={(value: Layout) => setLayout(value)} variant="default-filled">
           <Radio.Button value="vertical">纵向布局</Radio.Button>
           <Radio.Button value="inline">行内布局</Radio.Button>
         </Radio.Group>
diff --git a/src/form/_example/login.tsx b/src/form/_example/login.tsx
index 61b21a5e5..c3766cdc0 100644
--- a/src/form/_example/login.tsx
+++ b/src/form/_example/login.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
-import { Form, Input, Button, MessagePlugin } from 'tdesign-react';
+import { Form, Input, Button, MessagePlugin, type FormProps } from 'tdesign-react';
 import { DesktopIcon, LockOnIcon } from 'tdesign-icons-react';
 
 const { FormItem } = Form;
 
 export default function BaseForm() {
-  const onSubmit = (e) => {
+  const onSubmit: FormProps['onSubmit'] = (e) => {
     console.log(e);
     if (e.validateResult === true) {
       MessagePlugin.info('提交成功');
     }
   };
 
-  const onReset = (e) => {
+  const onReset: FormProps['onReset'] = (e) => {
     console.log(e);
     MessagePlugin.info('重置成功');
   };
diff --git a/src/form/_example/nested-data.tsx b/src/form/_example/nested-data.tsx
index d69b64d9f..d2bbc4c53 100644
--- a/src/form/_example/nested-data.tsx
+++ b/src/form/_example/nested-data.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, Input, Radio, Checkbox, Button, MessagePlugin, DatePicker } from 'tdesign-react';
+import { Form, Input, Radio, Checkbox, Button, MessagePlugin, DatePicker, type FormProps } from 'tdesign-react';
 import { MinusCircleIcon } from 'tdesign-icons-react';
 
 const { FormItem, FormList } = Form;
@@ -10,7 +10,7 @@ export default function BaseForm() {
   const user = Form.useWatch('user', form);
   console.log('user', user);
 
-  const onSubmit = (e) => {
+  const onSubmit: FormProps['onSubmit'] = (e) => {
     console.log(e);
     if (e.validateResult === true) {
       MessagePlugin.info('提交成功');
@@ -26,12 +26,12 @@ export default function BaseForm() {
     form.setFields?.([{ name: ['user', 'course'], value: ['la'] }]);
   };
 
-  const onReset = (e) => {
+  const onReset: FormProps['onReset'] = (e) => {
     console.log(e);
     MessagePlugin.info('重置成功');
   };
 
-  const onValuesChange = (value) => {
+  const onValuesChange: FormProps['onValuesChange'] = (value) => {
     console.log(value);
   };
 
diff --git a/src/form/_example/reset.tsx b/src/form/_example/reset.tsx
index 017123f88..d2d89ca88 100644
--- a/src/form/_example/reset.tsx
+++ b/src/form/_example/reset.tsx
@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
-import { Form, Input, Radio, Checkbox, Button, MessagePlugin, Popup, Space } from 'tdesign-react';
+import { Form, Input, Radio, Checkbox, Button, MessagePlugin, Popup, Space, type FormProps } from 'tdesign-react';
 
 const { FormItem } = Form;
 
+type ResetType = 'empty' | 'initial';
+
 export default function BaseForm() {
-  const [resetType, setResetType] = useState('initial');
+  const [resetType, setResetType] = useState<ResetType>('initial');
 
-  const onSubmit = ({ validateResult, firstError }) => {
+  const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
     if (validateResult === true) {
       MessagePlugin.success('提交成功');
     } else {
@@ -15,7 +17,7 @@ export default function BaseForm() {
     }
   };
 
-  const onReset = (e) => {
+  const onReset: FormProps['onReset'] = (e) => {
     console.log(e);
     MessagePlugin.info('重置成功');
   };
@@ -29,7 +31,7 @@ export default function BaseForm() {
   return (
     <Space direction="vertical">
       <div>
-        <Radio.Group value={resetType} onChange={(value) => setResetType(value)} variant="default-filled">
+        <Radio.Group value={resetType} onChange={(value: ResetType) => setResetType(value)} variant="default-filled">
           <Radio.Button value="empty">重置为空</Radio.Button>
           <Radio.Button value="initial">
             <Popup content="改变表单数据后，点击重置按钮，观察数据重置情况"> 重置为初始值 </Popup>
diff --git a/src/form/_example/validate-complicated-data.tsx b/src/form/_example/validate-complicated-data.tsx
index 1815de2b0..6cb882985 100644
--- a/src/form/_example/validate-complicated-data.tsx
+++ b/src/form/_example/validate-complicated-data.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Form, Input, Checkbox, Button, MessagePlugin, Radio, Tabs } from 'tdesign-react';
+import { Form, Input, Checkbox, Button, MessagePlugin, Radio, Tabs, type FormProps } from 'tdesign-react';
 
 const { FormItem } = Form;
 
@@ -9,6 +9,12 @@ function getId() {
   return id;
 }
 
+type InitialType<T> = {
+  [key in keyof T]: T[key];
+};
+
+type InitialData = InitialType<typeof INITIAL_DATA>;
+
 const INITIAL_DATA = {
   school: 1,
   students: [
@@ -18,6 +24,7 @@ const INITIAL_DATA = {
       name: 'StudentA',
       courseType: 'wenke',
       course: ['1'],
+      status: true,
     },
     {
       id: getId(),
@@ -25,6 +32,7 @@ const INITIAL_DATA = {
       name: 'StudentB',
       courseType: 'wenke',
       course: [],
+      status: true,
     },
   ],
 };
@@ -54,14 +62,14 @@ const COURSE_OPTIONS = [
 
 export default function BaseForm() {
   const [studentTab, setStudentTab] = useState(1);
-  const [formData, setFormData] = useState(INITIAL_DATA);
+  const [formData, setFormData] = useState<InitialData>(INITIAL_DATA);
 
   const courseOptions = COURSE_OPTIONS.filter((item) => {
-    if (!formData.courseType || !item.courseTypes) return true;
-    return item.courseTypes.includes(formData.courseType);
+    if (!formData[0].courseType || !item.courseTypes) return true;
+    return item.courseTypes.includes(formData[0].courseType);
   });
 
-  const onSubmit = ({ validateResult, firstError }) => {
+  const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
     if (validateResult === true) {
       MessagePlugin.success('提交成功');
     } else {
@@ -106,7 +114,7 @@ export default function BaseForm() {
       </FormItem>
       <Tabs
         value={studentTab}
-        onChange={(v) => setStudentTab(v)}
+        onChange={(v: number) => setStudentTab(v)}
         theme="card"
         addable
         onAdd={onAddStudent}
@@ -128,8 +136,8 @@ export default function BaseForm() {
 
               <FormItem label="课程" name={`students[${index}].name`} label-width={80} initialData={student.course}>
                 <Checkbox.Group>
-                  {courseOptions.map(({ value, name, label }, index) => (
-                    <Checkbox key={index} value={value} name={name} label={label} />
+                  {courseOptions.map(({ value, label }, index) => (
+                    <Checkbox key={index} value={value} label={label} />
                   ))}
                 </Checkbox.Group>
               </FormItem>
diff --git a/src/form/_example/validate-message.tsx b/src/form/_example/validate-message.tsx
index 4c56a2e62..3ed199c19 100644
--- a/src/form/_example/validate-message.tsx
+++ b/src/form/_example/validate-message.tsx
@@ -1,5 +1,14 @@
 import React, { useEffect } from 'react';
-import { Form, Input, Button, MessagePlugin, type FormRules, type FormValidateMessage, type Data } from 'tdesign-react';
+import {
+  Form,
+  Input,
+  Button,
+  MessagePlugin,
+  type FormRules,
+  type FormValidateMessage,
+  type Data,
+  type FormProps,
+} from 'tdesign-react';
 
 const { FormItem } = Form;
 
@@ -27,7 +36,7 @@ const rules: FormRules<Data> = {
 export default function BaseForm() {
   const [form] = Form.useForm();
 
-  const onSubmit = ({ validateResult, firstError }) => {
+  const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
     if (validateResult === true) {
       MessagePlugin.success('提交成功');
     } else {
diff --git a/src/form/_example/validator-status.tsx b/src/form/_example/validator-status.tsx
index fdde589f2..41f5926f3 100644
--- a/src/form/_example/validator-status.tsx
+++ b/src/form/_example/validator-status.tsx
@@ -1,23 +1,33 @@
 import React, { useEffect } from 'react';
-import { Form, Input, Button, MessagePlugin, Loading } from 'tdesign-react';
+import {
+  Form,
+  Input,
+  Button,
+  MessagePlugin,
+  Loading,
+  type FormProps,
+  type FormRules,
+  type FormInstanceFunctions,
+  type Data,
+} from 'tdesign-react';
 import { AddRectangleIcon, HelpCircleIcon } from 'tdesign-icons-react';
 
 const { FormItem } = Form;
 
 export default function BaseForm() {
-  const onSubmit = (e) => {
+  const onSubmit: FormProps['onSubmit'] = (e) => {
     console.log(e);
     if (e.validateResult === true) {
       MessagePlugin.info('提交成功');
     }
   };
 
-  const onReset = (e) => {
+  const onReset: FormProps['onReset'] = (e) => {
     console.log(e);
     MessagePlugin.info('重置成功');
   };
 
-  const rules = {
+  const rules: FormRules<Data> = {
     fail: [{ required: true, message: '必填', type: 'error' }],
     warning: [{ required: true, message: '必填', type: 'warning' }],
     success: [],
@@ -25,7 +35,7 @@ export default function BaseForm() {
     warningB: [{ required: true, type: 'warning' }],
   };
 
-  const form = React.createRef();
+  const form = React.useRef<FormInstanceFunctions>();
   useEffect(() => {
     form.current.validate();
   }, [form]);
diff --git a/src/form/_example/validator.tsx b/src/form/_example/validator.tsx
index 60f850f10..86c99e57e 100644
--- a/src/form/_example/validator.tsx
+++ b/src/form/_example/validator.tsx
@@ -1,25 +1,34 @@
 import React, { useRef } from 'react';
-import { Form, Input, Radio, Checkbox, Button, MessagePlugin } from 'tdesign-react';
+import {
+  Form,
+  Input,
+  Radio,
+  Checkbox,
+  Button,
+  MessagePlugin,
+  type FormProps,
+  type CustomValidator,
+} from 'tdesign-react';
 import debounce from 'lodash/debounce';
 
 const { FormItem } = Form;
 
 export default function BaseForm() {
   const [form] = Form.useForm();
-  const onSubmit = (e) => {
+  const onSubmit: FormProps['onSubmit'] = (e) => {
     console.log(e);
     if (e.validateResult === true) {
       MessagePlugin.info('提交成功');
     }
   };
 
-  const onReset = (e) => {
+  const onReset: FormProps['onReset'] = (e) => {
     console.log(e);
     MessagePlugin.info('重置成功');
   };
 
-  function asyncValidate(val) {
-    return new Promise((resolve) => {
+  const asyncValidate: CustomValidator = (val) =>
+    new Promise((resolve) => {
       setTimeout(() => {
         if (val === '123') {
           resolve(true);
@@ -28,7 +37,6 @@ export default function BaseForm() {
         }
       }, 1000);
     });
-  }
 
   const handleChange = useRef(
     debounce((value) => {
diff --git a/src/form/index.ts b/src/form/index.ts
index d64ffb1a1..7a7500529 100644
--- a/src/form/index.ts
+++ b/src/form/index.ts
@@ -5,6 +5,7 @@ import './style/index.js';
 export type { FormProps } from './Form';
 export type { FormItemProps } from './FormItem';
 export * from './type';
+export * from './hooks/interface';
 
 export const Form = _Form;
 export default Form;
diff --git a/src/grid/_example-js/responsive.jsx b/src/grid/_example-js/responsive.jsx
index 869a59ca9..a3637a35f 100644
--- a/src/grid/_example-js/responsive.jsx
+++ b/src/grid/_example-js/responsive.jsx
@@ -20,7 +20,7 @@ export default function OrderGrid() {
           xs={{ offset: 0, span: 3 }}
           sm={{ offset: 2, span: 3 }}
           md={{ offset: 4, span: 3 }}
-          g={{ offset: 6, span: 3 }}
+          lg={{ offset: 6, span: 3 }}
           xl={{ offset: 8, span: 3 }}
         >
           <div>Col</div>
diff --git a/src/grid/_example/responsive.tsx b/src/grid/_example/responsive.tsx
index 869a59ca9..a3637a35f 100644
--- a/src/grid/_example/responsive.tsx
+++ b/src/grid/_example/responsive.tsx
@@ -20,7 +20,7 @@ export default function OrderGrid() {
           xs={{ offset: 0, span: 3 }}
           sm={{ offset: 2, span: 3 }}
           md={{ offset: 4, span: 3 }}
-          g={{ offset: 6, span: 3 }}
+          lg={{ offset: 6, span: 3 }}
           xl={{ offset: 8, span: 3 }}
         >
           <div>Col</div>
diff --git a/src/grid/type.ts b/src/grid/type.ts
index 932980369..f4c51e31b 100644
--- a/src/grid/type.ts
+++ b/src/grid/type.ts
@@ -97,9 +97,9 @@ export interface GutterObject {
 }
 
 export interface BaseColProps {
-  offset: number;
-  order: number;
-  pull: number;
-  push: number;
-  span: number;
+  offset?: number;
+  order?: number;
+  pull?: number;
+  push?: number;
+  span?: number;
 }
diff --git a/src/table/_example/expandable.tsx b/src/table/_example/expandable.tsx
index 11957616f..92a5c9788 100644
--- a/src/table/_example/expandable.tsx
+++ b/src/table/_example/expandable.tsx
@@ -29,7 +29,7 @@ const classStyles = `
 type ExpandControlType = 'custom' | 'true' | 'false';
 
 export default function TableExpandable() {
-  const getColumns: (isFixedColum: boolean) => TableProps['columns'] = (isFixedColumn) => [
+  const getColumns: (isFixedColumn: boolean) => TableProps['columns'] = (isFixedColumn) => [
     isFixedColumn
       ? { colKey: 'applicant', title: '申请人', width: '80', fixed: 'left' }
       : { colKey: 'applicant', title: '申请人', width: '80' },
diff --git a/tsconfig.build.json b/tsconfig.build.json
index df78efd54..6c9f15a96 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -3,7 +3,6 @@
   "include": ["./src", "./globals.d.ts"],
   "exclude": [
     "**/**/__tests__/*",
-    "**/**/_example/*",
     "**/**/_example-js/*",
     "**/**/_usage/*",
     "node_modules",