From 5b68b76bf664ea3f9398c478ad7a46910bb606c0 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Mon, 24 Jun 2024 17:19:51 +0800
Subject: [PATCH] chore: add tsconfig for develop and demo

---
 src/back-top/_example/baseList.tsx            |   5 +-
 src/back-top/_example/baseListSmall.tsx       |   5 +-
 src/back-top/_example/custom.tsx              |   3 +-
 src/back-top/_example/shape.tsx               |   3 +-
 src/back-top/_example/size.tsx                |   3 +-
 src/back-top/_example/theme.tsx               |   3 +-
 src/guide/_example/dialog.tsx                 |   3 +-
 src/image/_example/fill-mode.tsx              |  26 +--
 src/image/_example/fill-position.tsx          | 194 +++++++++---------
 src/menu/_example/closable-side.tsx           |   4 +-
 src/menu/_example/custom-header.tsx           |   6 +-
 src/menu/_example/custom-side.tsx             |   6 +-
 src/menu/_example/double.tsx                  |   6 +-
 src/menu/_example/group-side.tsx              |   4 +-
 src/menu/_example/multi-side.tsx              |  10 +-
 src/menu/_example/multiple.tsx                |   6 +-
 src/menu/_example/popup-side.tsx              |  10 +-
 src/menu/_example/single-side.tsx             |   6 +-
 src/menu/_example/single.tsx                  |   6 +-
 src/select-input/_example/collapsed-items.tsx |   6 +-
 src/select/_example/collapsed.tsx             |   8 +-
 src/slider/_example/base.tsx                  |   5 +-
 src/table/_example/filter-controlled.tsx      |   6 +-
 src/table/_example/pagination-ajax.tsx        |   2 +-
 src/table/_example/pagination.tsx             |   1 +
 src/tabs/_example/combination.tsx             |  11 +-
 src/tag-input/_example/collapsed.tsx          |   6 +-
 src/tree/_example/checkable.tsx               |   2 +-
 src/tree/_example/expand-mutex.tsx            |   4 +-
 src/tree/_example/line.tsx                    |  11 +-
 src/upload/_example/custom-drag.tsx           |   7 +-
 src/upload/_example/image.tsx                 |   6 +-
 tsconfig.dev.json                             |  10 +-
 33 files changed, 223 insertions(+), 171 deletions(-)

diff --git a/src/back-top/_example/baseList.tsx b/src/back-top/_example/baseList.tsx
index bba95015a..99b2cbf84 100644
--- a/src/back-top/_example/baseList.tsx
+++ b/src/back-top/_example/baseList.tsx
@@ -1,16 +1,17 @@
 import React, { useState } from 'react';
 import { BackTop, List } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
   const [container, setContainer] = useState(null);
 
-  const style = {
+  const style: CSSProperties = {
     position: 'absolute',
     insetInlineEnd: 24,
     insetBlockEnd: 80,
   };
 
-  const listWrapStyle = {
+  const listWrapStyle: CSSProperties = {
     width: '100%',
     height: '280px',
     position: 'relative',
diff --git a/src/back-top/_example/baseListSmall.tsx b/src/back-top/_example/baseListSmall.tsx
index 94a63db71..c2094680b 100644
--- a/src/back-top/_example/baseListSmall.tsx
+++ b/src/back-top/_example/baseListSmall.tsx
@@ -1,16 +1,17 @@
 import React, { useState } from 'react';
 import { BackTop, List } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
   const [container, setContainer] = useState(null);
 
-  const style = {
+  const style: CSSProperties = {
     position: 'absolute',
     insetInlineEnd: 24,
     insetBlockEnd: 80,
   };
 
-  const listWrapStyle = {
+  const listWrapStyle: CSSProperties = {
     width: '100%',
     height: '280px',
     position: 'relative',
diff --git a/src/back-top/_example/custom.tsx b/src/back-top/_example/custom.tsx
index ddefe7250..c3b4ec3a6 100644
--- a/src/back-top/_example/custom.tsx
+++ b/src/back-top/_example/custom.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
-  const style = {
+  const style: CSSProperties = {
     position: 'relative',
     insetInlineEnd: 0,
     insetBlockEnd: 0,
diff --git a/src/back-top/_example/shape.tsx b/src/back-top/_example/shape.tsx
index d558075e4..beb928fda 100644
--- a/src/back-top/_example/shape.tsx
+++ b/src/back-top/_example/shape.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
-  const style = {
+  const style: CSSProperties = {
     position: 'relative',
     insetInlineEnd: 0,
     insetBlockEnd: 0,
diff --git a/src/back-top/_example/size.tsx b/src/back-top/_example/size.tsx
index 70fdf4b38..38cab74f1 100644
--- a/src/back-top/_example/size.tsx
+++ b/src/back-top/_example/size.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
-  const style = {
+  const style: CSSProperties = {
     position: 'relative',
     insetInlineEnd: 0,
     insetBlockEnd: 0,
diff --git a/src/back-top/_example/theme.tsx b/src/back-top/_example/theme.tsx
index 017e46a4c..6bbf6fb00 100644
--- a/src/back-top/_example/theme.tsx
+++ b/src/back-top/_example/theme.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
-  const style = {
+  const style: CSSProperties = {
     position: 'relative',
     insetInlineEnd: 0,
     insetBlockEnd: 0,
diff --git a/src/guide/_example/dialog.tsx b/src/guide/_example/dialog.tsx
index 63df9d891..5a6f3603b 100644
--- a/src/guide/_example/dialog.tsx
+++ b/src/guide/_example/dialog.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
+import type { GuideProps } from 'tdesign-react';
 
 const classStyles = `
 <style>
@@ -102,7 +103,7 @@ export default function DialogGuide() {
     document.head.insertAdjacentHTML('beforeend', classStyles);
   }, []);
 
-  const steps = [
+  const steps: GuideProps['steps'] = [
     {
       element: '.main-title-dialog',
       title: '新手引导标题',
diff --git a/src/image/_example/fill-mode.tsx b/src/image/_example/fill-mode.tsx
index ff5bbc1c5..280e3e479 100644
--- a/src/image/_example/fill-mode.tsx
+++ b/src/image/_example/fill-mode.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Image, Space } from 'tdesign-react';
 
+import type { ImageProps } from 'tdesign-react';
+
 export default function FillModeImage() {
   const [src, setSrc] = useState('');
 
@@ -16,19 +18,17 @@ export default function FillModeImage() {
 
   return (
     <Space breakLine size={16}>
-      {
-        ['fill', 'contain', 'cover', 'none', 'scale-down'].map(item => (
-          <Space direction="vertical" align="left" key={item}>
-            <Image
-              src={src}
-              fit={item}
-              // fallback='https://tdesign.gtimg.com/demo/demo-image-1.png'
-              style={{width: 120, height: 120}}
-            />
-            {item}
-          </Space>
-        ))
-      }
+      {['fill', 'contain', 'cover', 'none', 'scale-down'].map((item: ImageProps['fit']) => (
+        <Space direction="vertical" align="start" key={item}>
+          <Image
+            src={src}
+            fit={item}
+            // fallback='https://tdesign.gtimg.com/demo/demo-image-1.png'
+            style={{ width: 120, height: 120 }}
+          />
+          {item}
+        </Space>
+      ))}
     </Space>
   );
 }
diff --git a/src/image/_example/fill-position.tsx b/src/image/_example/fill-position.tsx
index 0bd19ac7f..3bfdcf927 100644
--- a/src/image/_example/fill-position.tsx
+++ b/src/image/_example/fill-position.tsx
@@ -2,104 +2,106 @@ import React from 'react';
 import { Image, Space } from 'tdesign-react';
 
 export default function FillPositionImage() {
-  return (<Space direction="vertical" style={{ width: '100%' }}>
-    <Space breakLine>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          position="center"
-          style={{width: 120, height: 120}}
-        />
-        cover center
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Space breakLine>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            position="center"
+            style={{ width: 120, height: 120 }}
+          />
+          cover center
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            style={{ width: 120, height: 120 }}
+            position="left"
+          />
+          cover left
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            style={{ width: 120, height: 120 }}
+            position="right"
+          />
+          cover right
+        </Space>
       </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          style={{width: 120, height: 120}}
-          position="left"
-        />
-        cover left
+      <Space style={{ marginTop: 20 }} breakLine>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            style={{ width: 280, height: 120 }}
+            position="top"
+          />
+          cover top
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            style={{ width: 280, height: 120 }}
+            position="bottom"
+          />
+          cover bottom
+        </Space>
       </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          style={{width: 120, height: 120}}
-          position="right"
-        />
-        cover right
+      <Space style={{ marginTop: 20 }} breakLine>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="contain"
+            style={{ width: 120, height: 200 }}
+            position="top"
+          />
+          contain top
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="contain"
+            style={{ width: 120, height: 200 }}
+            position="bottom"
+          />
+          contain bottom
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="contain"
+            style={{ width: 120, height: 200 }}
+            position="center"
+          />
+          contain center
+        </Space>
+        <Space style={{ marginTop: 20 }} breakLine>
+          <Space direction="vertical" align="start">
+            <Image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="contain"
+              style={{ width: 280, height: 120 }}
+              position="left"
+            />
+            contain left
+          </Space>
+          <Space direction="vertical" align="start">
+            <Image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="contain"
+              style={{ width: 280, height: 120 }}
+              position="right"
+            />
+            contain right
+          </Space>
+        </Space>
       </Space>
     </Space>
-    <Space style={{marginTop: 20}} breakLine>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          style={{width: 280, height: 120}}
-          position="top"
-        />
-        cover top
-      </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          style={{width: 280, height: 120}}
-          position="bottom"
-        />
-        cover bottom
-      </Space>
-    </Space>
-    <Space style={{marginTop: 20}} breakLine>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 120, height: 200}}
-          position="top"
-        />
-        contain top
-      </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 120, height: 200}}
-          position="bottom"
-        />
-        contain bottom
-      </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 120, height: 200}}
-          position="center"
-        />
-        contain center
-      </Space>
-      <Space style={{marginTop: 20}} breakLine>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 280, height: 120}}
-          position="left"
-        />
-        contain left
-      </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 280, height: 120}}
-          position="right"
-        />
-        contain right
-      </Space>
-    </Space>
-    </Space>
-  </Space>);
+  );
 }
diff --git a/src/menu/_example/closable-side.tsx b/src/menu/_example/closable-side.tsx
index e316b465d..34baeb6e0 100644
--- a/src/menu/_example/closable-side.tsx
+++ b/src/menu/_example/closable-side.tsx
@@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import { Menu, Button } from 'tdesign-react';
 import { AppIcon, CodeIcon, FileIcon, UserIcon, ViewListIcon, MailIcon, RollbackIcon } from 'tdesign-icons-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { SubMenu, MenuItem } = Menu;
 
 function ClosableSide() {
-  const [active, setActive] = useState('1-1');
+  const [active, setActive] = useState<MenuValue>('1-1');
   const [collapsed, setCollapsed] = useState(true);
 
   return (
diff --git a/src/menu/_example/custom-header.tsx b/src/menu/_example/custom-header.tsx
index 81b9e76f9..2203b027b 100644
--- a/src/menu/_example/custom-header.tsx
+++ b/src/menu/_example/custom-header.tsx
@@ -2,11 +2,13 @@ import React, { Fragment, useState } from 'react';
 import { Menu, Button } from 'tdesign-react';
 import { SearchIcon, MailIcon, UserIcon, EllipsisIcon } from 'tdesign-icons-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { HeadMenu, MenuItem } = Menu;
 
 function Single() {
-  const [active, setActive] = useState('0');
-  const [darkActive, setDarkActive] = useState('1');
+  const [active, setActive] = useState<MenuValue>('0');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1');
 
   const operations = () => (
     <div className="tdesign-demo-menu__operations">
diff --git a/src/menu/_example/custom-side.tsx b/src/menu/_example/custom-side.tsx
index 479b6b11b..474808313 100644
--- a/src/menu/_example/custom-side.tsx
+++ b/src/menu/_example/custom-side.tsx
@@ -1,11 +1,13 @@
 import React, { Fragment, useState } from 'react';
 import { Menu } from 'tdesign-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { MenuItem } = Menu;
 
 function CustomSide() {
-  const [active, setActive] = useState('0');
-  const [darkActive, setDarkActive] = useState('1');
+  const [active, setActive] = useState<MenuValue>('0');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1');
 
   return (
     <Fragment>
diff --git a/src/menu/_example/double.tsx b/src/menu/_example/double.tsx
index ee29cd6a8..087a622a3 100644
--- a/src/menu/_example/double.tsx
+++ b/src/menu/_example/double.tsx
@@ -1,11 +1,13 @@
 import React, { Fragment, useState } from 'react';
 import { Menu } from 'tdesign-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { HeadMenu, SubMenu, MenuItem } = Menu;
 
 function Double() {
-  const [active, setActive] = useState('1');
-  const [darkActive, setDarkActive] = useState('1');
+  const [active, setActive] = useState<MenuValue>('1');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1');
 
   return (
     <Fragment>
diff --git a/src/menu/_example/group-side.tsx b/src/menu/_example/group-side.tsx
index e272a8851..c002cfb3e 100644
--- a/src/menu/_example/group-side.tsx
+++ b/src/menu/_example/group-side.tsx
@@ -11,10 +11,12 @@ import {
   LoginIcon,
 } from 'tdesign-icons-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { MenuGroup, MenuItem, SubMenu } = Menu;
 
 function GroupSide() {
-  const [value, setValue] = useState('1');
+  const [value, setValue] = useState<MenuValue>('1');
   const [collapsed, setCollapsed] = useState(false);
 
   return (
diff --git a/src/menu/_example/multi-side.tsx b/src/menu/_example/multi-side.tsx
index b7b7f1a72..0a0ae6dce 100644
--- a/src/menu/_example/multi-side.tsx
+++ b/src/menu/_example/multi-side.tsx
@@ -2,16 +2,18 @@ import React, { Fragment, useState } from 'react';
 import { Menu, Button } from 'tdesign-react';
 import { AppIcon, CodeIcon, FileIcon, UserIcon, ViewListIcon, MailIcon, RollbackIcon } from 'tdesign-icons-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { SubMenu, MenuItem } = Menu;
 
 function MultiSide() {
-  const [active, setActive] = useState('1-1');
+  const [active, setActive] = useState<MenuValue>('1-1');
   const [collapsed, setCollapsed] = useState(false);
-  const [expands, setExpands] = useState(['1', '2']);
+  const [expands, setExpands] = useState<MenuValue[]>(['1', '2']);
 
-  const [darkActive, setDarkActive] = useState('1-1');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1-1');
   const [darkCollapsed, setDarkCollapsed] = useState(false);
-  const [darkExpands, setDarkExpands] = useState(['1', '2']);
+  const [darkExpands, setDarkExpands] = useState<MenuValue[]>(['1', '2']);
 
   return (
     <Fragment>
diff --git a/src/menu/_example/multiple.tsx b/src/menu/_example/multiple.tsx
index 4c1fa29c4..b264ac44e 100644
--- a/src/menu/_example/multiple.tsx
+++ b/src/menu/_example/multiple.tsx
@@ -2,11 +2,13 @@ import React, { Fragment, useState } from 'react';
 import { Menu } from 'tdesign-react';
 import { UserIcon } from 'tdesign-icons-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { HeadMenu, SubMenu, MenuItem } = Menu;
 
 function Multiple() {
-  const [active, setActive] = useState('0');
-  const [darkActive, setDarkActive] = useState('1');
+  const [active, setActive] = useState<MenuValue>('0');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1');
 
   return (
     <Fragment>
diff --git a/src/menu/_example/popup-side.tsx b/src/menu/_example/popup-side.tsx
index 78c6a3744..3ca4aa492 100644
--- a/src/menu/_example/popup-side.tsx
+++ b/src/menu/_example/popup-side.tsx
@@ -2,16 +2,18 @@ import React, { Fragment, useState } from 'react';
 import { Menu } from 'tdesign-react';
 import { AppIcon, CodeIcon, FileIcon, UserIcon, ViewListIcon, MailIcon, RollbackIcon } from 'tdesign-icons-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { SubMenu, MenuItem } = Menu;
 
 function PopupSide() {
-  const [active, setActive] = useState('1-1');
+  const [active, setActive] = useState<MenuValue>('1-1');
   const [collapsed, setCollapsed] = useState(true);
-  const [expands, setExpands] = useState(['1', '2']);
+  const [expands, setExpands] = useState<MenuValue[]>(['1', '2']);
 
-  const [darkActive, setDarkActive] = useState('1-1');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1-1');
   const [darkCollapsed, setDarkCollapsed] = useState(true);
-  const [darkExpands, setDarkExpands] = useState(['1', '2']);
+  const [darkExpands, setDarkExpands] = useState<MenuValue[]>(['1', '2']);
 
   return (
     <Fragment>
diff --git a/src/menu/_example/single-side.tsx b/src/menu/_example/single-side.tsx
index 176190ab1..d2ad33159 100644
--- a/src/menu/_example/single-side.tsx
+++ b/src/menu/_example/single-side.tsx
@@ -1,11 +1,13 @@
 import React, { Fragment, useState } from 'react';
 import { Menu } from 'tdesign-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { MenuItem } = Menu;
 
 function SingleSide() {
-  const [active, setActive] = useState('0');
-  const [darkActive, setDarkActive] = useState('1');
+  const [active, setActive] = useState<MenuValue>('0');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1');
 
   return (
     <Fragment>
diff --git a/src/menu/_example/single.tsx b/src/menu/_example/single.tsx
index e51b3e8ba..239b23735 100644
--- a/src/menu/_example/single.tsx
+++ b/src/menu/_example/single.tsx
@@ -2,11 +2,13 @@ import React, { Fragment, useState } from 'react';
 import { Menu, MessagePlugin, Button } from 'tdesign-react';
 import { SearchIcon, MailIcon, UserIcon, EllipsisIcon } from 'tdesign-icons-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { HeadMenu, MenuItem } = Menu;
 
 function Single() {
-  const [active, setActive] = useState('0');
-  const [darkActive, setDarkActive] = useState('1');
+  const [active, setActive] = useState<MenuValue>('0');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1');
 
   const operations = () => (
     <div className="tdesign-demo-menu__operations">
diff --git a/src/select-input/_example/collapsed-items.tsx b/src/select-input/_example/collapsed-items.tsx
index 960d6f7e0..807c89bd0 100644
--- a/src/select-input/_example/collapsed-items.tsx
+++ b/src/select-input/_example/collapsed-items.tsx
@@ -112,9 +112,9 @@ export default function SelectInputCollapsedItems() {
     document.head.insertAdjacentHTML('beforeend', classStyles);
   }, []);
 
-  const handleCollapsedItems: SelectInputProps['collapsedItems'] = ({ collapsedTags }) => {
-    if (Array.isArray(collapsedTags)) {
-      return <Tag key={'More'}>More(+{collapsedTags.length})</Tag>;
+  const handleCollapsedItems: SelectInputProps['collapsedItems'] = ({ collapsedSelectedItems }) => {
+    if (Array.isArray(collapsedSelectedItems)) {
+      return <Tag key={'More'}>More(+{collapsedSelectedItems.length})</Tag>;
     }
     return null;
   };
diff --git a/src/select/_example/collapsed.tsx b/src/select/_example/collapsed.tsx
index 59644c843..e7b9dc8c4 100644
--- a/src/select/_example/collapsed.tsx
+++ b/src/select/_example/collapsed.tsx
@@ -10,7 +10,7 @@ const options = [
 
 const MultipleSelect = () => {
   const [value, setValue] = useState(['1', '3']);
-  const [size, setSize] = useState('medium');
+  const [size, setSize] = useState<'small' | 'medium' | 'large'>('medium');
   const [disabled, setDisabled] = useState(false);
   const [readonly, setReadOnly] = useState(false);
   const [minCollapsedNum] = useState(1);
@@ -62,7 +62,11 @@ const MultipleSelect = () => {
       <h3>use collapsedItems:</h3>
       <Space align="center">
         <div>size control:</div>
-        <RadioGroup value={size} options={['small', 'medium', 'large']} onChange={(value) => setSize(value)} />
+        <RadioGroup
+          value={size}
+          options={['small', 'medium', 'large']}
+          onChange={(value: 'small' | 'medium' | 'large') => setSize(value)}
+        />
       </Space>
       <Space align="center">
         <span>disabled control:</span>
diff --git a/src/slider/_example/base.tsx b/src/slider/_example/base.tsx
index 1955568c1..a196068cc 100644
--- a/src/slider/_example/base.tsx
+++ b/src/slider/_example/base.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { Slider } from 'tdesign-react';
+import type { SliderValue } from 'tdesign-react';
 
 const BaseSlider = () => {
-  const [value, setValue] = useState(10);
-  const [rangeValue, setRangeValue] = useState([10, 80]);
+  const [value, setValue] = useState<SliderValue>(10);
+  const [rangeValue, setRangeValue] = useState<SliderValue>([10, 80]);
 
   return (
     <>
diff --git a/src/table/_example/filter-controlled.tsx b/src/table/_example/filter-controlled.tsx
index c922bf369..a9395bbb7 100644
--- a/src/table/_example/filter-controlled.tsx
+++ b/src/table/_example/filter-controlled.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
-import { Table, Button, DateRangePickerPanel, Space, Tag, TableProps } from 'tdesign-react';
 import isNumber from 'lodash/isNumber';
+import { Table, Button, DateRangePickerPanel, Space, Tag } from 'tdesign-react';
 import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-react';
 
+import type { TableProps, FilterType } from 'tdesign-react';
+
 const statusNameListMap = {
   0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },
   1: { label: '审批失败', theme: 'danger', icon: <CloseCircleFilledIcon /> },
@@ -81,7 +83,7 @@ const columns: TableProps['columns'] = [
     // 自定义过滤组件：日期过滤配置，请确保自定义组件包含 value 和 onChange 属性
     filter: {
       // todo(type): 类型缺陷
-      type: 'custom' as const,
+      type: 'custom' as FilterType,
       component: DateRangePickerPanel,
       props: {
         firstDayOfWeek: 7,
diff --git a/src/table/_example/pagination-ajax.tsx b/src/table/_example/pagination-ajax.tsx
index 5e9a96651..07db7b3cd 100644
--- a/src/table/_example/pagination-ajax.tsx
+++ b/src/table/_example/pagination-ajax.tsx
@@ -81,7 +81,7 @@ export default function TableBasic() {
       const url = new URL('https://randomuser.me/api');
       const params = { page: current, results: pageSize };
       Object.keys(params).forEach((key) => url.searchParams.append(key, params[key]));
-      const response = await fetch(url).then((x) => x.json());
+      const response = await fetch(url.toString()).then((x) => x.json());
       setData(response.results);
       setTotal(120);
       setIsLoading(false);
diff --git a/src/table/_example/pagination.tsx b/src/table/_example/pagination.tsx
index 0ca53b3b6..5cd5d792f 100644
--- a/src/table/_example/pagination.tsx
+++ b/src/table/_example/pagination.tsx
@@ -71,6 +71,7 @@ export default function TableBasic() {
 
       <Table
         // todo(type): fix id props
+        // @ts-ignore
         id="pagination-table"
         data={data}
         columns={columns}
diff --git a/src/tabs/_example/combination.tsx b/src/tabs/_example/combination.tsx
index 72d01f447..3ae73d5f8 100644
--- a/src/tabs/_example/combination.tsx
+++ b/src/tabs/_example/combination.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Tabs, Radio, Space, TabsProps } from 'tdesign-react';
+import { Tabs, Radio, Space } from 'tdesign-react';
+import type { TabsProps } from 'tdesign-react';
 
 const { TabPanel } = Tabs;
 
@@ -7,6 +8,8 @@ type ITabsTheme = TabsProps['theme'];
 
 export default function AddTabs() {
   const [theme, setTheme] = useState<ITabsTheme>('normal');
+  const [scrollPosition, setScrollPosition] = useState<TabsProps['scrollPosition']>('auto');
+
   const panels = Array.from({ length: 20 }).map((item, index) => ({
     value: index + 1,
     label: `选项卡${index + 1}`,
@@ -17,7 +20,11 @@ export default function AddTabs() {
         <Radio.Button value="normal">常规型</Radio.Button>
         <Radio.Button value="card">卡片型</Radio.Button>
       </Radio.Group>
-      <Radio.Group variant="default-filled" defaultValue="auto" onChange={setScrollPosition}>
+      <Radio.Group
+        variant="default-filled"
+        defaultValue="auto"
+        onChange={(v: TabsProps['scrollPosition']) => setScrollPosition(v)}
+      >
         <Radio.Button value="auto">Auto</Radio.Button>
         <Radio.Button value="start">Start</Radio.Button>
         <Radio.Button value="center">Center</Radio.Button>
diff --git a/src/tag-input/_example/collapsed.tsx b/src/tag-input/_example/collapsed.tsx
index 1016994d2..8b500ae2b 100644
--- a/src/tag-input/_example/collapsed.tsx
+++ b/src/tag-input/_example/collapsed.tsx
@@ -3,16 +3,16 @@ import { TagInput, Popup, Tag, Space, TagInputValue } from 'tdesign-react';
 
 export default function TagInputCollapsedExample() {
   const [tags, setTags] = useState<TagInputValue>(['Vue', 'React', 'Miniprogram', 'Angular', 'Flutter']);
-  const renderCollapsedItems = ({ collapsedTags }) => (
+  const renderCollapsedItems = ({ collapsedSelectedItems }) => (
     <Popup
       key={'tags'}
-      content={collapsedTags.map((item) => (
+      content={collapsedSelectedItems.map((item) => (
         <Tag key={item} style={{ marginRight: '4px' }}>
           {item}
         </Tag>
       ))}
     >
-      <Tag>More({collapsedTags?.length})</Tag>
+      <Tag>More({collapsedSelectedItems?.length})</Tag>
     </Popup>
   );
   return (
diff --git a/src/tree/_example/checkable.tsx b/src/tree/_example/checkable.tsx
index e1f501440..afde4db6d 100644
--- a/src/tree/_example/checkable.tsx
+++ b/src/tree/_example/checkable.tsx
@@ -122,7 +122,7 @@ export default () => {
     console.info('onClick:', context);
   };
 
-  const handleMode: RadioGroupProps<Value>['onChange'] = (value: Value) => {
+  const handleMode: RadioGroupProps['onChange'] = (value: Value) => {
     setValueMode(value);
   };
 
diff --git a/src/tree/_example/expand-mutex.tsx b/src/tree/_example/expand-mutex.tsx
index 830ef9b81..65b568856 100644
--- a/src/tree/_example/expand-mutex.tsx
+++ b/src/tree/_example/expand-mutex.tsx
@@ -74,10 +74,10 @@ export default () => {
     <Space direction="vertical">
       <Form labelWidth={120}>
         <Form.FormItem label="互斥展开" initialData={mutex}>
-          <Switch onChange={setMutex} />
+          <Switch onChange={(v: boolean) => setMutex(v)} />
         </Form.FormItem>
         <Form.FormItem label="整个节点可点击" initialData={expandOnClickNode}>
-          <Switch onChange={setExpandOnClickNode} />
+          <Switch onChange={(v: boolean) => setExpandOnClickNode(v)} />
         </Form.FormItem>
       </Form>
       <Tree
diff --git a/src/tree/_example/line.tsx b/src/tree/_example/line.tsx
index 72de362f1..2ab176b3f 100644
--- a/src/tree/_example/line.tsx
+++ b/src/tree/_example/line.tsx
@@ -1,7 +1,9 @@
-import { Tree, Form, Switch, Space, TreeProps } from 'tdesign-react';
+import React, { useState } from 'react';
+import { Tree, Form, Switch, Space } from 'tdesign-react';
 import { Icon } from 'tdesign-icons-react';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+
+import type { TreeNodeModel } from 'tdesign-react';
 
 const items = [
   {
@@ -100,8 +102,8 @@ export default () => {
     return lineNodes;
   };
 
-  // todo(type): line need to defined type
-  const renderLine: TreeProps['line'] = (node) => {
+  // TODO: complete type
+  const renderLine: any = (node: TreeNodeModel) => {
     if (!showLine) return null;
 
     return (
@@ -125,6 +127,7 @@ export default () => {
       </div>
     );
   };
+
   return (
     <Space direction="vertical">
       <Form>
diff --git a/src/upload/_example/custom-drag.tsx b/src/upload/_example/custom-drag.tsx
index 008b584d2..fa2a04f53 100644
--- a/src/upload/_example/custom-drag.tsx
+++ b/src/upload/_example/custom-drag.tsx
@@ -1,13 +1,12 @@
 import React, { useCallback, useState } from 'react';
 import { Button, message, Upload, Space, UploadProps, UploadFile } from 'tdesign-react';
 import { CloudUploadIcon } from 'tdesign-icons-react';
-
-import type { UploadRef } from 'tdesign-react/upload/interface';
+import type { UploadInstanceFunctions } from 'tdesign-react';
 
 export default function CustomDrag() {
   const [files, setFiles] = useState([]);
   const [progress, setProgress] = useState(0);
-  const uploadDom = React.useRef<UploadRef>();
+  const uploadDom = React.useRef();
 
   const handleChange = useCallback((files) => {
     setFiles(files.slice(-1));
@@ -19,7 +18,7 @@ export default function CustomDrag() {
     message.success(`文件 ${file.name} 上传成功`);
   }, []);
   const upload = useCallback(() => {
-    uploadDom.current.triggerUpload();
+    (uploadDom.current as UploadInstanceFunctions).triggerUpload();
   }, [uploadDom]);
   const onProgress = useCallback((val) => {
     setProgress(val);
diff --git a/src/upload/_example/image.tsx b/src/upload/_example/image.tsx
index a3637a64a..231b990a1 100644
--- a/src/upload/_example/image.tsx
+++ b/src/upload/_example/image.tsx
@@ -1,10 +1,8 @@
 import React, { useRef, useState } from 'react';
 import { Upload, Space, MessagePlugin, Checkbox, Button } from 'tdesign-react';
-import { getFileUrlByFileRaw } from 'tdesign-react/_common/js/upload/utils';
 
-// function UploadUI({ files = [] }) {
-//   return <div>{JSON.stringify(files)}</div>
-// }
+// @ts-ignore
+import { getFileUrlByFileRaw } from 'tdesign-react/_common/js/upload/utils';
 
 export default function UploadExample() {
   const uploadRef1 = useRef(null);
diff --git a/tsconfig.dev.json b/tsconfig.dev.json
index 6bf388c6a..9c1f0ed96 100644
--- a/tsconfig.dev.json
+++ b/tsconfig.dev.json
@@ -7,6 +7,7 @@
   "exclude": [
     "**/**/__tests__/*",
     "**/**/_example-js/*",
+    "**/config-provider/_example/*",
     "**/**/_usage/*",
     "node_modules",
     "src/_common",
@@ -15,5 +16,12 @@
     "esm",
     "cjs",
     "es"
-  ]
+  ],
+  "compilerOptions": {
+    "paths": {
+      "tdesign-react": ["src"],
+      "@test/utils": ["test/utils"],
+      "@common/*": ["src/_common/*"]
+    },
+  }
 }
\ No newline at end of file