Transpiling

"Hello TypeScript"

When we run a TypeScript file, the TypeScript compiler is responsible for transpiling it into a corresponding JavaScript file. This process is known as transpiling, allowing us to run our TypeScript code in environments that only support JavaScript, such as a web browser or a Node server.

You might be wondering, where is this JavaScript file that’s being generated? We won’t see it in the code editor—it’s happening behind the scenes. But don’t worry; we’ll take a closer look at the transpiling process in a moment.

For now, let’s just run this simple Hello TypeScript program and see what happens. Go ahead and press the “Run” button to see the output of the following code.

Congratulations, you’ve just run your first TypeScript program! As you can see, the program executed exactly as expected, printing the message Hello TypeScript to the console.

In the next step, we’ll take a closer look at the transpiling process and learn how to configure the TypeScript compiler to suit our needs. But for now, let’s savor the moment and congratulate ourselves on a job well done!

Transpiling process

Are you ready to unleash the power of the TypeScript compiler? Great, because it’s time to learn how to transpile a TypeScript file using the tsc command! Take a look at the directory in the terminal below by running the ls command—can you spot the hello_typescript.ts file?

Now that we have our hello_typescript.ts file ready to go, it’s time to transpile it into JavaScript using the tsc command. To transpile the hello_typescript.ts file using tsc, run the following command in the terminal above:

tsc hello_typescript.ts

This will generate a corresponding JavaScript file called hello_typescript.js, which contains the transpiled version of our TypeScript code. We can then run the JavaScript file in a browser or on a Node.js server to execute the code.

Go ahead and run the ls command again to see the hello_typescript.ts and hello_typescript.js files in our directory.

It’s that easy! With a straightforward command, we’ve turned our TypeScript code into a format that can be run in any JavaScript runtime environment. Don’t take our word for it. Let’s test if everything is working as intended or not.

To do this, we can use the node command to run the hello_typescript.js file in a Node.js runtime environment. Try running the following command in the terminal above.

Note: Make sure that the previous command (tsc hello_typescript.ts) has been executed correctly and that the terminal didn’t time out after that. If you’re not sure, you can try running the ls command again to see if the hello_typescript.js file is listed in the usercode directory.

node hello_typescript.js

This will execute the hello_typescript.js file in a Node.js runtime environment, and we should see the output of the program (the message “Hello TypeScript”) printed to the console.

We should now understand how to transpile a TypeScript file using the tsc command and how to run the resulting JavaScript code in a Node.js runtime environment.

Template strings and JavaScript versions

console.log(`Hello TypeScript`);

If we take a look at the generated JavaScript file (hello_typescript.js), we will see that the TypeScript compiler has modified this line of code to use double quotes, as follows:

console.log("Hello TypeScript");

This conversion is because template strings are not supported in all versions of JavaScript. The TypeScript compiler must ensure that the generated JavaScript code is compatible with the target JavaScript runtime, and it does this by converting template strings to standard strings when necessary.

Here, we have declared a local variable named version, which holds a string with the value of ES6. We have then modified the string we are printing on the console to inject the value of the version string into the middle of the output by using the ＄{ ... variable name ... } syntax. If we compile this file and take a look at the generated JavaScript, we will see that this now becomes:

Here, we can see that TypeScript has interpreted our template string, and generated the equivalent JavaScript, which uses double quotes ( " ) to surround each string, and the plus sign ( + ) to concatenate strings.

The use of template strings is actually vali in JavaScript, but there is a significant catch to using them. Template strings have only been introduced into later versions of the JavaScript standard—in particular, ES2015, also known as the 6th Edition or just ES6. This means that we need an ES6-capable JavaScript runtime in order to use template strings. TypeScript, however, will generate JavaScript based on the version of the JavaScript runtime you are targeting. Just bear in mind, however, that even though a new standard has been published, this does not mean that all internet browsers, or, more correctly, all JavaScript runtimes, will support the new standard immediately.

Most modern internet browsers now support the ES5 standard. Unfortunately, we will have to wait for a number of years before we can say that most modern internet browsers support the ES6 standard. This means that we must be mindful of our target audience, and target runtime if we attempt to use any ES6 features, such as template strings, within code that will be running within a browser.

TypeScript project configuration

TypeScript uses a configuration file named tsconfig.json that holds a number of compilation options. We can use the tsc command-line compiler to generate a tsconfig.json file by using the --init command, as follows:

tsc --init

This --init option will automatically generate the tsconfig.json file within the current directory, which is used, amongst other things, to specify the target JavaScript version. This is how the contents of this file will look like:

Here, we can see that the tsconfig.json file uses standard JSON syntax to specify an object that has one main property named compilerOptions, and within this main property, a number of subproperties named target, module, strict, and so on. The target property is used to specify the JavaScript version that we would like to generate for, and its value can be one of a number of options. We can find some below:

With a tsconfig.json file in place, we do not need to specify the name of the TypeScript file that we would like to compile; we can simply type tsc on the command line rather than tsc --target, followed by the desired version.

Here, the TypeScript compiler is reading the tsconfig.json file and applying the compilation values that it finds there to any .ts file that it finds in either the current directory or any subdirectories.

This means that in order to compile a TypeScript project that may contain many files in many sub-directories, we just need to type tsc in the root directory of the project.

Now that we have changed the target version of JavaScript that we wish to generate for, which is now ES6, let’s take a look at the output of the compiler in the file hello_typescript.js, as follows:

Ignoring the "use strict" line at the top of this file, we can see that the generated JavaScript has not changed from our original TypeScript file.

This shows that the compiler is correctly generating ES6-compatible JavaScript, even though we have not modified our original TypeScript file.

Watching files for changes

TypeScript also has a handy option that will watch an entire directory tree and if a file changes, it will automatically recompile the entire project.

Let’s run the TypeScript compiler in this mode as follows:

tsc -w hello.ts

The output would look something like this:

Here, we can see that the TypeScript compiler is now in watch mode, and is watching files in our project directory for any changes.

Why don’t we go ahead and see this happening in the below terminal.