使用正确的泛型类型迭代对象

Posted 2023-03-13

【中文标题】使用正确的泛型类型迭代对象

【英文标题】：Iterate over object with correct generic type

【发布时间】：2022-01-19 11:51:15

【问题描述】：

我想迭代一个通用接口。并使用jsx中对象的值。但是 Typescript 会抛出以下内容：

'(key: K) => JSX.Element' 类型的参数不可分配给 '(value: string, index: number, array: string[]) => 类型的参数 元素'。

interface Props<T> 
  object: T;


export default function BasicInputs<T, K extends keyof T>(
  object,
: Props<T>): ReactElement 
  return (
    <div>
      Object.keys(object).map((key: K) => (
        <div>
          <div className="">
            <input
              value=object[key]
              type="text"
              name="name"
              id="name"
            />
          </div>
        </div>
      ))
    </div>
  );

我应该如何定义接口和组件才能正确输入？

【参考方案1】：

<input /> 期望 value 为 string | number | readonly string[] | undefined。

我们可以通过这种方式获取有效的input.value类型：

type InputValue = React.InputhtmlAttributes<HTMLInputElement>['value']

现在我们只需要对T应用适当的限制：

type InputValue = React.InputHTMLAttributes<HTMLInputElement>['value']

type HashMap = Record<PropertyKey, InputValue>

interface Props<T> 
  object: T;


export default function BasicInputs<T extends HashMap>(
  object,
: Props<T>) 
  return (
    <div>
      Object.keys(object).map((key) => (
        <div>
          <div className="">
            <input
              value=object[key]
              type="text"
              name="name"
              id="name"
            />
          </div>
        </div>
      ))
    </div>
  );

它应该可以工作。