react typescript版本 声明公共实例方法后,不允许声明公共实例字段?萌新求助。

先上代码:

react V16; typescript V3.2.2

import * as actionCreators from './store/actionCreators';
import * as React from 'react';
import {BrowserRouter, Link} from 'react-router-dom';
import {connect} from "react-redux";
import {
    Addition,
    Button,
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    SearchInfo,
    SearchInfoItem,
    SearchInfoList,
    SearchInfoSwitch,
    SearchTitle,
    SearchWrapper
} from './style';

// interface IHeaderState {
//     focused: boolean
// }

interface IHeaderProps {
    focused: boolean,
    handleInputFocus(list: object): void,
    handleInputBlur(): void,
    list: any
}

class Header extends React.Component<IHeaderProps, {}> {
    private spinIcon: React.RefObject<any>;
    constructor(props: any) {
        super(props);
        // this.state = {focused: false};
        this.spinIcon = React.createRef();
    }

    public render() {
        const {focused, handleInputFocus, handleInputBlur, list} = this.props;
        return (
            <HeaderWrapper>
                <BrowserRouter>
                    <Link to='/'>
                        <Logo/>
                    </Link>
                </BrowserRouter>
                <Nav>
                    <NavItem className={'left'}>
                        首页
                    </NavItem>
                    <NavItem className={'left'}>
                        下载app
                    </NavItem>
                    <BrowserRouter>
                        <Link to='/login'><NavItem className={'right'}>登录</NavItem></Link>
                    </BrowserRouter>
                    {/*{
                        login ?
                            <NavItem className={'right'} onClick={logout} style={{'cursor':'pointer'}}>退出</NavItem> :
                            <Link to='/login'><NavItem className={'right'}>登录</NavItem></Link>
                    }*/}
                    <NavItem className={'right'}>
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <NavSearch
                            className={focused ? 'focused' : ''}
                            onFocus={() => handleInputFocus(list)}
                            onBlur={handleInputBlur}
                        />
                        <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe644;</i>
                        <SearchInfo>
                            <SearchTitle>
                                热门搜索
                            </SearchTitle>
                            <SearchInfoSwitch>
                                <i ref={this.spinIcon} className="iconfont spin">&#xe60e;</i>
                                换一批
                            </SearchInfoSwitch>
                            <SearchInfoList>
                                {/*{pageList}*/}
                                <SearchInfoItem>lala</SearchInfoItem>
                            </SearchInfoList>
                        </SearchInfo>
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <BrowserRouter>
                        <Link to='/write'>
                            <Button className={'writting'}>
                                <i className="iconfont">&#xe6be;</i>
                                写文章</Button>
                        </Link>
                    </BrowserRouter>
                    <Button className={'reg'}>注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }
}

const mapStateToProps = (state: any) => {
    return{
        focused: state.get('focused'),
        list: state.get('list'),
        page: state.getIn('page'),
        totalPage: state.getIn('totalPage'),
    }
};

const mapDispatchToProps = (dispatch: any) => ({
    handleInputFocus(list:any){
        if (list.size === 0) {
            dispatch(actionCreators.getList());
        }
        dispatch(actionCreators.searchFocus());
    },
    handleInputBlur(){
        dispatch(actionCreators.searchBlur())
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

报错信息 :

(29,5): Declaration of public instance field not allowed after declaration of public instance method. Instead, this should come at the beginning of the class/interface.

这该如何解决啊?

ps:tslint.json配置文件是默认的create-react-app脚手架typescript版本自带的,也是苦唧唧的找不到从哪引入的配置文件
tslint.json文件:
{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": {
    "ordered-imports": false
  }
}
阅读 4.2k
2 个回答

......前面代码

interface IHeaderProps {
    list: any,
    focused: boolean,
    handleInputFocus(list: object): void,
    handleInputBlur(): void
}

......后面代码

新手上路,请多包涵

如果想屏蔽该错误,可以修改 tslint.json:

{
    "rules": {
        "member-ordering": false
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题