TypeScript TSX 使用 [ElDatePicker] 报错缺少事件类型，onChange 提示 “不存在属性“onChange”“

index.tsx：

import styled from '@/styled-components'
import {
    
     defineComponent, ref, reactive } from 'vue'
import {
    
     ElDatePicker } from  from 'element-plus/lib/components'

const BgContainer = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: rgb(246, 246, 246);
`

export default defineComponent({
    
    
  setup() {
    
    
    const selectedDateVal = ref<number>(0)
    const timeArr = ref<number[]>([])
    const searchForm = reactive({
    
    
      timeType: 'yesterday',      
      beginTime: 0,
      endTime: 0
    })
    
    function confirmDateTime(val:any,type:string){
    
          
      if(val){
    
     
        let beginTime = 0   
        let endTime = 0
        const date = new Date(val)
        switch (type) {
    
    
          case 'yesterday':                            
            beginTime = val     
            endTime = val + 60 * 60 * 1000 * 24-1000 
            break
          case 'week':                            
            beginTime = val      
            endTime = beginTime+7*60*60*1000*24-1000 
            break
          case 'month': 
            beginTime = val
            endTime = new Date(new Date(date.getFullYear(), date.getMonth()+1, 1).setDate(0)).getTime() // 获取所选月最后一天                        
          break
        }
        timeArr.value = [beginTime, endTime]
        selectedDateVal.value = 0            
        searchForm.timeType = type  
        searchForm.beginTime = timeArr.value[0]      
        searchForm.endTime = timeArr.value[1]    
      }     
    }
    
    function hideHandle(){
    
    
      searchForm.timeType = 'day'      
    }
    
    return () => {
    
    
      return (
      <BgContainer>
        <ElDatePicker onChange={
    
    (val:any)=>confirmDateTime(val,'yesterday')} type='datetime' v-model={
    
    selectedDateVal.value} format="YYYY-MM-DD HH:mm:ss" value-format="x" placeholder="请选择指定日">
        </ElDatePicker>
        <ElDatePicker onChange={
    
    (val:any)=>confirmDateTime(val,'week')} type='week' v-model={
    
    selectedDateVal.value} format='[Week] ww' value-format="x" placeholder="请选择周">
        </ElDatePicker>
        <ElDatePicker onChange={
    
    (val:any)=>confirmDateTime(val,'month')} type='month' v-model={
    
    selectedDateVal.value} value-format="x" placeholder="请选择月">
        </ElDatePicker>
        <ElDatePicker onChange={
    
    hideHandle} v-model={
    
    timeArr.value} type="datetimerange" format="YYYY-MM-DD HH:mm:ss" value-format="x" placeholder="请选择统计时间" />
      </BgContainer>
    )
    }
  }
})

报错：

解决方案：

由于 inheritattrs 的存在，很多原生属性并没有在组件中声明，这些隐形传递的属性会引起 tsx 中的类型错误。在 main.ts 中加入以下代码：

declare module '@vue/runtime-core' {
    
    
  interface AllowedComponentProps {
    
    
    [key: string]: Any
  }
}

main.ts：

import {
    
     createApp } from 'vue'
import router from './router'
import store from './store'
import App from './App'
import './setup'
import './assets/style/reset.less'
import './assets/style/odometer-theme-default.css'
// jsx格式按需导入element plus样式可能不兼容
// import 'element-plus/packages/theme-chalk/src/base.scss'
// import 'element-plus/lib/theme-chalk/index.css'
import 'element-plus/dist/index.css';
import './assets/style/element-over.less'

const app = createApp(App)

app.use(router)
app.use(store)
app.mount('#app')
declare module '@vue/runtime-core' {
    
    
  export interface AllowedComponentProps {
    
    
    [key: string]: any
  }
}