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

[07akioni]

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

[fangbinwei]

I can't reproduce this problem. My project is created by @vue/cli@5.0.0-alpha.0. Could you provide the information in the issue bug template? It's a compile error or just a vetur error message ?

[07akioni]

(vue info is updated)

Type check simply not works in main.ts.

I use ([Vue 3] typescript, eslint, unit-jest, e2e-cypress) preset and only main.ts is modified as shown.
msg should be a string.

[07akioni]

In shims-vue.ts:

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

I think it makes in .ts files, all the imported .vue vars are not treated as their real type but empty defineComponent()?

[fangbinwei]

you are right. As far as I know, you should define declare module '@/components/HelloWorld.vue' by yourself. Or use HelloWorld.tsx. I'm not sure if vetur can support the feature you want

[07akioni]

you are right. As far as I know, you should define declare module '@/components/HelloWorld.vue' by yourself. Or use HelloWorld.tsx. I'm not sure if vetur can support the feature you want

Vetur seems to make type checks in .vue's script part work. However in .ts it doesn't work.

😭

[fangbinwei]

I think you need plugin like vue-ts-plugin, Unfortunately, it seems this plugin doesn't support vue3 now.

Related issue vuejs/vetur#1322, vuejs/vetur#673, vuejs/vetur#2016

[07akioni]

I think you need plugin like vue-ts-plugin, Unfortunately, it seems this plugin doesn't support vue3 now.

Related issue vuejs/vetur#1322, vuejs/vetur#673, vuejs/vetur#2016

Thanks.

It may take a long time to make vue3 development tool chains mature. 😄

[07akioni]

https://github.com/znck/vue-developer-experience

It can make type check work.

[fangbinwei]

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.

[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.