首页 > 解决方案 > TypeScript 2.9.1 中私有变量的意外标记

问题描述

我目前正在使用 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 关键字。他们也在文档中这样写。

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

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
  }
}

构建/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
  }
}

链接到整个存储库: https ://github.com/Patcher56/vue-flowy/tree/02c6861e58ffe9ed2f38282e457e7524b8f4cbe8

标签: javascripttypescriptvue.jsvue-cli

解决方案


你可以坚持约定私有变量不应该有一个前导下划线,或者,如果你坚持使用它,把它放在你的 tslint.json

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

边注:

我没有为 typescript 找到明确的 vue 样式指南,但可以在此处找到等效的角度:Angular styleguide


推荐阅读