如何监视和编译所有 TypeScript 源代码？

从技术上讲，你有几个选择:

如果您正在使用一个 IDE，如 Sublime Text 和集成的 MSN 插件的 Typecript: http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx，您可以创建一个构建系统，自动编译 .ts源代码到 .js。下面是如何做到这一点的解释: 如何为 TypeScript 配置升华生成系统。

您甚至可以在文件保存时定义将源代码编译到目标 .js文件。在 github: https://github.com/alexnj/SublimeOnSaveBuild上有一个令人赞叹的包，它可以实现这一点，只是您需要在 SublimeOnSaveBuild.sublime-settings文件中包含 ts扩展。

另一种可能性是在命令行中编译每个文件。您甚至可以一次编译多个文件，方法是使用如下的空格将它们分隔开: tsc foo.ts bar.ts。检查这个线程: 如何将多个源文件传递给 TypeScript 编译器？，但我认为第一个选项更方便。

Tsc 编译器将只监视在命令行上传递的那些文件。它将使用 /// <sourcefile>引用包含 没有监视文件。如果使用 bash，可以使用 find 递归地查找所有 *.ts文件并编译它们:

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

今天我设计这个 Ant MacroDef 是为了解决和你们一样的问题:

    <!--
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>

在构建文件中使用:

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

它用在我当时正在使用 Webstorm 进行的 用于 TypeScript 的 PureMVC项目中。

Tsc 0.9.1.1似乎没有 看好了特性。

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 >

参考: 自动监视和编译 TypeScript 文件 。

Look into using grunt to automate this, there are numerous tutorials around, but here's a quick start.

文件夹结构如下:

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

你可以很容易地从示例文件夹中观看和处理打字稿:

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"
}
}

还有一个粗重的文件:

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']);
}

在项目根目录中创建一个名为 tsconfig.json的文件，并在其中包含以下代码行:

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

请注意: outDir应该是接收已编译 JS 文件的目录的路径，而 rootDir应该是包含源代码的目录的路径(。文件。