Why doesn't ESlint understand the type of properties inherited from parent class?

Question

typescript

There is an example base class

class Base {
  label = 'Лейбл'
  getLabel() {
    return 'Это ' + this.label
  }
}

We make a new class out of it

class Comp extends Base {
  getCompLabel() {
    return 'Был лейбл ' + this.label
  }
}

On the line

return 'There was a label ' + this.label

ESlint swears

ESLint: Operands of '+' operation must either be both strings or both numbers. Consider using a template literal.(@typescript-eslint/restrict-plus-operands)

.

If you write

class Comp extends Base {
  getCompLabel() {
    return 'Был лейбл ' + (this.label as string)
  }
}

That's all OK.

I just gave an example here, but the general meaning is that wherever in the derived class we try to access the properties of the base class, then ESLint does not understand what type the variable has and consider it to be any ... And PHPStorm, in which I am developing , shows the correct type and the TypeScript compiler does not throw an error.

How can the situation be corrected? Please do not suggest to disable ESLint at all!

PS: I think I found the real reason! If you put the base class in a regular file with the .ts extension, then all the ESlint errors described above go away... The fact is that the project is made on vuejs and the code is located in the component files with the .vue extension in the

.eslintrc.js section

const { resolve } = require('path');
module.exports = {
  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
  // This option interrupts the configuration hierarchy at this file
  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
  root: true,

  // https://eslint.vuejs.org/user-guide/#how-to-use-custom-parser
  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
  parserOptions: {
    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#configuration
    // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#eslint
    // Needed to make the parser take into account 'vue' files
    extraFileExtensions: ['.vue'],
    parser: '@typescript-eslint/parser',
    project: resolve(__dirname, './tsconfig.json'),
    tsconfigRootDir: __dirname,
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },

  env: {
    browser: true
  },

  // Rules order is important, please avoid shuffling them
  extends: [
    // Base ESLint recommended rules
    'eslint:recommended',

    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
    // ESLint typescript rules
    'plugin:@typescript-eslint/recommended',
    // consider disabling this class of rules if linting takes too long
    'plugin:@typescript-eslint/recommended-requiring-type-checking',

    // Uncomment any of the lines below to choose desired strictness,
    // but leave only one uncommented!
    // See https://eslint.vuejs.org/rules/#available-rules
    'plugin:vue/essential', // Priority A: Essential (Error Prevention)
    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
    // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)

    // https://github.com/prettier/eslint-config-prettier#installation
    // usage with Prettier, provided by 'eslint-config-prettier'.
    'prettier'
  ],

  plugins: [
    // required to apply rules which need type information
    '@typescript-eslint',

    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
    // required to lint *.vue files
    'vue'

    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
    // Prettier has not been included as plugin to avoid performance impact
    // add it as an extension for your IDE
  ],

  globals: {
    ga: 'readonly', // Google Analytics
    cordova: 'readonly',
    __statics: 'readonly',
    process: 'readonly',
    Capacitor: 'readonly',
    chrome: 'readonly'
  },

  // add your custom rules here
  rules: {
    'prefer-promise-reject-errors': 'off',
    'semi': ["error", "never"],
    '@typescript-eslint/unbound-method': 'off',
    "@typescript-eslint/no-explicit-any": ["off"],
    "@typescript-eslint/no-unsafe-member-access": 'off',
    "@typescript-eslint/no-unsafe-return": 'off',

    // TypeScript
    quotes: ['warn', 'single', { avoidEscape: true }],
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',

    // allow debugger during development only
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

tsconfig.json

{
  "extends": "@quasar/app/tsconfig-preset",
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": ".",
    "strictPropertyInitialization": false,
    "allowSyntheticDefaultImports": true,
    "lib": ["esnext", "dom"]
  }
}