Vue w / Typescript的类型检查，但没有Webpack / ts-loader

Question

自2018年8月以来，可以使用Babel编译Typescript代码并将类型检查作为单独的过程进行。

我想知道是否可以对不带Webpack / ts-loader <script lang="ts">部分进行自定义文件格式（如.vue类型检查？ （我认为在这种情况下，Typescript需要支持文件预处理，以便能够消化不同的文件格式）。

现在，我只需要使用ts-loader维护一个单独的webpack配置并编译Vue.js项目，尽管我需要做的只是对它进行类型检查。 因此，这种方法看起来更像是hack和开销。

Answer 1

在Webpack中使用ts-loader是完全没问题的。 我们的Vue.js是非常大规模的，我们有多个SPA和Webpack作为我们的捆绑器。 你真的不需要为ts-loader提供单独的配置。 看看我们的Webpack配置（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')
        }
    }
];

回到你的问题，我已经成功使用@babel/preset-typescript .vue但我们不使用.vue文件，因为在处理.vue文件时会出现问题 。 注意：在开发过程中，我们将transpileOnly设置为false。

如果您可以切换到使用@Component装饰器的类语法并使用vue-template-loader ，那么您可以切换到使用Babel + TypeScript。 有一些令人讨厌的惊喜，例如不支持const enums ，命名空间等。

注意：在@babel/preset-typescript上使用ts-loader有其自身的优点。 与Webpack相结合， ts-loader更具攻击性。 如果您需要使用Vue.js键入JSX即TSX支持，那么babel路由更有意义。 如果使用的是.vue文件，则没有太大的区别。