TypeScript Development in Practice
.d.ts) for AngularJS and other frameworks, we were using, helped me a lot getting to know the functionality.
I started with WebStorm, which is an awesome IDE, but found it having a bug (I also encountered a similar behavior in Visual Studio) - from time to time, it would just show a pop-up that my
.ts file has been modified outside of the IDE and if I want to reload it. Reloading it basically meant loosing my changes, so not a good idea. Also using all of WebStorm's features meant, that everyone else on my team would need to have WebStorm.
Second try was to use the TypeScript compiler directly from the command line (
tsc). It has a
The Build Systems
I was wondering how people using CoffeeScript were actually solving the problem, and I found require-cs. So I thought, there has to be something similar for TypeScript. And there is - typescript-require. This is how it works:
- You install it via
npm install typescript-require
- You put
require('typescript-require');in the top of this file.
typescript-requirewill compile it on the fly.
Awesome! - However, it has some drawbacks. At the time of this writing, it has problems dealing with different directory hierarchies. So you want to keep all your files within one folder and no sub-folders (if your project is small enough this isn't too much of a limitation though). I was using it for VimFika(source code on GitHub), but ended up having a problem. I had a compile error, which I didn't notice and typescript-require just failed without any exception. Then I switched to...
Gulp with gulp-typescript is what I'm using for server. It allows to plug the already useful and powerful
tsc command into my gulp scripts (I've tried it just by executing the raw shell command before, but that didn't work too well). I use it for my sever-side code only, as I don't require there any optimization. When deploying my Rest API written in TypeScript, using ExpressJS for example, I use gulp-typescript to compile all ts files into a destination folder. You can run it from there with nodemon (or gulp-nodemon when using gulp). To deploy this (for instance to heroku) you also need to copy the
package.json file into the destination folder and deploy the destination folder, instead of your development folder.
Turns out there is an amazing generator for TypeScript working with Yeoman. If you want to have a very sophisticated build system set up for client code, with minification, bower support, ... you have to try out the gulp-angular generator. It scaffolds EVERYTHING you could dream of. With one command and few configuration steps you are ready to start writing your rich client application.
Too bad there isn't something like that for the server.
The IDE or Text Editor
I stopped using WebStorm because of the annoying little pop-up. I switched to Sublime and am staying there for now. I'm using T3S which is a great plug-in to work with TypeScript. There is an issue where the plug-in might freeze, but the latest dev branch works fine for me (yes, dev is actually behind master/ST3 branch, but that's what's working for me).
Other Editors also have TypeScript support in one form or another so maybe it is worth to look into Atom or Vim, but for now I'm happy that finally everything seems to work.