Properties on this.props does not exist

Question

I can console my property on this.props. But ts shows error ts(2339).

I have tried to define the type of this.props. But 'this.props' is ReadOnly already.

import React from 'react';
import {Avatar} from 'antd';
import router from 'umi/router';
import styles from './index.css';
import { connect } from 'dva';
import LeftBar from '../leftbar';

const mapStateToProps = (state: any) => {
  return {
    username: state.global.username,
    login: state.global.login
  }
}
class Header extends React.Component {

  componentWillMount(){
    if(!this.props.login){
      router.push('/');
    }
  }
  handleClick = () => {
    console.log('this state:'+this.state);
    console.log('this props:'+this.props);
    // router.push('/');
  }
  public render () {
    return (
      <div className={styles.navbar}>
        {/* <img src="logo.png"/> */}
        <div className={styles.title}>login</div>
        <div className={styles.userinfo} onClick={this.handleClick}>{this.props.username}<Avatar size={"large"} icon="user" /></div>
        <LeftBar></LeftBar>
      </div>
    );
  }
}

export default connect(mapStateToProps)(Header);

In my code, 'this.props.log' and 'this.props.username' show not defined.

I want to know how to fix this error message.And how to define the type of props in Reactjs.

Answer 1

TypeScript is complaining because it is unaware of what type props should be inside of you React component. In order to specify this you can specify what type props (and state, if needed) should be. This is done easily by changing how you create the React component class, for example:

class Header extends React.Component<P, S> {

Where P specifies the property type of props and S the property type of state. If you feel like TypeScript is being annoying and don't feel like using a specific type for your props you can go ahead and do this:

class Header extends React.Component<any> {

Or if you don't want a particular type for neither props nor state you could do:

class Header extends React.Component<any, any> {

Since any will allow props and state to by anything, even stuff which are not objects, you could do the following to ensure they are at least object:

class Header extends React.Component<{}, {}> {

({}, could also be Object here). But considering you are using TypeScript and not just JavaScript, it's probably worth specifying an type or interface for your props so you can actually utilize the typing benefits that TypeScript offers, like so:

type HeaderProps = {
  username: string
  login: any
  log: any
}
class Header extends React.Component<HeaderProps> {

Which solution you want to go for is ultimately up to you, using any will allow for more flexibility while using specific types will help your code be self-documenting and be type-safe.