我是 Typescript 新手，在 React Typescript 中遇到了一个我不理解的错误。我怀疑它来自我编写界面的方式，但我不确定。

首先，我调用我的 CellEditable 组件

<CellEditable value={'Hello'} onChange={() => {}} />

CEllEditable 有一个 isEditable 状态，单击时切换 InputText

CellEditable.tsx

import React, { useState } from 'react'
import Cell from './Cell.comp'
import InputText from './InputText.comp'

interface CellEditableProps {
  value: string
  onChange?: () => void
}

const renderCellInput = (type: string, opts: any) => {
  switch (type) {
    case 'text':
      return <InputText {...opts} />
    default:
      return <div>Missing!</div>
  }
}

const CellEditable = (props: CellEditableProps) => {
  const { value, onChange } = props
  const [isEditing, setEditing] = useState<boolean>(false)

  const handleClick = () => setEditing(!isEditing)
  const handleBlur = () => setEditing(!isEditing)

  const opts = {
    value,
    helpers: {
      onBlur: handleBlur,
      onChange
    }
  }

  return (
    <div onClick={handleClick}>
      {
        isEditing
        ? renderCellInput('text', opts)
        : <Cell value={value} />
      }
    </div>
  )
}

export default CellEditable

InputText.tsx

import React from 'react'

interface InputTextProps {
  value?: string
  helpers?: HelpersProps
}

interface HelpersProps {
  onChange?: () => void
  onBlur?: () => void
}

const InputText = (props: InputTextProps) => {
  const { value, helpers } = props
  console.log('propsInputText:', props) // Empty object in the console
  
  return (
    <input type={'text'} value={value} onChange={helpers.onChange} onBlur={helpers.onBlur} />
  )
}

export default InputText

问题是：

1. helpers.onChange 收到此错误“ 对象可能为‘未定义’。TS2532 ”
2. InputText.tsx 中的 console.log('propsInputText:', props) 输出一个空对象。

这是 typescript 的问题吗？我写我的界面？