如何观看和编译所有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.jsts-built

Answer 2

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文件(递归).请注意,您还可以使用带有数组的"exclude"属性排除文件.

有关更多信息,请参阅文档:http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Answer 3

你可以看到这样的所有文件

tsc *.ts --watch

Answer 4

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

如果您使用的是像Sublime Text这样的IDE和用于Typescript的集成MSN插件:http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled. aspx你可以创建一个自动编译.ts源代码的构建系统.js.以下是如何执行此操作的说明:如何为TypeScript配置Sublime构建系统.

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

另一种可能性是在命令行中编译每个文件.您可以通过用以下空格分隔它们来一次编译多个文件:tsc foo.ts bar.ts.检查此线程:如何将多个源文件传递给TypeScript编译器？,但我认为第一种选择更方便.

Answer 5

tsc编译器只会监视您在命令行上传递的文件.它不会监视使用/// <sourcefile>引用包含的文件.如果你使用bash,你可以使用find递归查找所有*.ts文件并编译它们:

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

Answer 6

考虑使用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']);
}

Answer 7

其他答案可能在几年前有用，但现在已经过时了。

鉴于一个项目有一个tsconfig文件，运行这个命令...

tsc --watch

...监视更改的文件并根据需要进行编译。文档解释了：

在监视模式下运行编译器。观察输入文件并在更改时触发重新编译。可以使用环境变量配置监视文件和目录的实现。有关更多详细信息，请参阅配置手表。

要回答最初的问题，即使在没有本机支持的平台上也可以进行递归目录监视，如配置监视文档所述：

在节点中不支持递归目录本地监视的平台上的目录监视是通过使用 TSC_WATCHDIRECTORY 选择的不同选项为子目录递归创建目录监视程序来支持的