CODEWITHSUNDEEP
typescriptwebpackbindts-loader
funky-nd
funky-nd

Reputation: 715

Typescript gives error for its own compilation

My code:

addMouseOverListenerForNavItems() {
    this.navList.addEventListener('mouseover', this.mouseOverListener.bind(this));
}

mouseOverListener(e) {
    const closestNavItem: HTMLElement = e.target.closest(".js-mainbar__navitem");
    clearTimeout(this.closeTimer);
    this.openTimer = setTimeout(() => {
        this.openFlyout(closestNavItem);

    }, this.flyoutDelayMs);
}

Compiled code by typescript:

Menu.prototype.mouseOverListener = function (e) {
    var _this = this;
    var closestNavItem = e.target.closest(".js-mainbar__navitem");
    clearTimeout(this.closeTimer);
    this.openTimer = setTimeout(function () {
        _this.openFlyout(closestNavItem);
    }, this.flyoutDelayMs);
};

The error:

60:13 error Unexpected aliasing of 'this' to local variable @typescript-eslint/no-this-alias

59 and 60.line =

Menu.prototype.mouseOverListener = function (e) {
    var _this = this;

What should I do to fix this error? I think I have used arrow function properly.

enter image description here

.eslintrc.js

module.exports =  {
parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
extends:  [
  'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
],
parserOptions:  {
  ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
  sourceType:  'module',  // Allows for the use of imports
},
rules:  {
    "curly": 1,
    "@typescript-eslint/explicit-function-return-type": [0],
    "@typescript-eslint/no-explicit-any": [0],
    "ordered-imports": [0],
    "object-literal-sort-keys": [0],
    "max-len": [1, 120],
    "new-parens": 1,
    "no-bitwise": 1,
    "no-cond-assign": 1,
    "no-trailing-spaces": 0,
    "eol-last": 1,
    "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
    "semi": 1,
    "no-var": 0
},
};

Errors at console

enter image description here

Upvotes: 1

Views: 187

Answers (1)

funky-nd
funky-nd

Reputation: 715

I have solved the problem by adding

enforce: "pre"

to the webpack.

To be safe, you can use enforce: 'pre' section to check source files, not modified by other loaders (like babel-loader):

Source: https://github.com/webpack-contrib/eslint-loader

Upvotes: 1

Related Questions