字节跳动的arco design vue中select组件change事件，参数定义只能为any吗

Question

字节跳动的arco design vue中select组件change事件，参数定义只能为any吗？不写any就报类型错误,change事件中的val本来定义为number类型，但是打包就报错,只能用any吗

Answer 1

在Arco Design Vue中的Select组件，其 change 事件的回调函数参数类型确实只能被定义为 any，这是因为 Select 没有将选中的值的类型暴露给外部。具体来说，Select 组件在触发 change 事件时，会将选中的值作为第一个参数传递给回调函数，但是这个值的类型是动态生成的，并没有被类型定义所包含（因为你可以通过 label 和 value 两个 Slot 来自定义选中项的值类型）。因此，只能把参数的类型定义为 any 或者不定义类型。

例如，在以下代码中，我们定义了一个 handleSelectChange 方法来处理 change 事件：

<template>
  <div>
    <el-select v-model="selectedValue" @change="handleSelectChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '选项一', value: 'value1' },
        { label: '选项二', value: 'value2' },
        { label: '选项三', value: 'value3' },
      ],
    };
  },
  methods: {
    handleSelectChange(newValue) {
      console.log(newValue);
    },
  },
};
</script>

在上面的代码中，我们将 handleSelectChange 方法定义为只接受一个参数 newValue，参数的类型定义为 any。这是因为我们无法确定选中的值的类型。

需要注意的是，在 handleSelectChange 方法内部，我们可以通过类型转换来将 newValue 转换为我们期望的类型。例如，如果我们希望将选中的值转换为数字类型，可以使用 parseInt 方法进行转换：

handleSelectChange(newValue: any) {
  const numericValue = parseInt(newValue);
  console.log(numericValue);
}

总之，Arco Design Vue 中的 Select 组件的 change 事件只能被定义为 any 类型或不定义类型，这是由 Select 组件自身的实现所决定的。