Vue-cli: Typescript support enhance

[Mister-Hope]

What problem does this feature solve?

I suggest the official make these changes to enhance typescript support.

Now developeres still have a bad experience using typescript

• let @vue/cli-plugin-typescript Support Typescript 3.6
  > Now Typescript3.6 stiill marked as unsupport version

• update @vue/eslint-config-typescript dependecies as @typescript-eslint V2 now fullly support vue.

  See #1083
  @vue/eslint-config-typescript still use V1 version and it contain bugs and conflicts with prettier and other eslint plugins

[zerefwayne]

Hey @sodatea, can I work on this issue?

[sodatea]

Yeah go ahead, please

[qidaneix]

Hey @zerefwayne @sodatea, could you please update eslint to eslint^6.x? I want to use extends property in overrides, but it seems donot support in eslint^5.x which is used in vue-cli^4.

[doits]

I tried to find the source for @vue/eslint-config-typescript to see if I could update the versions, but it is not in https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue anymore - where can I find it? Or how can it be updated?

[sodatea]

https://github.com/vuejs/eslint-config-typescript

Note: it's not as simple as just upgrading the dependency versions - there are breaking changes in config options too, per https://github.com/typescript-eslint/typescript-eslint/releases/tag/v2.0.0

[doits]

thanks @sodatea, I see there is already a PR https://github.com/vuejs/eslint-config-typescript/pull/3 for updating things.

[zakjan]

New version of @vue/eslint-config-typescript with TS 3.7 support just got released

[zakjan]

@Mister-Hope I can't find what's missing to implement in @vue/cli-plugin-typescript?

[doits]

It should be working now after an update to "@vue/eslint-config-typescript": "^5.0.0". I can lint my typescript 3.7.2-codebase without any problems now.

[Mister-Hope]

Since no one is getting problems any more, I am closing this issue.

[GerryWilko]

Could someone explain how to enable support for TS 3.7+? I have upgraded all my dependencies, cli plugins and eslint to latest and my code is linting fine and vscode is not showing any ts errors.

However when actually being compiled Babel is complaining that it doesnt understand ?? and asking to install an experimental plugin. The CLI is showing ts 3.7.3 when compiling but it seems that typescript is not replacing its new coalese syntax at compile time any ideas?

Thanks guys!

Here are all my dev dependencies incase it helps:

"devDependencies": {
"@types/chai": "^4.1.0",
"@types/mocha": "^5.2.7",
"@types/vue-markdown": "^2.2.1",
"@typescript-eslint/eslint-plugin": "^2.7.0",
"@typescript-eslint/parser": "^2.7.0",
"@vue/cli-plugin-babel": "^4.1.1",
"@vue/cli-plugin-eslint": "^4.1.1",
"@vue/cli-plugin-typescript": "^4.1.1",
"@vue/cli-plugin-unit-mocha": "^4.1.1",
"@vue/cli-service": "^4.1.1",
"@vue/eslint-config-airbnb": "^5.0.0",
"@vue/eslint-config-typescript": "^5.0.1",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.3",
"chai": "^4.1.2",
"copy-webpack-plugin": "^5.0.4",
"cross-env": "^6.0.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.0.1",
"mocha-junit-reporter": "^1.23.1",
"mocha-teamcity-reporter": "^3.0.0",
"npm-run-all": "^4.1.5",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"typescript": "~3.7.3",
"vue-template-compiler": "^2.6.10"
}

[Mister-Hope]

@GerryWilko I wound lilke to help you if you can create a minial example on github for me to clone.

Besides, here are my package.json

{
  "name": "innenu-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --modern",
    "rebuild": "vue-cli-service build --modern --no-clean",
    "analyze": "vue-cli-service build --mode analyze --modern",
    "inspect": "vue-cli-service inspect --modern > modern.js",
    "normal-analyze": "vue-cli-service build --mode analyze",
    "normal-build": "vue-cli-service build",
    "normal-inspect": "vue-cli-service inspect > normal.js",
    "normal-rebuild": "vue-cli-service build --modern --no-clean",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "lint-fix": "vue-cli-service lint"
  },
  "author": "Mr.Hope",
  "dependencies": {
    "ant-design-vue": "^1.4.10",
    "axios": "^0.19.0",
    "core-js": "^3.5.0",
    "github-markdown-css": "^3.0.1",
    "highlight.js": "^9.17.0",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "marked": "^0.7.0",
    "register-service-worker": "^1.6.2",
    "viewerjs": "^1.5.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.1.0",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.3",
    "vue-wechat-title": "^2.0.5",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@types/chai": "^4.2.7",
    "@types/highlight.js": "^9.12.3",
    "@types/jquery": "^3.3.31",
    "@types/lodash": "^4.14.149",
    "@types/marked": "0.7.2",
    "@types/mocha": "^5.2.7",
    "@typescript-eslint/eslint-plugin": "^2.11.0",
    "@typescript-eslint/parser": "^2.11.0",
    "@vue/cli-plugin-babel": "^4.1.1",
    "@vue/cli-plugin-e2e-cypress": "^4.1.1",
    "@vue/cli-plugin-eslint": "^4.1.1",
    "@vue/cli-plugin-pwa": "^4.1.1",
    "@vue/cli-plugin-router": "^4.1.1",
    "@vue/cli-plugin-typescript": "^4.1.1",
    "@vue/cli-plugin-unit-mocha": "^4.1.1",
    "@vue/cli-plugin-vuex": "^4.1.1",
    "@vue/cli-service": "^4.1.1",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.1",
    "@vue/test-utils": "1.0.0-beta.30",
    "babel-plugin-import": "^1.13.0",
    "chai": "^4.2.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^6.0.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "prettier": "^1.19.1",
    "sass": "^1.23.7",
    "sass-loader": "^8.0.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "svgo": "^1.3.2",
    "typescript": "^3.7.3",
    "vue-svg-loader": "^0.15.0",
    "vue-template-compiler": "^2.6.10",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

[sodatea]

@GerryWilko It's because TypeScript won't transform this syntax for the esnext target.

Workarounds:

1. Change the target field in tsconfig.json to es2019 (don't use es2020 because although it still does the transformation at the moment, it might soon stop transforming as the proposal will soon land in the official es2020 standard);
2. Or configure babel to add the corresponding plugins for this syntax.

Or, you can wait until https://github.com/babel/babel/pull/10811 is landed in babel

[GerryWilko]

@Mister-Hope @sodatea Thank you both. @sodatea I noticed this too yesterday. I have updated my ES to 2019 for now. That solves the problem.

Presumably we are going to have to wait for babel/babel#10811 before Vue CLI can fully go to TS 3.7!