score:2
i don't think there is a general answer to this problem and i cannot give you a definite answer here. i have been working with flow now extensively for 1,5 years and also together with react for a year now. here are some tips for working with types.
1. use type inference
flow is really powerful when it comes to inferring types. together with the following tips you can avoid making a lot of annotations. flow will just figure out that things work. you can also make use of the typeof
annotation to get the type of a value.
2. model your domain with types not the interfaces of the components
this was mentioned in the comments already. use types to model your domain. e.g. if you work with a component that displays a user, model the user object, not the interface of the component. you can then import the user type in the components that use it.
type user = { id: string, name: string };
type profileproptype = { user: user };
class profile extends component<profileproptype> {
// ...
}
3. use state management
redux for example could help you with the types here. this will give you a structure for your domain types and also reduces how many props are passed around. another blessing is graphql and apollo client / relay.
4. generate types programmatically
we are generating types from our postgres schema via postloader in the backend and types for our graphql queries in the frontend. currently we are working on generating types for react-semantic-ui from their documentation. after that there are not many types left to write ourselves. there are probably some tools around for your use case.
one last thing:
types are verbose. sometimes it is good to be explicit. the idea is that types reduce the time you spend searching for bugs by forcing you to be explicit about things. often it is okay to redefine things. this will also lead to way better errors than using $propertytype
because flow will give you two types that are incompatible instead of cryptic messages.
Source: stackoverflow.com
Related Query
- Structuring react project with flow type for best type reusability
- Proper Flow type for React render method?
- How to do flow type annotations for React hooks (useState, etc.)?
- Flow type for specific React Native events?
- React w/ TypeScript: why is the type for the state lost when useState with a callback as the updater
- flow type annotation for children react elements
- Webpack 2 configuration for Tree shaking and lazy loading with System.import on React project
- Project Structure for a CRA React Project with React Query
- Best place in project to put a file with polyfill for cross-browser JavaScript support
- What is the best way for connecting Django models choice fields with React js select options
- How to define an interface for React function component with defaultProps without throwing missing type error?
- How to specify return type as a list of React components with Flow
- What type should I use for a React component with arbitrary properties?
- Which is the right type for an event passed to the onKeyPressed function in React with MaterialUI and Typescript?
- React - Best practice for application with different entry points/sections
- React type checking using flow failing for this.props.history.push
- React TypeScript: Correct ref type for HTML Select with an OnChange with useRef
- Flow type error: "number [1] is incompatible with `Number` [2] in property `index`" - using React context
- best practice for calling a callback with parameters in react js
- What is the best practice with React for importing a large static array to use in a select field?
- Flow type for React props.children (union Element | Array)
- The best proper type for store in Next.js project + TypeScript
- Error when Using Custom React Hook in a Multi-Module Project for Tests with Jest
- How should I configure Flow type checking for functions that are passed as props in a React / Redux app?
- Better type annotations for function props with flow
- Best practice for making small changes in UI with React and Redux
- Which is the best practise for using axios in React Project
- Error running react-codemod for javascript with flow project
- flow type for react prop as either of two arrays
- React with Typescript: property map is missing for type
More Query from same tag
- Using redux with a local database
- How do i Downgrade my React 18 to React 17
- React Js - Combine Redux and Services layers
- React/Redux - Dispatch not updating view
- How to implement barcode scanner in reactjs application?
- React useEffect does not fetch paramter into React useState
- Grid-like labels-stickers dynamically generating Node js
- How to use a custom React hook to make a POST or DELETE request with Axios
- Dynamically update navbar cart amount
- Programmatically Navigating React Router V6 From React.Componet
- What is the name of row click event in ag-grid-react reactjs?
- Test redux-actions
- Why is BrowserRouter rendering a blank screen?
- Is there a refactoring pattern to avoid infinite re-renders due to identic data perpetually jumping between parent to child?
- How to avoid unnecessary API calls with useEffect?
- Relative Interface (TYPESCRIPT)
- how to prioritize promise results?
- Styling react-treebeard on node-by-node basis
- Render of array elements in React
- drop shadow not showing when scrolled in react
- How to use useEffect deps when page reload?
- table-hover (bootstrap) not work with react
- file upload in react + typescript without using JQuery?
- How to show Inputs Values in Object in React
- Why does using `<button>` as a delegate for `<input type="file">` not work, but `<a>` works in Safari?
- Material UI Card Height
- GatsbyJS - build show error window is not defined (AOS)
- TypeError: Cannot read property 'then' of undefined - React Hooks
- API Data undefined in react
- How do I use overflow:hidden as well as position:sticky in React.js