javascript - 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
解决方案
你可以坚持约定私有变量不应该有一个前导下划线,或者,如果你坚持使用它,把它放在你的 tslint.json
"variable-name": [true, "allow-leading-underscore"]
边注:
我没有为 typescript 找到明确的 vue 样式指南,但可以在此处找到等效的角度:Angular styleguide
推荐阅读
- python - 如何优化我的 BFS 实施?
- azure-web-app-service - 将 AppServices 的访问权限锁定到仅 Azure Front Door
- swift - 主线程和 Collectionview.reloadData()
- javascript - 在二维数组上运行 .map() 后如何用数据填充列
- r - 计算列中字典单词的频率并生成新的“dictfreq”列
- python-3.x - CVXPY 无法安装:找不到文件“setup.py”
- reactjs - 使用 Chai 测试组件时显示错误 Cannot read property 'indexOf' of undefined ,如何解决?
- angular - 为什么 ngModelChange 不能正常工作?
- excel - Excel VBA - Sharepoint 上的另存为模板不会创建新文档
- javascript - 为什么我的 .indexOf 不读取字符串中字符的位置