Typescript 如何动态访问输入错误 我所拥有的

我创建了一个函数，该函数接受一个参数，该参数将用于动态访问特定的formik错误，这是通过使用括号表示法而不是点表示法实现的，如下所示：

interface FormData {
  firstName: string
  lastName: string
}

从'formik'导入{useFormikContext}；
函数TextField（名称：string）：JSX.Element{
常量{errors}=useFormikContext（）；
console.log（errors[name]）；//此处显示ts错误
//其他功能/部件代码
}

问题 代码按预期工作，我可以获得以字符串形式传递名称（错误名称）的错误，但我在ts类型方面遇到问题，ts抛出以下错误：

errors[name]：TS7053:元素隐式具有“any”类型，因为“string”类型的表达式不能用于索引类型“formickerors”。在“formickerors”类型上未找到具有“string”类型参数的索引签名。

我想要什么 我可以看到formik实现的类型，但我无法理解如何实现这个函数，该函数接受错误名称作为函数参数，并使用它来访问错误而不抱怨

更新1 当前问题：我正在尝试使用括号表示法动态获取

错误

。在这种情况下，如何使用

FormData

从'formik'导入{getIn，useFormikContext}；
从“React”导入React；
从'@ui kitten/components'导入{Input as UIKInput}；
从'@ui kitten/components/ui/input/input.component'导入{InputProps as UIKInputProps}；
导出类型TextFieldProps=UIKInputProps&{
名称：字符串；
};
导出默认函数TextField（props:TextFieldProps）：JSX.Element{
const{name，…inputProps}=props；
const{setfieldtoucted，handleChange，errors，toucted}=useFormikContext（）；
返回(
setFieldTouched（名称）}
onChangeText={handleChange（名称）}
{…inputProps}
/>
);
}

更新2 使用

getIn

查看特定错误或触摸并避免类型错误

从'formik'导入{getIn，useFormikContext}；
从“React”导入React；
从'@ui kitten/components'导入{Input as UIKInput}；
从'@ui kitten/components/ui/input/input.component'导入{InputProps as UIKInputProps}；
导出类型TextFieldProps=UIKInputProps&{
名称：字符串；
};
导出默认函数TextField（props:TextFieldProps）：JSX.Element{
const{name，…inputProps}=props；
const{setfieldtoucted，handleChange，errors，toucted}=useFormikContext（）；
返回(
setFieldTouched（名称）}
onChangeText={handleChange（名称）}
{…inputProps}
/>
);
}

该错误是因为

name

是一个字符串，但

errors

对象将仅具有特定字符串作为键，而不是所有字符串。这意味着您需要让类型系统知道存在哪些键，并坚持只使用这些键

如果将鼠标悬停在

UseFormicContext（）

上，您将看到以下类型的弹出窗口：

useFormikContext<unknown>(): FormikContextType<unknown>

现在，您可以定义组件道具以接受作为表单数据键的值：

interface Props {
  formKey: keyof FormData
}

最后，将

FormData

作为类型参数传递给

useformiccontext（）

：

const{errors}=useformiccontext（）；
console.log（错误[formKey]）；//很好

如果您传入了一个错误的密钥，那么这还具有类型安全性的额外好处。将引发类型错误

// Good
const testUsage = <TextField formKey='firstName' />

// Error: Type '"keyDoesNotExist"' is not assignable to type 'keyof FormData'.
const badUsage = <TextField formKey='keyDoesNotExist' /> 

//很好
const testUsage=
//错误：类型“keyDoesNotExist”不可分配给类型“keyof FormData”。
常量错误用法=

---

我有一个问题，如果我正在创建一个可重用的输入组件，那么该组件将不知道表单中信息的形状，该怎么办。最好是向组件添加一个泛型，比如

TextField（）{}

？但是您必须将这个相同类型的参数传递给所有要创建的输入？。我可以使用

formik

中的

getIn

解决问题（类型），但我不知道这是否是最佳/最佳解决方案。

// Good
const testUsage = <TextField formKey='firstName' />

// Error: Type '"keyDoesNotExist"' is not assignable to type 'keyof FormData'.
const badUsage = <TextField formKey='keyDoesNotExist' />