尽管 TypeScript 编译器错误，为什么我的 React Native 应用程序构建成功？答案

【问题标题】：Why does my React Native app build successfully despite TypeScript compiler error?尽管 TypeScript 编译器错误，为什么我的 React Native 应用程序构建成功？
【发布时间】：2020-02-15 22:44:04
【问题描述】：

我最近开始在 Expo 中使用 TypeScript。我已经完成了所有 linter/formatter 集成，例如 typescript-eslint，因此我可以在编码过程中捕获大部分错误。为了检查代码是否编译，我每隔一段时间运行一次npx tsc 并进行相应的修复。

我还没有完全理解的一件事是为什么我的应用程序即使在存在大量编译错误的情况下也能成功构建。我希望（并且更喜欢）看到每个编译错误的红屏错误，而不是成功构建应用程序，我稍后会发现它。例如，

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

是一个典型的 TypeScript 错误（我相信？）可以在编译时轻松检查。我希望它导致一个大的红屏错误并且构建失败。

我对 TypeScript 很陌生，所以我可能遗漏了一些非常重要的东西。究竟是什么导致了这种宽大处理，有没有办法执行更严格的检查？

【问题讨论】：

“构建成功”是指 JS 还是输出了，还是在某些时候没有显示编译器错误消息？
我的意思是 JS 无论如何都会输出，我可以在开发模式下运行应用程序，甚至可以毫无问题地构建生产应用程序。我本来希望 TypeScript 在编译时防止这种情况发生。当我运行npx tsc 时，总是会显示编译器错误消息，但我想为每个 TypeScript 错误获得一个红屏，就像我对像const n = 23; n.reverse(); 这样的普通 JS 错误所做的那样，这会导致一个带有消息“n.reverse is”的红屏不是函数。（在'n.reverse()'中，'n.reverse'未定义）"
我也觉得这很奇怪。我也找不到合适的解决方案。

标签： reactjs typescript react-native expo

【解决方案1】：

首先要了解的是，Typescript 是 Javascript 的超集，在这种情况下，它实际上并没有在编译期间进行类型检查。

基本上发生的事情是 Babel 只是剥离 Typescript 并将其转换为 Javascript，然后将其编译到 js 包中。

您可以查看以下 Babel 文档的第一行以及注意事项： https://babeljs.io/docs/en/next/babel-plugin-transform-typescript

由于 Babel 不进行类型检查，因此语法正确但无法通过 TypeScript 类型检查的代码可能会成功转换，并且通常以意想不到或无效的方式进行。

我的建议是将您的构建命令扩展为首先包含 tsc 或更确切地说是 Typescript 编译，并在您的 tsconfig 中将 noEmit 设置为 true。

更新：我最近在将jest 和typescript 添加到项目时发现了另一个实例。在 Jest 文档的底部，他们实际上陈述了同样的事情：

https://jestjs.io/docs/en/getting-started#using-typescript

但是，将 TypeScript 与 Babel 结合使用有一些注意事项。因为 Babel 中的 TypeScript 支持是转译，所以 Jest 不会在你的测试运行时对它们进行类型检查。如果需要，可以使用 ts-jest。

【讨论】：

【解决方案2】：

这个问题的直接答案是：Babel，在编译之前去掉所有的打字稿标记。因此，您不会在 cli 中看到它出错。

【讨论】：