Les types dans TypeScript peuvent-ils être déduits de PropTypes ?

Question

Je sais comment déduire le type dans ce cas :

importer les PropTypes à partir de 'prop-types';

accessoires const = {
  identifiant : PropTypes.numéro,
} ;

tapez Props = PropTypes.InferProps<typeof props>;

const x : accessoires = {} ;
x.id; // nombre | null | non défini

Cependant, dans mon cas, j'ai :

const propsShape = PropTypes.shape({
  identifiant : PropTypes.numéro,
  // Plus de propriétés, y compris les appels PropTypes.shape imbriqués
});</pré>
<p>Si j'essaie : </p>
<pre class="brush:php;toolbar:false;">type PropsFromShape = PropTypes.InferProps<typeof propsShape>;
const y : PropsFromShape = {} ;
const z = y.id;

La compilation n'a pas pu être effectuée :

Le type '{}' n'est pas attribuable au type 'PropsFromShape'.
  La propriété 'isRequired' est manquante dans le type '{}' mais est requise dans le type 'InferPropsInner<Pick<Requireable<InferProps<{ id : Requireable<number> }>>, "isRequired">>'.

La propriété 'id' n'existe pas sur le type 'PropsFromShape'.

Je pourrais extraire le paramètre de shape dans une constante distincte et le faire comme ci-dessus, mais existe-t-il un moyen de déduire directement le type de propriété à partir de propsShape Une bonne façon?

Answer 1

Pour obtenir le type d'objet imbriqué que vous pouvez utiliser 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;

Ou si vous pouvez mettre toute la définition des accessoires au même endroit :

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

Personnellement, je pense que ce dernier est plus facile à lire.