score:2
what you might think of as "broader" and "narrower" get reversed when dealing with callbacks. in order to assign a to b, where a and b are both callbacks, a has to accept all of the types that b accepts. if a only accepts a specific subset of what b does, then it's not assignable to b.
here, you have a type eventhandlechange
that can handle the change on any htmlelement
. the callback which you are trying to assign to it only accepts the change event for htmlinputelement
, so it is not assignable.
one possible way to fix this is by moving the generic t
higher up the chain so that we can say that buttonprops
can take a very specific callback.
type handlechange = (value: string, checked: boolean, name: string) => void
type eventhandlechange<t extends htmlelement> = (
event: react.changeevent<t>
) => void;
type change<t extends htmlelement> = handlechange | eventhandlechange<t>;
type buttonprops = {
onchange?: change<htmlinputelement>
}
score:0
in case you need a type that accepts any type of html element you can use:
type anyhtmlelement = htmlelementtagnamemap[keyof htmlelementtagnamemap]
if it comes from queryselector or ref you may need to add | null
to the definition
Source: stackoverflow.com
Related Query
- How to create Generic event handler with React TypeScript
- How to create a generic arrow function with react and typescript
- How to create a generic React component with a typed context provider?
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- Dynamic object key with Typescript in React event handler
- Remove Event Handler using Abort Signal with Typescript and React
- How to create a typescript decorator with react
- How to create a global Handler with React & AXIOS?
- How to setup a generic interface for the state when using React useReducer with typescript
- How to create React Context that passes a function with Typescript
- How to make pass a test case which use enzyme shallow with contains when a React component has an event handler
- How to implement a generic arrow function as interface property in Typescript with React JSX
- How to increment value in dynamic event handler with React hooks?
- how to create random number with click event in react
- How create React Typescript component with required and optional values but required value without default value?
- Create a key handler for input element with React and TypeScript
- How to create a HOC component in react validated with typescript
- How to use refs in React with Typescript
- How to specify (optional) default props with TypeScript for stateless, functional React components?
- How to create a React Modal (which is appended to <body>) with transitions?
- How to create forms with React and Rails?
- How do I create a TypeScript type definition for a stateless React component?
- React prop types with TypeScript - how to have a function type?
- How to create two columns with space beetwen in react native - flatList
- Using React forwardRef with Typescript generic JSX arguments
- How to implement skipWaiting with Create React App?
- How to set event handler in React sub-component
- How to unit test a react event handler that contains history.push using Jest and Enzyme?
- How to pass an event handler to a child component in React
- React event handlers with Typescript and JSX
More Query from same tag
- Yoeman installation - [npm global root value is not in your NODE_PATH]
- Reactjs Firebase Auth Phone sign up flow?
- Can someone explain the 'super()' keyword in ES6 Javascript (especially related to React)?
- Show warning message before unmouting React component
- Looping through an array to generate a component(undefined array)
- How to make logo (image) responsive in React Ant design layout?
- No 'Access-Control-Allow-Origin' in Spring Boot + Spring Security + CORS
- Redux: Asynchronous action creator not being called
- Trigger focus() on NavLink in react
- React how to inline style different objects in one element
- Getting "No applicable renderer found" when using React and JSONSchema Form
- Don't close the modal when click on content with React.s
- How can I build a java backend and reactjs frontend project that is split up by features or modules
- How to properly type component props in react-router?
- Toggle display specific element inside map function onClick
- when image tag role be set button jsx-a11y show warning
- How to use urls in React CSS inline styling without `$`?
- React useEffect updating with default initialized useState
- How to trigger an onChange event on an input when its value changed by code in React?
- Edit data when using a custom data fetching React Hook?
- Serve static folder with Spring Boot and React Router
- Javascript removing a class from a list of elements only deletes half of the elements
- Why does passing a prop infinite loop crash my app and doesn't even update the prop?
- How shoud I structure the routes in react to make it work?
- How to Implement Price Increase and Decrease Sorting in React Redux Application?
- How can I get Enzyme to recognise the react-html-attrs plugin?
- reactstrap - how can I change the color of the <CarouselControl> 's (the small arrows on left/right you click to slide the photos)?
- React.js: Getting "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."
- Is there example there extend react-leaflet Map component to use leaflet.contextmenu?
- Deleting item on to do list