[@vue/cli-plugin-typescript] Is there any way to make type checks work in .ts files in editor?

What problem does this feature solve?

I find in vscode (with vetur), props check works in .vue file when editing.

However it doesn’t work in .ts file.

Is there any way to make type checks work in .ts files?

What does the proposed API look like?

Nil

Vue Info

➜  vue3-ts-2 git:(master) ✗ vue info

Environment Info:

  System:
    OS: macOS 11.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Edge: 87.0.664.66
    Firefox: 84.0
    Safari: 14.0.2
  npmPackages:
    @vue/cli-overlay:  5.0.0-alpha.0 
    @vue/cli-plugin-e2e-cypress: ~5.0.0-alpha.0 => 5.0.0-alpha.0 
    @vue/cli-plugin-eslint: ~5.0.0-alpha.0 => 5.0.0-alpha.0 
    @vue/cli-plugin-router:  5.0.0-alpha.0 
    @vue/cli-plugin-typescript: ~5.0.0-alpha.0 => 5.0.0-alpha.0 
    @vue/cli-plugin-unit-jest: ~5.0.0-alpha.0 => 5.0.0-alpha.0 
    @vue/cli-plugin-vuex:  5.0.0-alpha.0 
    @vue/cli-service: ~5.0.0-alpha.0 => 5.0.0-alpha.0 
    @vue/cli-shared-utils:  5.0.0-alpha.0 
    @vue/compiler-core:  3.0.4 
    @vue/compiler-dom:  3.0.4 
    @vue/compiler-sfc: ^3.0.4 => 3.0.4 
    @vue/compiler-ssr:  3.0.4 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-standard: ^6.0.0 => 6.0.0 
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.4 
    @vue/runtime-core:  3.0.4 
    @vue/runtime-dom:  3.0.4 
    @vue/shared:  3.0.4 
    @vue/test-utils: ^2.0.0-0 => 2.0.0-beta.13 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^7.2.0 => 7.4.0 
    jest-serializer-vue:  2.0.2 
    typescript: ~4.1.2 => 4.1.3 
    vue: ^3.0.4 => 3.0.4 
    vue-eslint-parser:  7.3.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.7 (3.0.7)
    vue-loader:  16.1.2 (15.9.6)
    vue-style-loader:  4.1.2 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 5.0.0-alpha.0

[07akioni]

using @vuedx/typescript-plugin-vue,

• I should run the Select TypeScript version command in VS Code to use the workspace version of TypeScript. It’s not out of the box for vscode users if integrating this plugin in CLI. But this plugin can be mentioned in the documentation maybe.
• this plugin doesn’t support .vue which doesn’t contain script tag, we can use this plugin with shims-vue.d.ts together to solve this problem.

maybe it would be better to let vetur integrate it. vuejs/vetur#2145. I’m not very sure now.

There is vuedx extension in vscode store, which can be used with vetur together (not recommended, I find it seems to slow down my vscode, not quite sure).

Before Vue3 DX reach a usable level, I think we still need to wait for some tool chains to reach stable state.

For type checking like tsc --noEmit, we need @vuedx/typecheck.

For type checking in IDE like tsx, we need vetur to support both .ts|js|vue in vscode. (After that shims-vue.d.ts is not required)

For packing a .ts + .vue library in its file original structure, currently there is no integrated solution. (For .ts + tsx it is quite easy. just run tsc)

[07akioni]

For people who want to use typescript tsc to build their library, I build v2s(vue to script) to help convert .vue file to .ts file and refactor all the related imports/exports.

It does the conversion in place.

Firstly copy src to copied-src

copied-src/Button.vue (lang=ts)
copied-src/index.ts      (import Button from './Button.vue')

Run npx v2s -dr copied-src/**/* (-dr means delete source & refactor imports/exports)

copied-src/Button__render.ts
copied-src/Button__script.ts
copied-src/Button.ts
copied-src/index.ts      (import Button from './Button.ts')

Then you can use tsc to compile your library.