28

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?

anar
  • 529
  • 7
  • 10
  • By "builds successfully" do you mean the JS is output anyway, or there's no compiler error message shown at some point? – ecraig12345 Oct 19 '19 at 03:43
  • 2
    I mean the JS is output anyway and I can run the app in dev mode and can even build the production app without any issues. I would have expected TypeScript to prevent this at compile time. Compiler error messages are always shown when I run `npx tsc` but I want to get a red screen for every TypeScript error just as I do for normal JS errors like `const n = 23; n.reverse();` that results in a red screen with the message "n.reverse is not a function. (In 'n.reverse()', 'n.reverse' is undefined)" – anar Oct 19 '19 at 07:39
  • 2
    I find this so weird as well. I can't find an adequate solution to it either. – Simon Bengtsson Dec 14 '19 at 16:12

2 Answers2

11

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.

Mark Atkinson
  • 458
  • 8
  • 14
1

The straight answer to this question is: Babel, strips out all typescript marks before compiling. Therefore you won't see it erroring out in the cli.

Andy
  • 1,190
  • 1
  • 11
  • 25