ts创建一个Input,添加事件监听器,函数类型报错?

Question

ts创建一个Input,添加事件监听器,函数类型报错?

    function onUpload() {
        const input = document.createElement("input")
        input.setAttribute("type", "file")
        input.setAttribute("accept", "image/*")
        input.addEventListener("input", handleUpload) // 这一行的 handleUpload 类型报错
        input.click()

        function handleUpload(e: InputEvent) {
            const target = e.target as HTMLInputElement
            if (!target) return

            const file = target.files![0]
            if (!file) return

            const type = file.type as ImageExcAll
            if (!ImageFileTypes.includes(type)) return
            fetchFileData(file)

            const imgUrl = URL.createObjectURL(file)
            dispatch(changeImgUrl(imgUrl))
        }

        function fetchFileData(file: File) {
            const fileData = new FormData()
            fileData.append("file", file)

            setLoading(true)
            const intervalId = setInterval(() => (rate < 100 && setRate(prev => prev + 1)), 40)
            getTableData(fileData).then(({ code, data }) => {
                if (code !== 0) return
                const { point: points, "measure-items": tableData, "ruler-scaling": rulerScaling } = data

                dispatch(changePointList(points))
                dispatch(setTableData(tableData))
                dispatch(setRulerScaling(rulerScaling))

                sessionStorage.setItem("points", JSON.stringify(points))
                sessionStorage.setItem("tableData", JSON.stringify(tableData))
                sessionStorage.setItem("rulerScaling", JSON.stringify(rulerScaling))
                setTimeout(() => setLoading(false), 500)
                clearInterval(intervalId)
                setRate(100)
            })
        }
    }

Answer 1

  input.addEventListener("input", (e: Event) => {
    const target = (e.target as HTMLInputElement);
  })