问题
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?
回答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.
回答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
回答3:
you can watch all files like this
tsc *.ts --watch
回答4:
Technically speaking you have a few options here:
If you are using an IDE like Sublime Text and integrated 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 which compile the .ts source to .js automatically. Here is the explanation how you can do it: How to configure a Sublime Build System for TypeScript.
You can define even to compile the source code to destination .js file on file save. There is a sublime package hosted on github: https://github.com/alexnj/SublimeOnSaveBuild which make this happen, only you need to include the ts extension in the SublimeOnSaveBuild.sublime-settings file.
Another possibility would be to compile each file in the command line. You can compile even multiple files at once by separating them with spaces like so: tsc foo.ts bar.ts. Check this thread: How can I pass multiple source files to the TypeScript compiler?, but i think the first option is more handy.
回答5:
The tsc compiler will only watch those files that you pass on the command line. It will not watch files that are included using a /// <sourcefile> reference. If your working with the bash, you could use find to recursively find all *.ts files and compile them:
find . -name "*.ts" | xargs tsc -w
回答6:
Look into using grunt to automate this, there are numerous tutorials around, but here's a quick start.
For a folder structure like:
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 watch and work with typescript easily from the example folder with:
npm install
grunt
With package.json:
{
"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 a 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']);
}
回答7:
tsc 0.9.1.1 does not seem to have a watch feature.
You could use a PowerShell script like the one:
#watch a directory, for changes to TypeScript files.
#
#when a file changes, then re-compile it.
$watcher = New-Object System.IO.FileSystemWatcher
$watcher.Path = "V:\src\MyProject"
$watcher.IncludeSubdirectories = $true
$watcher.EnableRaisingEvents = $true
$changed = Register-ObjectEvent $watcher "Changed" -Action {
if ($($eventArgs.FullPath).EndsWith(".ts"))
{
$command = '"c:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" "$($eventArgs.FullPath)"'
write-host '>>> Recompiling file ' $($eventArgs.FullPath)
iex "& $command"
}
}
write-host 'changed.Id:' $changed.Id
#to stop the watcher, then close the PowerShell window, OR run this command:
# Unregister-Event < change Id >
Ref: Automatically watch and compile TypeScript files.
回答8:
Today I designed 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 your 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 project PureMVC for TypeScript I'm working on at the time using Webstorm.
来源：https://stackoverflow.com/questions/12799237/how-to-watch-and-compile-all-typescript-sources