PropTypes em um aplicativo TypeScript React

121

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?

Ralph
fonte

Respostas:

104

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.

Dia joel
fonte
1
Você poderia explicar a primeira afirmação?
vehsakul
2
@vehsakul Desculpe, para esclarecimento, se você está escrevendo um pacote que será instalado por desenvolvedores que não usam o TypeScript, eles ainda precisam do PropTypes para obter erros em tempo de execução. Se o seu projeto for apenas para você / outros projetos TypeScript, as interfaces TypeScript para seus adereços são suficientes porque o projeto simplesmente não será construído.
Joel Day
1
Este é um POC que adiciona PropTypes de interfaces datilografadas no nível do Webpack github.com/grncdr/ts-react-loader#what-it-does
borN_free
Eu quero um oneOfType - optionalUnion: PropTypes.oneOfType ([PropTypes.string, PropTypes.number, PropTypes.instanceOf (Message)]), - typescript tem tipos de união, mas eles não me fornecem exatamente a mesma coisa
Mz A
1
Publiquei uma biblioteca que também faz isso: github.com/joelday/ts-proptypes-transformer É implementado como uma transformação do compilador TypeScript e produz propTypes precisos para deep generics, unions, etc. Existem algumas arestas, então quaisquer contribuições seriam maravilhosas.
Joel Day
141

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:

afonsoduarte
fonte
1
Os tipos propTypes e Typescript ficam fora de sincronia facilmente? Alguém já teve experiência em manutenção para nos contar?
Leonardo
9
Essa é a resposta correta! PropTypes (tempo de execução) não são iguais à verificação de tipo estático (tempo de compilação). Portanto, usar os dois não é um 'exercício inútil'.
hans
1
Aqui está uma boa explicação sobre como os tipos estáticos podem ser inferidos de PropTypes: dev.to/busypeoples/…
hans
Tempo de execução versus tempo de compilação não faz sentido quando você tem vue cli com hot reload e eslint. O que gera erros ao salvar.
Julia
1
@Julia, o hot reload não tem nada em comum com o tempo de execução. Mesmo com o hot reload você não terá ideia do que será realmente retornado pela api
Kostya Tresko
4

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

Tom Fenech
fonte
7
A validação de PropTypes também faz sentido para validar estruturas de dados carregadas dinamicamente (vindo do servidor via AJAX). PropTypes é validação em tempo de execução e, portanto, pode realmente ajudar a depurar coisas. Como os problemas produzirão mensagens claras e amigáveis ​​para o ser humano.
e1v