Kontrola typów

Przy torzeniu oprogramowania wysokiej jakości, bardzo przydatna jest możliwość zapewnienia kontroli typów zmiennych. Mamy tu trzy możliwości:

1. Tworzenie programów w Typescript.
2. Instalację dodatku @Flow do edytora Atom.
3. Skorzystanie z wbudowanej w React kontroli PropTypes (https://reactjs.org/docs/typechecking-with-proptypes.html\).

Każda z tych metod ma swoje wady i zalety. Połączenie Typescript z React nie jest zupełnie bezproblemowe. Flow z kolei działa tylko w środowisku Atom (lub z konsoli), a na dodatek potrafi sygnalizowa niepoprawialne błędy w bibliotekach. Ostatnia możliwość jest najmniej wymagająca, ale też łatwo w niej przeoczyć (lub ominąć) fragmenty kodu. Wykorzystanie propTypes ilustruje poniższy kod:

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

const HelloWorld = ({ name }) => <h1>Hello {name}!</h1>

HelloWorld.propTypes = {
  name: PropTypes.number,
}
export default HelloWorld;

Zobacz przykład: [036]

W tym przykładzie zadeklarowano, że własność name jest typu number. Gdy apliację uruchamiamy w trybie developerskim, dostajemy na konsoli komunikat:

Warning: Failed prop type: Invalid prop `name` of type `string` 
supplied to `HelloWorld`, expected `number`. in HelloWorld (created by App) in App