Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes json json

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes


I solved a lot of "not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes" type of errors (Microsoft closed issue) just by declaring an object that is passed entirely to the component.

With the OP's example, instead of using term={this.props.term}, use {...searchBarProps} to get it working:

render() {  const searchBarProps = { // make sure all required component's inputs/Props keys&types match    term: this.props.term  }  return (    <div className="App">      ...      <div>          <form>          <SearchBar {...searchBarProps} />          </form>      </div>    </div>  );}


The problem here is not with your tslint settings. Look at the following code snippet:

interface SearchBarProps {  term: string;  optionalArgument?: string;}interface SearchBarState{  something: number;}class SearchBar extends React.Component<SearchBarProps, SearchBarState> {  constructor(props: SearchBarProps){    super(props);    this.state = {      something: 23    };  }  render() {    const {something} = this.state;    return (      <div>{something}</div>    )  }}

In class SearchBar extends React.Component<SearchBarProps, SearchBarState> {, SearchBarProps and SearchBarState denote type of expected props and type of state for component SearchBar respectively. You must give propTypes and stateType when you use typescript.
You can avoid giving types by using keyword any but I highly suggest you not to follow this "evil" path if you truly want to take advantage of using typescript. In your case it seems that you haven't specified type of state and used it, fixing that will solve this problem.

Edit 1
In interface SearchBarProps, optionalArgument becomes an optional argument as we add a question mark ? in front of it, so <SearchBar term='some term' /> won't show any error even if you don't pass optionalArgument explicitly.
Hope this solves your problem!


All you need is to declare the component type properly to include the props type:

interface IMyProps {    myValue: boolean,}const MyComponent: React.FC<IMyProps> = (props: IMyProps) => {    ...}export default MyComponent;

Then you can use it as:

import MyComponent from '../MyComponent';...return <MyComponent myValue={true} />

And voila, typescript is happy. The good thing about it is that typescript is now checking for passing only the parameters they actually exist in the props interface (can prevent typos and so on).

For the standard component it would be something similar to (what's already in Swapnill's example):

class MyComponent extends React.Component<IMyProps, IMyState>{    constructor(props: IMyProps){}}export default MyComponent;