Reactjs 修复从字符串映射推断react道具类型时的typescript警告=>；类型

我有一个名为

Field

的React组件，用于呈现各种类型的表单输入，包括通过其他React组件实现的自定义输入。输入类型由

type

确定，它可以是一个已知字符串（

keyof FIELD\u TYPES

，它反过来决定要创建的React组件）或任何类型的React组件（基于功能或类）。这已经实现了，但是我在尝试为实现提供适当的类型时遇到了一些问题。请注意，目标之一是确保正确推断道具，以便intellisense可以建议结果元素上的有效属性

显示我正在尝试修复的3个不同类型脚本警告。每个问题都用

//FIXME

注释注释

（1）和（2）：类型X不能用于索引类型“Y”-到目前为止，我还无法找到一种方法来满足这里的类型脚本

（3）：Typescript不接受自定义组件-不确定如何修改打字以允许此操作

我也尝试过使用区分联合，但在尝试推断作为

type

传递或通过

FIELD\u TYPES

映射解析的组件的属性时遇到了困难。使用这种方法的答案也很有用

const FIELD_TYPES = {
  text: "input",
  checkbox: "input",
  textarea: "textarea",
  custom: Custom
} as const;
type FieldTypeMap = typeof FIELD_TYPES

type KeysOfType<T, K> = { [I in keyof T]: T[I] extends K ? I : never }[keyof T]

type ReactComponentType<P = any> = React.ComponentType<P> | React.ExoticComponent<P>

type FieldTypeProps<Props = any> =
  | { type?: KeysOfType<FieldTypeMap, 'input'> } & JSX.IntrinsicElements['input']
  // FIXME(4): Is there any way to DRY this up?
  | { type: 'textarea' } & JSX.IntrinsicElements['textarea']
  | { type: 'select' } & JSX.IntrinsicElements['select']
  // FIXME(5+6): How to include props for the provided react component type?
  | { type: ReactComponentType<Props> } & Props // FIXME(5)
  | { type: KeysOfType<FieldTypeMap, ReactComponentType<Props>> } & {} // FIXME(6)

const字段类型={
文本：“输入”，
复选框：“输入”，
textarea：“textarea”，
定制：定制
}作为常量；
类型FieldTypeMap=字段类型
类型KeysOfType={[I in keyof T]：T[I]扩展了K？I:never}[keyof T]
类型ReactComponentType=React.ComponentType
| React.ExoticComponent

打字道具=
|{type？:KeysOfType}&JSX.intrinsiceelements['input']
//修克梅（4）：有没有办法把它弄干？
|{type:'textarea'}&JSX.intrinsiceelements['textarea']
|{type:'select'}&JSX.intrinsiceelements['select']
//FIXME（5+6）：如何为提供的react组件类型包括道具？
|{type:ReactComponentType}&Props//FIXME（5）
|{type:KeysOfType}&{}//FIXME（6）

---

提前谢谢

因此，问题是您需要将自定义组件从本质输入类型中分离出来，以便映射道具。另外，因为您正在重载现有的“type”属性，所以需要省略它

---

下面是目前正在运行的代码：

我的第一反应：将

自定义

排除在

字段类型映射之外，并以不同的方式处理它们。删除它实际上修复了一个错误“FIXME（1）”。关于“FIXME（2）”，存在的问题是，当与
&&
连接时，自动类型防护装置不起作用。你必须分别检查每一件事。我只是试着通过重载为另一个问题写一些非常相似的东西，但我没有完全正确：对于“FIXME（4）”：
type-PropsUnion={[K in keyof-FieldTypeMap]：{type:K}&JSX.intrinsiceelements[FieldTypeMap[K]}
谢谢你的帮助，琳达，非常感谢！我会看看我是否可以做任何额外的改进，如果可以的话，我会在这篇文章中跟进。