TypeScript 2.9.1 中私有变量的意外标记

Question

我目前正在使用 VueJS 和 TypeScript 2.9.1。我正在创建一个库，稍后将其转换为打字稿。

使用 vue-cli 构建库时，打字稿 linter 会显示以下错误消息：

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:

如果我删除 'private' 关键字，错误就会消失。但我知道打字稿中允许使用 private 关键字。他们在文档中也是这样写的

有谁知道为什么会这样？将来使用私有变量会很酷。

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（减少）

{
  ...
  "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 到整个存储库： https://github.com/Patcher56/vue-flowy/tree/02c6861e58ffe9ed2f38282e457e7524b8f4cbe8

Answer 1

您可以坚持私有变量不应有前导下划线的约定，或者，如果您坚持使用它，请将其放入 tslint.json

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

旁注：

我没有找到 typescript 的明确 vue 样式指南，但可以在此处找到 angular 等价物：Angular styleguide

Answer 2

我清理了我的代码并删除了一些未使用的依赖项。我还清理了我的 tslint.json。现在问题解决了。

我认为问题是有太多的依赖相互阻塞。很抱歉大家花时间回答了这个问题。

TypeScript 2.9.1 中私有变量的意外标记

Unexpected token for private variables in TypeScript 2.9.1

javascript

typescript

vue.js

vue-cli