100 days of Angular 2 - Day 9: Converting the backend to TypeScript

Convert server side code from JavaScript to TypeScript

I'd like to bring Angular Universal into the project soon (before the application gets much bigger), but all of the Angular Universal code, documentation, and starter templates are written in TypeScript. Currently, my server side code consists of three files (app.js, bin/www, and routes/api.js), all written in JavaScript.

For consistency I'll first convert my app.js to app.ts before trying to bring in Angular Universal, since it's confusing to look at documentation and reference implementations in another language. I'll start with app.js and tackle routes/api.js later.

Once I renamed my app.js to app.ts I received some errors.

I fixed this by just saying err is of type any like so

var err : any = new Error('Not Found');

and that error went away.

Visual Studio Code then didn't show any more issues, but as soon as I tried to compile the app I received the following errors:

Install the declaration files

With TypeScript 2.x I needed to install the declaration files like below. Note that TypeScript 1.x does not use the npm / @types method of installing files and you'll need to use the typings or tsd tools.

I received a 404 (not found) when trying to install the declaration files for express-sanitizer. I have three options:

Option 1 - Write a declaration file for this module. The TypeScript wiki has a page on writing declaration files. It doesn't look very easy, and I'm not very familiar with the express-santizer module, seeing as I'm not the original author of it.

Option 2 - Declare the module as type :any and move on. I want a way to tell the TS compiler that I know there is no type definition for this and I accept that expressSantizer will be :any. In my app.ts it would look like this

Option 3 - Use a different third party module that has TypeScript definition files. I only needed this module to sanitize user input on one page, and there looks to be a more popular (and probably better supported) package called sanitizer that already has a TypeScript definition file -- I used the TypeScript Types Search Engine to verify that one exists.

Compilation is now a necessary step

Up until now I would run the back end (server) with the following npm script during development, as defined in my package.json

"scripts": {
"backend": "nodemon --watch server ./server/bin/www",
}

nodemon is used to watch the server/ directory and restart the server when it detects any changes to the files. This allows me to change the server logic and see the results quickly. But now I need to compile the server before restarting it!

I can't run tsc --watch because it will go and compile all the TypeScript files, including those on the front end (the Angular 2) code, which isn't necessary as they're handled with the webpack-dev-server.

What would be really nice is to specify a directory for tsc to --watch, in my case, the server/ directory. Then I could run tsc --watch concurrently with nodemon --watch which would allow me to write my server in TypeScript and get auto-restart on every file change.

This is a little puzzling as the webpack build should only be building the Angular 2 (front end) files, and the error is complaining about an express module (part of the back end), which doesn't have anything to do with the front end code.

I'm not entirely sure what's going on here.

Revert! Undo!

I attempted to revert to a previously working state on the production server by cloning the repository, checking out a previous revision from day 8, and performing a build.