Wie kann ich alle TypeScript-Quellen ansehen und kompilieren?

Ich versuche, ein Haustierprojekt in TypeScript zu konvertieren und kann das tscDienstprogramm anscheinend nicht zum Anzeigen und Kompilieren meiner Dateien verwenden. Die Hilfe sagt, ich sollte den -wSchalter verwenden, aber es sieht so aus, als ob er nicht alle *.tsDateien in einem Verzeichnis rekursiv überwachen und kompilieren kann . Dies scheint etwas tscin der Lage zu sein, damit umzugehen. Was sind meine Optionen?

Erstellen Sie eine Datei mit dem Namen tsconfig.jsonin Ihrem Projektstamm und fügen Sie die folgenden Zeilen hinzu:

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

Beachten Sie, dass outDirdies der Pfad des Verzeichnisses sein sollte, in dem kompilierte JS-Dateien empfangen werden sollen, und rootDirder Pfad des Verzeichnisses, das Ihre Quelldateien (.ts) enthält.

Öffnen Sie ein Terminal und führen tsc -wSie es aus. Es kompiliert alle .tsDateien im srcVerzeichnis .jsund speichert sie im ts-builtVerzeichnis.

TypeScript 1.5 Beta hat die Unterstützung für eine Konfigurationsdatei namens tsconfig.json eingeführt. In dieser Datei können Sie den Compiler konfigurieren, Regeln für die Codeformatierung definieren und vor allem Informationen zu den TS-Dateien in Ihrem Projekt bereitstellen.

Nach der korrekten Konfiguration können Sie einfach den Befehl tsc ausführen und den gesamten TypeScript-Code in Ihrem Projekt kompilieren lassen.

Wenn Sie möchten, dass die Dateien auf Änderungen überprüft werden, können Sie einfach --watch zum Befehl tsc hinzufügen.

Hier ist ein Beispiel für die Datei tsconfig.json

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

Im obigen Beispiel füge ich alle .ts-Dateien (rekursiv) in mein Projekt ein. Beachten Sie, dass Sie Dateien auch mit einer "exclude" -Eigenschaft mit einem Array ausschließen können.

Weitere Informationen finden Sie in der Dokumentation: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Sie können alle Dateien so ansehen

tsc *.ts --watch

Technisch gesehen haben Sie hier einige Möglichkeiten:

Wenn Sie eine IDE wie Sublime Text und ein integriertes MSN-Plugin für Typescript verwenden: http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled. aspx Sie können ein Build-System erstellen, das die .tsQuelle .jsautomatisch kompiliert . Hier ist die Erklärung, wie Sie dies tun können: So konfigurieren Sie ein Sublime Build System für TypeScript .

Sie können sogar festlegen, dass der Quellcode beim .jsSpeichern der Datei in die Zieldatei kompiliert wird . Auf github wird ein großartiges Paket gehostet: https://github.com/alexnj/SublimeOnSaveBuild , das dies ermöglicht. Nur Sie müssen die tsErweiterung in die SublimeOnSaveBuild.sublime-settingsDatei aufnehmen.

Eine andere Möglichkeit wäre, jede Datei in der Befehlszeile zu kompilieren. Sie können sogar mehrere Dateien gleichzeitig kompilieren, indem Sie sie durch Leerzeichen wie folgt trennen : tsc foo.ts bar.ts. Überprüfen Sie diesen Thread: Wie kann ich mehrere Quelldateien an den TypeScript-Compiler übergeben? , aber ich denke, die erste Option ist praktischer.

Der tsc-Compiler überwacht nur die Dateien, die Sie in der Befehlszeile übergeben. Dateien, die mit einer Referenz enthalten sind, werden nicht angezeigt /// <sourcefile>. Wenn Sie mit der Bash arbeiten, können Sie find verwenden, um alle *.tsDateien rekursiv zu finden und zu kompilieren:

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

Wenn Sie Grunzen verwenden, um dies zu automatisieren, gibt es zahlreiche Tutorials, aber hier ist ein kurzer Einstieg.

Für eine Ordnerstruktur wie:

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

Sie können Typoskript einfach aus dem Beispielordner ansehen und damit arbeiten:

npm install
grunt

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

Und eine Grunzdatei:

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

tsc 0.9.1.1 scheint keinen zu haben , Uhr - Funktion.

Sie können ein PowerShell-Skript wie das folgende verwenden:

#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: TypeScript-Dateien automatisch überwachen und kompilieren .

Heute habe ich dieses Ant MacroDef für das gleiche Problem wie Ihres entworfen:

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

Verwenden Sie es in Ihrer Build-Datei mit:

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

Es wird in dem Projekt PureMVC für TypeScript verwendet, an dem ich gerade mit Webstorm arbeite.

BEARBEITEN: Beachten Sie, dass dies der Fall ist, wenn Ihre Typoskriptquelle mehrere tsconfig.json-Dateien enthält. Für mein Projekt haben wir jede tsconfig.json-Datei in eine anders benannte .js-Datei kompiliert. Dies macht das Ansehen jeder Typoskriptdatei wirklich einfach.

Ich habe ein Sweet-Bash-Skript geschrieben, das alle Ihre tsconfig.json-Dateien findet und im Hintergrund ausführt. Wenn Sie dann das Terminal mit STRG + C drücken, werden alle ausgeführten Typenskript-Überwachungsbefehle geschlossen.

Dies wird unter MacOS getestet, sollte jedoch überall dort funktionieren, wo BASH 3.2.57 unterstützt wird. Zukünftige Versionen haben möglicherweise einige Dinge geändert, seien Sie also vorsichtig!

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

Hilfreiche Ressourcen:

• bash: Stringvariable als Dateiname / Pfad interpretieren
• Eine in einer while-Schleife geänderte Variable wird nicht gespeichert
• 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
• /unix/144298/delete-the-last-character-of-a-string-using-string-manipulation-in-shell-script
• Was sind die speziellen Dollarzeichen-Shell-Variablen?