能否根據 PropTypes 推斷 TypeScript 中的類型？

Question

我知道如何在這種情況下推斷類型：

import PropTypes from 'prop-types';

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

type Props = PropTypes.InferProps<typeof props>;

const x: Props = {};
x.id; // number | null | undefined

然而，在我的情況下，我有：

const propsShape = PropTypes.shape({
  id: PropTypes.number,
  // 更多包含巢狀的 PropTypes.shape 呼叫的屬性
});

如果我嘗試：

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

它無法編譯：

Type '{}' is not assignable to type 'PropsFromShape'.
  Property 'isRequired' is missing in type '{}' but required in type 'InferPropsInner<Pick<Requireable<InferProps<{ id: Requireable<number>; }>>, "isRequired"><number>; }>>, "isReRe.

Property 'id' does not exist on type 'PropsFromShape'.

我可以將shape 的參數提取為單獨的常數，並按上述方式操作，但是否有一種從propsShape 直接推斷屬性類型的好方法？

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);

我個人認為後者比較易讀。