Code first:

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"></i>
                    </NavItem>
                    <SearchWrapper>
                        <NavSearch
                            className={focused ? "focused" : ""}
                            onFocus={() => handleInputFocus(list)}
                            onBlur={handleInputBlur}
                        />
                        <i className={focused ? "focused iconfont zoom" : "iconfont zoom"}></i>
                        <SearchInfo>
                            <SearchTitle>
                                
                            </SearchTitle>
                            <SearchInfoSwitch>
                                <i ref={this.spinIcon} className="iconfont spin"></i>
                                
                            </SearchInfoSwitch>
                            <SearchInfoList>
                                {/*{pageList}*/}
                                <SearchInfoItem>lala</SearchInfoItem>
                            </SearchInfoList>
                        </SearchInfo>
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <BrowserRouter>
                        <Link to="/write">
                            <Button className={"writting"}>
                                <i className="iconfont"></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);

error message:

(29Pol. 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.

how to solve this?

ps:tslint.json configuration file is included with the default create-react-app scaffolding typescript version, and I can"t find the configuration file introduced from anywhere

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
  }
}