What is the meaning of this error "Declaration of instance field not allowed after declaration of instance method."

Question

In my Angular2 project I receiving this error:

"Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface. (member-ordering)"

I would like to understand how to resolve this and why I'm getting this.

The error is related to the private function in the next code:

export class HomeComponent implements OnInit {
public error: string;
public shirts = [];


constructor(public rest: RestService,
            public scService: ShoppingCartService,
            public snackBar: MdSnackBar) {
}


ngOnInit() {
    this.rest.getAll().subscribe((r: any) => {
        this.shirts = r;
    }, error => {
        this.error = 'Opps there\'s some error';
    });

}

addToCart(shirt: any) {
    this.scService.add(shirt);
    this.showSnackMessage('Added to Chart List');
}

showSnackMessage(message: string) {
    this.snackBar.open(message, null, {
        duration: 1000
    });
}
//Here the error is showed
private sizeScore = {
    'string': -1,
    s: 0,
    m: 1,
    l: 2,
    'x-large': 3,
};

sortData(sort: Sort) {
    const data = this.shirts.slice();
    if (!sort.active || sort.direction === '') {
        this.shirts = data;
        return;
    }

    this.shirts = data.sort((a, b) => {
        let isAsc = sort.direction === 'asc';
        switch (sort.active) {
            case 'colour':
                return compare(a.colour, b.colour, isAsc);
            case 'size':
                return compare(this.sizeScore[a.size], this.sizeScore[b.size], isAsc);
            default:
                return 0;
        }
    });
}
}

Answer 1

I would guess that your project has some type of linting set up that checks for style issues at build time.

To fix it you just need to do as it says. Move the code up to before any method calls.

export class HomeComponent implements OnInit {
public error: string;
public shirts = [];
private sizeScore = {
    'string': -1,
    s: 0,
    m: 1,
    l: 2,
    'x-large': 3,
};
// ...

Answer 2

It's not actually a compilation/runtime error, but a code linting issue.

It's a good practice to place all properties of your class above the methods, so if you just move private sizeScore to the top, it will stop saying.

More information about this rule here.

Answer 3

Per the TSLint docs I think you just need to move your declaration of the field above the declarations of those methods.