Reactjs 道具；对象可能是'；未定义'&引用；在React类型脚本中

我对Typescript是新手，在React Typescript中有一个我不理解的错误。我怀疑它来自我编写接口的方式，但我不确定

首先，我调用我的CellEditable组件

{}/>

CEllEditable有一个

isEditable

状态，可在单击时切换InputText

CellEditable.tsx

import React，{useState}来自“React”
从“./Cell.comp”导入单元格
从“./InputText.comp”导入InputText
界面CellEditableProps{
值：字符串
onChange？：（）=>无效
}
const renderCellInput=（类型：string，选项：any）=>{
开关（类型）{
案例“文本”：
返回
违约：
失踪归来！
}
}
const CellEditable=（props:CellEditableProps）=>{
const{value，onChange}=props
const[isEditing，setEditing]=useState（false）
常量handleClick=（）=>setEditing（！isEditing）
const handleBlur=（）=>setEditing（！isEditing）
常量选项={
价值
助手：{
onBlur：车把，
一旦改变
}
}
返回(
{
编辑
？renderCellInput（“文本”，选项）
: 
}
)
}
导出可编辑的默认单元格

InputText.tsx

从“React”导入React
界面输入extprops{
值？：字符串
助手？：助手道具
}
接口帮助程序{
onChange？：（）=>无效
onBlur？：（）=>void
}
常量InputText=（道具：inputExtProps）=>{
常量{value，helpers}=props
log（'propsInputText:'，props）//控制台中的空对象
返回(
)
}
导出默认输入文本

问题是：

helpers.onChange

获取此错误“对象可能“未定义”。TS2532”

InputText.tsx中的console.log（'propsInputText:'，props）输出一个空对象

---

typescript和我编写界面的方式是否有问题？

在

InputTextProps

中的

helpers

属性和

HelpersProps

中的

onChange

属性是可选的。通过删除问号使它们成为必需的，或者在销毁时为它们指定默认值

const { value, helpers = {} } = props;
const { onChange = () => {} } = helpers;

 return (
    <input type={'text'} value={value} onChange={onChange} onBlur={helpers.onBlur} />
  )

const{value，helpers={}}=props；
const{onChange=（）=>{}}=helpers；
返回(
)

在您的界面内：

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

您在

onChange

之后放置了一个

？

，它告诉编译器它不能被传递，因此您得到的

“对象可能是“未定义的”

要解决此问题，您可以将

onChange

与

一起使用
！
就像
onChange！
一样。这会使编译器确保
onChange
不会为空。但这是一种不好的方法

您应该做的是检查它是否为
null
或
未定义
，然后继续：

if(onChange) {
    ...do your stuff here
}

您的接口声明明确指出这些属性确实可以是未定义的（
？
将这些属性标记为可选属性）。您需要检查它们是否存在或填充它们

const value=props.value | |''；
常量助手={
onChange:（）=>{}，
onBlur:（）=>{}，
…（props.helpers | |{}），
};
返回(
)

或者类似。
将
onChange
和
onBlur
移动到
inputExtProps
中，并删除
helpers
对象似乎是可行的。但是1）问题不会发生在CodeSandbox环境中，只有在我的本地react-typescript环境中2）我更愿意将处理程序传递到props中的容器对象3）我想要t以更好地理解TS接口和可选道具的工作原理。先前删除的一个答案建议测试helpers对象中是否存在
OnChange
和
onBlur
键，例如
helpers！.OnChange
。如何分解helpers道具：
const{value，helpers:{OnChange，onBlur}}=props
。我发现以下错误
类型“HelpersProps | undefined”上不存在属性“onChange”。ts（2339）