How to watch and compile all TypeScript sources?

Question

I'm trying to convert a pet project to TypeScript and don't seem to be able to use the tsc utility to watch and compile my files. The help says I should use the -w switch, but it looks like it can't watch and compile all *.ts files in the some directory recursively. This seems like something tsc should be able to handle. What are my options?

Answer 1

Create a file named tsconfig.json in your project root and include following lines in it:

{     "compilerOptions": {         "emitDecoratorMetadata": true,         "module": "commonjs",         "target": "ES5",         "outDir": "ts-built",         "rootDir": "src"     } } 

Please note that outDir should be the path of the directory to receive compiled JS files, and rootDir should be the path of the directory containing your source (.ts) files.

Open a terminal and run tsc -w, it'll compile any .ts file in src directory into .js and store them in ts-built directory.

Answer 2

TypeScript 1.5 beta has introduced support for a configuration file called tsconfig.json. In that file you can configure the compiler, define code formatting rules and more importantly for you, provide it with information about the TS files in your project.

Once correctly configured, you can simply run the tsc command and have it compile all the TypeScript code in your project.

If you want to have it watch the files for changes then you can simply add --watch to the tsc command.

Here's an example tsconfig.json file

{
"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false
},
"include": [
    "**/*"
],
"exclude": [
    "node_modules",
    "**/*.spec.ts"
]}

In the example above, I include all .ts files in my project (recursively). Note that you can also exclude files using an "exclude" property with an array.

For more information, refer to the documentation: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html