Typescript support enhance #4738

Mister-Hope · 2019-10-22T02:13:09Z

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

The text was updated successfully, but these errors were encountered:

zerefwayne · 2019-10-22T10:26:05Z

Hey @sodatea, can I work on this issue?

haoqunjiang · 2019-10-22T10:46:17Z

Yeah go ahead, please

qidaneix · 2019-10-25T10:35:08Z

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 · 2019-11-05T11:25:39Z

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?

haoqunjiang · 2019-11-05T11:30:31Z

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 · 2019-11-05T11:31:32Z

thanks @sodatea, I see there is already a PR vuejs/eslint-config-typescript#3 for updating things.

zakjan · 2019-11-15T08:42:04Z

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

zakjan · 2019-11-19T20:16:46Z

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

doits · 2019-11-19T21:17:49Z

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 · 2019-11-20T14:09:58Z

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

GerryWilko · 2019-12-12T14:29:04Z

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 · 2019-12-12T15:06:30Z

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

haoqunjiang · 2019-12-12T15:35:26Z

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

Workarounds:

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);
Or configure babel to add the corresponding plugins for this syntax.

Or, you can wait until babel/babel#10811 is landed in babel

GerryWilko · 2019-12-13T09:02:21Z

@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!

haoqunjiang added the contribution welcome label Oct 22, 2019

doits mentioned this issue Nov 5, 2019

support ts3.7 vuejs/eslint-config-typescript#3

Merged

doits mentioned this issue Nov 13, 2019

Update Typescript used to 3.7.2 #4811

Closed

Mister-Hope closed this as completed Nov 20, 2019

haoqunjiang mentioned this issue Jul 20, 2020

Optional chaining not working (no, not in the template) vuejs/vue-loader#1697

Closed

cagataycivici mentioned this issue Nov 25, 2020

DataTable - VUE3 - TS primefaces/primevue#635

Closed

koooge mentioned this issue Nov 24, 2021

Running mocha tests fails with 'Module parse failed' at typescript optional chaining operator #6833

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Typescript support enhance #4738

Typescript support enhance #4738

Mister-Hope commented Oct 22, 2019 •

edited

Loading

zerefwayne commented Oct 22, 2019

haoqunjiang commented Oct 22, 2019

qidaneix commented Oct 25, 2019 •

edited

Loading

doits commented Nov 5, 2019

haoqunjiang commented Nov 5, 2019 •

edited

Loading

doits commented Nov 5, 2019

zakjan commented Nov 15, 2019

zakjan commented Nov 19, 2019

doits commented Nov 19, 2019

Mister-Hope commented Nov 20, 2019

GerryWilko commented Dec 12, 2019

Mister-Hope commented Dec 12, 2019 •

edited

Loading

haoqunjiang commented Dec 12, 2019 •

edited

Loading

GerryWilko commented Dec 13, 2019

Typescript support enhance #4738

Typescript support enhance #4738

Comments

Mister-Hope commented Oct 22, 2019 • edited Loading

What problem does this feature solve?

zerefwayne commented Oct 22, 2019

haoqunjiang commented Oct 22, 2019

qidaneix commented Oct 25, 2019 • edited Loading

doits commented Nov 5, 2019

haoqunjiang commented Nov 5, 2019 • edited Loading

doits commented Nov 5, 2019

zakjan commented Nov 15, 2019

zakjan commented Nov 19, 2019

doits commented Nov 19, 2019

Mister-Hope commented Nov 20, 2019

GerryWilko commented Dec 12, 2019

Mister-Hope commented Dec 12, 2019 • edited Loading

haoqunjiang commented Dec 12, 2019 • edited Loading

GerryWilko commented Dec 13, 2019

Mister-Hope commented Oct 22, 2019 •

edited

Loading

qidaneix commented Oct 25, 2019 •

edited

Loading

haoqunjiang commented Nov 5, 2019 •

edited

Loading

Mister-Hope commented Dec 12, 2019 •

edited

Loading

haoqunjiang commented Dec 12, 2019 •

edited

Loading