How to watch and compile all TypeScript sources

Question

I m trying to convert a pet project to TypeScript and don t seem to be able to use the tsc utility to watch and compile my files  The help says I should use the -w switch  but it looks like it can t watch and compile all   ts files in the some directory recursively  This seems like something tsc should be able to handle  What are my options

User · Answer

TypeScript 1 5 beta has introduced support for a configuration file called tsconfig json  In that file you can configure the compiler  define code formatting rules and more importantly for you  provide it with information about the TS files in your project   Once correctly configured  you can simply run the tsc command and have it compile all the TypeScript code in your project   If you want to have it watch the files for changes then you can simply add --watch to the tsc command   Here s an example tsconfig json file     compilerOptions          target    es5        module    commonjs        declaration   false       noImplicitAny   false       removeComments   true       noLib   false     include                    exclude          node modules             spec ts       In the example above  I include all  ts files in my project  recursively   Note that you can also exclude files using an  exclude  property with an array   For more information  refer to the documentation  http   www typescriptlang org docs handbook tsconfig-json html

User · Answer

you can watch all files like this  tsc   ts --watch

User · Answer

Technically speaking you have a few options here   If you are using an IDE like Sublime Text and integrated MSN plugin for Typescript  http   blogs msdn com b interoperability archive 2012 10 01 sublime-text-vi-emacs-typescript-enabled aspx you can create a build system which compile the  ts source to  js automatically  Here is the explanation how you can do it  How to configure a Sublime Build System for TypeScript    You can define even to compile the source code to destination  js file on file save  There is a sublime package hosted on github  https   github com alexnj SublimeOnSaveBuild which make this happen  only you need to include the ts extension in the SublimeOnSaveBuild sublime-settings file   Another possibility would be to compile each file in the command line  You can compile even multiple files at once by separating them with spaces like so  tsc foo ts bar ts  Check this thread  How can I pass multiple source files to the TypeScript compiler   but i think the first option is more handy

User · Answer

EDIT  Note  this is if you have multiple tsconfig json files in your typescript source  For my project we have each tsconfig json file compile to a differently-named  js file  This makes watching every typescript file really easy  I wrote a sweet bash script that finds all of your tsconfig json files and runs them in the background  and then if you CTRL C the terminal it will close all the running typescript watch commands  This is tested on MacOS  but should work anywhere that BASH 3 2 57 is supported  Future versions may have changed some things  so be careful     bin bash   run  quot chmod  x typescript-search-and-compile sh quot  in the directory of this file to ENABLE execution of this script   then in terminal run  quot path to this file typescript-search-and-compile sh quot  to execute this script    or  quot   typescript-search-and-compile sh quot  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  quot   quot  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  quot tsconfig json quot    for s in  scripts do       strip off the word  quot tsconfig json quot      cd   s            this function gets incorrectly parsed by style linters on web       run the typescript watch in the background     tsc -w  amp        get the pid of the last executed background function     pids           save it to an array     pids   quot   quot  done    end all processes we spawned when you close this process wait  pids  Helpful resources   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

User · Answer

Create a file named tsconfig json in your project root and include following lines in it          compilerOptions              emitDecoratorMetadata   true           module    commonjs            target    ES5            outDir    ts-built            rootDir    src            Please note that outDir should be the path of the directory to receive compiled JS files  and rootDir should be the path of the directory containing your source   ts  files   Open a terminal and run tsc -w  it ll compile any  ts file in src directory into  js and store them in ts-built directory

User · Answer

Look into using grunt to automate this  there are numerous tutorials around  but here s a quick start   For a folder structure like   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   You can watch and work with typescript easily from the example folder with   npm install grunt   With 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          And a grunt file   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         lt --- Run a local server on  8089         options              port  8089            base                                    ts          lib        lt -- compile all the files in     to PROJECT js         src         ts            out   PROJECT js           options              target   es3             sourceMaps  false            declaration  true            removeComments  false                          example         lt --- compile all the files in   to example js         src      ts            out   example js           options              target   es3             sourceMaps  false            declaration  false            removeComments  false                              watch           lib        lt -- Watch for changes on the library and rebuild both         files        ts           tasks    ts lib    ts example                  example        lt --- Watch for change on example and rebuild         files      ts       d ts            tasks    ts example                      open        lt --- 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

User · Answer

