Refactor to Modern Typescript + TSLint + Prettier

[damassi]

This PR lightly refactors the app into a modern idiomatic typescript form, and adds some nice project hygiene tools that are often seen in the JS ecosystem.

Overview of changes

• Removed namespaces in favor of formal import statements so that things are more modular and scalable:

  import { foo } from './bar'

• Added TSLint for linting during development

• Added Prettier for automatic code formatting

• Added @types/.. definitions which are automatically read in by VSCode; no need to use /// refs

• Added an extensions.json and settings.json file for VSCode and included TSLint and Prettier so that as code is written it's checked and formatted on the fly after save

• Added lint-staged, a library which connects to git precommit and push hooks so that errors aren't checked into the repo. On commit it will run TSLint and Prettier, and on push it will run the typechecker to ensure code is valid

• Added a webpack.config file for bundling up typescript for web. Typescript by default doesn't know how to bundle code that uses ES6 modules and so webpack is the tool that packages it all up for distribution.

• Fixed sourcemap support

In terms of actual code changes, most of the diff is Prettier being run over the sources and TSLint being run with --fix (which automatically fixes common issues; let to const, for example, if the variable isn't reassigned). Actual code changes only relate to swapping namespaces for imports and adding some tooling.

In terms of deploying changes, the same process applies as before -- npm run dev will watch the project and output a file in the /docs folder. I've added an additional npm run build:dist command that will minify output, but didn't connect that to anything, it's just there if you think the bundle size is too large and want to bring it down for consumers. Webpack handles minification and sourcemaps, which is determined based on whether the NODE_ENV is set to development or production.

To take PR for a spin:

git checkout -b damassi-refactor-typescript master
git pull https://github.com/damassi/gtr-cof.git refactor-typescript
npm install 
npm run dev

I've added further comments inline.

[mikehadlow]

Hi Christopher, thanks for the work you've put into this, I really appreciate it. I'm pretty new to Typescript and I've really only used it for this project, so there's a lot for me to digest here. I'm also, unfortunately, super busy at the moment, so it may take me a while to look at it, I hope that's OK.

[damassi]

Np! Just want to note that the actual typescript changes are very minimal (remove namespaces) and that this PR mostly has to do with general application dev workflows (linting, codeformatting, making sure that errors aren't checked in to git, configuring VSCode a bit, etc), which improves productivity. The diff is mostly Prettier (which works like Golang's go-fmt, or Scala's ScalaFmt) which you can play with on the playground. Taking out Prettier's formatting, the change count would be fairly small, but Prettier is pretty standard these days since it eliminates so much futzing with code.

But yeah, no rush!

https://prettier.io/playground/