使用错误类型时TypeScript无编译报错（Ionic3+Angular5）

这问题我之前帮朋友排查过，核心就是TypeScript的严格类型检查没启用，再加上Ionic热重载的缓存偶尔抽风，咱们一步步来解决：

你遇到的情况是两个问题叠加：

1. TypeScript的类型校验规则没开到位，导致你写的类型注解形同虚设，代码完全像原生JS一样不做类型检查
2. Ionic的热重载缓存机制偶尔出问题，导致错误提示时有时无，保存文件后缓存被清掉就暂时看不到错误

1. 调整tsconfig.json的类型检查配置 #

打开项目根目录的tsconfig.json，把严格类型检查的开关打开，这是让TypeScript真正发挥作用的关键。推荐直接启用strict模式，它会自动开启一系列核心的类型检查规则：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2017", "dom"],
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "src/**/*.spec.ts",
    "src/**/*.e2e.ts"
  ]
}

给你解释几个关键项：

• strict: true：这是最核心的开关，一次性开启所有严格类型检查规则，直接把TypeScript从“宽松模式”拉到“严格模式”
• noImplicitAny：禁止变量自动隐式使用any类型，避免你没指定类型时绕过检查
• strictPropertyInitialization：强制检查类的属性是否在构造函数中初始化，避免出现未定义的属性问题

2. 解决Ionic热重载的缓存异常 #

你说的“保存报错文件后错误消失”是Ionic热重载的老毛病了，缓存没清干净导致错误提示不准，解决方法：

• 每次修改tsconfig.json后，一定要完全重启ionic serve，别依赖热重载，因为配置文件的修改热重载可能没处理到位
• 如果还是偶尔出现异常，手动清掉缓存：

  ionic cache clear
  rm -rf node_modules/.cache # Windows用户直接删除node_modules\.cache文件夹就行
  

• 实在不行，你可以关闭热重载测试：

  ionic serve --no-livereload
  

  这样每次修改都会重新完整编译，能看到最真实的类型错误提示。

3. 验证配置是否生效 #

改完配置后，写一段测试代码试试：

let foo: string;
foo = { bar: 123 } as SomeNonExistentClass; // 正常情况下这里应该立刻报类型错误

如果配置生效了，你的IDE（比如VS Code）会立刻弹出错误提示，运行ionic serve也会在编译阶段抛出错误，不会让错误代码混过去。

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