Как использовать PropTypes.shape с Typescript - PullRequest
Новая
       17

Как использовать PropTypes.shape с Typescript

0 голосов
/ 11 декабря 2019

Я выполняю рефакторинг приложения React с Javascript на Typescript, но у меня возникают некоторые проблемы с миграцией, особенно shape PropType. Мой код выглядит следующим образом: 

import React from 'react';
import PropTypes from 'prop-types';

interface FooterProps {
  labels: FooterLabels;
}

interface FooterLabels {
  body: string;
}

const Footer: React.FC<FooterProps> = ({ labels }) => (
  <div className="footer">
    {/* ... */}
  </div>
);

Footer.propTypes = {
  labels: PropTypes.shape({
    body: PropTypes.string.isRequired
  }).isRequired
};

export default Footer;

Но я получаю сообщение об ошибке в PropTypes: 

Type 'Validator<InferProps<{ body: Validator<string>; }>>' is not assignable to type 'Validator<FooterLabels>'.
  Type 'InferProps<{ body: Validator<string>; }>' is not assignable to type 'FooterLabels'.
    Property 'body' is optional in type 'InferProps<{ body: Validator<string>; }>' but required in type 'FooterLabels'.ts(2322)
FooterAppPromo.tsx(5, 3): The expected type comes from property 'labels' which is declared here on type 'WeakValidationMap<FooterProps>'

Я новичок в Typescript, поэтому иногда я не совсемзнаю, что я делаю, но я пытался делать такие вещи, как: 

Footer.propTypes = {
  labels: PropTypes.shape<FooterLabels>({
    body: PropTypes.string.isRequired
  }).isRequired
};

Но я получаю ошибки. Я попытался найти примеры реализации, но не смог найти.

EDIT

Типы Typescript и PropTypes не - это одно и то же. Вы можете легко написать пример, где проверка Typescript проходит, но вы все равно получаете предупреждение PropTypes (например, внешний API, который возвращает число, где должна быть строка). Вот две статьи, объясняющие, почему:

Итак, мой вопрос какя могу заставить вложенные объекты PropTypes (PropTypes.shape() или PropTypes.objectOf()) работать с TypeScript?

1 Ответ

0 голосов
/ 11 декабря 2019

На самом деле вам не нужно propTypes здесь - labels получил только одно вложенное поле body, которое typeof FooterLabels. 

interface FooterProps {
  labels: {
     body: FooterLabels;
  };
}
...