如何观看和编译所有的TypeScript源代码?
我试图将一个宠物项目转换为TypeScript,似乎无法使用tsc
实用程序来观看和编译我的文件。 该帮助说我应该使用-w
开关,但它看起来像无法观察和编译在某些目录中的所有*.ts
文件recursion。 这似乎是tsc
应该能够处理的东西。 我有什么select?
在您的项目根目录下创build一个名为tsconfig.json
的文件,并在其中包含以下几行:
{ "compilerOptions": { "emitDecoratorMetadata": true, "module": "commonjs", "target": "ES5", "outDir": "ts-built", "rootDir": "src" } }
请注意 , outDir
应该是接收已编译的JS文件的path,而rootDir
应该是包含源文件(.ts)的目录的path。
打开一个terminal并运行tsc -w
,它会将src
目录中的任何.ts
文件编译成.js
文件,并将它们存储在ts-built
目录中。
TypeScript 1.5 beta引入了对称为tsconfig.json的configuration文件的支持。 在该文件中,您可以configuration编译器,定义代码格式化规则,更重要的是为您提供有关项目中TS文件的信息。
一旦configuration正确,您可以简单地运行tsc命令并让它编译项目中的所有TypeScript代码。
如果你想让它看着文件的变化,那么你可以简单地将–watch添加到tsc命令。
这是一个tsconfig.json文件的例子
{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": false, "noImplicitAny": false, "removeComments": true, "noLib": false }, "include": [ "**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ]}
在上面的例子中,我将所有.ts文件包含在我的项目中(recursion地)。 请注意,您也可以使用数组的“排除”属性排除文件。
有关更多信息,请参阅文档: http : //www.typescriptlang.org/docs/handbook/tsconfig-json.html
从技术上讲,您在这里有几个select:
如果您正在使用像Sublime Text这样的IDE,并且为Typescript使用了整合的MSN插件: http : //blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled。 aspx你可以创build一个构build系统,将.ts
源自动编译为.js
。 下面是解释如何做到这一点: 如何为TypeScriptconfigurationSublime Build System 。
您甚至可以定义将源代码编译为保存文件时的目标.js
文件。 在github上有一个sublime包: https : //github.com/alexnj/SublimeOnSaveBuild ,这样做只有你需要在SublimeOnSaveBuild.sublime-settings
文件中包含ts
扩展名。
另一种可能性是在命令行中编译每个文件。 你可以一次编译多个文件,把它们分隔开来,如下所示: tsc foo.ts bar.ts
检查此线程: 如何将多个源文件传递给TypeScript编译器? ,但我认为第一个select是更方便。
tsc编译器只会看你在命令行上传递的那些文件。 它不会监视使用/// <sourcefile>
引用包含的/// <sourcefile>
。 如果你使用bash,你可以使用findrecursion查找所有*.ts
文件并编译它们:
find . -name "*.ts" | xargs tsc -w
看看使用grunt自动化这个,有很多的教程,但是这里有一个快速的开始。
对于像这样的文件夹结构:
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
用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']); }
TSC 0.9.1.1似乎没有手表function。
你可以使用一个PowerShell脚本,就像我在这个post中所做的那样:
自动监视和编译TypeScript文件
今天我devise了这个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>
在你的构build文件中使用它:
<!-- 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中使用。