refactor: update tsconfig.json (#4978)

* feat: package manager change to pnpm

* ci: workflow_dispatch

* ci: mAIN_PULL_REQUEST

* ci: pnpm store

* ci: build

* ci: pnpm

* ci: pp install

* chore: add npmrc and skiplib ts lint

* chore: commitlint dir

* chore: build:tsc script

* chore: pr yml add comments

* refactor: use npm-run-all2

* feat: remove the coverage of HTMLAttributes type in jsx.d.ts

* feat: cSSProperties

* style: remove suppressImplicitAnyIndexErrors

* style: update tsconfig.json

* style: up tsconfig.json

* style: up

* style: moduleResolution bundler and up typescript to 5

* style: enable noImplicitAny

* chore: fix implicitAny true and typo

* chore: fix implicitAny true

* chore: fix implicitAny true

* style: fix types error

* chore: fix implicitAny true

* style: getValidAttrs utils helper

* style: fix implicitAny true

* style: fix implicitAny true

* style: fix implicitAny true

* style: fix implicitAny true

* style: fix implicitAny true

* style: fix implicitAny true

* style: add general utils and fix any type error

* style: up common

* style: fix implicitAny true

* chore: fix implicitAny true

* chore: fix implicitAny true

* chore: fix implicitAny true

* chore: fix implicitAny true

* chore: fix eslint unused check

* chore: fix eslint unused check

* chore: move utils to commmon

* chore: remove utils

* fix: revert calcRowStyle

* chore: up snap

* chore: add todo symbol

* chore: fix implicitAny true

* chore: fix implicitAny true

* chore: optimize todo comment

* chore: optimize todo comment

* chore: optimize todo comment

* chore: optimize todo comment

* chore: optimize todo comment

* chore: optimize todo comment

* chore: optimize todo comment

---------

Co-authored-by: Uyarn <uyarnchen@gmail.com>

package.json

@@ -184,7 +184,7 @@
     "tdesign-publish-cli": "^0.0.12",
     "tdesign-site-components": "0.16.0-alpha.6",
     "tdesign-theme-generator": "^1.0.11",
-    "typescript": "~4.8.4",
+    "typescript": "^5.7.3",
     "vite": "^2.9.16",
     "vite-plugin-pwa": "^0.12.8",
     "vite-plugin-tdoc": "^2.0.4",

packages/components/affix/affix.tsx

@@ -45,6 +45,7 @@ export default defineComponent({
           const calcTop = wrapToTop - containerTop; // 节点顶部到 container 顶部的距离
 
           const containerHeight =
+            // @ts-ignore 这个的源头应该是在这里 type ScrollContainerElement = Window | HTMLElement;
             scrollContainer.value[scrollContainer.value instanceof Window ? 'innerHeight' : 'clientHeight'] -
             wrapHeight;
           const calcBottom = containerTop + containerHeight - props.offsetBottom; // 计算 bottom 相对应的 top 值

packages/components/anchor/anchor-target.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { FileCopyIcon as TdFileCopyIcon } from 'tdesign-icons-vue-next';
-import { copyText } from '../../utils/clipboard';
+import { copyText } from './utils';
 import Message from '../message/plugin';
 import props from './anchor-target-props';
 import Popup from '../popup';

packages/components/anchor/utils.ts

@@ -1,3 +1,5 @@
+import Clipboard from 'clipboard';
+
 export const ANCHOR_SHARP_REGEXP = /#(\S+)$/;
 
 export type ANCHOR_CONTAINER = HTMLElement | Window;
@@ -10,3 +12,16 @@ export function getOffsetTop(target: HTMLElement, container: ANCHOR_CONTAINER):
   }
   return top - (container as HTMLElement).getBoundingClientRect().top;
 }
+
+// TODO：仅为这一个而引入一个 clipboard，可优化
+export function copyText(text: string) {
+  const div = document.createElement('div');
+  const clip = new Clipboard(div, {
+    text() {
+      return text;
+    },
+  });
+  div.click();
+  clip.destroy();
+  div.remove();
+}

packages/components/avatar/avatar.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
     const gap = ref(4);
     const scale = ref('');
 
-    const sizeValue = computed(() => props.size || avatarGroup?.size);
+    const sizeValue = computed<keyof typeof SIZE.value>(() => props.size || avatarGroup?.size);
     const isCustomSize = computed(() => sizeValue.value && !SIZE.value[sizeValue.value]);
 
     const customAvatarSize = computed(() => {

packages/components/calendar/calendar-cell.tsx

@@ -75,7 +75,7 @@ export default defineComponent({
     });
     const clickCell = (e: MouseEvent): void => {
       if (disabled.value) return;
-      const emitName = clickTypeEmitEventMap[e.type];
+      const emitName = clickTypeEmitEventMap[e.type as keyof typeof clickTypeEmitEventMap];
       emit(emitName, e);
     };
 

packages/components/calendar/calendar.tsx

@@ -297,7 +297,7 @@ export default defineComponent({
       );
     };
 
-    const cellClickEmit = (eventPropsName: string, e: MouseEvent, cellData: CalendarCell): void => {
+    const cellClickEmit = (eventPropsName: keyof typeof props, e: MouseEvent, cellData: CalendarCell): void => {
       if (isFunction(props[eventPropsName])) {
         const options: CellEventOption = {
           cell: {
@@ -306,7 +306,7 @@ export default defineComponent({
           },
           e,
         };
-        props[eventPropsName](options);
+        (props[eventPropsName] as Function)(options);
       }
     };
     const clickCell = (e: MouseEvent, cellData: CalendarCell): void => {

packages/components/calendar/hook/useColHeaders.ts

@@ -10,11 +10,11 @@ import { isObject } from 'lodash-es';
 export function useColHeaders(props: TdCalendarProps, state: CalendarState) {
   const { t, globalConfig } = useConfig(COMPONENT_NAME);
 
-  const weekDipalyText = computed<TdCalendarProps['week']>(() => {
+  const weekDisplayText = computed<TdCalendarProps['week']>(() => {
     return props.week || t(globalConfig.value.week).split(',');
   });
   function getWeekDisplay(weekNum: number): string {
-    const weekText = weekDipalyText.value;
+    const weekText = weekDisplayText.value as string[];
     return isObject(weekText) && weekText[weekNum - 1] ? weekText[weekNum - 1] : utils.getDayCn(weekNum);
   }
   const cellColHeaders = computed<CellColHeader[]>(() => {

packages/components/checkbox/group.tsx

@@ -141,6 +141,7 @@ export default defineComponent({
       nodes?.forEach((node) => {
         const option = node.props as CheckboxOptionObj;
         if (!option) return;
+        // @ts-ignore types only declare checkAll not declare check-all
         if (option['check-all'] === '' || option['check-all'] === true) {
           option.checkAll = true;
         }

packages/components/collapse/collapse-panel.tsx

@@ -19,7 +19,7 @@ export default defineComponent({
     const { value, disabled, destroyOnCollapse } = toRefs(props);
     const collapseValue: Ref<CollapseValue> = inject('collapseValue');
     const updateCollapseValue: Function = inject('updateCollapseValue');
-    const getUniqId: Function = inject('getUniqId', () => undefined, false);
+    const getUniqId: Function = inject('getUniqId', (): undefined => undefined, false);
     const {
       defaultExpandAll,
       disabled: disableAll,

packages/components/color-picker/panel/format/inputs.tsx

@@ -75,7 +75,9 @@ export default defineComponent({
     // 更新modelValue
     const updateModelValue = () => {
       const { format, color } = props;
-      const values: any = getFormatColorMap('encode')[format];
+      // @ts-ignore
+      // TODO: 从类型上看，values 可能为空，那么下面就会报错，需要同步类型处理 1.getFormatColorMap 2. format 前置过滤
+      const values = getFormatColorMap('encode')[format];
       values.a = Math.round(color.alpha * 100);
       Object.keys(values).forEach((key) => {
         modelValue[key] = values[key];
@@ -96,6 +98,8 @@ export default defineComponent({
       if (v === lastModelValue[key]) {
         return;
       }
+      // @ts-ignore
+      // TODO: 如上
       const value = getFormatColorMap('decode')[props.format];
       props.onInputChange(value, modelValue.a / 100, key, v);
     };

packages/components/color-picker/panel/index.tsx

@@ -67,7 +67,10 @@ export default defineComponent({
       if (mode.value === 'linear-gradient') {
         return color.value.linearGradient;
       }
-      return color.value.getFormatsColorMap()[props.format] || color.value.css;
+      const colorMap = color.value.getFormatsColorMap();
+      return Object.keys(colorMap).includes(props.format)
+        ? colorMap[props.format as keyof typeof colorMap]
+        : color.value.css;
     };
 
     /**

packages/components/date-picker/DatePicker.tsx

@@ -359,7 +359,9 @@ export default defineComponent({
           multiple={props.multiple}
           popupProps={popupProps.value}
           inputProps={inputProps.value}
-          placeholder={props.placeholder || globalConfig.value.placeholder[props.mode]}
+          placeholder={
+            props.placeholder || (globalConfig.value.placeholder as { [key in typeof props.mode]: string })[props.mode]
+          }
           popupVisible={!isReadOnly.value && popupVisible.value}
           valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })}
           needConfirm={props.needConfirm}

packages/components/date-picker/DateRangePicker.tsx

@@ -184,7 +184,7 @@ export default defineComponent({
       if (!isFirstValueSelected.value || !activeIndex.value) {
         let nextIndex = notValidIndex;
         if (nextIndex === -1) nextIndex = activeIndex.value ? 0 : 1;
-        activeIndex.value = nextIndex;
+        activeIndex.value = nextIndex as 0 | 1;
         isFirstValueSelected.value = !!nextValue[0];
       } else {
         popupVisible.value = false;
@@ -293,7 +293,7 @@ export default defineComponent({
       if (!isFirstValueSelected.value || !activeIndex.value) {
         let nextIndex = notValidIndex;
         if (nextIndex === -1) nextIndex = activeIndex.value ? 0 : 1;
-        activeIndex.value = nextIndex;
+        activeIndex.value = nextIndex as 0 | 1;
         isFirstValueSelected.value = !!nextValue[0];
       } else if (nextValue.length === 2) {
         popupVisible.value = false;

packages/components/date-picker/DateRangePickerPanel.tsx

@@ -127,7 +127,13 @@ export default defineComponent({
     }
 
     // 头部快速切换
-    function onJumperClick({ trigger, partial }: { trigger: string; partial: DateRangePickerPartial }) {
+    function onJumperClick({
+      trigger,
+      partial,
+    }: {
+      trigger: 'prev' | 'next' | 'current';
+      partial: DateRangePickerPartial;
+    }) {
       const partialIndex = partial === 'start' ? 0 : 1;
 
       const triggerMap = {
@@ -181,8 +187,8 @@ export default defineComponent({
     // time-picker 点击
     function onTimePickerChange(val: string) {
       const { hours, minutes, seconds, milliseconds, meridiem } = extractTimeObj(val);
-
       const nextInputValue = [...(cacheValue.value as DateValue[])];
+      // @ts-ignore
       const changedInputValue = cacheValue.value[activeIndex.value];
       const currentDate = !dayjs(changedInputValue, formatRef.value.format).isValid()
         ? dayjs().year(year.value[activeIndex.value]).month(month.value[activeIndex.value])

packages/components/date-picker/base/Header.tsx

@@ -103,6 +103,16 @@ export default defineComponent({
           current: globalConfig.value.now,
           next: globalConfig.value.nextMonth,
         },
+        quarter: {
+          prev: globalConfig.value.preYear,
+          current: globalConfig.value.now,
+          next: globalConfig.value.nextYear,
+        },
+        week: {
+          prev: globalConfig.value.preMonth,
+          current: globalConfig.value.now,
+          next: globalConfig.value.nextMonth,
+        },
       };
     });
 

packages/components/date-picker/base/Table.tsx

@@ -1,15 +1,12 @@
 import { defineComponent, PropType, computed } from 'vue';
-import dayjs from 'dayjs';
-import isoWeek from 'dayjs/plugin/isoWeek';
+
 import TDatePickerCell from './Cell';
 import { useConfig, usePrefixClass } from '../../hooks/useConfig';
 import { parseToDayjs } from '../../../common/js/date-picker/format';
 import { isArray } from 'lodash-es';
 
 import type { TdDatePickerProps, DateMultipleValue } from '../type';
 
-dayjs.extend(isoWeek);
-
 export default defineComponent({
   name: 'TDatePickerTable',
   props: {

packages/components/date-picker/hooks/useDisableDate.ts

@@ -2,6 +2,9 @@ import dayjs from 'dayjs';
 import { isArray } from 'lodash-es';
 import { isFunction } from 'lodash-es';
 import { isObject } from 'lodash-es';
+import dayJsIsBetween from 'dayjs/plugin/isBetween';
+
+dayjs.extend(dayJsIsBetween);
 
 import type { TdDatePickerProps, TdDateRangePickerProps } from '../type';
 

packages/components/date-picker/hooks/useRange.tsx

@@ -7,11 +7,11 @@ import { useGlobalIcon } from '../../hooks/useGlobalIcon';
 import { usePrefixClass, useConfig } from '../../hooks/useConfig';
 import { useReadonly } from '../../hooks/useReadonly';
 
-import { TdDateRangePickerProps, DateValue } from '../type';
+import { TdDateRangePickerProps, DateValue, DateRangePickerPartial } from '../type';
 import { isValidDate, formatDate, getDefaultFormat, parseToDayjs } from '../../../common/js/date-picker/format';
 import useRangeValue from './useRangeValue';
 
-export const PARTIAL_MAP = { first: 'start', second: 'end' };
+export const PARTIAL_MAP: Record<'first' | 'second', DateRangePickerPartial> = { first: 'start', second: 'end' };
 
 export default function useRange(props: TdDateRangePickerProps) {
   const COMPONENT_NAME = usePrefixClass('date-range-picker');
@@ -35,7 +35,7 @@ export default function useRange(props: TdDateRangePickerProps) {
 
   const popupVisible = ref(false);
   const isHoverCell = ref(false);
-  const activeIndex = ref(0); // 确定当前选中的输入框序号
+  const activeIndex = ref<0 | 1>(0); // 确定当前选中的输入框序号
   const inputValue = ref(formatDate(props.value, { format: formatRef.value.format })); // 未真正选中前可能不断变更输入框的内容
   const isReadOnly = useReadonly();
 
@@ -49,7 +49,8 @@ export default function useRange(props: TdDateRangePickerProps) {
     prefixIcon: () => renderTNodeJSX('prefixIcon'),
     readonly: isReadOnly.value || !props.allowInput,
     separator: props.separator || globalConfig.value.rangeSeparator,
-    placeholder: props.placeholder || globalConfig.value.placeholder[props.mode],
+    placeholder:
+      props.placeholder || (globalConfig.value.placeholder as { [key in typeof props.mode]: string })[props.mode],
     activeIndex: popupVisible.value ? activeIndex.value : undefined,
     suffixIcon: () => {
       return renderTNodeJSX('suffixIcon') || <CalendarIcon />;
@@ -65,15 +66,15 @@ export default function useRange(props: TdDateRangePickerProps) {
       popupVisible.value = false;
       onChange?.([], { dayjsValue: [], trigger: 'clear' });
     },
-    onBlur: (newVal: string[], { e, position }: any) => {
+    onBlur: (newVal: string[], { e, position }: { e: MouseEvent; position: 'first' | 'second' }) => {
       props.onBlur?.({ value: newVal, partial: PARTIAL_MAP[position], e });
     },
-    onFocus: (newVal: string[], { e, position }: any) => {
+    onFocus: (newVal: string[], { e, position }: { e: MouseEvent; position: 'first' | 'second' }) => {
       props.onFocus?.({ value: newVal, partial: PARTIAL_MAP[position], e });
       activeIndex.value = position === 'first' ? 0 : 1;
     },
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onChange: (newVal: string[], { e, position }: any) => {
+    onChange: (newVal: string[], { e, position }: { e: MouseEvent; position: 'first' | 'second' }) => {
       inputValue.value = newVal;
 
       // 跳过不符合格式化的输入框内容
@@ -128,6 +129,8 @@ export default function useRange(props: TdDateRangePickerProps) {
 
       // 这里劫持了进一步向 popup 传递的 onVisibleChange 事件，为了保证可以在 Datepicker 中使用 popupProps.onVisibleChange，故此处理
       props.popupProps?.onVisibleChange?.(visible, context);
+      // TODO
+      // @ts-ignore types only declare onVisibleChange，but not declare on-visible-change
       props.popupProps?.['on-visible-change']?.(visible, context);
 
       // 输入框点击不关闭面板

packages/components/date-picker/hooks/useSingle.tsx

@@ -127,6 +127,8 @@ export default function useSingle(props: TdDatePickerProps) {
       if (disabled.value) return;
       // 这里劫持了进一步向 popup 传递的 onVisibleChange 事件，为了保证可以在 Datepicker 中使用 popupProps.onVisibleChange，故此处理
       props.popupProps?.onVisibleChange?.(visible, context);
+      // TODO
+      // @ts-ignore types only declare onVisibleChange，but not declare on-visible-change
       props.popupProps?.['on-visible-change']?.(visible, context);
       // 输入框点击不关闭面板
       if (context.trigger === 'trigger-element-click') {

packages/components/dialog/dialog.tsx

@@ -296,6 +296,7 @@ export default defineComponent({
     const hasEventOn = (name: string) => {
       // _events 因没有被暴露在vue实例接口中，只能把这个规则注释掉
       // eslint-disable-next-line dot-notation
+      // @ts-ignore
       const eventFuncs = this['_events']?.[name];
       return !!eventFuncs?.length;
     };
@@ -306,7 +307,7 @@ export default defineComponent({
         danger: <ErrorCircleFilledIcon class={`${classPrefix.value}-is-error`} />,
         success: <CheckCircleFilledIcon class={`${classPrefix.value}-is-success`} />,
       };
-      return icon[props.theme];
+      return icon[props.theme as keyof typeof icon];
     };
     const renderDialog = () => {
       // header 值为 true 显示空白头部

packages/components/dialog/hooks.tsx

@@ -7,6 +7,7 @@ import TButton, { ButtonProps } from '../button';
 import { PopconfirmConfig, DialogConfig, DrawerConfig } from '../config-provider';
 import type { ClassName } from '../common';
 import type { TdDialogProps } from './type';
+import { getPropertyValFromObj } from '../../common/js/utils/general';
 
 export interface MixinsConfirmBtn {
   theme?: MixinsThemeType;
@@ -38,8 +39,10 @@ export function useAction(action: BtnAction) {
   // 全局配置属性综合
   const getDefaultConfirmBtnProps = (options: MixinsConfirmBtn): ButtonProps => {
     const { globalConfirm, theme, globalConfirmBtnTheme } = options;
-    const defaultTheme = omit(globalConfirmBtnTheme, ['info'])?.[theme] || 'primary';
+    const defaultTheme = getPropertyValFromObj(omit(globalConfirmBtnTheme, ['info']), theme) || 'primary';
     let props: ButtonProps = {
+      // @ts-ignore
+      // TODO: fix type of globalConfirmBtnTheme
       theme: defaultTheme,
       size: options.size,
       onClick: (e) => {

packages/components/dialog/plugin.tsx

@@ -108,6 +108,8 @@ interface ExtraApi {
   alert: DialogAlertMethod;
 }
 
+type ExtraApiType = keyof ExtraApi;
+
 const confirm: DialogConfirmMethod = (props: DialogOptions) => createDialog(props);
 
 const alert: DialogAlertMethod = (props: Omit<DialogOptions, 'confirmBtn'>) => {
@@ -127,12 +129,12 @@ export const DialogPlugin = createDialog as DialogPluginType;
 
 DialogPlugin.install = (app: App): void => {
   app.config.globalProperties.$dialog = createDialog;
-  Object.keys(extraApi).forEach((funcName) => {
+  Object.keys(extraApi).forEach((funcName: ExtraApiType) => {
     app.config.globalProperties.$dialog[funcName] = extraApi[funcName];
   });
 };
 
-Object.keys(extraApi).forEach((funcName) => {
+Object.keys(extraApi).forEach((funcName: ExtraApiType) => {
   DialogPlugin[funcName] = extraApi[funcName];
 });
 

packages/components/dropdown/dropdown-item.tsx

@@ -5,7 +5,7 @@ import dropdownItemProps from './dropdown-item-props';
 import useRipple from '../hooks/useRipple';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
 import { usePrefixClass } from '../hooks/useConfig';
-import { pxCompat } from '../../utils/helper';
+import { pxCompat } from '../../common/js/utils/helper';
 
 export default defineComponent({
   name: 'TDropdownItem',

packages/components/dropdown/dropdown-menu.tsx

@@ -16,7 +16,7 @@ export default defineComponent({
   setup(props) {
     const dropdownClass = usePrefixClass('dropdown');
     const dropdownMenuClass = usePrefixClass('dropdown__menu');
-    const scrollTopMap = reactive({});
+    const scrollTopMap = reactive<Record<string, number>>({});
     const itemHeight = ref(null);
     const menuRef = ref<HTMLElement>();
     const isOverMaxHeight = ref(false);