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.

score 1 · Answer 1 · answered Mar 19 '19 at 06:38

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.

Thanks for the reply, but it doesn't answer my question. As of the problems with processing `.vue` files by `@babel/preset-typescript` - I'm currently investigating if they are still in effect and how serious they are. Till now I haven't found any problems for my application — Alexey, Mar 19 '19 at 20:53
Thank you Harshal! Adding `appendTsSuffixTo: [/\.vue$/],` to ts-loader solved an issue I have been fighting for days. Not sure why that doesn't appear in other TypeScript+Vue+Webpack setups — Mike Crowe, Dec 18 '19 at 15:24

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

1 Answers1