How to watch and compile all TypeScript sources?

Question

I am trying to convert an amateur project to TypeScript and it seems like I cannot use the tsc utility to view and compile my files. The help says that I should use the -w , but it looks like it cannot watch and compile all *.ts files in some directory recursively. It seems that something tsc should be able to handle. What are my options?

Answer 1

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

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

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

Open a terminal and run tsc -w , it will compile any .ts file in the src directory in .js and save them in the ts-built directory.

Answer 2

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

After properly configured, you can simply run the tsc command and compile all TypeScript code in your project.

If you want it to look at files for changes, you can simply add --watch to the tsc command.

Here is 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 above example, I include all the .ts files in my project (recursively). Note that you can also exclude files using the exclude property with an array.

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

Answer 3

From a technical point of view, you have several options:

If you are using an IDE such as Sublime Text and the built-in MSN plugin for Typescript: http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript -enabled.aspx , you can create a build system that will automatically compile the .ts source into .js . Here is an explanation of how you can do this: How to set up the Sublime Build System for TypeScript .

You can even define to compile the source code into the .js destination file when saving the file. There is an elevated package on github: https://github.com/alexnj/SublimeOnSaveBuild , for this to happen, you need to enable the ts extension in SublimeOnSaveBuild.sublime-settings .

Another possibility is to compile each file on the command line. You can compile several files at once, dividing them into such spaces: tsc foo.ts bar.ts Check this topic: How do I pass multiple source files to the TypeScript compiler? but I think the first option is more convenient.

Answer 4

The tsc compiler will only watch the files that you transfer on the command line. It will not view files that are included using the /// <sourcefile> . If you work with bash, you can use find to recursively search all *.ts files and compile them:

 find . -name "*.ts" | xargs tsc -w 

Answer 5

Look at using grunt to automate this, there are many tutorials, but here's a quick start.

For folder structure, for example:

 blah/ blah/one.ts blah/two.ts blah/example/ blah/example/example.ts blah/example/package.json blah/example/Gruntfile.js blah/example/index.html 

You can easily watch and work with typescript from the examples folder:

 npm install grunt 

With package.json package:

 { "name": "PROJECT", "version": "0.0.1", "author": "", "description": "", "homepage": "", "private": true, "devDependencies": { "typescript": "~0.9.5", "connect": "~2.12.0", "grunt-ts": "~1.6.4", "grunt-contrib-watch": "~0.5.3", "grunt-contrib-connect": "~0.6.0", "grunt-open": "~0.2.3" } } 

And the grunt file:

 module.exports = function (grunt) { // Import dependencies grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-open'); grunt.loadNpmTasks('grunt-ts'); grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), connect: { server: { // <--- Run a local server on :8089 options: { port: 8089, base: './' } } }, ts: { lib: { // <-- compile all the files in ../ to PROJECT.js src: ['../*.ts'], out: 'PROJECT.js', options: { target: 'es3', sourceMaps: false, declaration: true, removeComments: false } }, example: { // <--- compile all the files in . to example.js src: ['*.ts'], out: 'example.js', options: { target: 'es3', sourceMaps: false, declaration: false, removeComments: false } } }, watch: { lib: { // <-- Watch for changes on the library and rebuild both files: '../*.ts', tasks: ['ts:lib', 'ts:example'] }, example: { // <--- Watch for change on example and rebuild files: ['*.ts', '!*.d.ts'], tasks: ['ts:example'] } }, open: { // <--- Launch index.html in browser when you run grunt dev: { path: 'http://localhost:8089/index.html' } } }); // Register the default tasks to run when you run grunt grunt.registerTask('default', ['ts', 'connect', 'open', 'watch']); } 

Answer 6

tsc 0.9.1.1 does not seem to have a view function.

you could use a PowerShell script like the one I made in this post:

Automatically view and compile TypeScript files

Answer 7

Today I developed this Ant MacroDef for the same problem as yours:

  <!-- Recursively read a source directory for TypeScript files, generate a compile list in the format needed by the TypeScript compiler adding every parameters it take. --> <macrodef name="TypeScriptCompileDir"> <!-- required attribute --> <attribute name="src" /> <!-- optional attributes --> <attribute name="out" default="" /> <attribute name="module" default="" /> <attribute name="comments" default="" /> <attribute name="declarations" default="" /> <attribute name="nolib" default="" /> <attribute name="target" default="" /> <sequential> <!-- local properties --> <local name="out.arg"/> <local name="module.arg"/> <local name="comments.arg"/> <local name="declarations.arg"/> <local name="nolib.arg"/> <local name="target.arg"/> <local name="typescript.file.list"/> <local name="tsc.compile.file"/> <property name="tsc.compile.file" value="@{src}compile.list" /> <!-- Optional arguments are not written to compile file when attributes not set --> <condition property="out.arg" value="" else='--out "@{out}"'> <equals arg1="@{out}" arg2="" /> </condition> <condition property="module.arg" value="" else="--module @{module}"> <equals arg1="@{module}" arg2="" /> </condition> <condition property="comments.arg" value="" else="--comments"> <equals arg1="@{comments}" arg2="" /> </condition> <condition property="declarations.arg" value="" else="--declarations"> <equals arg1="@{declarations}" arg2="" /> </condition> <condition property="nolib.arg" value="" else="--nolib"> <equals arg1="@{nolib}" arg2="" /> </condition> <!-- Could have been defaulted to ES3 but let the compiler uses its own default is quite better --> <condition property="target.arg" value="" else="--target @{target}"> <equals arg1="@{target}" arg2="" /> </condition> <!-- Recursively read TypeScript source directory and generate a compile list --> <pathconvert property="typescript.file.list" dirsep="\" pathsep="${line.separator}"> <fileset dir="@{src}"> <include name="**/*.ts" /> </fileset> <!-- In case regexp doesn't work on your computer, comment <mapper /> and uncomment <regexpmapper /> --> <mapper type="regexp" from="^(.*)$" to='"\1"' /> <!--regexpmapper from="^(.*)$" to='"\1"' /--> </pathconvert> <!-- Write to the file --> <echo message="Writing tsc command line arguments to : ${tsc.compile.file}" /> <echo file="${tsc.compile.file}" message="${typescript.file.list}${line.separator}${out.arg}${line.separator}${module.arg}${line.separator}${comments.arg}${line.separator}${declarations.arg}${line.separator}${nolib.arg}${line.separator}${target.arg}" append="false" /> <!-- Compile using the generated compile file --> <echo message="Calling ${typescript.compiler.path} with ${tsc.compile.file}" /> <exec dir="@{src}" executable="${typescript.compiler.path}"> <arg value="@${tsc.compile.file}"/> </exec> <!-- Finally delete the compile file --> <echo message="${tsc.compile.file} deleted" /> <delete file="${tsc.compile.file}" /> </sequential> </macrodef> 

Use it in the build file with:

  <!-- Compile a single JavaScript file in the bin dir for release --> <TypeScriptCompileDir src="${src-js.dir}" out="${release-file-path}" module="amd" /> 

It is used in the PureMVC project for TypeScript. I am working at that time using Webstorm.

Answer 8

you can watch all files like this

 tsc *.ts --watch