如何观看和编译所有TypeScript源代码？

Question

我想将一个宠物项目转换为TypeScript，并且似乎无法使用tsc实用程序来观看和编译我的文件。该帮助说我应该使用-w开关，但它看起来好像不能以递归方式观察和编译某个目录中的所有*.ts文件。这似乎是tsc应该能够处理的事情。我有什么选择？

Answer 1

创建一个名为项目中的根tsconfig.json文件，包括在它下面几行：

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

请注意是outDir应该是接收已编译的JS文件的目录的路径，并且应该是路径为rootDir包含源文件（.ts）的目录。

打开一个终端，运行tsc -w，它会编译任何.ts文件src目录为.js，并将它们存储在ts-built目录。

Answer 2

从技术上讲，你这里有几个选择：

如果您使用的是像崇高文字的IDE和集成的MSN插件打字稿：http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx您可以创建一个构建系统，自动编译.ts源.js。以下是你如何做到的解释：How to configure a Sublime Build System for TypeScript。

您可以定义甚至将源代码编译到目标.js文件保存。在github上有一个崇高的软件包：https://github.com/alexnj/SublimeOnSaveBuild这使得这种情况发生，只有你需要在SublimeOnSaveBuild.sublime-settings文件中包含ts扩展名。

另一种可能性是在命令行中编译每个文件。您可以通过使用如下空格分隔多个文件来立即编译多个文件：tsc foo.ts bar.ts。检查此线程：How can I pass multiple source files to the TypeScript compiler?，但我认为第一个选项更方便。

Answer 3

tsc编译器只会监视您在命令行上传递的那些文件。它将而不是观看使用/// <sourcefile>参考文件包含的文件。如果您使用bash的工作，你可以使用find递归找到所有*.ts和编译文件：

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

Answer 4

今天我设计的这个蚂蚁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" 
    /> 

它在PureMVC for TypeScript我当时用Webstorm工作的项目中使用。

Answer 5

tsc 0.9.1.1似乎没有手表功能。

你可以使用一个PowerShell的脚本就像我在这篇帖子中的一个：

Automatically watch and compile TypeScript files

Answer 6

考虑使用咕噜自动执行此，有无数的教程左右，但这里有一个快速启动。

对于一个文件夹结构，如：

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 

有了软件包。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']); 
} 

Answer 7

TypeScript 1.5 beta引入了对称为tsconfig.json的配置文件的支持。在该文件中，您可以配置编译器，定义代码格式化规则，更重要的是为您提供有关项目中TS文件的信息。

一旦正确配置，您可以简单地运行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文件。请注意，您还可以使用数组的“排除”属性排除文件。

欲了解更多信息，请参阅文档：http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Answer 8

您可以观看所有文件这样

tsc *.ts --watch