You should try tsx (typescript jsx). It is 100% first class code: autocomplete of names and attributes, type safety of attributes, unlimited mixing of tsx and JavaScript, rename refactoring, navigate to definitions, etc.

It is similar to a function based approach, but has many advantages that reduce code and increase productivity.

Here is a page of examples from me React typescript setup repo:

https://github.com/toldsoftware/boilerplate-react-typescript...