Как смотреть и компилировать все источники TypeScript?

Я пытаюсь преобразовать проект любителя в TypeScript и, похоже, не могу использовать утилиту tsc для просмотра и компиляции моих файлов. В справке говорится, что я должен использовать переключатель -w, но похоже, что он не может смотреть и компилировать все *.ts файлы в некотором каталоге рекурсивно. Кажется, что что-то tsc должно быть в состоянии справиться. Каковы мои варианты?

ОТВЕТЫ

Ответ 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.

Ответ 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 в свой проект (рекурсивно). Обратите внимание, что вы также можете исключить файлы, используя свойство "исключить" с массивом.

Для получения дополнительной информации см. документацию: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Ответ 3

С технической точки зрения у вас есть несколько вариантов:

Если вы используете среду IDE, такую ​​как Sublime Text и встроенный плагин MSN для Typescript: http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx, вы можете создать систему сборки которые автоматически скомпилируют источник .ts в .js. Вот объяснение, как вы можете это сделать: Как настроить Sublime Build System для TypeScript.

Вы можете определить даже для компиляции исходного кода в файл назначения .js при сохранении файла. В github есть возвышенный пакет: https://github.com/alexnj/SublimeOnSaveBuild, чтобы это произошло, вам нужно включить расширение ts в SublimeOnSaveBuild.sublime-settings.

Другая возможность заключается в компиляции каждого файла в командной строке. Вы можете скомпилировать сразу несколько файлов, разделив их на такие пробелы: tsc foo.ts bar.ts. Проверьте эту тему: Как передать несколько исходных файлов в компилятор TypeScript?, но я думаю, что первый вариант более удобен.

Ответ 4

Компилятор tsc будет наблюдать только те файлы, которые вы передаете в командной строке. Он не будет просматривать файлы, которые включены с помощью ссылки /// <sourcefile>. Если вы работаете с bash, вы можете использовать find для рекурсивного поиска всех файлов *.ts и скомпилировать их:

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

Ответ 5

Посмотрите на использование 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

Вы легко можете смотреть и работать с typescript из папки с примерами:

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

И файл grunt:

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

Ответ 7

Сегодня я разработал этот 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"
    />

Он используется в проекте PureMVC для TypeScript Я работаю в то время, используя Webstorm.

Ответ 8

вы можете смотреть все файлы, подобные этому

tsc *.ts --watch