types(Collapse): use tsx (#8130)

src/collapse/index.tsx

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 import { createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { useChildren } from '@vant/use';
@@ -6,10 +7,20 @@ const [createComponent, bem] = createNamespace('collapse');
 
 export const COLLAPSE_KEY = 'vanCollapse';
 
+export type CollapseProvide = {
+  toggle: (name: number | string, expanded: boolean) => void;
+  isExpanded: (name: number | string) => boolean;
+};
+
 export default createComponent({
   props: {
     accordion: Boolean,
-    modelValue: [String, Number, Array],
+    modelValue: {
+      type: [String, Number, Array] as PropType<
+        string | number | Array<string | number>
+      >,
+      required: true,
+    },
     border: {
       type: Boolean,
       default: true,
@@ -21,24 +32,28 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const { linkChildren } = useChildren(COLLAPSE_KEY);
 
-    const toggle = (name, expanded) => {
-      const { accordion, modelValue } = props;
-
-      if (accordion) {
-        if (name === modelValue) {
-          name = '';
-        }
-      } else if (expanded) {
-        name = modelValue.concat(name);
-      } else {
-        name = modelValue.filter((activeName) => activeName !== name);
-      }
-
+    const updateName = (name: number | string | Array<number | string>) => {
       emit('change', name);
       emit('update:modelValue', name);
     };
 
-    const isExpanded = (name) => {
+    const toggle = (name: number | string, expanded: boolean) => {
+      const { accordion, modelValue } = props;
+
+      if (accordion) {
+        updateName(name === modelValue ? '' : name);
+      } else if (expanded) {
+        updateName((modelValue as Array<number | string>).concat(name));
+      } else {
+        updateName(
+          (modelValue as Array<number | string>).filter(
+            (activeName) => activeName !== name
+          )
+        );
+      }
+    };
+
+    const isExpanded = (name: number | string) => {
       const { accordion, modelValue } = props;
 
       if (process.env.NODE_ENV !== 'production') {
@@ -56,7 +71,9 @@ export default createComponent({
         }
       }
 
-      return accordion ? modelValue === name : modelValue.indexOf(name) !== -1;
+      return accordion
+        ? modelValue === name
+        : (modelValue as Array<number | string>).indexOf(name) !== -1;
     };
 
     linkChildren({ toggle, isExpanded });