Today I designed this Ant MacroDef for the same problem as yours         lt  --     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  -- gt   lt macrodef name  TypeScriptCompileDir  gt        lt  -- required attribute -- gt       lt attribute name  src    gt        lt  -- optional attributes -- gt       lt attribute name  out  default      gt       lt attribute name  module  default      gt       lt attribute name  comments  default      gt       lt attribute name  declarations  default      gt       lt attribute name  nolib  default      gt       lt attribute name  target  default      gt        lt sequential gt            lt  -- local properties -- gt           lt local name  out arg   gt           lt local name  module arg   gt           lt local name  comments arg   gt           lt local name  declarations arg   gt           lt local name  nolib arg   gt           lt local name  target arg   gt           lt local name  typescript file list   gt           lt local name  tsc compile file   gt            lt property name  tsc compile file  value    src compile list    gt            lt  -- Optional arguments are not written to compile file when attributes not set -- gt           lt condition property  out arg  value    else  --out    out    gt               lt equals arg1    out   arg2      gt           lt  condition gt            lt condition property  module arg  value    else  --module   module   gt               lt equals arg1    module   arg2      gt           lt  condition gt            lt condition property  comments arg  value    else  --comments  gt               lt equals arg1    comments   arg2      gt           lt  condition gt            lt condition property  declarations arg  value    else  --declarations  gt               lt equals arg1    declarations   arg2      gt           lt  condition gt            lt condition property  nolib arg  value    else  --nolib  gt               lt equals arg1    nolib   arg2      gt           lt  condition gt            lt  -- Could have been defaulted to ES3 but let the compiler uses its own default is quite better -- gt           lt condition property  target arg  value    else  --target   target   gt               lt equals arg1    target   arg2      gt           lt  condition gt            lt  -- Recursively read TypeScript source directory and generate a compile list -- gt           lt pathconvert property  typescript file list  dirsep     pathsep    line separator   gt                lt fileset dir    src   gt                   lt include name       ts    gt               lt  fileset gt                lt  -- In case regexp doesn t work on your computer  comment  lt mapper   gt  and uncomment  lt regexpmapper   gt  -- gt               lt mapper type  regexp  from          to    1     gt               lt  --regexpmapper from          to    1    -- gt            lt  pathconvert gt             lt  -- Write to the file -- gt           lt echo message  Writing tsc command line arguments to     tsc compile file     gt           lt 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    gt            lt  -- Compile using the generated compile file -- gt           lt echo message  Calling   typescript compiler path  with   tsc compile file     gt           lt exec dir    src   executable    typescript compiler path   gt               lt arg value     tsc compile file    gt           lt  exec gt            lt  -- Finally delete the compile file -- gt           lt echo message    tsc compile file  deleted    gt           lt delete file    tsc compile file     gt        lt  sequential gt    lt  macrodef gt    Use it in your build file with         lt  -- Compile a single JavaScript file in the bin dir for release -- gt       lt TypeScriptCompileDir         src    src-js dir           out    release-file-path           module  amd        gt    It is used in the project PureMVC for TypeScript I m working on at the time using Webstorm

User · Answer

The other answers may have been useful years ago  but they are now out of date  Given that a project has a tsconfig file  run this command    tsc --watch      to watch for changed files and compile as needed  The documentation explains   Run the compiler in watch mode  Watch input files and trigger recompilation on changes  The implementation of watching files and directories can be configured using environment variable  See configuring watch for more details   To answer the original question  recursive directory watching is possible even on platforms that don t have native support  as explained by the Configuring Watch docs   The watching of directory on platforms that don   t support recursive directory watching natively in node  is supported through recursively creating directory watcher for the child directories using different options selected by TSC WATCHDIRECTORY

User · Answer

tsc 0 9 1 1 does not seem to have a watch feature   You could use a PowerShell script like the one    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   gt  gt  gt  Recompiling file      eventArgs FullPath        iex   amp   command              write-host  changed Id    changed Id    to stop the watcher  then close the PowerShell window  OR run this command      Unregister-Event  lt  change Id  gt      Ref   Automatically watch and compile TypeScript files

User · Answer

The tsc compiler will only watch those files that you pass on the command line  It will not watch files that are included using a      lt sourcefile gt  reference  If your working with the bash  you could use find to recursively find all   ts files and compile them   find   -name    ts    xargs tsc -w

[javascript] How to watch and compile all TypeScript sources?

Examples related to javascript

Examples related to compilation

Examples related to typescript