Is there any clean up command in TypeScript to delete the build files and folders? (like we have 'mvn clean' in Maven projects)

Viewed 2238

I am currently working on an automation project using Protractor & TypeScript and I am failry new at both these tools. I have a 'src' folder for all my '.ts' files & 'js-files' folder for all the typescript compiler generated '.js' files. So, I am wondering if there is any native command in typescript that cleans/deletes this generated 'js-files' folder, something like 'mvn clean' in Maven projects.

Any suggestion/help is apreciated; thank you for your time.

2 Answers

There is a tsc clean command, but it requires that you call the clean flag with the sorta-newish build command, like this:

  1. tsc --build .../path-to-your/tsconfig.json --clean

Also available is the -b shorthand, and you can omit your tsconfig.json file if it is in your rootdir
  1. tsc -b --clean

The Problem W/ TSC's Clean Command


The tsc --clean flag has to draw backs: The first is that it doesn't delete the build/declaration dirs, only the files that were emitted to them. Secondly: If you plan on using the clean flag, you have to use it with the build command. This is a major drawback if you use $ tsc --watch to keep your development operations flowing, where its annoying for anyone using the watch command to have to needlessly build their project when its been being built allong, it is twice as annoying for those that have to wait 2 or 3 minutes for tsc to finish.

So, the best option is still what it has always been, which is to custom define a task.



For VS Code Users, this is the Best Way


VS Code, or no VS Code, tasks are the way to solve this problem. I use to use gulp, but dropped it for VS Code tasks back in 2018. Someone else will need to feel in the gaps for TS developers not using VS Code with a Gulp/Grunt answer, but for VS Code I got you covered.

As already stated: The TypeScript transpiler CLI TSC (as of right now) does not offer any sort of CLI command/automation for deleting the build directories themselves, only their contents. Personally, I don't feel that there is any reason to delete the directories, other than the mental security of seeing directories deleted, and added in real-time, and knowing that the old build was infact removed because you watched it happen in the file-explorer, nevertheless; I still prefer to delete the directories over deleting only there contents. I like to call a task and watch the file explorer as the directories disappear, then watch them reappear as the build task is automated.

So, we established that...

tsc -b ./tsconfig.json --clean

...does not delete the directories, only the contents in the directories.

Therefore, we will need a task.


VS Code's tasks.json Configuration

VS Code tasks can be challenging to configure at first, but this task should be able to be copy and pasted. If your using power shell you will have to replace the command for whatever pwrsh command removes files, and also the -R, -d, & -v flags for what ever pwrsh flags you use when removing directories.

The tasks bellow shows the configuration for the entire tasks.json file, if you already have tasks, the C&P the task from the "tasks": [ ...tasks ] array.

{
   "version": "2.0.0",
   "tasks": [
      {
         "label": "TSC-SHELL: DEEP CLEAN",
         "detail": "Uses the environments SHELL to wipe TSC build dirs, and the dirs contents",
         "type": "shell",
         "command": "rm",
         "args": [
            "-R",
            "-d",
            "-v",
            "${workspaceFolder}/out",
            "${workspaceFolder}/types"
         ],
         "presentation": {
            "reveal": "always",
            "panel": "dedicated",
            "showReuseMessage": false,
            "close": false,
            "group": "Clean"
         }
      }
   ]
}

Additional Info:

  1. The -R flag = recursive (mandatory)

  2. The -d flag = remove directories that are empty (optional)

  3. The -v flag = verbose, or list all deleted files (optional) - I like seeing what was removed.

  4. "${workspaceFolder}/out" = your build directory

  5. "${workspaceFolder}/types" = your declarations directory

${workspaceFolder} = VS Code Env variable where the projects base directory is always defined. Use it instead of the dot: '.', so you don't erase the wrong thing if you point the terminal at a different directory.

That's how you do it in VS Code!

Related