Is TypeScript a Superset of JavaScript?

So, you’re wondering if TypeScript is a superset of JavaScript? Well, I am here to prove to you that it is.

In this article, we are going to discuss two reasons why we can prove that TypeScript is, in fact, a superset of JavaScript.

What Is A Superset?

Before we start, we should first clearly define what a superset is in programming.

Simply put, a superset is a version of a programming language or framework that includes all the features of a previous version, as well as additional features or capabilities. It should be able to be:

i) be compiled down to the subset language

ii) ability to write valid subset syntax within the language

For example, the SCSS styling language is a superset of CSS. Simply because any CSS you write in SCSS is still valid CSS. While also giving additional benefits, such as nesting, variables, and functions within the language. However, Sass is not a superset of CSS because you cannot write pure CSS and expect this language to compile.

Supersets: A SCSS/SASS Example

--------------------- SCSS IS A SUPERSET ---------------------
// this scss code 
.example {
  .code {
    background: gold;
  }
}

// compiles to this in css
.example .code {
  background: gold;
}

// VALID SCSS CODE: you CAN write this in scss!
.example .code {
  background: gold;
}

--------------------- SASS IS NOT A SUPERSET ---------------------

// this sass code 
.example
  .code:
    background: gold;

// compiles to this in css
.example .code {
  background: gold;
}

// INVALID SASS CODE: you CAN'T write this in sass!
.example .code {
  background: gold;
}

1. TypeScript Is Built On Top of JavaScript: Valid JavaScript Is Valid TypeScript

Based on our rules above, JavaScript is a superset of JavaScript and is built on top of the language.

Make no mistake that TypeScript is still its own programming language, however, it can only exist based on the rules of JavaScript.

it is clear that TypeScript can compile down to JavaScript. In fact, it is impossible to run TypeScript code in the browser or in a node application without first compiling it into JavaScript.

Secondly, JavaScript code is valid TypeScript code. Yes, the language might throw an error if you make a static typing error that JavaScript would generally allow. However, it is very easy to simply bypass this in your tsconfig.js. file.

Supersets: A TypeScript Example

---------------- VALID In TypeScript And JavaScript ----------------

// valid TypeScript code
let message = "hello world";

if (message === "hello world") { 
    message = "bye world"; 
    console.log(message) // "bye world"
}

// that is also valid JavaScript code
let message = "hello world";

if (message === "hello world") { 
    message = "bye world"; 
    console.log(message) // "bye world"
}

------- INVALID In TypeScript UNLESS Bypassed But VALID JavaScript -------

// INVALID TypeScript code but VALID JavaScript code 
let message = "hello world";

if (message === "hello world") { 
    message = null; // Type 'null' is not assignable to type 'string'.
    console.log(message) // this won't run
}

// Set strictNullChecks=false in tsconfig.json
// Now VALID TypeScript code
let message = "hello world";

if (message === "hello world") { 
    message = null; // VALID
    console.log(message) // "bye world"
}

The reason TypeScript throws the error is the reason TypeScript exists. The beauty of the language is that you still have the ability to ignore these error messages if you wish

2. TypeScript Is Officially Titled As A Superset of JavaScript

Even if my super clear and well-defined reasoning that TypeScript is a superset didn’t convince you, maybe the creators of TypeScript will.

Even in the official documentation, Microsoft stated that TypeScript is a strict syntactical superset of JavaScript.

Having confirmation means that there is no doubt that TypeScript is, and was always meant to be, a superset.

This makes sense, as TypeScript is marketed as ‘JavaScript with Types’. That basically means that TypeScript is JavaScript, but with a static type system built on top.

Summary

In conclusion, it is very easy to see that TypeScript is a superset that is built on top of JavaScript. TypeScript is always compiled down to JavaScript before being run and writing valid JavaScript syntax is always valid TypeScript syntax. Even though TypeScript may throw precautionary warnings, you can bypass these pretty easily. If that doesn’t convince you, the official TypeScript documentation says it is too!

Interested in learning TypeScript but don’t know where to start? Check out these best-selling courses.

As always, happy coding!