为何React Native项目存在TypeScript编译错误仍可成功构建？

嗨，刚接触TypeScript遇到这个问题太正常了，我来帮你把逻辑理清楚！

为什么带TypeScript错误的代码还能成功构建？ #

Expo底层依赖的Metro打包器，默认逻辑是只负责把TypeScript转译为合法JavaScript，不强制执行类型校验。简单说，Metro只关心代码能不能转成JS跑起来，至于你写的类型逻辑对不对，它默认是不管的。

你手动运行的npx tsc是单独调用TypeScript编译器做类型检查，但这个过程和Metro的构建流程是完全分开的——Metro不会等tsc的检查结果，只要代码能完成转译，就会继续构建应用，这就是为啥明明一堆类型错误，App还能正常启动的核心原因。

如何启用严格检查，让错误触发红屏并阻止构建？ #

要实现你想要的「类型错误直接打断构建+红屏提示」，需要从两个维度配置：强化TypeScript本身的检查规则，以及让构建流程强制绑定类型校验。

1. 先把TypeScript的严格模式拉满 #

打开你的tsconfig.json，确保核心严格配置开启：

{
  "compilerOptions": {
    "strict": true, // 开启所有严格类型检查选项，这是核心开关
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    // 其他按需添加的严格规则...
  }
}

"strict": true会自动启用一系列严格检查，比如你例子里的square<T>函数，T没有约束就访问x.length，会被立刻检测出来。

2. 让构建流程强制执行类型检查 #

有两种常用方案：

• 方案一：添加预构建脚本
  在package.json里添加prestart/prebuild脚本，让Expo在构建前先执行TypeScript的类型校验（不生成JS文件，只做检查）：

  {
    "scripts": {
      "prestart": "tsc --noEmit",
      "prebuild": "tsc --noEmit",
      "start": "expo start",
      "build": "expo build"
    }
  }
  

  这样每次你运行npm start或npm run build时，都会先执行tsc --noEmit，一旦有类型错误，脚本会直接终止，阻止后续构建。

• 方案二：让Metro在开发时实时检查类型
  如果你想在开发过程中一出现类型错误就弹出红屏，可以配置Metro集成ESLint的类型检查：

  1. 安装依赖：npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint
  2. 项目根目录创建.eslintrc.js，配置检查规则：

     module.exports = {
       parser: '@typescript-eslint/parser',
       plugins: ['@typescript-eslint'],
       extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:@typescript-eslint/recommended-requiring-type-checking'
       ],
       parserOptions: {
         project: './tsconfig.json'
       }
     };
     

  3. 修改metro.config.js，让Metro在转译时执行ESLint检查：

     const { getDefaultConfig } = require('@expo/metro-config');
     const config = getDefaultConfig(__dirname);
     
     config.transformer.babelTransformerPath = require.resolve('metro-transformer-eslint');
     
     module.exports = config;
     

  这样开发时，Metro会实时运行类型检查，一旦出错就会立刻弹出红屏提示。

3. 编辑器实时提示 #

别忘了确保你的编辑器（比如VS Code）安装了TypeScript插件，这样编码时就能实时看到类型错误，不用等到构建阶段才发现问题。

拿你写的例子来说：

function square<T>(x: T): T { 
  console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'. 
  return x * x; 
}

开启严格模式+预构建脚本后，运行npm start时tsc --noEmit会直接抛出这个错误，阻止应用启动；同时编辑器里也会实时标红错误，开发服务器也会弹出红屏提醒你。

总结 #

Expo默认的宽松行为是为了优先开发速度，把类型检查的控制权交给开发者。只要你开启TypeScript严格模式，再让构建流程强制绑定类型校验，就能实现「类型错误直接打断构建+红屏提示」的效果，提前把问题扼杀在编码阶段。

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