score:1
i've ran into the same problem, here is my working example:
interface commonprops {
children: react.reactnode;
}
interface truncatedprops extends commonprops {
truncate?: 'on';
expanded?: boolean;
}
interface notruncatedprops extends commonprops {
truncate?: 'off';
}
interface textprops extends commonprops {
truncate?: 'on' | 'off';
expanded?: boolean;
}
function text(props: notruncatedprops): jsx.element;
function text(props: truncatedprops): jsx.element;
function text(props: textprops) {
const { children, truncate, expanded } = props;
const classname = truncate ? 'u-text-truncate' : '';
return (
<div classname={classname} aria-expanded={!!expanded}>
{children}
</div>
);
}
but the issue is that i can't make use spread operator for props like so:
...
const textprops: textprops= {
truncate: 'on',
expanded: true,
children: 'text'
};
<text {...textprops} /> <- typescript warning
...
you should explicitly point out the right type for textprops: truncatedprops or notruncatedpops, which isn't handy.
Source: stackoverflow.com
Related Query
- How to handle typescript function overloading with React Props
- How to specify (optional) default props with TypeScript for stateless, functional React components?
- React prop types with TypeScript - how to have a function type?
- How to use jest.spyOn with React function component using Typescript
- How to handle props injected by HOC in React with Typescript?
- How to test with jest and typescript with types a basic react function component
- How to declare different state and props for subclasses on react with typescript
- Why does destructuring props in react with Typescript function require passing an object?
- How to handle multiple inputs in an array with one function in react
- How to test a handle function call with a react functional component with hooks
- React - How to define props with typescript
- How to get handle on current object with a React function component
- Correct typings for React Typescript Button props with named function
- React with typescript passing function as props using hooks
- How to create React Context that passes a function with Typescript
- How to pass a function with parameters in react with typescript
- How to create a generic arrow function with react and typescript
- Function overloading with typescript on a react component?
- How to test a React Component with Props in TypeScript using Jest?
- How to implement a generic arrow function as interface property in Typescript with React JSX
- how to handle useEffect with render props in react
- How to handle click events on divs with React and Typescript
- React Typescript how to pass props with types
- How do I send a function through props in react typescript
- How can a function correctly accept a React component and its props as arguments in TypeScript and render this component?
- How to import standard DOM element props in React with Typescript
- How to use TypeScript generics with React render props
- how to declare a react ref in props function when using typescript
- Send onClick function as props to a component in React with Typescript
- How to conditionally call different optional function props in a React TypeScript component without getting compiler error?
More Query from same tag
- Importing an MDX file into a React component to use as text for a tooltip
- Make useEffect only run when component is in view (i.e. scrolled down to that component)
- I want to clear selected data in onClick react-select
- Jest & react-router-dom: React.createElement: type is invalid -- expected a string (for built-in components) ... but got: undefined
- How can I livereload gulp for webpackdevserver?
- Can not import images to react
- How to retrieve data from 2d array react.js
- React-Native changing <Image /> source with state
- Sticky siderbar in React across the components
- How to indicate in Procfile that app.py is in a different folder?
- "material-table" - How to add more rows per page and fix rendering - ReactJs
- React-router did not work on production
- How to get the links in Draft js in read only mode?
- Check if a child component rendered any own child components
- Redirecting User after Stripe Payment Node js
- How can I click space to pause the video without down the page in JavaScript
- Simulate Width to Test Responsive React Components
- Mocking a Class from NPM Module with Jest, giving me a Constructor issue
- React hooks, setting state on select
- How to assign unique index value to array objects?
- React.js how to I go about getting data from my form and posting it
- ReactJS form performance issue update array of object in state
- using reactjs how to make clickable button and open url
- Formik setting errors on submission
- React.js load component only once to work with state
- React class component convert to functional component (Antdesign)
- Getting TypeError: this.props.users.items is undefined on ReactJs
- React jest testing. Cannot read property 'maps' of undefined with google js api
- how to communicate qt with react in tsx?
- setState array cause infinite loop