使用 Typescript 但没有 Webpack/ts-loader 的 Vue 类型检查

Question

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

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

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

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 文件作为there are problems。 注意：我们在开发过程中将 transpileOnly 设置为 false。

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

注意：使用ts-loader 而不是@babel/preset-typescript 有其自身的优势。再加上 Webpack，ts-loader 更易于破解。如果您需要类型化的 JSX，即 Vue.js 支持 TSX，那么 babel 路由更有意义。如果您使用的是.vue 文件，则没有太大区别。