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 having breakfast, or jogging in the park.

The topic for the first few episodes will be the TypeScript programming language. Before we dive into coding, let’s begin with a birds-eye view of what TypeScript is and why you should learn it. So, get ready, and let’s get started!

Here comes a one-sentence explanation of what TypeScript is:

TypeScript is a superset of JavaScript that adds static typing.

So, what does that mean? First, it means that every JavaScript program is also a valid TypeScript program. On top of plain JavaScript, TypeScript adds a number of optional (but very useful) features. These features deal with the type system, and that’s why the language is called “TypeScript”.

By the way, you don’t have to know JavaScript to follow this podcast, because I will explain the necessary bits on the fly. But what you should have is some basic programming knowledge, such as variables, functions, parameters, and loops.

Plain JavaScript is quite sloppy as far as type checking is concerned. That’s the main reason why TypeScript has been published by Microsoft back in 2012. JavaScript’s sloppiness can lead to bugs in your program that you don’t notice while you are coding. Perhaps you won’t even notice these bugs in your tests - if you write tests, which you definitely should. But you have a problem when users start complaining that something doesn’t work. On your commercial website. On Friday evening.

For example, suppose you have a variable that you assign a number at some point in your program. At another point in the program, you try to do something with this variable that can only be done with strings, but not with numbers. Trying to convert the number 42 to lowercase is not going to work. Of course, JavaScript will tell you that when you run the code: When the execution reaches this buggy line of code, your program throws an error, and might even crash.

But JavaScript is not able you warn you from this bug while you are writing your program, without executing it. And this is where TypeScript comes to the rescue.

With TypeScript, you invoke a command that translates your code from TypeScript into JavaScript. This step is called compilation or transpilation, and it basically does two things:

  • The first thing is that TypeScript performs a number of checks to make sure you didn’t screw up with your types. These checks analyze your whole program without having to run it. This is called static analysis, or static type checking.
  • And the other thing is that it removes all TypeScript-specific stuff from your code. So the result from this compilation step is a normal JavaScript file.

There are many options for fine-tuning how the TypeScript compiler or type checker behaves. By default, it sticks to the philosophy that it doesn’t want to get in your way: It gives you advice, but it always assumes that you know better. So even if you give it code where it is convinced to have spotted bugs, it warns you, but it still does its best to translate it into JavaScript code. This makes it easy to convert an existing JavaScript project into TypeScript step-by-step: You start with the default settings, and as you address one warning after the other, you can slowly make the checks stricter and stricter.

One of the TypeScript compiler options lets you choose the JavaScript version for the resulting code - or to be more precise, the ECMAScript version. With this option, you can decide if you want to play it safe with an old version that is understood even by ancient browsers, or if you want more modern JavaScript code to be generated.

Another major feature of TypeScript is that it greatly improves the developer experience when using the right IDE. “IDE” stands for “Integrated Development Environment”, such as Visual Studio Code, Eclipse, or IntelliJ. With TypeScript, the IDE is able to better understand even plain JavaScript code. This way, it can give you useful features like auto completion: For example, if a TypeScript-powered IDE figures out that some variable is of type string, it can give you a drop-down menu with all string-related functions on this variable. And of course, your IDE can highlight pieces of code that it believes are buggy - you don’t even have to explicitly compile the code, because this analysis is performed automatically in the background as you type.

One final argument for learning TypeScript: It is used by the Angular framework, which is currently one of the most important frameworks for web development.

So to sum it all up: TypeScript makes your JavaScript code easier to work with and helps you catch bugs. This is especially important for large-scale and critical projects, where bugs in production can cost you a great deal of time and money. And by now, the one-sentence description for TypeScript from the beginning of this episode should have become crystal clear:

TypeScript is a superset of JavaScript that adds static typing.

Alright, I hope that this episode has given you a good impression of what TypeScript is and why you should learn it. You can find links about the covered material and about myself in the show notes. Next time, we will jump right in and create our first “Hello World” program in TypeScript. Until then, have a nice day, and hear you in the next episode of “Listen, learn, and code”.

References