Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React with TypeScript: Type '{}' is not assignable to type

I have a component in React that shows a navigation based on a prop. I cannot figure out why I am getting this error when I'm trying to run the application:

(19,8): Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TableSystems> & Readonly<{ children?: ReactNode; }...'.
  Type '{}' is not assignable to type 'Readonly<{ todos: any; showNav: boolean; }>'.
    Property 'todos' is missing in type '{}'.

My component look like this:

import * as React from 'react'
import Navigation from '../components/Navigation'
import TableSystems from '../components/TableSystems'

class SystemTable extends React.PureComponent<{showNav: boolean }> {
  render(){
  return (

    <div >
    <div >
    <div className="navigationContainer">
    <Navigation {...this.props.showNav} className="sideMenu"/>
      <TableSystems/>
      </div>
    </div>
  </div>)
  }
}


export default SystemTable

I can't find what's the problem here.

The component looks like this:

import * as React from 'react';
import history from '../history';


class Navigation extends React.Component<any>  {

constructor(props){
    super(props);
    this.toVersions = this.toVersions.bind(this);
  }

  toVersions(){
    history.push('/versions');
  }

  render() {
    var style = this.props.visible ? "toggled" : "";
    console.log(style);
    return (
      <div className={style} id="wrapper">


        <div id="sidebar-wrapper">
          <ul className="sidebar-nav">
            <li className="sidebar-brand">
              <a href="#">
                Menu
              </a>
            </li>
            <li >
              <a className="nav-link" href="#">List1</a>
            </li>
            <li >
              <a className="nav-link" href="#">List2</a>
            </li>
            <li >
              <a className="nav-link" href="" onClick={this.toVersions}>List3</a>
            </li>
            <li >
              <a className="nav-link" href="#">List4</a>
            </li>
          </ul>
        </div>
      </div>
    )
  }
}

export default Navigation
like image 387
gfels Avatar asked Jul 03 '18 13:07

gfels


People also ask

Is not assignable to type in TypeScript?

The "Type 'string' is not assignable to type" TypeScript error occurs when we try to assign a value of type string to something that expects a different type, e.g. a more specific string literal type or an enum. To solve the error use a const or a type assertion. Here is the first example of how the error occurs.

Is not assignable to type never []' useState?

The error "Type is not assignable to type 'never'" occurs when we declare an empty state array with the useState hook but don't type the array. To solve the error, use a generic to type the state array, e.g. const [arr, setArr] = useState<string[]>([]) . Here is an example of how the error occurs.

Is not assignable to type null?

The "Type 'string | null' is not assignable to type string" error occurs when a possibly null value is assigned to something that expects a string . To solve the error, use a non-null assertion or a type guard to verify the value is a string before the assignment.

What is IntrinsicAttributes?

IntrinsicAttributes interface can be used to specify extra properties used by the JSX framework which are not generally used by the components' props or arguments - for instance key in React. Specializing further, the generic JSX.


3 Answers

So the solution was to add {...this.props} to component like so:

<TableSystems {...this.props}/>
like image 187
gfels Avatar answered Sep 25 '22 12:09

gfels


You need to either make the property todos optional by defining it as todos?: any or you will have to pass in a value to it: { todos: null, showNav: boolean }.

like image 32
Vitor M. Barbosa Avatar answered Sep 23 '22 12:09

Vitor M. Barbosa


While I can only guess the element throwing the error (no clue where line 19 is), the error is quite self explanatory:

Type '{}' is not assignable to type 'Readonly<{ todos: any; showNav: boolean; }>'. Property 'todos' is missing in type '{}'.

The component expects a todo property and a showNav property, you are providing none of these. Try specifying the props explicitly:

<YourElement todos={ this.props.whatever } showNav={true}> ... </YourElement>

Another solution is to use the spread operator to use an objects properties for the element's props:

const someVar = { todos: "your type for todos here", showNav: true };

<YourElement { ...someVar } \>

Ensure you also type your element's props:

interface Props {
    prop: string;
}

const SampleElement: React.SFC<Props> = (props) =>
    <div>{props.prop}</div>

class AnotherElement extends React.Component<Props> { ... }
like image 44
sn42 Avatar answered Sep 24 '22 12:09

sn42