PropTypes w aplikacji reagującej na język TypeScript

Czy używanie React.PropTypesma sens w aplikacji TypeScript React, czy jest to tylko przypadek „paska i szelek”?

Ponieważ klasa komponentu jest zadeklarowana za pomocą Propsparametru typu:

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

czy jest realna korzyść z dodania

static propTypes {
    myProp: React.PropTypes.string
}

do definicji klasy?

Utrzymywanie obu React.PropTypeswłaściwości komponentów jako typów TypeScript i w tym samym czasie nie ma zwykle dużej wartości .

Oto kilka przypadków, w których warto to zrobić:

• Publikowanie pakietu, takiego jak biblioteka komponentów, która będzie używana przez zwykły JavaScript.
• Akceptowanie i przekazywanie zewnętrznych danych wejściowych, takich jak wyniki wywołania interfejsu API.
• Korzystanie z danych z biblioteki, która może nie zawierać adekwatnych lub dokładnych typów pisma, jeśli takie istnieją.

Zwykle jest to kwestia tego, jak bardzo możesz ufać sprawdzaniu poprawności w czasie kompilacji.

Nowsze wersje języka TypeScript mogą teraz wywnioskować typy na podstawie Twojej React.PropTypes( PropTypes.InferProps), ale typy wynikowe mogą być trudne w użyciu lub odwoływaniu się do innego miejsca w kodzie.

Typescript i PropTypes służą różnym celom. Typescript sprawdza poprawność typów w czasie kompilacji , podczas gdy PropTypes są sprawdzane w czasie wykonywania .

Typescript jest przydatny podczas pisania kodu: ostrzeże Cię, jeśli przekażesz argument niewłaściwego typu do komponentów Reacta, da ci autouzupełnianie dla wywołań funkcji itp.

PropTypes są przydatne podczas testowania interakcji komponentów z danymi zewnętrznymi, na przykład podczas ładowania JSON z interfejsu API. PropTypes pomoże ci zdebugować (w trybie programistycznym React), dlaczego twój komponent nie działa, drukując pomocne komunikaty, takie jak:

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

Chociaż może się wydawać, że Typescript i PropTypes robią to samo, w rzeczywistości wcale się nie pokrywają. Ale możliwe jest automatyczne generowanie PropTypes z Typescript, dzięki czemu nie musisz dwukrotnie określać typów, zobacz na przykład:

• 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

Wydaje mi się, że w niektórych niechlujnych sytuacjach, w których nie można wywnioskować typu właściwości w czasie kompilacji, przydatne byłoby zobaczenie wszelkich ostrzeżeń wygenerowanych podczas używania propTypesw czasie wykonywania.

Jedną z takich sytuacji może być przetwarzanie danych z zewnętrznego źródła, dla którego definicje typów nie są dostępne, na przykład zewnętrzny interfejs API pozostający poza Twoją kontrolą. Myślę, że w przypadku wewnętrznych API warto napisać (lub lepiej wygenerować) definicje typów, jeśli nie są one jeszcze dostępne.

Poza tym nie widzę żadnych korzyści (dlatego nigdy nie korzystałem z niego osobiście).