Episode transcript for the podcast “Listen, Learn, and Code”. See podcast overview for more episodes and additional information.
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:
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.
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:
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:
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:
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
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”.