score:-4
tsx doesn't seem to play well with type arguments in props.
you should set a default type param value, such as any
, but that will just assume your types are always any
when using the component, which might not be exactly what you want:
export interface props<t = any> {
value: t;
valuecallback: (t: t) => void;
}
// ...
// `valuecallback` will pass an explicit `any`
<typedcomponent value={value} valuecallback={setstate} />
you could try copying it with the valid extended type, and then using that, e.g.:
import { props as tcprops } from './typedcomponent'
const stronglytypedcomponent: react.component<tcprops<string>> = typedcomponent
// ...
// correctly typed, but more verbal
<stronglytypedcomponent value={value} valuecallback={setstate} />
score:1
not the ideal solution, but i was able to achieve this by exporting the component's type, and then using that to cast the result of react.lazy
export type typedcomponenttype = typeof typedcomponent;
and then
import type { typecomponent } from './typedcomponent';
const typedcomponent = lazy(() => import("./typedcomponent")) as typedcomponenttype;
score:2
tl;dr:
you can override react.lazy
type definition to support generics.
react.d.ts:
declare namespace react {
function lazy<t extends componenttype<any>>(
factory: () => promise<{ default: t }>,
): t;
}
explanation: original react.lazy
declaration looks like this:
function lazy<t extends componenttype<any>>(
factory: () => promise<{ default: t }>
): lazyexoticcomponent<t>;
it returns lazyexoticcomponent
type, which is superset of exoticcomponent
. unfortunately, this interface is written in way which don't support generics. however, according to comment above the interface, it is meant only for internal distinction between "regular" and other components, like results of lazy
and memo
calls; in jsx syntax there's no difference between this exoticcomponent
and component
. that's why we can safely omit laxyexoticcomponent
type in our custom override and make use of generics.
Source: stackoverflow.com
Related Query
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- how to import HTML file into React component and use it as a component?
- How to use jest.spyOn with React function component using Typescript
- React Typescript how send props and use it in child component
- How can I import an existing React component defined in JSX in a Typescript module (.tsx)
- How to import a React proptypes typed component as type any into a React Typescript component
- How to correctly export SVGs in a React component library with TypeScript
- how to import multiple components as a single component and use them in lazy load
- How to use an enum in typescript as a default prop value for a react component
- How to use functions from another component in React Typescript
- How to properly use TypeScript types with a Styled Component canvas on React
- how to handle lazy import in functional component react js avoid import befor need to render
- In Codepen, how do you import a React component from one pen into another?
- How do you use React lazy to code split with Babel & Webpack?
- How to use Facebook Javascript SDK to login and force re-authentication with React Web and Typescript inside of a component
- How to Use Next.Js "Link" element as a custom React component with Typescript
- How can a function correctly accept a React component and its props as arguments in TypeScript and render this component?
- How to correctly type a generic React function component in TypeScript
- How do you export react library component with hooks to use in html file?
- How do you correctly add a CSS class to a react component (with broken example)?
- How to use array object when import web component to react app
- How to split all import statements of a lazy loaded child component from the main bundle file in react (using webpack 4)
- TypeScript - How to use Generic in a Re-Usable React Component
- How to use refs in React with Typescript
- How to import a CSS file in a React Component
- How to use children with React Stateless Functional Component in TypeScript?
- How to import image (.svg, .png ) in a React Component
- Can you use es6 import alias syntax for React Components?
- How to use an array as option for react select component
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
More Query from same tag
- Semantic-UI React Checkbox state not working
- Framer Motion and React router 5: How do I prevent re-render of parent components with nested routes?
- React useRef returning null after running a useEffect to fill the initial state
- Reasons for using svelte js
- Jest test fails : TypeError: window.matchMedia is not a function
- WebRTC Changing user audio input
- Pathname from the prop history.location of the Router doesn't update
- import does not work in subfolder
- How to print Array in react Component
- document.getElementById only applies to one product
- React Redux doesnt dispatch action
- React useEffect not triggered
- React + ES6: Dash.js, MediaPlayer is not a function
- React custom hook not picking up new value
- Conditional handler based on slug in React Router?
- Printing out values from a subarray to a table
- Persistent Warning: "Each child in an array or iterator should have a unique 'key' prop" even if key is already set
- ReactJS - Function to be implemented in a lot of components
- Unable to type in text box when passing onChange prop from parent to child in React
- Objects are not valid as a React child - found: object with keys
- Getting results from redux-saga all, even if there are failures
- Using getInitialProps with HOC which also contains getInitialProps
- Optimize these 4 methods in 1 method
- Prettier + VS Code. Printing semicolons on webpage after return statements (.js)
- Setup problem encountered by wrapping a React-Beautiful-DND + React-Window virtual list with AutoSizer
- Half-screen image with Gatsby StaticImage
- Smooth scrolling when clicking an anchor link on react/next.js
- Ant design Form "Warning: `callback` is deprecated. Please return a promise instead." Error in custom rules
- React not taking a default page at load
- Expandable table in React material ui