Replace Babel with TypeScript compiler

[dtinth]

Rationale

• After using TypeScript in production projects for quite some time, I am pretty confident that it is the correct choice going forward. I think the Bemuse project would benefit a lot from TypeScript:

  • Type checking makes it less likely for me to write incorrect code.

  • Make code more self documenting through type annotations.

  • Amazing editor integration with VS Code (auto-complete, auto-import, find all references, quickfixes, automated refactoring, etc.) These wouldn’t be possible if our code isn’t compatible with TypeScript’s language service.

  • Good ecosystem and platform for generating docs (TSDoc and friends) with inferred types.

• TypeScript can also compile ES201x code down to ES6 and ES5. In addition, TypeScript’s compiler can transpile generators to ES5 without requiring a regeneratorRuntime (we don’t use it here since from now we will now target ES6+ browsers only). By going all-in on using TypeScript compiler, we can ensure that VS Code and webpack interprets our code the same way. I also find TypeScript compiler easier to configure than Babel. If I don’t use any Babel plugins, I see no need to directly use Babel in this project anymore. (It’s still used under the hood of some tools.)

• It turned out we used some Emotion-specific syntax (css={…} prop and styled.div shorthand). In this PR such custom syntax has been removed.

• After eliminating the usage of custom syntax that requires Babel plugins (only 3 files affected), the game still works as if nothing happened.

• Looking back, I feel that I made the right bet: I used ESnext syntax very conservatively — I waited for it to turn into, say, stage 3 before using it. I don’t use stage 0 stuff in this project.

• While Babel is not used here anymore, I still have a deep appreciation for the Babel project (we’ve used it since when it was still called 6to5), as it helped shape the JavaScript language to where we are today.

Scope

This PR:

• Makes this project use TypeScript to transpile JavaScript instead of Babel.

• Updates the configuration to remove support for non-ES6 browsers.

• DOES NOT convert any file to TypeScript; it only replaces Babel with TypeScript compiler.

Remaining issues

• Code coverage in Karma

  Before: Use babel-plugin-istanbul to add instrumentation code.

  After: Use istanbul-instrumenter-loader (which under the hood uses istanbul-lib-instrument which under the hood uses babel and babel-plugin-istanbul)

[codecov-io]

Codecov Report

Merging #512 into master will decrease coverage by 0.55%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master     #512      +/-   ##
==========================================
- Coverage    84.1%   83.55%   -0.56%     
==========================================
  Files         171      171              
  Lines        5387     5400      +13     
  Branches        1        1              
==========================================
- Hits         4531     4512      -19     
- Misses        856      888      +32

Impacted Files	Coverage Δ
src/bootstrap/index.js	75% <ø> (ø)	⬆️
src/scintillator/resources.js	83.33% <0%> (-16.67%)	⬇️
src/wait-until/index.js	85.71% <0%> (-14.29%)	⬇️
src/game/audio/wave-factory.js	92% <0%> (-8%)	⬇️
src/utils/callbacks.js	84.61% <0%> (-7.06%)	⬇️
src/scintillator/compiler.js	93.54% <0%> (-6.46%)	⬇️
src/music-collection/preprocessCollection.js	33.33% <0%> (-4.17%)	⬇️
src/app/song-loader/index.js	86.66% <0%> (-3.34%)	⬇️
src/game/loaders/samples-loader.js	94.11% <0%> (-3.11%)	⬇️
src/omni-input/index.js	93.47% <0%> (-3.08%)	⬇️
... and 109 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 154f665...b2dc544. Read the comment docs.