盡管 TypeScript 編譯器錯誤，為什么我的 React Native 應用程序構建成功？

Question

我最近開始使用 TypeScript 和 Expo。 我已經完成了所有 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 很陌生，所以我可能遺漏了一些非常重要的東西。 究竟是什么導致了這種寬大處理，有沒有辦法執行更嚴格的檢查？

Answer 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 文檔的底部，他們實際上是 state 相同的東西：

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

但是，將 TypeScript 與 Babel 一起使用有一些注意事項。 因為 Babel 中的 TypeScript 支持是轉譯，所以 Jest 在運行時不會對您的測試進行類型檢查。 如果需要，可以使用 ts-jest。

Answer 2

當您運行 npx npx tsc時，只有一個軟件 package 會檢查語法，如果它對引發的任何語法錯誤感到不滿，那么它將不會轉譯。

一些應用程序構建使用兩個軟件包來代替：一個通過完整的語法檢查來完成部分工作，但實際上不會轉譯。 另一個 package 也做了部分工作，但反過來：它轉譯但只做最少的語法檢查。

兩個包並行工作，因此構建速度更快。 這種速度上的提高是有代價的：有時軟件包在錯誤是什么上存在分歧。

示例：webpack 可以使用 ts-loader 僅轉譯（取決於配置）和 fork-ts-checker-webpack-plugin 來檢查語法。

Answer 3

這個問題的直接答案是：Babel，在編譯之前去掉所有 typescript 標記。 因此，您不會在 cli 中看到它出錯。