javascript - official - ¿Cómo mirar y compilar todas las fuentes de TypeScript?

typescript version

Question

Estoy tratando de convertir un proyecto mascota a TypeScript y no parezco poder usar la utilidad tsc para mirar y compilar mis archivos. La ayuda dice que debería usar el -w , pero parece que no puede ver y compilar todos los archivos *.ts en el directorio de forma recursiva. Esto parece algo que tsc debería ser capaz de manejar. ¿Cuáles son mis opciones?

Answer 1

Considere utilizar el ronco para automatizar esto, existen numerosos tutoriales, pero aquí hay un comienzo rápido.

Para una estructura de carpetas como:

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

Puede mirar y trabajar con mecanografía fácilmente desde la carpeta de ejemplo con:

npm install
grunt

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

Y un archivo gruñido:

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 2

Cree un archivo llamado tsconfig.json en la raíz de su proyecto e incluya las siguientes líneas en él:

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

Tenga en cuenta que outDir debe ser la ruta del directorio para recibir archivos JS compilados, y rootDir debe ser la ruta del directorio que contiene sus archivos de origen (.ts).

Abra un terminal y ejecute tsc -w , compilará cualquier archivo .ts en el directorio src en .js y los almacenará en el directorio ts-built .

Answer 3

El compilador tsc solo verá los archivos que pase en la línea de comando. No verá los archivos que se incluyen con una referencia /// <sourcefile> . Si está trabajando con bash, puede usar find para buscar recursivamente todos los archivos *.ts y compilarlos:

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

Answer 4

Hoy diseñé este Ant MacroDef para el mismo problema que el tuyo:

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

Úselo en su archivo de compilación con:

    <!-- Compile a single JavaScript file in the bin dir for release -->
    <TypeScriptCompileDir
        src="${src-js.dir}"
        out="${release-file-path}"
        module="amd"
    />

Se usa en el proyecto PureMVC para TypeScript en el que estoy trabajando en ese momento usando Webstorm.

Answer 5

Técnicamente hablando, tiene algunas opciones aquí:

Si está utilizando un IDE como Sublime Text y el complemento integrado de MSN para Typescript: http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx puede crear un sistema de compilación que compile la fuente .ts a .js automáticamente. Aquí está la explicación de cómo puede hacerlo: Cómo configurar un Sublime Build System para TypeScript .

Puede definir incluso para compilar el código fuente al archivo .js destino en el archivo guardado. Hay un paquete sublime alojado en github: https://github.com/alexnj/SublimeOnSaveBuild que hace que esto suceda, solo necesita incluir la extensión ts en el archivo SublimeOnSaveBuild.sublime-settings .

Otra posibilidad sería compilar cada archivo en la línea de comando. Puede compilar incluso varios archivos a la vez separándolos con espacios como ese: tsc foo.ts bar.ts Verifique este hilo: ¿Cómo puedo pasar múltiples archivos fuente al compilador de TypeScript? , pero creo que la primera opción es más útil.

Answer 6

TypeScript 1.5 beta ha presentado soporte para un archivo de configuración llamado tsconfig.json. En ese archivo puede configurar el compilador, definir reglas de formato de código y, lo que es más importante para usted, proporcionarle información sobre los archivos TS en su proyecto.

Una vez configurado correctamente, simplemente puede ejecutar el comando tsc y hacer que compile todo el código de TypeScript en su proyecto.

Si desea que vea los archivos para ver los cambios, simplemente puede agregar --ver el comando tsc.

Aquí hay un ejemplo de archivo tsconfig.json

{
"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false
},
"include": [
    "**/*"
],
"exclude": [
    "node_modules",
    "**/*.spec.ts"
]}

En el ejemplo anterior, incluyo todos los archivos .ts en mi proyecto (recursivamente). Tenga en cuenta que también puede excluir archivos utilizando una propiedad "exclude" con una matriz.

Para obtener más información, consulte la documentación: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Answer 7

puedes ver todos los archivos como este

tsc *.ts --watch

Answer 8

tsc 0.9.1.1 no parece tener una característica de reloj .

podrías usar un script de PowerShell como el que hice en esta publicación:

Mire y compile automáticamente archivos de TypeScript