Start this barebones Typescript project creating a new directory on your filesystem. Navigate to the new directory and do
npm init --force and then
tsc --init to initalize both a npm configuration file and a Typescript configuration file.
Once you got these two files, go ahead and install Typescript as a dev dependency issuing
npm install --save-dev typescript. Use it adding to the package.json a npm script that will compile Typescript source files and watch them for changes.
Open your Typescript configuration file and edit it so it looks like the following:
You can read more about the Typescript configuration file here. Execute the start script and you’re all set to write Typescript code.
Loading the compiled code in the browser
So now you have your Typescript source being compiled and you want to load it in a browser environment. To do that, we’ll use SystemJS although there are alternatives. Go ahead and
npm install --save systemjs and also
npm install --save-dev http-server so we can load these assets over HTTP. This is a necessary step when using that module loader. You will also need to add es6-shim as a dependency since we’re targeting ES5 with our Typescript compiler configuration. Go ahead and
npm install --save-dev es6-shim @types/es6-shim.
So far, so good. Create an index.html file and place it in your project root directory. Edit it to reference the SystemJS library and configure it to load your JS files.
Pay attention to the line surrounded in comments. When I set myself to create this project an issue popped up concerning the usage of SystemJS and RxJS together at their latest versions. So at this moment it seems to be a necessary requirement to reference the tslib library along SystemJS in order to get things working properly. Note that a specific SystemJS version is also important for this solution to work. Make sure you’re referencing version 0.19.28 and take a look here for more details about it. Big up for Minko Gechev for helping me figure this out. Go ahead and
npm install --save tslib.
Finally create another npm script that will take care of spinning up our development server. The scripts property inside your package.json will then look like this.
Great! You’re all set to start tinkering with Typescript 2 and RxJS 5. Open up ./src/main.ts and add the following lines to it.
Save this file and execute
npm start to start your local server and the Typescript compiler watching for changes. Head to your browser on http://localhost:8080/, click the start button and open up the console panel. You should see a new number being logged every second.
That’s it. You now have a nice local environment to play with and learn Typescript 2 and RxJS 5. You can also find a complete woking example here. Comment bellow and let me know what you think. Have fun!