After I’ve finished my book about TypeScript I decided to create a video tutorial in German about the JavaScript superset and how it works. You can buy my 5+ hours video about TypeScript on this German platform:
Entwickler Tutorials

TypeScript has some huge advantages over plain JavaScript:

• it has static typing. This means you get compile-time errors and fantastic tooling support, as the types are known at compile time
• TypeScript compiles down to plain JavaScript. As TypeScript is a superset of JavaScript, you can use latest JavaScript features like for example classes that were introduced with ES2015, and compile them down to ES5 or even ES3.

After you’ve registered on Entwickler Tutorials, you can watch the first 15 minutes of my TypeScript tutorial for free. You can also watch the beginning of other tutorials available on the platform.

What is in for you?

You’ll learn at the beginning of the tutorial about the advantages of TypeScript over JavaScript, how to set up your environment with Node.js, NPM and Visual Studio Code and of course how to use, compile and debug TypeScript in your projects.

After the introduction you learn about the basic types and different TypeScript features like Type Inference, Type Assertions and strict null checks.

With that knowlege the tutorial continues to show you how to use interfaces and classes. You learn how to build classes with constructors, methods and properties, how to use access modifiers, how to use inheritance, how to define parameter properties, how to use destructuring and much more. You also learn how to use Generics in TypeScript to build reusable interfaces, classes and functions.

We’ll also take a closer look at functions. You learn about named and anonymous functions, about different parameter types like optional parameters, default parameters and rest parameters. Functions are also very interesting when they’re used inside of a class, because then the this-keyword is handled differently in an anonymous function than in an arrow function. You learn about the advantages of arrow functions, which were introduced with ES2015, and how the TypeScript compiler compiles them down to ES5.

After functions you learn how to use modules in TypeScript. Modules allow you to structure and organize your code across different files. A TypeScript-file is called a module if it has at least one export or import at the root level. But modules are not just simple files. Modules have their own scope for variables, types and functions. That means, if you create a class in one module, you have to explicitly export it to be able to use that class in other modules. But in addition, you need to import that class explicitly in another module to be able to access and use it there. This construct with scopes avoids naming conflicts in bigger code bases.
Modules are a native part of ES2015, but with TypeScript you can use them today and compile them down to ES5. Browsers don’t support modules natively, so you need something like a module bundler. Webpack is such a module bundler that compiles and bundles your separate typescript files into a single JavaScript file that the browser can understand. You learn in the TypeScript tutorial how to use modules in TypeScript and how to bundle them by using webpack.

After modules you learn about decorators in TypeScript. They’re similar to attributes in C# or annotations in Java. You can use them to hook in some logic by using an aspect-oriented approach. Angular makes heavy use of decorators.

When you build an application, you might use some other JavaScript libraries that you install via node package manager (npm). For these libraries you need to grab the type declarations that give you all the TypeScript magic, like compile-time errors and great tooling support. You learn where and how to get the type declarations for existing JavaScript libraries in this TypeScript tutorial.

The final part of the tutorial shows you how to build a small Angular application from scratch that displays some users and downloads an overview of their repositories from github. This means you learn how to use components, decorators, data binding, dependency injection and services in Angular.

How was it produced?

The tutorial was recorded in Frankfurt at the headquarter of Software & Support, the company creating

• great conferences like BASTA, JAX or the brand new International JavaScript Conference. You find an overview about their events here: https://entwickler.de/events
• fantastic magazines, like Windows Developer or PHP Magazin or Java Magazin. Look here for an overview: https://entwickler.de/magazine
• … and a lot more stuff, just navigate through www.entwickler.de to see the things they’re creating

I was sitting in a room of the S&S-headquarter. In front of a green screen I tried to give my best while some cameras and some spotlights where pointing on me:

Together with Yvonne Schulze and Sebastian Greiner, two fantastic video guys that did the cutting of the tutorial live, and with the guys from S&S I had a lot of fun! You find the websites of Yvonne and Sebastian here:
Yvonne: http://www.ivy-film.de
Sebastian: https://livestream.watch and https://sebastian.greiner.sg.

So, I hope you enjoy the video tutorial.
I’m happy about any feedback.

Ah, and before I forget: As you read to the end of this post, you can use this promo code “THOMAS20” to get a 20% discount on the TypeScript tutorial. Available for the first 5 users.

Happy coding,
Thomas