Why is compiled TypeScript so much more readable than transpiled ES6?

Question

JavaScript

Why does js compiled from typescript look so much better than es6 -> es5 transpiled via babel?

Answer 1

1. Because one of the goals when creating TypeScript was precisely the readability of the output JS code. Quote from TypeScript Design Goals :
...
4. Emit clean, idiomatic, recognizable JavaScript code.
...
2. Aggressively optimize the runtime performance of programs. Instead, emit idiomatic JavaScript code that plays well with the performance characteristics of runtime platforms.
2. Because TypeScript is all about strong typing (and hiding and other related stuff) first and foremost. Therefore, most of the runtime checks are not needed in the code generated by TS - the compiler checks everything during assembly. Let's compare the compilation results of the following code snippets
by Babel and tsc: ES6 snippet :

class Foo {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
  
  bar() {
    return this.a + this.b;
  }
}

snippet on TS :

class Foo {
  private a: number;
  private b: number;

  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
  
  bar() {
    return this.a + this.b;
  }
}

As you can see, TS generates only the most necessary, while Babel in default settings generates helpers like _createClassand _classCallCheck, which are defined quite non-trivially. Why is he doing this? Because Babel generates code that is "safe" in runtime. It does not expect any checks to be performed at compile time. For example, the _classCallCheck helper checks that the constructor has not been called like a regular function.
TS considers such checks redundant - its developers believe that all of them should occur during compilation. No additional checks are made for the calling code.

Answer 2

Two options:
1. Different translation methods
2. One was minified and the other was not.
In general, forget about the display, if you need debugging, use sourcemaps.