Intenté innumerables cosas pero no pude hacer que esto funcionara

Tengo accesorios para un componente de reacción, y el tipo de handleChange debería ser una función que tome todo lo que se pasó como values.

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

Estoy tratando de que T sea "el tipo de value", pero en este ejemplo simplemente están predeterminados en Record, que no es lo que quiero.

Esto se hace excesivamente en material ui (es decir, autocompletar)

0
boy 22 ene. 2021 a las 22:59

1 respuesta

La mejor respuesta

TypeScript tiene un potente sistema de inferencia, que le permite no especificar el parámetro genérico manualmente, sino asignarlo en función del tipo de parámetro de tiempo de ejecución. Para React + TypeScript, esto se ve así:

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={() => {}}
/>

CodeSandbox

1
101arrowz 22 ene. 2021 a las 20:30