This article is dedicated to all of you JavaScript programmers out there. To learn a new language can be quite daunting and time consuming, but talking from first-hand experience, learning TypeScript coming from a JavaScript background is as easy as learning how to add bigger numbers when you already know how to add small numbers. Yes, TypeScript is not a completely different language as I once thought myself (the reason why I keep procrastinating to learn it...), but it's really just JavaScript with added features to make the language more powerful, cleaner, and easier to maintain in the long run.

So What is TypeScript?

As its name suggests, TypeScript introduces types. Specifically, it introduces type assertions that you would not normally have in JavaScript and a bunch of other stuff including interfaces, enums, and generics. Now you might be wondering then why is JavaScript still so popular if TypeScript is that much better? Well, all that TypeScript code you write will actually end up getting compiled as plain JavaScript. That's right: anything you write in TypeScript can essentially be written in JavaScript, but the result in JavaScript will obviously be more verbose. In a more formal definition, TypeScript is a superset of JavaScript so while JavaScript code is TypeScript code, the reverse is not true.

TypeScript Features

In this article, I'll go through the two main features of TypeScript which I think you'll be using a lot as a beginner.

Types

TypeScript support the same types as JavaScript with explicit type annotation. The syntax is simply placing a colon followed by the type like the following example.

let isDone: boolean = false;

To view more examples with all the different types, check out the ones shown here in the documentation.

Ok, but what if we can expect the above variable isDone to come as either a boolean or a number? Worry not as TypeScript supports union types.

let isDone: boolean | number = false;

Interfaces

For those of you coming from an OOP background, you might find this word familiar and the concept is quite the same. However in TypeScript, besides being able to implement interfaces for classes, you can have interfaces for object types as well.

For example, if we have an object where its label property is a string and size property is a number, instead of passing the parameter like the below example,

function printLabel(labeledObj: { label: string, size: number }) {
  console.log(labeledObj.label);
  console.log(labeledObj.size);
}

we can create an interface which does the same that makes the code cleaner.

interface LabeledValue {
  label: string;
  size: number;
}

function printLabel(labeledObj: LabeledValue) {
  console.log(labeledObj.label);
  console.log(labeledObj.size);
}

Note that the interface only checks if the label and size property type accordingly, and if both exists. Other properties (if any) are not checked.

For more examples on how you can use interfaces in TypeScript.

And that's it! Obviously, there are a lot more features than the one I've discussed and you can learn more about them in the official documentation.

Hopefully, this gives a great primer to getting started with coding in TypeScript and perhaps motivate you to start learning it as well, just like I did after procrastinating for a long time.

Thanks for reading!