Why does my React Native app build successfully despite TypeScript compiler error?

Question

I've recently started using TypeScript with Expo. I've done all the linter/formatter integrations like typescript-eslint so I can catch most of the errors during coding. To check if the code compiles, I run npx tsc every once in a while and fix accordingly.

One thing that I haven't fully grasped yet is why my app builds successfully even when there are numerous compile errors. I expect (and prefer) to see a red screen error for every compile error rather than the app build successfully and me find it out later. For example,

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

is a typical TypeScript error that (I believe?) can be easily checked at compile time. I want it to result in a big red screen error and the build to fail.

I'm quite new to TypeScript so it's possible that I'm missing something very important. What exactly is causing this leniency and is there a way to enforce stricter checks?

Answer 1

The first thing to understand is that Typescript is a superset of Javascript, and in this case it doesn't actually get type checked during compilation.

Essentially what happens is Babel just strips out the Typescript and converts it to Javascript, which then gets compiled into the js bundles.

You can take a look at the first line of the following Babel docs as well as the caveats: https://babeljs.io/docs/en/next/babel-plugin-transform-typescript

Since Babel does not type-check, code which is syntactically correct, but would fail the TypeScript type-checking may successfully get transformed, and often in unexpected or invalid ways.

What I would suggest is extending your build command to first include tsc or rather Typescript compilation, with noEmit set to true in your tsconfig.

Update: I found another instance where this applies recently when adding jest and typescript to a project. At the bottom of the Jest docs they actually state the same thing:

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

However, there are some caveats to using TypeScript with Babel. Because TypeScript support in Babel is transpilation, Jest will not type-check your tests as they are run. If you want that, you can use ts-jest.