web-dev-qa-db-fra.com

Comment regarder et compiler toutes les sources TypeScript?

J'essaie de convertir un projet animalier en TypeScript et ne semble pas pouvoir utiliser l'utilitaire tsc pour regarder et compiler mes fichiers. L'aide dit que je devrais utiliser le -w _ switch, mais on dirait qu’il ne peut pas regarder et tout compiler *.ts fichiers dans le répertoire some récursivement. Cela semble être quelque chose que tsc devrait être capable de gérer. Quelles sont mes options?

javascriptcompilationtypescript
66
VoY

Créez un fichier nommé tsconfig.json dans la racine de votre projet et y inclure les lignes suivantes:

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

notez svp que outDir devrait être le chemin du répertoire pour recevoir les fichiers JS compilés, et rootDir devrait être le chemin du répertoire contenant votre source (.ts) des dossiers.

Ouvrez un terminal et lancez tsc -w, ça va compiler n'importe quel .ts fichier dans le répertoire src dans .js et les stocker dans ts-built répertoire.

90
budhajeewa

TypeScript 1.5 beta introduit le support pour un fichier de configuration appelé tsconfig.json. Dans ce fichier, vous pouvez configurer le compilateur, définir des règles de formatage du code et, plus important encore, lui fournir des informations sur les fichiers TS de votre projet.

Une fois correctement configuré, vous pouvez simplement exécuter la commande tsc et lui demander de compiler tout le code TypeScript de votre projet.

Si vous voulez qu'il surveille les fichiers pour les modifications, vous pouvez simplement ajouter --watch à la commande tsc.

Voici un exemple de fichier tsconfig.json

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

Dans l'exemple ci-dessus, j'inclus tous les fichiers .ts de mon projet (de manière récursive). Notez que vous pouvez également exclure des fichiers en utilisant une propriété "exclude" avec un tableau.

Pour plus d'informations, reportez-vous à la documentation: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

23
dSebastien

vous pouvez regarder tous les fichiers comme celui-ci

tsc *.ts --watch
10
Wambua Makenzi

Techniquement, vous avez quelques options ici:

Si vous utilisez un IDE comme Sublime Text et un plugin MSN intégré pour TypeScript: http://blogs.msdn.com/b/interoperability/archive/2012/10/01 /sublime-text-vi-emacs-TypeScript-enabled.aspx = vous pouvez créer un système de construction qui compile le .ts source de .js automatiquement. Voici l'explication suivante: Comment configurer un système de construction Sublime pour TypeScript .

Vous pouvez même définir pour compiler le code source vers la destination .js fichier sur fichier sauvegarder. Il existe un paquet sublime hébergé sur github: https://github.com/alexnj/SublimeOnSaveBuild qui permettent cela, il vous suffit d'inclure l'extension ts dans le SublimeOnSaveBuild.sublime-settings fichier.

Une autre possibilité serait de compiler chaque fichier dans la ligne de commande. Vous pouvez compiler même plusieurs fichiers à la fois en les séparant avec des espaces tels que: tsc foo.ts bar.ts. Vérifiez ce fil: Comment puis-je transmettre plusieurs fichiers source au compilateur TypeScript? , mais je pense que la première option est plus pratique.

8
Simo Endre

Le compilateur tsc ne surveillera que les fichiers que vous transmettez en ligne de commande. Il va pas regarder les fichiers inclus avec un /// <sourcefile> référence. Si vous travaillez avec la bash, vous pouvez utiliser find pour trouver récursivement tous les *.ts fichiers et les compiler:

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

Envisagez d’utiliser Grunt pour automatiser ce processus. Il existe de nombreux tutoriels, mais voici un petit début.

Pour une structure de dossier telle que:

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

Vous pouvez regarder et travailler avec TypeScript facilement à partir du dossier exemple avec:

npm install
grunt

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

Et un fichier 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']);
}
6
Doug

tsc 0.9.1.1 ne semble pas avoir de fonction watch .

Vous pouvez utiliser un script PowerShell comme celui-ci:

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

Ref: Regarder et compiler automatiquement les fichiers TypeScript .

3
Sean

Aujourd'hui, j'ai conçu cette Ant MacroDef pour le même problème que le vôtre:

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

Utilisez-le dans votre fichier de construction avec:

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

Il est utilisé dans le projet PureMVC pour TypeScript Je travaille actuellement à l'aide de Webstorm.

1
Tekool