Your basic guide to finally understand TypeScript

Piero Borrelli
Oct 18, 2019 · 6 min read

As the power of TypeScript has been rising during the last few years, thousands of developers decided to start using this Javascript superset to empower their code even more. This guide aims to be a quick primer for all the developers out there who would like to learn how to use TypeScript and use it in their next project.

#1 The word Types means: use them!

One of the biggest features of TypeScript is to prevent any in the types you are using for your variables and yes, you can actually use types in TypeScript, here are some examples about how you can use them:

Image for post
Image for post

#1.1 Can I use multiple types for my variables?

Of course you can, by simply using the type for one of your variables you will be able like:

Image for post
Image for post

If you want to to your variables, you can eventually use the pipe operator like this:

Image for post
Image for post

#1.2 What if don’t want to specify the type of a variable?

No problem! TypeScript supports . In the first case, you will be specifying variables’ types precisely like we have seen up to this point, in the second case, a value, this mechanism is better known as .

Image for post
Image for post

Notice how type inference comes in handy in other useful cases like function return values:

Image for post
Image for post

#1.3 Can I check the type of my variables?

Wanna make sure you are using the right type? the right class? you can use that by using the operator like this:

Image for post
Image for post

This is especially useful for and it will also work when you are inheriting properties from another object.

#1.4 Can I convert the types of my variables?

This type of operation is typically known as and it can be performed in special cases in TypeScript where we might need to handle a variable using a specific type. Let’s suppose you defined a variable of type but you now want to use some common functions on that variable since the type is not string, you can tell TypeScript to handle that variable as a such using:

Image for post
Image for post

#2 Working with Arrays

Everything that mentioned above can be pretty much adapted when it comes to using Arrays in TypeScript:

#2.1 Using tuples

Quite a new concept, tuple types allow you to express an array where the type of a fixed number of elements is known, but need not be the same. Consider if you wanted to represent a value as a pair of a boolean and a number:

Image for post
Image for post

#2.2 Something I really missed: Enums!

This great addition to Javascript is something that I was really missing from the old days when I would code using Java, enums are basically a set of named constants. There are three types of enums:

  • Numeric Enum
  • String enum
  • Heterogeneous enum

In order to not make this article too long, I won’t go into too much detail about enums, just remember that they are especially useful if you want to better document your intent or to create a set of distinct cases like:

Image for post
Image for post

#3 What about objects?

Objects are another important part of Typescript, let’s try to analyze them in better detail with an example:

Image for post
Image for post

The two properties of the objects we have are inferenced to type string, meaning that any attempt to assign a value of different type to them will be invalid:

Image for post
Image for post

#3.1 Object type

Object is a type that doesn’t fall in the primitive-type category like: boolean, string, number, symbol, null, undefined and it follows this syntax:

Image for post
Image for post

#4 Functions

When it comes to functions, Typescript introduces the possibilty to use types when working with them, the first place we want to use them for example is for function parameters:

Image for post
Image for post

Another place where you might want to specify a type is when returning a value from a function. Notice that, in the case of the function above, the return type was automatically infered to be of type string. Let’s see how we can explicitly define the return type of a function using:

Image for post
Image for post

#5 The OOP part

Since the release of ECMAScript 6, Javascript programmers have been able to build their programs using the object-oriented approach. This approach is also supported by Typescript, so let’s try to analyze how we would use it by making some examples:

Image for post
Image for post

To most of the people out there who have worked with languages like C# or Java this will look extremely familiar, we have a class named Point that has two members x and y, we can access them freely (more on this later) and we also call a class method called getPoints(). We can then create an instance of an object of type Point by using the new keyword.

Using access modifiers

Not going on too much detail on this since it’s a complete different topic, but keep in mind that in Typescript you can also define access modifiers for your classes’ variables like this:

Image for post
Image for post

As with basically all the object oriented programming languages, we can use access modifiers to establish who is going to be able to access our class data. By default, public is set as a member default modifier, private and protected are used respectively when you want a member to not be accessible outside of its class(private) and when you want a member to be accessible only inside its class or deriving classes.

Inheritance

As already mentioned earlier, Typescript supports the most used object-oriented patterns including inheritance. So using Typescript you will be able to define a class and then define a subclass of it which will inherit the superclass base methods and members:

Image for post
Image for post

Interfaces

Another common object oriented technique that you might to use it to create an interface. This in possible in Typescript, where the main focus is type-checking, we can use interfaces to give names to these types. So basically when using them we will be creating a group of related methods and members that will describe a particular object:

Image for post
Image for post

Conclusion

The idea behind this article was just to be able to give you a quick primer on what you can do with Typescript, how it can help us solve common problems and its different approach with Javascript.
Hope it gave you a new vision on something useful!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Piero Borrelli

Written by

Software developer for the Wifi industry. Burning keyboards with JavaScript code. Defenceless talking about the ups and downs of the developer’s life.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Piero Borrelli

Written by

Software developer for the Wifi industry. Burning keyboards with JavaScript code. Defenceless talking about the ups and downs of the developer’s life.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store