feat(TypeScript): upgrade TypeScript6

package.json

@@ -139,7 +139,7 @@
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "typescript": "5.6.2",
+    "typescript": "^6.0.3",
     "vitest": "^2.1.1"
   },
   "dependencies": {

packages/components/affix/Affix.tsx

@@ -26,15 +26,18 @@ const Affix = forwardRef<AffixRef, AffixProps>((props, ref) => {
 
   const affixRef = useRef<HTMLDivElement>(null);
   const affixWrapRef = useRef<HTMLDivElement>(null);
-  const placeholderEL = useRef<HTMLElement>(null);
-  const scrollContainer = useRef<ScrollContainerElement>(null);
+  const placeholderEL = useRef<HTMLElement | null>(null);
+  const scrollContainer = useRef<ScrollContainerElement | null>(null);
 
   const ticking = useRef(false);
 
   // 这里是通过控制 wrap 的 border-top 到浏览器顶部距离和 offsetTop 比较
   const handleScroll = useCallback(() => {
     if (!ticking.current) {
       requestAnimationFrame(() => {
+        if (!scrollContainer.current) return;
+        if (!placeholderEL.current) return;
+        if (!affixWrapRef.current) return;
         // top = 节点到页面顶部的距离，包含 scroll 中的高度
         const {
           top: wrapToTop = 0,
@@ -67,8 +70,13 @@ const Affix = forwardRef<AffixRef, AffixProps>((props, ref) => {
             fixedTop = false;
           }
         } else {
-          const containerHeight =
-            scrollContainer.current?.[isWindow(scrollContainer.current) ? 'innerHeight' : 'clientHeight'] - wrapHeight;
+          let containerHeight = 0;
+          if (isWindow(scrollContainer.current)) {
+            containerHeight = scrollContainer.current.innerHeight - wrapHeight;
+          } else {
+            containerHeight = scrollContainer.current?.clientHeight - wrapHeight;
+          }
+
           const calcBottom = containerToTop + containerHeight - (offsetBottom ?? 0); // 计算 bottom 相对应的 top 值
           if (calcTop <= offsetTop) {
             // top 的触发

packages/components/anchor/__tests__/anchor.test.tsx

@@ -56,7 +56,7 @@ describe('Anchor 组件测试', () => {
     );
     const anchorItem = wrapper.getByTestId(childTestID);
     fireEvent.click(anchorItem.firstChild);
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
   });
 
   test('render AnchorTarget', async () => {

packages/components/avatar/Avatar.tsx

@@ -40,7 +40,7 @@ const Avatar = forwardRefWithStatics(
       imageProps,
       className,
       ...avatarProps
-    } = useDefaultProps<AvatarProps>(props, avatarDefaultProps);
+    } = useDefaultProps(props, avatarDefaultProps);
     const groupSize = useContext(AvatarContext);
 
     const { classPrefix } = useConfig();

packages/components/calendar/__tests__/calendar.test.tsx

@@ -12,7 +12,7 @@ describe('Calendar测试', () => {
   describe(':props', () => {
     test(':theme', () => {
       const { container } = render(<Calendar theme={'card'}></Calendar>);
-      expect(container.firstChild.classList.contains('t-calendar--card')).toBeTruthy();
+      expect(container.children[0].classList.contains('t-calendar--card')).toBeTruthy();
     });
 
     test('fillWithZero', () => {

packages/components/checkbox/__tests__/checkbox.test.tsx

@@ -20,7 +20,7 @@ describe('Checkbox', () => {
     const { container } = render(<Checkbox disabled={true} onChange={fn}></Checkbox>);
     expect(container.firstChild).toHaveClass('t-is-disabled');
     fireEvent.click(container.firstChild);
-    expect(fn).toBeCalledTimes(0);
+    expect(fn).toHaveBeenCalledTimes(0);
   });
 
   test('indeterminate', () => {
@@ -37,7 +37,7 @@ describe('Checkbox', () => {
     const fn = vi.fn();
     const { container } = render(<Checkbox disabled={true} onChange={fn}></Checkbox>);
     fireEvent.click(container.firstChild);
-    expect(fn).toBeCalledTimes(0);
+    expect(fn).toHaveBeenCalledTimes(0);
   });
 });
 
@@ -65,7 +65,7 @@ describe('CheckboxGroup', () => {
       </Checkbox.Group>,
     );
     fireEvent.click(container.firstChild.firstChild);
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
   });
 
   test('option', () => {

packages/components/color-picker/__tests__/color-picker.test.tsx

@@ -135,6 +135,6 @@ describe('ColorPickerPanel 组件测试', () => {
     fireEvent.click(container.querySelector('.t-icon-delete'));
     expect(container.querySelector('.t-icon-delete')).toBeNull();
     expect(container.querySelector('.t-is-active')).toBeNull();
-    expect(onRecentColorsChange).toBeCalled();
+    expect(onRecentColorsChange).toHaveBeenCalled();
   });
 });

packages/components/config-provider/_example/table.tsx

@@ -41,8 +41,8 @@ export default function configDemo() {
     table: {
       // 支持 String 和 Function 两种数据类型
       empty: 'Empty Data',
-      expandIcon: () => <ChevronRightIcon />,
-      sortIcon: () => <CaretDownSmallIcon size="18px" />,
+      expandIcon: <ChevronRightIcon />,
+      sortIcon: <CaretDownSmallIcon size="18px" />,
 
       // More config
       // filterIcon: () => <span>Filter</span>,

packages/components/date-picker/__tests__/date-picker-panel.test.tsx

@@ -108,7 +108,7 @@ describe('DatePickerPanel', () => {
     const { container } = render(<DatePickerPanel onChange={fn} />);
 
     fireEvent.click(container.querySelector('.t-date-picker__cell'));
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
   });
 
   test('onJumperClick', async () => {
@@ -117,11 +117,11 @@ describe('DatePickerPanel', () => {
 
     const jumperPrev = container.querySelector('.t-pagination-mini__prev');
     fireEvent.click(jumperPrev);
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
 
     const jumperNext = container.querySelector('.t-pagination-mini__next');
     fireEvent.click(jumperNext);
-    expect(fn).toBeCalledTimes(2);
+    expect(fn).toHaveBeenCalledTimes(2);
 
     const jumperCurrent = container.querySelector('.t-pagination-mini__current');
     fireEvent.click(jumperCurrent);
@@ -140,7 +140,7 @@ describe('DatePickerPanel', () => {
 
     const christmasBtn = getByText('圣诞节');
     fireEvent.click(christmasBtn);
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
   });
 
   test('onYearChange & onMonthChange', async () => {

packages/components/date-picker/__tests__/date-picker.test.tsx

@@ -199,9 +199,9 @@ describe('DatePicker', () => {
     const { container } = render(<DatePicker allowInput onBlur={blurFn} onFocus={focusFn} />);
     const InputDom = container.querySelector('.t-input__inner');
     fireEvent.focus(InputDom);
-    expect(focusFn).toBeCalledTimes(1);
+    expect(focusFn).toHaveBeenCalledTimes(1);
     fireEvent.blur(InputDom);
-    expect(blurFn).toBeCalledTimes(1);
+    expect(blurFn).toHaveBeenCalledTimes(1);
   });
 
   test('onChange onPick', async () => {
@@ -212,8 +212,8 @@ describe('DatePicker', () => {
 
     const firstDay = document.querySelector('.t-date-picker__cell--first-day-of-month');
     fireEvent.click(firstDay);
-    expect(changeFn).toBeCalledTimes(1);
-    expect(pickFn).toBeCalledTimes(1);
+    expect(changeFn).toHaveBeenCalledTimes(1);
+    expect(pickFn).toHaveBeenCalledTimes(1);
   });
 
   test('onChange onPick', async () => {
@@ -224,8 +224,8 @@ describe('DatePicker', () => {
 
     const firstDay = await waitFor(() => document.querySelector('.t-date-picker__cell--first-day-of-month'));
     fireEvent.click(firstDay);
-    expect(changeFn).toBeCalledTimes(1);
-    expect(pickFn).toBeCalledTimes(1);
+    expect(changeFn).toHaveBeenCalledTimes(1);
+    expect(pickFn).toHaveBeenCalledTimes(1);
   });
 
   test('onYearChange', async () => {
@@ -241,7 +241,7 @@ describe('DatePicker', () => {
     const yearOptionNode = await waitFor(() => document.querySelector('.t-popup .t-select-option span[title="2021"]'));
 
     fireEvent.click(yearOptionNode);
-    expect(yearChangeFn).toBeCalledTimes(1);
+    expect(yearChangeFn).toHaveBeenCalledTimes(1);
   });
 
   test('onMonthChange', async () => {
@@ -265,7 +265,7 @@ describe('DatePicker', () => {
     const monthOptionNode = await waitFor(() => document.querySelector('.t-popup .t-select-option span[title="1 月"]'));
 
     fireEvent.click(monthOptionNode);
-    expect(monthChangeFn).toBeCalledTimes(1);
+    expect(monthChangeFn).toHaveBeenCalledTimes(1);
   });
 
   test('panel select month and year', async () => {
@@ -320,7 +320,7 @@ describe('DatePicker', () => {
 
   test('cell handleMouseEnter', async () => {
     const { container, getByText } = render(<DatePicker />);
-    const inputEle = container.querySelector('.t-input__inner');
+    const inputEle = container.querySelector('.t-input__inner') as HTMLInputElement;
     fireEvent.mouseDown(inputEle);
 
     const cellBtn = getByText('25');
@@ -332,7 +332,7 @@ describe('DatePicker', () => {
 
   test('cell handleClick', async () => {
     const { container, getByText } = render(<DatePicker />);
-    const inputEle = container.querySelector('.t-input__inner');
+    const inputEle = container.querySelector('.t-input__inner') as HTMLInputElement;
     fireEvent.mouseDown(inputEle);
 
     const cellBtn = getByText('25');
@@ -342,7 +342,7 @@ describe('DatePicker', () => {
 
   test('onJumperClick', async () => {
     const { container, getByText } = render(<DatePicker />);
-    const inputEle = container.querySelector('.t-input__inner');
+    const inputEle = container.querySelector('.t-input__inner') as HTMLInputElement;
     fireEvent.mouseDown(inputEle);
 
     const jumperPrev = await waitFor(() => document.querySelector('.t-pagination-mini__prev'));

packages/components/date-picker/__tests__/date-range-picker-panel.test.tsx

@@ -116,7 +116,7 @@ describe('DateRangePickerPanel', () => {
 
     fireEvent.click(container.querySelector('.t-date-picker__cell'));
     fireEvent.click(container.querySelector('.t-date-picker__cell'));
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
   });
 
   test('onJumperClick', async () => {
@@ -125,7 +125,7 @@ describe('DateRangePickerPanel', () => {
 
     const jumperPrev = container.querySelector('.t-pagination-mini__prev');
     fireEvent.click(jumperPrev);
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
   });
 
   test('onTimePickerChange & onConfirmClick', async () => {
@@ -140,13 +140,15 @@ describe('DateRangePickerPanel', () => {
     const { getByText } = render(
       <DateRangePickerPanel
         onChange={fn}
-        presets={{ 圣诞节: [dayjs('2023-12-25').toDate(), dayjs('2023-12-25').toDate()] }}
+        presets={{
+          圣诞节: [dayjs('2023-12-25').toDate(), dayjs('2023-12-25').toDate()],
+        }}
       />,
     );
 
     const christmasBtn = getByText('圣诞节');
     fireEvent.click(christmasBtn);
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
   });
 
   test('onYearChange & onMonthChange', async () => {
@@ -201,7 +203,11 @@ describe('DateRangePickerPanel', () => {
 
   test('onPresetClick', async () => {
     const { container, getByText } = render(
-      <DateRangePickerPanel presets={{ 圣诞节: [dayjs('2023-12-25').toDate(), dayjs('2023-12-25').toDate()] }} />,
+      <DateRangePickerPanel
+        presets={{
+          圣诞节: [dayjs('2023-12-25').toDate(), dayjs('2023-12-25').toDate()],
+        }}
+      />,
     );
     const inputEle = container.querySelector('.t-input__inner');
     fireEvent.mouseDown(inputEle);

packages/components/date-picker/__tests__/date-range-picker.test.tsx

@@ -168,9 +168,9 @@ describe('DateRangePicker', () => {
     const { container } = render(<DateRangePicker allowInput onBlur={blurFn} onFocus={focusFn} />);
     const InputDom = container.querySelector('.t-input__inner');
     fireEvent.focus(InputDom);
-    expect(focusFn).toBeCalledTimes(1);
+    expect(focusFn).toHaveBeenCalledTimes(1);
     fireEvent.blur(InputDom);
-    expect(blurFn).toBeCalledTimes(1);
+    expect(blurFn).toHaveBeenCalledTimes(1);
   });
 
   it('onChange onPick onInput', async () => {
@@ -185,8 +185,8 @@ describe('DateRangePicker', () => {
     fireEvent.click(firstTBody.firstChild.firstChild.firstChild);
     fireEvent.click(firstTBody.firstChild.firstChild.firstChild);
 
-    expect(changeFn).toBeCalledTimes(2);
-    expect(pickFn).toBeCalledTimes(2);
+    expect(changeFn).toHaveBeenCalledTimes(2);
+    expect(pickFn).toHaveBeenCalledTimes(2);
   });
 
   it('panel select month and year', async () => {
@@ -264,7 +264,11 @@ describe('DateRangePicker', () => {
 
   test('onPresetClick', async () => {
     const { container } = render(
-      <DateRangePicker presets={{ 圣诞节: [dayjs('2023-12-25').toDate(), dayjs('2023-12-25').toDate()] }} />,
+      <DateRangePicker
+        presets={{
+          圣诞节: [dayjs('2023-12-25').toDate(), dayjs('2023-12-25').toDate()],
+        }}
+      />,
     );
     const inputEle = container.querySelector('.t-input__inner');
     fireEvent.mouseDown(inputEle);

packages/components/drawer/__tests__/drawer.test.tsx

@@ -130,8 +130,8 @@ describe('test Drawer', () => {
     const onCancelFn = vi.fn();
     const { getByText } = render(<DrawerDemo onCancel={onCancelFn} />);
     fireEvent.click(getByText('Open'));
-    expect(onCancelFn).not.toBeCalled();
+    expect(onCancelFn).not.toHaveBeenCalled();
     fireEvent.click(getByText('取消'));
-    expect(onCancelFn).toBeCalled();
+    expect(onCancelFn).toHaveBeenCalled();
   });
 });

packages/components/form/hooks/useInstance.tsx

@@ -214,7 +214,7 @@ export default function useInstance(
     } else {
       const { type = 'initial', fields = [] } = params;
       fields.forEach((name) => {
-        const formItemRef = findFormItem(name, formMapRef);
+        const formItemRef = findFormItem(name as NamePath, formMapRef);
         formItemRef?.current?.resetField(type);
       });
     }
@@ -235,7 +235,7 @@ export default function useInstance(
     } else {
       if (!Array.isArray(fields)) throw new TypeError('The parameter of "clearValidate" must be an array');
       fields.forEach((name) => {
-        const formItemRef = findFormItem(name, formMapRef);
+        const formItemRef = findFormItem(name as NamePath, formMapRef);
         formItemRef?.current?.resetValidate();
       });
     }
@@ -259,7 +259,7 @@ export default function useInstance(
         ? [...formMapRef.current.values()]
         : fields
             .map((name) => {
-              const formItemRef = findFormItem(name, formMapRef);
+              const formItemRef = findFormItem(name as NamePath, formMapRef);
               return formItemRef;
             })
             .filter(Boolean);

packages/components/grid/__tests__/grid.test.tsx

@@ -39,18 +39,20 @@ describe('Grid 组件测试', () => {
     // Array<GutterObject>
     const { container: container3 } = render(
       <Row
-        gutter={[
-          { xs: 4, sm: 8, md: 12 },
-          { xs: 4, sm: 8, md: 12 },
-        ]}
+        gutter={
+          [
+            { xs: 4, sm: 8, md: 12 },
+            { xs: 4, sm: 8, md: 12 },
+          ] as any
+        }
       >
         <Col span={3}></Col>
       </Row>,
     );
 
     // Object
     const { container: container4 } = render(
-      <Row gutter={{ xs: 4, sm: 8, md: 12 }}>
+      <Row gutter={{ xs: 4, sm: 8, md: 12 } as any}>
         <Col span={4}></Col>
       </Row>,
     );