Here, I am going to break down the steps needed to start programming ExpressJs applications with TypeScript. If you don't have Visual Studio Code, you can download it from Microsoft's site here.
First, fork or download czechboy0's github project https://github.com/czechboy0/Express-4x-Typescript-Sample. This project provides a base ExpressJs application ported to TypeScript. Open the project using Visual Studio Code.
Next, execute npm install to download and install all package dependencies
$ npm install
$ ./node_modules/.bin/tsd reinstall -so
Next, we need to configure the build task for Visual Studio Code to tell it what commands to run on build. Since this is a TypeScript application, we will configure the build task to invoke the TypeScript transplicer tsc.
To open the task configuration settings, press Ctrl+Shift+B in Visual Studio Code. The first time you invoke this command, Visual Studio Code will inform you that no current configuration exists and asks if you want to create one. Click on 'Configure Task Runner' to set this up.
This opens up the tasks.json file with default configurations.
The "command" attribute specifies the TypeScript complier to call. If you have tsc globally installed, you can leave it as the default value. Otherwise, specify the path to the TypeScript compiler. Next, configure the "args" section to pass in the options to the TypeScript compiler to create sourcemaps, to use commonjs module configuration and specify the start file as ./bin/www.ts
Click Ctrl+Shit+B again to start the build task. On successful build, you will see the corresponding .js files transpliced from the .ts files.
To debug the application, click on the debug tab on Visual Studio Code and click on the play button.
The first time you invoke this command, Visual Studio Code will open the launch.json file. Here, configure the start file as ./bin/www.ts and set sourceMap to true in order to enable debugging using TypeScript.
Click on play button again to launch the application. You can then navigate to http://localhost:3000 to see your application.
Create a file settings.json under the .settings folder (.vscode for newer version of Visual Studio Code) and enter the following section to hide the transpliced js files from the project folder view.
As soon as you save the settings file, the project folder will refresh to exclude the transpliced js files.
In future articles, we'll cover adding further automation to our project for building and running unit tests.
Was this useful?
Have questions? We have answers. Contact us, we are glad to help!
Spread the word if you found this useful! Tweet us at @thelatestbrian and @yanamegainfo
Other articles you may be interested in:
- Directives - Part 1
- Angular JS and Scope
- Angular JS and Dependency Injection
- Angular Directives And Hooking into Google Maps API
Have a topic you'll like us to cover? Send us a message on Twitter!