如何观看和编译所有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应该是包含源文件的目录的路径（。 ）文件。

打开一个终端并运行tsc -w，它将.ts目录中的任何src文件编译成.js并将它们存储在ts-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

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

如果您正在使用类似Sublime Text的IDE和用于Typescript的集成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上托管了一个sublime软件包：https://github.com/alexnj/SublimeOnSaveBuild实现了这一点，只需要在ts文件中包含SublimeOnSaveBuild.sublime-settings扩展名。

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

Answer 4

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

{% block javascripts_footer %}
    {{ parent() }}
    <script>
        $(document).ready(){
            var datesCount = {{ form|length }};           
            $(function () {
               $('#add-another-email').click(function(e) {
                   ...
                });
            });
        });
    </script>
{% endblock %}

Answer 5

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

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

Answer 6

考虑使用grunt自动执行此操作，有很多教程，但这是一个快速入门。

对于像<：p>这样的文件夹结构

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

... 监视更改的文件并根据需要进行编译。 The documentation explains：

<块引用>

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

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

<块引用>

在节点中不支持递归目录观察的平台上的目录观察，通过使用TSC_WATCHDIRECTORY选择的不同选项为子目录递归创建目录观察器来支持

Answer 8

tsc 0.9.1.1似乎没有 watch 功能。

您可以使用类似以下的PowerShell脚本：

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

价： Automatically watch and compile TypeScript files

Answer 9

今天我设计了这个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进行的项目PureMVC for TypeScript中使用。

Answer 10

编辑：注意，这是如果您的打字稿源中有多个tsconfig.json文件。对于我的项目，我们将每个tsconfig.json文件编译为一个不同名称的.js文件。这使得观看每个打字稿文件确实非常容易。

我编写了一个漂亮的bash脚本，该脚本查找所有tsconfig.json文件并在后台运行它们，然后如果您在终端上按CTRL + C，它将关闭所有正在运行的打字稿监视命令。

这已在MacOS上进行了测试，但在支持BASH 3.2.57的任何地方都可以使用。将来的版本可能已经改变了一些事情，所以要小心！

#!/bin/bash
# run "chmod +x typescript-search-and-compile.sh" in the directory of this file to ENABLE execution of this script
# then in terminal run "path/to/this/file/typescript-search-and-compile.sh" to execute this script
# (or "./typescript-search-and-compile.sh" if your terminal is in the folder the script is in)

# !!! CHANGE ME !!!    
# location of your scripts root folder
# make sure that you do not add a trailing "/" at the end!!
# also, no spaces! If you have a space in the filepath, then
# you have to follow this link: https://stackoverflow.com/a/16703720/9800782
sr=~/path/to/scripts/root/folder
# !!! CHANGE ME !!!

# find all typescript config files
scripts=$(find $sr -name "tsconfig.json")

for s in $scripts
do
    # strip off the word "tsconfig.json"
    cd ${s%/*} # */ # this function gets incorrectly parsed by style linters on web
    # run the typescript watch in the background
    tsc -w &
    # get the pid of the last executed background function
    pids+=$!
    # save it to an array
    pids+=" "
done

# end all processes we spawned when you close this process
wait $pids

有用的资源：

• bash: interpret string variable as file name/path
• A variable modified inside a while loop is not remembered
• https://www.cyberciti.biz/faq/search-for-files-in-bash/
• https://opensource.com/article/18/5/you-dont-know-bash-intro-bash-arrays
• https://linuxize.com/post/bash-concatenate-strings/
• https://www.cyberciti.biz/faq/bash-for-loop/
• https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
• https://unix.stackexchange.com/questions/144298/delete-the-last-character-of-a-string-using-string-manipulation-in-shell-script
• What are the special dollar sign shell variables?

Answer 11

在 linux 中我使用：

tsc -w $(find . | grep .ts)

这将监视当前目录下的每个打字稿文件。