reactjs - PropTypes i en TypeScript React-applikasjon

Gir det mening å bruke React.PropTypes i en TypeScript React-applikasjon, eller er dette bare et tilfelle av «belte og seler»?

Siden komponentklassen er deklarert med en Props-typeparameter:

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

er det noen reell fordel med å legge til

static propTypes {
    myProp: React.PropTypes.string
}

til klasse-definisjonen?

Svar #1

Typescript og PropTypes tjener forskjellige formål. Typescript validerer typer ved kompileringstid, mens PropTypes sjekkes ved kjørertid.

Typescript er nyttig når du skriver kode: det vil varsle deg hvis du sender et argument av feil type til dine React-komponenter, gi deg autoutfylling for funksjonskall, osv.

PropTypes er nyttige når du tester hvordan komponentene samhandler med ekstern data, for eksempel når du laster JSON fra en API. PropTypes vil hjelpe deg med å feilsøke (når du er i Reacts utviklingsmodus) hvorfor komponenten din feiler ved å skrive ut nyttige meldinger som:

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

Selv om det kan virke som om Typescript og PropTypes gjør det samme, overlapper de faktisk ikke i det hele tatt. Men det er mulig å generere PropTypes automatisk fra Typescript slik at du ikke trenger å spesifisere typer to ganger, se for eksempel:

  • https://github.com/milesj/babel-plugin-typescript-to-proptypes
  • https://github.com/grncdr/ts-react-loader#hva-den-gjør
  • https://github.com/gcanti/prop-types-ts

Svar #2

Det er vanligvis ikke mye verdi i å opprettholde både komponentens props som TypeScript-typer og React.PropTypes samtidig.

Her er noen tilfeller hvor det er nyttig å gjøre det:

  • Publisering av en pakke som et komponentbibliotek som vil bli brukt av ren JavaScript.
  • Akseptere og videreformidle ekstern input som resultater fra et API-kall.
  • Ved å bruke data fra et bibliotek som kanskje ikke har tilstrekkelige eller nøyaktige typer, om noen.

Så, vanligvis handler det om hvor mye du kan stole på valideringen under kompilering.

Nyere versjoner av TypeScript kan nå utlede typer basert på dine React.PropTypes (PropTypes.InferProps), men de resulterende typene kan være vanskelige å bruke eller referere til andre steder i koden din.

Svar #3

Som @afonsoduarte sa.

Jeg vil bare legge til at du også kan generere Typescript-typer fra PropTypes slik:

const propTypes = {
  input: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  }),
};

type MyComponentProps = PropTypes.InferProps<typeof propTypes>;

const MyComponent: FunctionComponent<MyComponentProps > = (props) => {
  // ...
}

MyComponent.propTypes = propTypes;

Relaterte artikler