Können Typen in TypeScript aus PropTypes abgeleitet werden?

Question

Ich weiß, wie ich in diesem Fall auf den Typ schließen kann:

import PropTypes from 'prop-types';

const props = {
  id: PropTypes.number,
};

type Props = PropTypes.InferProps<typeof props>;

const x: Props = {};
x.id; // Zahl |. undefiniert

In meinem Fall habe ich jedoch:

const propsShape = PropTypes.shape({
  id: PropTypes.number,
  // Weitere Eigenschaften, einschließlich verschachtelter PropTypes.shape-Aufrufe
});

Wenn ich es versuche:

type PropsFromShape = PropTypes.InferProps<typeof propsShape>;
const y: PropsFromShape = {};
const z = y.id;

Die Kompilierung ist fehlgeschlagen:

Typ „{}“ kann nicht dem Typ „PropsFromShape“ zugewiesen werden.
  Die Eigenschaft „isRequired“ fehlt im Typ „{}“, ist aber im Typ „InferPropsInner<Pick<Requireable<InferProps<{ id: Requireable<number>;, „isRequired“>>“ erforderlich.

Die Eigenschaft „id“ ist für den Typ „PropsFromShape“ nicht vorhanden.

Ich könnte den Parameter von shape in eine separate Konstante extrahieren und es wie oben machen, aber gibt es eine Möglichkeit, den Eigenschaftstyp direkt von propsShape abzuleiten? Ein guter Weg?

Answer 1

要获取嵌套对象的类型，您可以使用type NestedProps = PropTypes.InferProps<typeof propsShape>['isRequired'];

import PropTypes from "prop-types";

const propsShape = PropTypes.shape({
  nestedId: PropTypes.number,
  // 更多包括嵌套的PropTypes.shape调用的属性
});

const props = {
  id: PropTypes.number,
  optionalWithShape: propsShape
};

type Props = PropTypes.InferProps<typeof props>;
type NestedProps = PropTypes.InferProps<typeof propsShape>['isRequired'];

const x: Props = {};
x.id = 1;

const y: NestedProps = {
  nestedId: 1
}

x.optionalWithShape = y;

或者，如果您可以将整个props定义放在一个地方：

import PropTypes from "prop-types";

const props = {
  id: PropTypes.number,
  optionalWithShape: PropTypes.shape({
    nestedId: PropTypes.number
  })
};

type Props = PropTypes.InferProps<typeof props>;
type NestedProps = Props['optionalWithShape'];

const x: Props = {};
x.id = 1;

const y: NestedProps = {
  nestedId: 1
}

x.optionalWithShape = y;

console.log(x.optionalWithShape.nestedId);

我个人认为后者更易读。