noEmitOnError

Error in Typescript, still the Javascript is generated by the Transpiler ? Let’s dig in why ?

Have you ever come across the problem that there are some errors in your typescript (.ts) file and when you compile it, even after displaying an error in the terminal ( either in your command line or in terminal of VSCode) it successfully generates the equivalent javascript (.js) file !

Point of concern here is why is the typescript transpiler is behaving in such a way ? Is this a known behaviour or is it a bug ? If it’s a bug, is there a solution available already ? And if its an obvious behaviour then what exactly might be the reason ?

We will go answering the concerns above one by one …

Why Transpiler generates javascript even after errors in typescript ?

This is an intended behaviour as a key scenario for migrating existing javascript. Here is an answer to this issue reported on github

This is a key scenario for migrating existing JavaScript — you rename some .js file to .ts, get some type errors, but want to keep getting compilation of it while you refactor it to remove the type errors. They are ‘warnings’ in that sense; we cannot guarantee that your program does not work just because it has type errors. — RyanCavanaugh (Development lead for the TypeScript team at Microsoft)

https://github.com/Microsoft/TypeScript/issues/828

So as we understand that if by default we restrict the transpiler to generate javascript only if the typescript has no type errors, then it would not solve the whole sole purpose of the typescript superset.

Typescript is built on top of javascript and adds syntactic sugar to the already beautiful javascript. So in order to make the whole community easily adapt and migrate to typescript or typescript based frameworks, it is extremely important to ensure that people are not hard bounded by the type checks.

But how to address this scenario ?

In order to make sure that in case of any type error in your typescript file(s) the transpiler does not generate the javascript file(s), typescript has come up with a flag known as “noEmitOnError” as part of the “compilerOptions” in the tsconfig.json file !

If we set noEmitOnError: true in the tsconfig.json file then on compiling my typescript code in case of error the javascript will not be generated. Let’s see step by step how to achieve this in a sample typescript project.

Example: Simple Typescript Project working on VSCode

Step 1: Let’s make sure we understand the problem statement being made in this story. So let’s create a greeter.ts file with the below code

function greeter(person) {
  return "Hello, " + person;
}
let user = <number>"Jane";
document.body.textContent = greeter(user);

we can see the below errors in vscode

See the red underlines in the code

Instead of the errors above, we just compile the typescript using below command

tsc greeter.ts

The compiler displays the errors on the terminal

Parameter 'person' implicitly has an 'any' type.ts(7006)
Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352)

But still we see that an equivalent greeter.js file is generated

Step 2: Generate a tsconfig.json file in your project or workspace or folder using the below command

tsc --init

Step 3: The command above will generate the tsconfig.json file. Check for “compilerOptions” in the file and add the below property under the same. Below is an example

"compilerOptions": {
 "noEmitOnError": true,
}

Step 4: Delete the javascript file generated by the transpiler earlier. Then go with either of the approach that suits your case

Approach 1: When you create the build of your project using webpack or any such javascript module bundler, you will see that compiler throws error and javascript file is not generated.

Approach 2: Now just execute the below command on your terminal to compile the typescript ( this is in the case when we want to directly compile a list of typescript files ). Here we need to pass the noEmitOnError to the command below, since in this case the compiler doesn’t pick the configuration from the file, this may be a further improvement which the team of Visual Studio Code or Typescript does in the near future)

tsc --noEmitOnError greeter.ts

You will see that compiler throws the error and javascript file is not generated

No javascript generated when compiling with — noEmitOnError

I hope this story would have helped in clearing this basic concept that why javascript is generated even after type errors in your typescript. The “noEmitOnError” option was added as a solution to the issue reported on github (mentioned the issue link in the story itself)

References :

Moving to TypeScript Files #

Do not create JavaScript files on errors · Issue #828 · microsoft/TypeScript

noEmitOnError doesn't work in tsconfig.json · Issue #15249 · microsoft/TypeScript

[SOLVED] Compiler option `noEmitOnError` not working with tsc 2.8.1 · Issue #23179 ·…