Type-checking of Vue w/ Typescript but w/o Webpack/ts-loader

Question

Since August 2018 it's possible to compile Typescript code with Babel and have type checking as a separate process.

I wonder if it is possible to do type checking of custom file formats like .vue with <script lang="ts"> sections w/o Webpack/ts-loader? (I reckon in that case Typescript would need to support file preprocessing in order to be able to digest different file formats).

Right now I have to maintain a separate webpack configuration with ts-loader and compile Vue.js project, though all I need is to type-check it. So this approach looks more like a hack and overhead.

Answer 1

It is perfectly fine to use ts-loader with Webpack. Our Vue.js is extremely large-scale and we have multipage SPA with Webpack as our bundler. You don't really need to have a separate configuration for ts-loader. Have a look at our Webpack config (three instances of ts-loader):

const rules = [
    {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        include: [...PATHS.shared, path.join(__dirname, 'node_modules')],
        options: {
            transpileOnly: isDev,
            appendTsSuffixTo: [/\.vue$/],
            instance: 'common',
            configFile: path.join(__dirname, 'tsconfig.json')
        }
    },
    {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        include: [PATHS.app1],
        options: {
            transpileOnly: isDev,
            appendTsSuffixTo: [/\.vue$/],
            instance: 'app1',
            configFile: path.join(PATHS.app1, 'tsconfig.json')
        }
    },
    {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        include: [PATHS.app2],
        options: {
            transpileOnly: isDev,
            appendTsSuffixTo: [/\.vue$/],
            instance: 'app2',
            configFile: path.join(PATHS.app2, 'tsconfig.json')
        }
    }
];

Coming back to your question, I have had success with @babel/preset-typescript but we do not use .vue files as there are problems when processing .vue files. Note: We set transpileOnly to false during development.

If you can switch to using class syntax with @Component decorator and use vue-template-loader, then you can switch to using Babel + TypeScript. There are little nasty surprises like no support for const enums, namespaces, etc.

Note: Using ts-loader over @babel/preset-typescript has its own advantages. Coupled with Webpack, ts-loader is more hackable. If you need typed JSX i.e. TSX support with Vue.js, then babel route makes more sense. If you are using .vue files, then there is no considerable difference.