如何让Svelte编译器访问未定义属性时抛出错误？

先看这段TypeScript代码：

enum People {
    Jhon = 'Jhon',
    Jane = 'Jane'
}
console.log(People.Mike)

在Angular中，这段代码会直接抛出类型错误：

Property 'Mike' does not exist on type 'typeof People'

但在Svelte中默认编译不会报错，只会在控制台打印undefined，容易引发隐性Bug。要让Svelte检测这类错误，可按以下步骤配置：

1. 启用严格TypeScript类型检查 #

修改项目根目录的tsconfig.json，确保开启严格类型检查规则：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "extends": "./.svelte-kit/tsconfig.json" // 若使用SvelteKit需添加此继承
}

strict: true会启用所有严格类型检查规则，其中就包含对枚举成员存在性的校验。

2. 使用svelte-check做类型校验 #

Svelte官方提供的svelte-check工具可以对项目做完整的TypeScript类型检查。

• 若未安装，执行安装命令：

  npm install --save-dev svelte-check
  

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

  "scripts": {
    "check": "svelte-check"
  }
  

• 运行命令触发检查：

  npm run check
  

  此时工具会准确抛出枚举属性不存在的错误。

3. 让构建/开发阶段自动触发检查 #

如果使用Vite作为构建工具，可以通过插件让开发或构建过程自动执行类型检查：

• 安装vite-plugin-svelte-check：

  npm install --save-dev vite-plugin-svelte-check
  

• 修改vite.config.ts配置：

  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  import svelteCheck from 'vite-plugin-svelte-check';
  
  export default defineConfig({
    plugins: [sveltekit(), svelteCheck()]
  });
  

  这样在启动开发服务或执行构建时，一旦出现枚举这类类型错误，流程会自动终止并抛出提示。

Svelte完全支持这类TypeScript类型检查能力，只是默认编译流程未强制开启，通过上述配置即可让编译器/工具检测出这类潜在Bug。

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