如何让Webpack 5构建的Svelte项目启用TypeScript组件类型检查？

方案1：使用svelte-check做类型校验（官方推荐） #

这是Svelte官方提供的工具，专门针对Svelte组件做TS类型校验：

• 安装依赖：

  npm install --save-dev svelte-check typescript svelte-preprocess
  

• 在package.json的scripts中添加检查命令：

  "scripts": {
    "check": "svelte-check",
    "check:watch": "svelte-check --watch",
    "build": "svelte-check && webpack --mode production"
  }
  

• 确保根目录tsconfig.json配置正确：

  {
    "extends": "@tsconfig/svelte/tsconfig.json",
    "compilerOptions": {
      "target": "ESNext",
      "useDefineForClassFields": true,
      "module": "ESNext",
      "resolveJsonModule": true,
      "baseUrl": "."
    },
    "include": ["src/**/*.d.ts", "src/**/*.svelte", "src/**/*.ts"],
    "exclude": ["node_modules/*", "public/*"]
  }
  

• 运行npm run check即可捕获.svelte组件内的类型错误；开发时用check:watch实时监控；build脚本会在打包前强制检查，有错误直接终止构建。

方案2：配置Webpack让svelte-loader触发类型检查 #

通过修改svelte-loader配置，让Webpack编译时直接做类型校验：

• 安装svelte-preprocess：

  npm install --save-dev svelte-preprocess
  

• 修改webpack.config.js中的svelte-loader配置：

  const sveltePreprocess = require('svelte-preprocess');
  
  module.exports = {
    // ...其他Webpack配置
    module: {
      rules: [
        {
          test: /\.svelte$/,
          use: {
            loader: 'svelte-loader',
            options: {
              preprocess: sveltePreprocess({
                typescript: {
                  transpileOnly: false, // 关闭仅转译，开启类型检查
                  tsconfigFile: './tsconfig.json'
                }
              }),
              compilerOptions: {
                dev: process.env.NODE_ENV === 'development'
              }
            }
          }
        },
        // ...其他loader规则
      ]
    }
  };
  

  注意：此方式会减慢构建速度，建议仅在生产构建时启用，开发阶段用svelte-check做实时检查。

关键注意事项 #

• 所有需要做TS校验的.svelte组件，必须在<script>标签上添加lang="ts"属性。
• tsconfig.json的include字段必须包含src/**/*.svelte，否则工具无法识别组件文件。
• 建议继承@tsconfig/svelte的基础配置，避免手动配置TS编译选项出错。

内容的提问来源于stack exchange，提问作者clo_jur