TypeScript tsc

TypeScript files are compiled into JavaScript using TypeScript compiler. The compiler can be installed as typescript package through npm. As with any npm package, you can install it locally or globally, or both, and compile the TS files by running tsc on the command line for global installations or $(npm bin)/tsc for local installations.

Input files location

TS compiler accepts a list of files to compile as parameters. For example:

$ tsc main.ts router/index.ts

However, most of the time, we don’t specify files list manually. TS automatically compiles all files in a project directory and its sub-directories. It treats every directory with tsconfig.json file in the root as a project directory. When we run tsc on the command line, it searches for tsconfig.json starting in the current directory and continuing up the parent directory chain.

tsconfig.json can be created by the compiler automatically using init flag:

tsc –init

But it generates the configuration file with a few predefined options. For our purposes we will create the empty tsconfig.json manually and run tsc compiler inside this folder:

$ echo {} > tsconfig.json && tsc

Or we can use -pcompiler option with the path to the project directory, i.e. the directory with the tsconfig.json file in the root.

$ tsc -p /path/to/folder/with/tsconfig

At the moment, TS compiles recursively searches for all files in the root directory and sub-directories and compiles them. However, we can control, where the compiler will be looking for the files. This is done through files configuration option.

So, we can tell the compiler to only compile files main.ts and router/b.ts and leave everything else out.

{
“compilerOptions”: { … },
“files”: [
“main.ts”,
“router/b.ts”
] }

Note: TS compiler will also compile files that are referenced inside any file from the files list. For example, if main.ts imports exports from a.ts, this file will also be compiled.

Instead of listing each file manually, we can use include option to specify directories using glob-like file patterns. For example, we can compile all files inside router directory like this:

{
“compilerOptions”: { … },
“include”: [
“router/*”
] }

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page