typescript - react/typescript 中的通用道具 - 如何让 T 成为属性的类型？

Question

我已经尝试了无数的东西，但无法让它工作

我有一个 react 组件的 props，并且类型handleChange应该是一个函数，它接受任何作为values.

type Props<T extends Record<string, unknown> = Record<string, unknown>> = {
   value: T,
   handleChange: (value: T) => void
}

我试图让 T 成为“类型value”，但在这个例子中，它们只是默认为Record这不是我想要的。

这是在材料 ui 中过度完成的（即自动完成）

标签： typescript

Answer 1

TypeScript 具有强大的推理系统，它允许您无需手动指定泛型参数，而是根据运行时参数的类型对其进行分配。对于 React + TypeScript，这看起来像：

type MyComponentProps<T extends Record<string, unknown>> = {
  value: T;
  handleChange: (value: T) => void;
};

const MyComponent = <T extends Record<string, unknown>>(
  props: MyComponentProps<T>
) => {
  return null;
};

class MyOtherComponent<
  T extends Record<string, unknown>
> extends React.Component<MyComponentProps<T>> {
  render() {
    return null;
  }
}
// This works
<MyComponent
  value={{ a: "hi", this: { is: "a", test: true } }}
  handleChange={(val) => {
    console.log("val.a =", val.a, "val.this =", val.this);
  }}
/>
<MyOtherComponent
  value={{ a: "hi", this: { is: "a", test: true } }}
  handleChange={(val) => {
    val.a = val.this.is;
  }}
/>
// This fails
<MyComponent
  value="not a Record<string, unknown>"
  handleChange={() => {}}
/>

代码沙盒