score:4
your problem is a common problem people encounter when switch from js to ts with react and using hoc like connect
with their component.
basically, with your interface ifooprops
, you tell ts
that userid
is a required prop whenever the component is used and ts
doesn't know that actually, userid
will be taken care of / injected to the props through connect
.
there is couple of way to resolve the problem, the first is making userid
an optional attribute.
interface ifooprops{
userid?: number
}
this approach does have a downsize, as ts will ask yo to perform null/undefined check whenever you use userid
. however, it's the most simple one.
the other approach is to define another interface, in your example, can be conventionally named: ifooinjectedprops
. your component will be like:
interface ifooprops {
// ....whatever props that require by the component
}
// all injected props from the store
interface ifooinjectedprops extends ifooprops {
userid: number
}
class foo extends component<ifooprops> {
get injectedprops() {
// cast this.props as injectedprops to bypass typechecking
return this.props as ifooinjectedprops;
}
render() {
// get userid from the getter `injectedprops`
const { userid } = this.injectedprops;
return <p>foo...</p>
}
}
score:-1
because you said that "ifooprops" as type of props it is expecting you to send userid when you use it. set the type as any. you dont need to set the type of props when you using redux.
class foo extends component<any>{
render(){
return <p>foo...</p>
}
}
score:0
after a few years of working with typescript and redux i managed to find my ultimate solution for connect
. it's a little tricky
first, you need to use a module augmentation
feature from typescript. it allows you to extend existing typings. we would use it to extend a react-redux
typings.
you need to create a .ts
file somewhere in your project with the following code:
import { component, componentclass } from "react-redux";
declare module "react-redux" {
export interface inferablecomponentenhancerwithprops<tinjectedprops, tneedsprops> {
<p extends tinjectedprops>(component: component<p>): componentclass<
omit<p, keyof tinjectedprops> & tneedsprops
> & {
wrappedcomponent: component<p>;
};
allprops: tinjectedprops & tneedsprops;
}
}
here we add to the existing inferablecomponentenhancerwithprops
interface a property allprops: tinjectedprops & tneedsprops;
, the rest of the code is a rewrite of the existing interface declaration from the original typings.
after creating it typescript compiler should automatically pick up the new definition and now we are ready to go back to your files
foo.tsx
// you only define props that you would like to pass from the parent component, not the props that are injected from redux state
interface ifooprops {
testprop: any;
}
// iconnectprops are defined at the bottom
class foo extends component<iconnectprops>{
render() {
this.props.testprops;
this.props.userid;
return <p>foo...</p>
}
}
const mapstatetoprops = (state: istate, props: ifooprops) => {
return {
userid: state.user.id,
...props,
}
}
const mapdispatchtoprops = (dispatch: dispatch) => {
return {}
}
const connectcreator = connect(
mapstatetoprops,
mapdispatchtoprops
);
// here we use our new typings, thanks to them typescript automatically merge
// props that we declared in mapstatetoprops so the iconnectprops
// looks like {
// userid: string;
// testprop: any;
// }
type iconnectprops = typeof connectcreator.allprops;
export default connectcreator(foo);
index.tsx
// typescript only tells you to pass a testprop
<foo testprop={5} />
Source: stackoverflow.com
Related Query
- In typescript ,when Component property from connect , How can I use the Component?
- How can I use react useContext , to show data from context, in the same component
- How can I use useEffect in React to run some code only when the component first mounts, and some other code whenever an event occurs (repeatedly)?
- How can i only re-render the new child component when mapping an array from Redux state?
- How can I stop the Select component from closing when I clicked one of its item(Input element) - react antd
- How can I set the state of my parent component from the child component when using react-router?
- How do I use react hooks to tidy up a functional component when it unmounts (using values from state in the tidy up)
- How can I use React Router to change routes from within a component that is also Routed in the Main App.js component?
- How do I use react context API to pass data from parent component to child component when using react-router in the parent component in React.js?
- How to store the values from a component that is reused so that I can use the values later?
- Can I use useEffect hook and function component when I need to get the pathname props from Link component?
- How can I use a ref callback function on a component this is connect to the redux store?
- How to access the "key" property from a reactjs component
- How can I fix jsx-a11y/anchor-is-valid when using the Link component in React?
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- How to pass the match when using render in Route component from react router (v4)
- How can I override the style of the Material-UI switch component when checked?
- How to use React.FC<props> type when the children can either be a React node or a function
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- How can I cancel the next 'then' in a Promise when a React component is unmounted/reused?
- how can I make a scrollable component that scrolls to the latest children components automatically when I append a child component?
- How do I pass in the variant property of the material-ui TextField from a wrapping React component
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How can I access child components values from a parent component when they are added dynamically?
- How can I use className on SVG imported as a component in Typescript React.FC
- how can i use global style when develop component library using styled-components
- How can i remove employees from the array that have endDate property higher than current selected month?
- How can I fix "Cannot read property 'document' of undefined" when directly accessing the url? Next.js and apexcharts lib
- How can I change a child's state from the parent component
More Query from same tag
- this.props is not a function in the componentDidUpdate()
- Unable to find an accessible element with the role "generic"
- React - Show/hide when mouse hovers using hooks
- set method in react hooks does not set the value
- access the data of a hook- React
- ReactJS errors with rendering basic html component via variable
- How to set kubernetes probes for react app?
- React constructor called only once for same component rendered twice
- Test what happens when something clicked (jest)
- Passing an Image in Material-UI Data-Grid Table
- useEffect - Can't perform a React state update on an unmounted component
- Trying to display fields based on selected option
- typescript react redux actions that return promises
- syntax highlighting for react code in sublime
- React-PDF Slow Performance with large PDF
- React: If input value equals object key, then show key value
- ReactJS and images in public folder
- Correct way to use socket.on in react
- "object Object" showing as input value with Formik forms on ReactJS
- Redirection from one page to another without showing that file path in Routes.js file
- how to go (navigate) the next page in react js
- How to use callback with useState like setState in class components?
- react state is one state behind button clicks
- How to store values from input field that is set by dangerouslySetInnerHTML React?
- Landing page URL should be redirected to "/home"
- React mapping nested data
- Webpack is displaying empty pages, but files are being shown in terminal
- How to render header row without cell and expand subrow react-table
- State variable inside a function defined within useEffect hook is not updating when value changes
- How to pass React click events to electron