Typescript inheritance deep dive 🐋

How inheritance in Typescript works behind the curtain?

Typescript and JavaScript are both impressive languages. Typescript feels more familiar to a wide range of developers because it offers concepts we usually encounter in traditional programming languages. Inheritance is one of them.

But TypeScript doesn’t run in the Browser. We need to compile it to JavaScript. Mostly ES5, which doesn’t contain classes nor an extend keyword.

So how does this work then? Typescript uses syntactic sugar to “mimic” the class and inheritance behavior. It creates kind of an illusion of those concepts. Let’s see what I mean by that.

In this blogpost we will dive deep. On our way we will encounter a lot of concepts. It is important to wrap your head around those concepts. Take your time and make some breaks if necessary. You don’t have to understand everything in one read.

Let’s set up a new TypeScript project to illustrate what happens behind the curtain. To create a new empty Typescript project let’s run the following command:

tsc --init

This establishes us a tsconfig.json which the TypeScript compiler will use to compile our code. Currently, it won’t do anything because we haven’t written any code yet. Let’s go…