TypeScript error inside JavaScript file in VSCode

Question

I am new to JavaScript. I am writing a JavaScript file in a React app, and I'm declaring a private function notifyObservers this way, inside a class:

class Subject {
  constructor(idOfDevice) {
    //...
  }

  var notifyObservers = function (data) {
    this.observers.forEach(obs => obs.notify(data));
  }

  getFrequency(idOfDevice) {
    //...
  }
}

As I've seen advised to do. I am getting this error here on the var notation:

Unexpected token. A constructor, method, accessor, or property was expected.ts(1068)

And I'm getting an error on the { of the getFrequency method:

';' expected.ts(1005)

I don't understand why, as there is no TypeScript anywhere in sight. And I'm sure it's just a dumb rookie mistake, but I can't seem to figure it out.

This is what I have in the package.json file:

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://localhost:3000",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "avsc": "^5.4.18",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "dotenv": "^8.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-particles-js": "^2.7.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@iconify/icons-ant-design": "^1.0.6",
    "@iconify/icons-bx": "^1.0.0",
    "@iconify/icons-fe": "^1.0.3",
    "@iconify/icons-ic": "^1.0.8",
    "@iconify/icons-jam": "^1.0.3",
    "@iconify/react": "^1.1.3"
  }
}

There still is a @typescript-eslint folder in my node_modules, and in my package-lock.json there is this:

"@typescript-eslint/eslint-plugin": {
      "version": "2.27.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.27.0.tgz",
      "integrity": "sha512-/my+vVHRN7zYgcp0n4z5A6HAK7bvKGBiswaM5zIlOQczsxj/aiD7RcgD+dvVFuwFaGh5+kM7XA6Q6PN0bvb1tw==",
      "requires": {
        "@typescript-eslint/experimental-utils": "2.27.0",
        "functional-red-black-tree": "^1.0.1",
        "regexpp": "^3.0.0",
        "tsutils": "^3.17.1"
      }
    },
    "@typescript-eslint/experimental-utils": {
      "version": "2.27.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.27.0.tgz",
      "integrity": "sha512-vOsYzjwJlY6E0NJRXPTeCGqjv5OHgRU1kzxHKWJVPjDYGbPgLudBXjIlc+OD1hDBZ4l1DLbOc5VjofKahsu9Jw==",
      "requires": {
        "@types/json-schema": "^7.0.3",
        "@typescript-eslint/typescript-estree": "2.27.0",
        "eslint-scope": "^5.0.0",
        "eslint-utils": "^2.0.0"
      },
      "dependencies": {
        "eslint-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz",
          "integrity": "sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==",
          "requires": {
            "eslint-visitor-keys": "^1.1.0"
          }
        }
      }
    },
    "@typescript-eslint/parser": {
      "version": "2.27.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.27.0.tgz",
      "integrity": "sha512-HFUXZY+EdwrJXZo31DW4IS1ujQW3krzlRjBrFRrJcMDh0zCu107/nRfhk/uBasO8m0NVDbBF5WZKcIUMRO7vPg==",
      "requires": {
        "@types/eslint-visitor-keys": "^1.0.0",
        "@typescript-eslint/experimental-utils": "2.27.0",
        "@typescript-eslint/typescript-estree": "2.27.0",
        "eslint-visitor-keys": "^1.1.0"
      }
    },
    "@typescript-eslint/typescript-estree": {
      "version": "2.27.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.27.0.tgz",
      "integrity": "sha512-t2miCCJIb/FU8yArjAvxllxbTiyNqaXJag7UOpB5DVoM3+xnjeOngtqlJkLRnMtzaRcJhe3CIR9RmL40omubhg==",
      "requires": {
        "debug": "^4.1.1",
        "eslint-visitor-keys": "^1.1.0",
        "glob": "^7.1.6",
        "is-glob": "^4.0.1",
        "lodash": "^4.17.15",
        "semver": "^6.3.0",
        "tsutils": "^3.17.1"
      }
    }

And even if I can't seem to be able to delete those: if I do, they reappear as soon as i do npm start to start my application.

I have uninstalled typescript via npm uninstall -g typescript and also via npm uninstall --save typescript

Also, adding

  "typescript.validate.enable": false,

to my settings.json file does not help.

Well it's not related to Typescript, you cannot add var before properties or methods in class. Define those without it — rzwnahmd, Apr 07 '20 at 13:44
@rzwnahmd so I can't declare a function as "private" the way I did? there is no way to have a private function in a js class, like in Java or C++? — Elisabetta, Apr 07 '20 at 13:53
Yes there's no way to make methods private inside a class in Javascript. — rzwnahmd, Apr 07 '20 at 14:03
No problem, you can use Typescript if you want Object Orientation — rzwnahmd, Apr 07 '20 at 14:08

score 1 · Accepted Answer · answered Apr 10 '20 at 08:50

VS Code uses TypeScript to power its JavaScrip IntelliSense. The error text here tells you everything you need, the ts bit is irrelevant.

The error message is:

A constructor, method, accessor, or property was expected

This is telling you that classes can only contain those elements. However your code is declaring a var inside the class, and vars are not in the list of expected elements. This means you code has a syntax error and is not valid JavaScript.

See answers like this for how to declare private properties in JS classes

TypeScript error inside JavaScript file in VSCode

1 Answers1