PropTypes em um aplicativo TypeScript React

Usar React.PropTypesfaz sentido em um aplicativo React TypeScript ou é apenas um caso de "cinto e suspensórios"?

Como a classe do componente é declarada com um Propsparâmetro de tipo:

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

Existe algum benefício real em adicionar

static propTypes {
    myProp: React.PropTypes.string
}

para a definição da classe?

Normalmente, não há muito valor em manter seus adereços de componente como tipos do TypeScript e React.PropTypesao mesmo tempo.

Aqui estão alguns casos em que isso é útil:

• Publicar um pacote como uma biblioteca de componentes que será usada por JavaScript simples.
• Aceitar e transmitir entradas externas, como resultados de uma chamada de API.
• Usar dados de uma biblioteca que pode não ter tipificações adequadas ou precisas, se houver.

Portanto, geralmente é uma questão de quanto você pode confiar na validação do tempo de compilação.

As versões mais recentes do TypeScript agora podem inferir tipos com base em seu React.PropTypes( PropTypes.InferProps), mas os tipos resultantes podem ser difíceis de usar ou consultar em outro lugar em seu código.

Texto datilografado e PropTypes servem a propósitos diferentes. Typescript valida tipos em tempo de compilação , enquanto PropTypes são verificados em tempo de execução .

O typescript é útil quando você está escrevendo código: ele irá avisá-lo se você passar um argumento do tipo errado para seus componentes React, fornecerá preenchimento automático para chamadas de função, etc.

PropTypes são úteis ao testar como os componentes interagem com dados externos, por exemplo, ao carregar JSON de uma API. PropTypes irá ajudá-lo a depurar (quando no modo de desenvolvimento do React) por que seu componente está falhando, imprimindo mensagens úteis como:

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

Embora possa parecer que Typescript e PropTypes fazem a mesma coisa, eles não se sobrepõem. Mas é possível gerar PropTypes automaticamente a partir do Typescript para que você não precise especificar os tipos duas vezes, consulte por exemplo:

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-it-does
• https://github.com/gcanti/prop-types-ts

Eu acho que em algumas situações complicadas onde o tipo de props não pode ser inferido em tempo de compilação, então seria útil ver quaisquer avisos gerados pelo uso propTypesem tempo de execução.

Uma dessas situações seria ao processar dados de uma fonte externa para a qual as definições de tipo não estão disponíveis, como uma API externa além do seu controle. Para APIs internas, acho que vale o esforço para escrever (ou melhor, gerar) definições de tipo, se ainda não estiverem disponíveis.

Fora isso, eu realmente não vejo nenhum benefício (e é por isso que nunca usei pessoalmente).