Episode transcript for the podcast “Listen, Learn, and Code”. See podcast overview for more episodes and additional information.

Transcript

Hello and welcome to “Listen, Learn, and Code”. In this podcast, you can learn coding while doing something else, like riding your bike, or waiting for your train.

In this episode, we are going to write a simple TypeScript program that prints “Hello World” to the console. So, get ready, and let’s get started!

The easiest way to write a TypeScript program is with the playground hosted by the official TypeScript website. You can find the link to this playground in the show notes below. All you need for this playground is a web browser.

If you don’t want to use the playground, but want to run TypeScript programs on your own computer, you will need two things:

  • First, something that can execute JavaScript files. Because as we’ve heard in the previous episode: JavaScript is the basis for TypeScript.
  • And second, the TypeScript compiler that translates TypeScript files into JavaScript files.

The first thing is provided by Node.js, which is a runtime environment for JavaScript code. It is open source, and can be downloaded for different operating systems. Again, you can find the link in the show notes. After following the installation instructions on the web site, you should be able to execute the following command in your terminal:

node --version

The output of the command node --version is the installed version of the Node runtime. If this works: Congratulations, you have successfully installed Node.js.

The nice thing about Node.js is that it also comes with the Node Package Manager, or short: NPM. With NPM, you can install additional JavaScript libraries with just a single command. And one of these additional libraries is the TypeScript compiler. So all we have to do is execute the following command on the terminal:

npm i -g typescript

The “i” after “npm” stands for “install”, and the “-g” stands for “global”. If you don’t provide the “global” flag, TypeScript would only be installed locally in the current directory. Since you will want to use TypeScript for more than a single application, the global installation is the way to go. Again, you can test the installation by checking the version with the following command:

tsc --version

where “tsc” stands for “TypeScript Compiler”. And if this works as well, we are ready to write our first TypeScript file. For this, fire up your favorite IDE (such as Visual Studio Code), and create a file with the name “hello.ts”. The file extension “.ts” stands - of course - for “TypeScript”. In this file, write the following line of code:

console.log("Hello World");

If you are not sure what the names of special characters like “semicolon” mean, you can find a link to an overview table in the show notes. And you can also read the transcript of every episode on my web site.

One of the nice features of TypeScript is that in enables editors to suggest code completions. So if you only type “console.”, the editor will open a drop-down menu with everything you can do on the console object. This makes programming faster and less error-prone.

In case you are using the online playground, simply hit the “Run” button. The output will then show up in the “Logs” tab next to the editor.

If you are working with a local installation of TypeScript, you have to compile the TypeScript file first. So change back to the terminal, and execute the following command:

tsc hello.ts

The result is a new JavaScript file named “hello.js”. In this simple example, there is practically no difference between the TypeScript file and the resulting JavaScript file. Differences will appear as soon as we start using TypeScript-specific features that are not available in JavaScript.

Finally, execute the JavaScript file with the command

node hello.js

And here, you should also see a nice “Hello World” output in the terminal.

If you are using Visual Studio Code, you can conveniently run the TypeScript file without having to type these two commands. The only problem is that this requires a few additional configuration steps in VS Code. I have recorded a video showing these steps, and you can find a link to this video in the show notes.

What you can also do is start the TypeScript compiler in “watch” mode. In this mode, the compiler watches your files, and automatically compiles them as you are changing and saving them. For this, you invoke the command

tsc --watch hello.ts

Now let’s see what happens if we add an error to the program. For instance, replace the first character “c” in the word “console” with a “k”. Both the playground editor and VS code will immediately show you that something’s wrong here. They will even ask you if you meant “console” with “c” instead. This is already the power of TypeScript in action. You can verify this by manually executing the compiler, again by typing

tsc hello.ts

This time, you will get the same error message on the terminal. Also interesting is that the wrong code is compiled to JavaScript anyway. So if you take a look into the JavaScript file, you will see that the wrong “konsole” with “k” has appeared there as well. This is a deliberate default setting for the TypeScript compiler. The default philosophy of the TypeScript compiler is “I will not get in your way”. So it will give you advice when it thinks that something’s wrong, but it will compile it to JavaScript anyway. This is useful if you have a large JavaScript codebase that you want to convert to TypeScript step by step. If you don’t want JavaScript to be generated in case of errors, you can configure the TypeScript compiler to do so using the option “noEmitOnError”. We will see how to configure TypeScript in one of the next episodes.

So to sum up what we did in this episode:

  • We saw that there is an online playground for quickly getting started with TypeScript.
  • We learned that if we want to run TypeScript locally, we have to install Node.js, and then use the package manager of Node.js to install the TypeScript compiler.
  • We wrote and executed a simple “Hello World” program.
  • And we saw how the editor provides code completion and error detection, both features powered by TypeScript.

And that’s all for now. I hope you enjoyed this episode, and hear you next time on “Listen, learn, and code”.

References