Question

I am currently working with VueJS and TypeScript 2.9.1. I am creating a library and converted it to typescript later on.

When building the lib with vue-cli the typescript linter says the following error message:

WARNING  Compiled with 1 warnings                                                                                                                                                                            5:57:15 PM
error: Parsing error: Unexpected token

  36 |
  37 | export default class Graph {
> 38 |   private _nodes: GraphNodeList = {}
     |           ^
  39 |   private _edges: EdgeList = {}
  40 |
  41 |   layout: Layout | undefined at src/Graph.ts:38:11:

If I delete the 'private' keyword the errors are gone. But I know that the private keyword is allowed in typescript. They also write it like this in the documentation.

Does anyone know why this happens? Would be cool to use private variables in the future.

tslint.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "node",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "es2017",
      "es2015",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Package.json (reduced)

{
  ...
  "scripts": {
    "build": "vue-cli-service build --target lib src/main.ts",
    "dev": "vue-cli-service build --mode development --name vue-flowy --watch --target lib src/main.ts",
  },
  "dependencies": {
    "d3": "^5.4.0",
    "dagre-d3-renderer": "^0.5.8",
    "graphlibrary": "^2.2.0",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^6.0.0"
  },
  "devDependencies": {
    "@types/debug": "^0.0.30",
    "@types/jest": "^22.0.1",
    "@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.11",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.11",
    "@vue/cli-plugin-typescript": "^3.0.0-beta.15",
    "@vue/cli-plugin-unit-jest": "^3.0.0-beta.11",
    "@vue/cli-service": "^3.0.0-beta.11",
    "@vue/eslint-config-prettier": "^3.0.0-beta.11",
    "@vue/eslint-config-typescript": "^3.0.0-beta.11",
    "@vue/test-utils": "^1.0.0-beta.16",
    "debug": "^3.1.0",
    "jest": "^22.4.3",
    "node-sass": "^4.9.0",
    "prettier-eslint-cli": "^4.7.1",
    "sass-loader": "^7.0.1",
    "ts-jest": "^22.4.6",
    "typescript": "^2.8.3",
    "vue": "^2.5.16",
    "vue-eslint-parser": "^2.0.3"
  },
  "module": "dist/vue-flowy.es.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Patcher56/vue-flowy.git"
  },
  "types": "types/index.d.ts",
  "files": [
    "dist",
    "src"
  ],
  "main": "dist/vue-flowy.umd.js",
  ...
  "peerDependencies": {
    "vue": "^2.5.16"
  },
  ...
}

vue.config.js

module.exports = {
  css: {
    extract: false
  }
}

build/index.ts

'use strict'
// Template version: 1.2.7
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    host: 'localhost',
    port: 8080,
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,
    useEslint: true,
    showEslintErrorsInOverlay: true,
    devtool: '#source-map',
    cacheBusting: true,
    cssSourceMap: false
  },

  bundle: {
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: false,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  },

  docs: {
    index: path.resolve(__dirname, '../docs/index.html'),
    assetsRoot: path.resolve(__dirname, '../docs'),
    assetsPublicPath: '',
    devtool: '#source-map',
    productionSourceMap: false
  }
}

Link to whole Repository: https://github.com/Patcher56/vue-flowy/tree/02c6861e58ffe9ed2f38282e457e7524b8f4cbe8

Answer 1

You can either stick to conventions that says that private variables shouldn't have a leading underscore, or, if you insist on using it, put this in your tslint.json

"variable-name": [true, "allow-leading-underscore"]

Sidenote:

I don't find a explicit vue styleguide for typescript, but the angular equivalent is found here: Angular styleguide

Answer 2

我清理了很多代码并删除了一些未使用的依赖项。我也清理了我的tslint.json。问题现在已经消失。

我认为问题在于有太多的依赖关系互相阻塞。抱歉，每个人投入的时间都回答了这个问题。

Unexpected token for private variables in TypeScript 2.9.1

2 个答案: