In this blog post, we will see how to clean the generated Javascript files by typescript with a tsc command.

This is part of the Typescript Tutorial Series, whose index / TOC is available here → Typescript Tutorial Series.

Dependency

If the tyepscript code has got the Getter and Setter Attribute methods, the invocation of the tsc command demands the ES5 or more.

You either need to add a command line argument , a flag to the tsc command such as tsc --target ES5 OR add the same in the config file tsconfig.json.

A brand new config file can be initalized with the tsc --init command in the parent folder of your project, In which you can add / tweak the right parameters and values.

Cleaning the intermediate files

At time we need to wipe off all the .js files generated by the TypeScript Compiler (tsc) to have a fresh start with a clean build. If there are many files, you can accomplish it with either rm -rf *.js or del *.js depending on the Operating System you use. However, there is an associated way with TypeScript with its own syntax.

Syntax

The command tsc takes two arguments together.

tsc --build --clean
  • --build is the main argument to initiate a clean build
  • --clean is the essential but a supplement argument to the --build

Example

typeScriptPractices > ls -ltr
total 16
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json
-rw-rw-rw-  1 raghs 0   29 2021-06-26 23:46 hello-world.js

typeScriptPractices > tsc --build --clean

typeScriptPractices > ls -ltr 
total 12
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

typeScriptPractices >

The output clearly shows that the .js files are all removed by the successful execution of tsc --clean --build command.

--clean is an addendum to the tsc --build and not alone

The --clean argument can be passed only to the tsc --build command and not on its own merit.

typeScriptPractices > tsc --clean
error TS5093: Compiler option '--clean' may only be used with '--build'.

Also the --clean argument should follow the --build and not the other way around.

typeScriptPractices > tsc --clean --build
error TS6369: Option '--build' must be the first command line argument.

Difference between tsc --build --clean and rm -rf *.js

If all I want to achieve is the cleaning up of the .js files, I can do it via the typical and famous terminal command rm -rf for the *.js commands. What is the difference between them?

Difference:

The tsc --build --clean wipes off the .js files corresponds to the .ts files and NOT any arbitrary .js files if any present in the folder. However the rm -rf *.js command could definitely wipe off all the .js files in the directory invariably.

Example to demonstrate the tsc --build --clean Vs rm -rf *.js

Scenario 1 - Add a dummy.js file and test tsc --build --clean

Initial Stage

typeScriptPractices > ls -l
total 8
-rw-rw-rw-  1 raghs 0 44 2021-06-26 23:41 hello-world.js
-rw-rw-rw-  1 raghs 0 27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

Add a dummy.ts file

typeScriptPractices > touch dummy.js

typeScriptPractices > ls -l
total 16
-rw-rw-rw-  1 raghs 0    0 2021-06-26 23:42 dummy.js      
-rw-rw-rw-  1 raghs 0   44 2021-06-26 23:41 hello-world.js
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

Clean Build via tsc --build --clean :

typeScriptPractices > tsc --build --clean

typeScriptPractices > ls -l
total 12
-rw-rw-rw-  1 raghs 0    0 2021-06-26 23:42 dummy.js
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

You can clearly see that the dummy.js file was left untouched, and the tsc --build --clean had removed only the hello-world.js file.

Rebuild:

typeScriptPractices > tsc

typeScriptPractices > ls -l
total 16
-rw-rw-rw-  1 raghs 0    0 2021-06-26 23:42 dummy.js
-rw-rw-rw-  1 raghs 0   44 2021-06-26 23:43 hello-world.js
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

Remove the files via rm-rf:

typeScriptPractices > rm -rf *.js

typeScriptPractices > ls -l
total 12
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

As expected, the rm -rf *.js command had removed all the *.js files in the folder invariably.

Scenario 2 - Add a dummy.ts file, run the tsc, delete the .ts file before the tsc --build --clean

typeScriptPractices > touch test-build-clean.ts

typeScriptPractices > ls -l
total 12
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0    0 2021-06-26 23:43 test-build-clean.ts
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

typeScriptPractices > tsc 

typeScriptPractices > ls -l
total 20
-rw-rw-rw-  1 raghs 0   44 2021-06-26 23:44 hello-world.js
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0   15 2021-06-26 23:44 test-build-clean.js
-rw-rw-rw-  1 raghs 0    0 2021-06-26 23:43 test-build-clean.ts
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

typeScriptPractices > rm test-build-clean.ts 

typeScriptPractices > ls -l
total 20
-rw-rw-rw-  1 raghs 0   44 2021-06-26 23:44 hello-world.js
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0   15 2021-06-26 23:44 test-build-clean.js
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

typeScriptPractices > tsc --build --clean

typeScriptPractices > ls -l
total 16
-rw-rw-rw-  1 raghs 0   27 2021-06-26 23:41 hello-world.ts
-rw-rw-rw-  1 raghs 0   15 2021-06-26 23:44 test-build-clean.js
-rw-rw-rw-  1 raghs 0 6864 2021-06-26 23:42 tsconfig.json

typeScriptPractices >

If you can see, the test-build-clean.js was left untouched, because the tsc --build --clean does not find the matching .ts file in the directory, even though the .js file was actually generated out of the tsc command itself.

References

Cheers,
RM…
Raghavan alias Saravanan Muthu
26 Jun 2021 | Sat | 22:42:09 PM IST