使用Typescript对Vue进行类型检查，但不使用Webpack/ts-loader

Question

使用Typescript对Vue进行类型检查，但不使用Webpack/ts-loader

3

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

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

目前，我不得不维护一个带有ts-loader的单独webpack配置，并编译Vue.js项目，尽管我只需要进行类型检查。因此，这种方法看起来更像是一种hack和额外负担。

- Alexey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harshal Patil · Accepted Answer

"

使用ts-loader与Webpack完全没有问题。我们的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文件时会出现问题。 注意：在开发期间，我们将transpileOnly设置为false。

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

注意：使用ts-loader而不是@babel/preset-typescript有其自身的优势。与Webpack配合使用，ts-loader更易于hack。如果您需要支持Vue.js中的类型化JSX即TSX，则使用babel路线更为合理。如果您正在使用.vue文件，则没有明显的区别。