A TypeScript Project in Visual Studio Code, Part 2

Neither President Nixon nor his beloved wife Patricia favored weakly typed languages.

Picking up where we left off. I was out with the flu for a few days, so when I started up my project that attaches to Chrome on port 9222 and is supposed to debug, and nothing worked, took me a bit to realize, I had to load the local index.html to have something to debug. Blush. Then we were back to normal. (I’m a C/Objective-C/Swift/C# developer, so not really an HTML/CSS expert, although, who knows, I may head in that direction if it’s as much fun as TypeScript.)

By the way- why is it called TypeScript? Because you can type it? Nooooooo, it’s because it introduces the concept of typed parameters and and variables into pure JavaScript. I have a lot of respect for JavaScript, and you can spell that f-e-a-r, because of the number of errors it’s possible to introduce without strong typing, and I’m chasing it now because TypeScript seems to promise to fix that problem. I admire its functional capability almost as much as I regret that they had to work the word ‘Java’ into the name of the language, when it ain’t Java. It was also hard to come to a language where the most famous book was called ‘The Good Parts’ because there were so many bad parts. After a couple of years of mucking through the chameleonlike Swift language, I’m less bothered by this.

Anyway. Now we’ll modify the launch.json to combine all this into one step.

{

Side by side, those are the two launch configuration I set up. Once just attaches to a running instance of chrome and assumes the index.html is already loaded, then fires off a message to the console on the loadWindow event from the browsers.

The second fires off the browser and loads the webpage itself, so it saves you that step. Pretty nifty.

Now let’s take a look at Grunt (might as well, I’ve already been playing with Gulp, it’s sort-of-descendant which keeps things in memory, whereas Grunt apparently is a belt and suspenders sort of task system that leaves lots of paper trails, is a bit slower, but somewhat, I am guessing, easier to debug.)

The idea with Grunt, especially handy if you’re working from a simple text editor and the command line tsc command, is that it watches your files and performs compiles, builds and tests on demand.

First thing to notice, Grunt can’t be installed globally-it has to be installed for your project, so that means creating a packages .json file in the root project directory. Remember, the way you create packages.json is with

npm init

and then follow the prompts, which you can probably just press <enter> and take the defaults for. Kind of like a github init.

Then I have

{

and now I can install Grunt. First, the command line interface,

npm install -g grunt-cli

so I can Grunt from my command line.

Then install the grunt files in my project directory

npm install grunt --save-dev

which installed about 90 files in subdirectory node_modules in my main project directory. By the way, it’s — save-dev that installs a local version of Grunt. If you do it this way then various projects can use their own versions of Grunt, and you avoid having to upgrade all your projects everytime Grunt makes a great leap forward.

then you also need

npm install grunt-exec --save-dev
npm install grunt-contrib-watch --save-dev

The next step is to create a GruntFile.js file, a JavaScript file, that will specifiy the parameters for Grunt when it’s running and watching your project directory: which set of files it’s watching, and what to do with them (in this case, run tsc and compile them, e.g. turn the TypeScript into JavaScript).

It worked well, I just added a space to a line…

and Grunt watcher picked up the (pretty trivial) change and recompiled the files on file-save. Nice. Of course, there are whole books on grunt and this just scratches the surface.

Wrapping up tools and moving on to language specifics. For those following, if I’m not shouting in the dark, and even if I am, this is following MASTERING TYPESCRIPT SECOND EDITION by Nathan Rozentals. Seems to be a pretty solid book, matching the state of the tech with book content, and solid helpful material from the author. Applause to Nathan.

Onto the language.

More Neanderthal DNA markers than 95 % of 23andMe customers. Don’t give me your pro-Cro-Magnon propaganda.