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

Question

i am currently making a simple react application. this is my index.tsx

import * as React from \'react\';
import * as ReactDOM from \'react-dom\         


        

Answer 1

I also faced the same problem. Add below code to work with .tsx components.

export interface Props {
  term: string;
}

or

export type Props = {
  term ?: string;
}

I dont know the exact reason, but i think typescript flag the type error during compilation phase. Let me know if it works for you.

Answer 2

I'm not really proud of that but, considering other solutions in this thread, it seems fair enough.

This example shows a custom version of @react-native-community/slider with some default properties but able to receive (and overwrite) from outside:

function CustomSlider(props: SliderProps) {
  return (
    <Slider
      style={{ width: '100%', height: 40, marginTop: 12 }}
      minimumValue={0}
      minimumTrackTintColor="#000000"
      maximumTrackTintColor="#000000"
      {...(props as any)}
    />
  );
}

Answer 3

The issue is that you are not exporting the interface, you should always export the interface props. So:

export interface Props {
  term: string;
}

Is the solution.

Answer 4

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!

Answer 5

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;

Answer 6

Just had this same problem.

You have member called term defined on the Prop inteface for your App class but you're not providing a value when you create your App element.

Try the following:

ReactDOM.render(<App term="Foo" />, document.getElementById('root') as HTMLElement);