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文件，則沒有太大的區別。