Typescript confuses me.
hehe, I feel your pain! I spent weeks trying to figure out how to get a basic dev setup that covered all the typical needs like correct line reporting on errors, testing, etc.
There are professional projects (e.g. from Mozilla and Facebook) that try to deal with this ecosystem-nightmare - like https://neutrino.js.org/ - but I just felt they were making other non-ideal choices and didn't really cover what I needed.
So I put together yet another boilerplate which is ultimately geared more for web-game stuff. It includes a bunch of unnecessary goodies like protobuf compilation, webworkers, media transcoding, etc.
The full version is here: https://github.com/dakom/html5-boilerplate
For new projects that don't need all that fluff, which is probably every project at first, and typescript-tinkering, I checkout the barebones branch (git checkout barebones) which looks like this: https://github.com/dakom/html5-boilerplate/tree/barebones
Once you have that, you can just delete everything in src/app/AppInit.ts and replace it with what's here.
With that in mind, full instructions could be this:
One-time setup part
1) git clone git@github.com:dakom/html5-boilerplate.git
2) cd html5-boilerplate
3) git checkout barebones
(confirm all the fluff was deleted - e.g. folders cordova, media-source, cdn, proto-source, etc.)
4) npm install
(this will auto-install all the core dependencies, locally. will take a few minutes but it's a one-time thing)
5) npm install --save-dev sodiumjs
(install sodium)
6) rm -rf .git
(you're not planning to treat it as a clone of the html5-boilerplate project - you could always git init
after this point to push to some other repo. this is just a sanity check though and to save hd space - not a necessity)
From this point forward all the one-time stuff is done and you can have fun!
Maybe copy that folder to a "skeleton" somewhere- excluding node_modules which can always be resurrected via npm install
in the folder
7) edit src/app/AppInit.ts (I use VSCode for typescript stuff)
8) delete everything that's there and replace with the above code
9) npm run dev
This will run the project in "dev" mode - it will open the browser for you and automatically reload when you save changes in the ts source - though I find often enough I need to hit "reload" manually.
ADDITIONAL NOTES:
The above code only uses console.log() so to see the results you need to open "developer tools" in your browser. Though even with projects that don't rely on console.log - it's good practice since you get access to stack traces, runtime errors, etc. npm run dev
won't automatically open dev tools for you
If you want to do unit tests and see them in the browser, you can play with TestInit.ts and run npm run test:dev
instead (npm run test:dist
is for a bit of a different case - testing the actual distribution package)
The above code did not have the sodium imports which I fixed just now
The above code had an "implicit any" (i.e. no defined type in changeChannel(i)
) which I fixed just now
You can disable the "implicit any" strict type checking by editing _config/tsconfig.json and setting "noImplicitAny" to false, though I'd suggest leaving it as is unless you really need to work with js/ts that has no type definitions.