Reaguj PropTypes vs. Flow

PropTypes i Flow obejmują podobne rzeczy, ale używają różnych podejść. PropTypes może generować ostrzeżenia w czasie wykonywania, co może być pomocne w szybkim znajdowaniu źle sformułowanych odpowiedzi pochodzących z serwera itp. Jednak Flow wydaje się być przyszłością, a koncepcje takie jak generics są bardzo elastycznym rozwiązaniem. Również autouzupełnianie oferowane przez Nuclide jest dużym plusem dla Flow.

Moje pytanie brzmi teraz, co jest najlepszą drogą do rozpoczęcia nowego projektu. A może dobrym rozwiązaniem byłoby użycie zarówno Flow, jak i PropTypes? Problem z używaniem obu polega na tym, że piszesz dużo zduplikowanych kodów. Oto przykład aplikacji do odtwarzania muzyki, którą napisałem:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Obie definicje zawierają zasadniczo te same informacje, a po zmianie typu danych należy zaktualizować obie definicje.

Znalazłem tę wtyczkę Babel do konwersji deklaracji typu na PropTypes, co może być rozwiązaniem.

Rok po zadaniu tego pytania chciałem podzielić się z innymi moimi doświadczeniami z tym problemem.

Ponieważ Flow bardzo się rozwinął, zacząłem pisać za jego pomocą moją bazę kodu i nie dodałem żadnych nowych definicji PropType. Na razie myślę, że to dobry sposób, ponieważ jak wspomniano powyżej, pozwala nie tylko wpisywać rekwizyty, ale także inne części kodu. Jest to bardzo przydatne, na przykład, gdy masz kopię swoich właściwości w stanie, które użytkownik może modyfikować. Ponadto autouzupełnianie w IDE to niesamowity zysk.

Automatyczne konwertery w jednym lub drugim kierunku tak naprawdę nie wystartowały. Tak więc w przypadku nowych projektów naprawdę poleciłbym teraz używanie Flow zamiast PropTypes (na wypadek, gdybyś nie chciał pisać dwa razy).

Poza tym, że oba należą do bardzo szerokiego pola sprawdzania typów, nie ma między nimi dużego podobieństwa.

Flow to narzędzie do analizy statycznej, które wykorzystuje nadzbiór języka, umożliwiając dodawanie adnotacji typu do całego kodu i wychwytywanie całej klasy błędów w czasie kompilacji.

PropTypes to podstawowe narzędzie do sprawdzania typów, które zostało załatane w React. Nie może sprawdzić niczego poza typami właściwości przekazywanych do danego komponentu.

Jeśli chcesz bardziej elastycznego sprawdzania czcionek dla całego projektu, Flow / TypeScript są odpowiednim wyborem. Dopóki przekazujesz tylko typy z adnotacjami do komponentów, nie będziesz potrzebować PropTypes.

Jeśli chcesz tylko sprawdzić typy rekwizytów, nie komplikuj zbytnio reszty kodu i wybierz prostszą opcję.

Uważam, że brakującym punktem jest to, że Flow jest statycznym narzędziem do sprawdzania, podczas gdy PropTypes jest narzędziem do sprawdzania środowiska uruchomieniowego , co oznacza

• Flow może przechwytywać błędy podczas kodowania: teoretycznie może przeoczyć niektóre błędy, o których nie wiesz (na przykład jeśli nie zaimplementowałeś wystarczająco przepływu w swoim projekcie lub w przypadku głęboko zagnieżdżonych obiektów)
• PropTypes będzie je przechwytywać podczas testowania, więc nie da się tego przegapić

Spróbuj zadeklarować typ rekwizytów, używając tylko Flow. Podaj nieprawidłowy typ, taki jak liczba zamiast ciągu. Zobaczysz, że zostanie to oznaczone w kodzie używającym komponentu w edytorze Flow-aware. Jednak nie spowoduje to niepowodzenia testów, a Twoja aplikacja będzie nadal działać.

Teraz dodaj użycie React PropTypes z nieprawidłowym typem. SPOWODUJE to niepowodzenie testów i oznaczenie ich w konsoli przeglądarki po uruchomieniu aplikacji.

Na tej podstawie wydaje się, że nawet jeśli używany jest Flow, należy również określić PropTypes.