Typescript: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }>...'.

Created on 25 Jan 2018 · 7Comments · Source: microsoft/TypeScript

Hey guys I am new to react, redux and typescript and I have been following the SPA template for React and Redux in VS2017.

I keep getting this error:

ERROR in [at-loader] ./ClientApp/components/Layout.tsx:9:15
TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }>...'.
Type '{}' is not assignable to type 'Readonly'.
Property 'isLoading' is missing in type '{}'.

import * as React from 'react';
import { Link } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav } from 'react-bootstrap';
import * as SportsState from '../store/Sport';
import { RouteComponentProps } from 'react-router';
import { ApplicationState } from '../store';
import { connect } from 'react-redux';

// At runtime, Redux will merge together...
type SportProps =
    SportsState.SportsState        // ... state we've requested from the Redux store
    & typeof SportsState.actionCreators      // ... plus action creators we've requested
    & RouteComponentProps<{}>;


export class NavScroller extends React.Component<SportProps> {
    componentWillMount() {
        // This method runs when the component is first added to the page
        //this.props.requestSports();
    }

    public render() {
        return <div className="nav-scroller bg-white box-shadow mb-4">
            <Nav className="nav nav-underline" >
                {this.props.sports && this.props.sports.map(sport =>
                    <Link className='nav-link' to={`/Sport/${sport.id}`}>
                        <img src={`../images/icons/${sport.name}.svg`}/>{sport.name}
                    </Link>
                )} 
            </Nav>
        </div>
    }
}
export default connect(
    (state: ApplicationState) => state.sports, // Selects which state properties are merged into the component's props
    SportsState.actionCreators                 // Selects which action creators are merged into the component's props
)(NavScroller) as any;

import * as React from 'react';
import { NavMenu } from './NavMenu';
import { NavScroller } from './NavScroller';

export default class Layout extends React.Component<{}> {
    public render() {
        return <div>
            <NavMenu />
            <NavScroller/> <-----ERROR IS HERE
            {this.props.children}
        </div>;
    };
}

Needs More Info

Source

ILL35T

All 7 comments

You'll have to bring the problem down to size so it fits in one file. I'm having trouble reproducing it. Also, make sure you're using typescript@next.

andy-ms on 25 Jan 2018

👎18

@andy-ms Changing to the latest version of typescript creates a whole bunch of errors to the SPA Template found in VS2017 for React Redux. Since I am working off the template I have logged an issue here: https://github.com/aspnet/JavaScriptServices/issues/1497

I will have to wait for feedback for the above before I can proceed to solving my issue.

It would be most helpful if someone created a new SPA template for React/Redux with the latest typescript and at least a form that does basic crud. A login would also be helpul. Following the existing template isnt enough to build business applications and requires a lot of google searches which mostly brings back results on react use in a non typescript environment and trying to get redux to work on top of that adds to the difficulty.

ILL35T on 26 Jan 2018

The work around I found was to make any injected property keys options, and keep the others as required. Typescript then complains about objects that can be undefined, but it is easy to add in a few conditionals to shut that up. I then end up with the injected property not being there during componentDidMount and instead need to pick it up during componentWillReceiveProps. So a bunch of extra code for no real reason, but with a little boilerplate I got it all to work happily.

Here's an example
`````typescript
import * as React from 'react';
import { inject, observer } from 'mobx-react';
import { Segment, Dimmer, Loader } from 'semantic-ui-react';
import JSONTree from 'react-json-tree';
import { BranchesModelType } from './BranchesModel';

type PushesPropsType = {
branches?: BranchesModelType;
branchName: string | null;
};
@inject('branches')
@observer
class Pushes extends React.Component

public componentWillReceiveProps(nextProps: PushesPropsType) {
const branchName = nextProps.branchName;
if (!branchName || !nextProps.branches) {
return;
}
console.log(branchName);
nextProps.branches.getBranchPushes({ branchName });
}

public render() {
if (!this.props.branches) {
return;
}
const branchDetail = this.props.branches.detail;
const pushes = branchDetail.pushes;

return (
  <Segment basic={true}>
    <Dimmer active={pushes === null}>
      <Loader content="Loading" />
    </Dimmer>
    <JSONTree data={pushes || {}} />
  </Segment>
);

}
}

export default Pushes;
`````

joeaguy on 5 Feb 2018

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.