Check TS inside .vue files

[Vasiliy-Bondarenko]

Is there a way to make it check typescript inside .vue files?
I've tried to use it - and it checks all my .ts files, but don't check TypeScript inside .vue

[piotr-oles]

Hi! :)
Currently there is no logic that filters files by it's extension - we get files from typescript compiler api:

    // select files to check (it's semantic check - we have to include all files :/)
    const filesToCheck = this.program.getSourceFiles();

It looks like there is no .vue files in getSourceFiles() result. It may be invalid tsconfig.json file or bug/missing feature in typescript

[Vasiliy-Bondarenko]

vue files are not compiled directly by tsc. ts code extracted from vue by webpack and send to tsc AFAIK.

[johnnyreilly]

Maybe it would help if you shared a repo demonstrating the issue?

[Vasiliy-Bondarenko]

I'd love to, but can't. It's private project.
This is the proccess I've followed https://sebastiandedeyne.com/posts/2017/typescript-with-laravel-mix

my current webpack.mix.js

const mix = require('laravel-mix');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

// docs: https://github.com/JeffreyWay/laravel-mix/tree/master/docs#readme
mix
    .ts('resources/assets/js/app.ts', 'public/js')
    .extract(['vue', 'vuex', 'jquery', 'axios', 'vue2-dragula', 'element-ui', 'lodash', 'moment', 'vue-class-component'])
    .js('resources/assets/js/home.ts', 'public/js')
    .less('resources/assets/less/app.less', 'public/css')
    .sourceMaps()
;


// run versioning on production only
if (mix.inProduction()) {
    mix.version();
}

mix.webpackConfig({
    // https://webpack.js.org/configuration/devtool/
    // It looks like webpack or vue-loader have a bug :(
    // Vue-loader issue opened: https://github.com/vuejs/vue-loader/issues/620
    devtool: "cheap-module-source-map",//  "cheap-module-eval-source-map", //
    module: {
        rules: [
            { // TS support: https://sebastiandedeyne.com/posts/2017/typescript-with-laravel-mix
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    // transpileOnly: true
                },
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
    }
});

[Toilal]

I created a repository to reproduce the issue : https://github.com/Toilal/vue-25-typescript

git clone, yarn install && yarn dev to run the dev server. It display no error, but it should display a type error because of this line.

If I set transpileOnly to false here, the error is properly reported.

 ERROR  Failed to compile with 1 errors                                 22:29:44

 error  in /home/toilal/idea-projects/vue-25-typescript/src/components/HelloWorld.vue.ts

(45,30): error TS2339: Property 'blabla' does not exist on type 'number'.

[Toilal]

here's the file list returned by this.program.getSourceFiles()

[ '/home/toilal/idea-projects/vue-test/node_modules/typescript/lib/lib.es6.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/vnode.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/options.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/plugin.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/vue.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/index.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-class-component/lib/declarations.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-class-component/lib/util.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-class-component/lib/index.d.ts',
  '/home/toilal/idea-projects/vue-test/src/hooks.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-router/types/vue.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-router/types/router.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-router/types/index.d.ts',
  '/home/toilal/idea-projects/vue-test/src/router/index.ts',
  '/home/toilal/idea-projects/vue-test/src/main.ts',
  '/home/toilal/idea-projects/vue-test/src/typings.d.ts',
  '/home/toilal/idea-projects/vue-test/test/unit/index.ts',
  '/home/toilal/idea-projects/vue-test/test/unit/typings.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/chai/index.d.ts',
  '/home/toilal/idea-projects/vue-test/test/unit/specs/Hello.spec.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/mocha/index.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/node/index.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/sinon/index.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/sinon-chai/index.d.ts' ]

That's it, .vue component files are missing.

[RoystonS]

I've come across slightly related issues with my codebase. The surprising bit is that fork-ts-checker-webpack-plugin appears to gets its list of files purely from the tsconfig file, not from anything webpack is building or producing.

[johnnyreilly]

@RoystonS - I believe that's intentional. The motivation being getting the fastest performance possible. @piotr-oles can confirm

[RoystonS]

Sure, I can see why. It's just surprising. e.g. I spent several hours trying to work out why my files were being compiled correctly, but not type-checked, and it was the difference between the files section of my tsconfig.json and my webpack configuration.

I presume the type checker goes directly back to those source files, for speed? That would mean that it wouldn't be able to access bits of TS extracted from .vue files, and similarly wouldn't see the correct content of files that have had, say, strings replaced in them by webpack?

[johnnyreilly]

That would mean that it wouldn't be able to access bits of TS extracted from .vue files, and similarly wouldn't see the correct content of files that have had, say, strings replaced in them by webpack?

As things stand, no.

and it was the difference between the files section of my tsconfig.json and my webpack configuration.

It's worth saying that this is a general behaviour. I think I'm right in saying that it is specific to fork-ts-checker-webpack-plugin and applies to both ts-loader and atl as well. The principal being, that loaders should generally be drop in replacements for tsc. See here for a little more context.

[piotr-oles]

@RoystonS This behavior is intentional and is described in the readme of the plugin in the "Module resolution" section. I'm sorry that you had to spend a lot of time on this. I will close this issue because it cannot be solved directly in this plugin.

[prograhammer]

This actually can be accomplished by overriding default host behavior with host.resolveModuleNames (just like it is already being done in host.getSourceFile in the source here). I'm working on a PR for this now and hope I can have it ready by tomorrow.

Since this issue is closed, I'll we continue conversation in this open issue I see here: #70