TypeScript 101: Understanding the basics in 3 minutes!

Learn the basics like types, classes, interface generics and more! Get your hands dirty with TS in [const minutes: number = 3]

Pranav Bhatia
Mar 24 · 3 min read

So, there has been a lot of buzz surrounding typescript for quite a while now. Especially since Angular started using TypeScript as its primary language. Now, you might think: Angular was developed by Google, a company that has pretty smart programmers (top 4%, some might say). If they choose TS over JS, there must be a good reason!

Well, you are right! and here are a few reasons to learn TS, ASAP!

  1. TypeScript is the future of JavaScript (some might disagree!)
  2. Typescript code is like a well-documented code, hence, it’s easier to understand.
  3. It has classes, interfaces, generics, etc. like any other object-oriented programming language.

Let’s have a look at a basic typescript function and then you can be the judge:

What did we learn? The function calculateGrade accepts two arguments of the type number and returns a grade of type string in the end.

This might look obvious, but if it was JavaScript, there is almost no easy way to know “what kind of variables you should use when calling this function?” or “what will it return, a number or a string?” And thus, leading to potential bugs in the end.

Now, what if after reading the function above, you still make a mistake and try passing a string as an argument to the above function.
Well, in the case of JS, you will only know it when it's already too late.
However, our friendly TS will let us know right away.
If you don’t believe me, see below:

Hence, fewer bugs!

Okay, alright, enough talking. Let’s move on to learning some basics of TypeScript that will help you to get started.

As the name suggests, TypeScript has types! We have already seen the type number and string above. What else…

Have a look at the code below, don’t you think this kind of code is easier to comprehend and less error-prone.

This code represents an Employee class containing two properties, name and salary.

Code Explanation: Think of the “Employee” class as a blueprint. This piece of code, although pretty basic, explains some of the very important concepts of typescript. Also, note that the salary variable is private. That means we cannot directly access this variable. See the snapshot below:

Typescript compiler lets you know these kinds of errors beforehand. Remember OOP concepts?

For more information on classes (typescriptlang.org): classes.

We already know that we can use types like string, number, boolean, etc. What if we want to create our own custom types for enforcing checks in our code. Luckily we can use interfaces for that!

Interfaces can be really useful and are heavily used in frameworks like Angular/React. We can also use “model” classes or “types” depending on the use-case.

For more information on interfaces (typescriptlang.org): interfaces.

Generics is a very simple, yet powerful feature of typescript. Using generics is widely appreciated while working on services/APIs that other developers might use, especially, open-source ones. It helps to know what kind of data to expect and hence, resulting in reduced errors and confusion.

A very basic example of the importance/usage of generics in TS.

For more information on generics (typescriptlang.org): generics.

I hope to those who are new to typescript, this articles helped you to understand the benefits of using types in your JS code.

You can find the code in this article here: Link to the Github gists.

Other resources: Official typescript handbook.

Typescript playgrounds used:

Thanks for reading. If you have any questions, feel free to leave a response.

JavaScript in Plain English

Learn the web's most important programming language.

Pranav Bhatia

Written by

A full stack developer with an immense will to grow, share and contribute.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote


More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade