Getting friendly with TypeScript (part 1): a super-friendly beginner’s guide

Sammy-Jo Wymer

Published in

REWRITE TECH by diconium

9 min readJul 6, 2022

This article is intended for anyone who is trying to get to grips with the world of TypeScript.

This article will cover:

What is TypeScript? 💻
TypeScript basics: Types 🍎
TypeScript basics: Interfaces 🍏
TypeScript basics II: Union types 🍒
Lots of simple code examples 🪄

I’ve faced and overcome many challenges so far on my journey as a developer, but for some reason TypeScript has been a real challenge for me.

A very simplified visual of my developer journey so far would be:

HTML 😍
CSS 🤗
JavaScript 😕 → 😍
React 🤨 → 🥰 →💞
TypeScript → 🤨 → 😳 → 🤯 → 😭 → 🙂

And even now, I would say that final smiley for TypeScript is smiling a little too much…

There is a lot of accessible documentation on TypeScript, especially on the official website, but as a beginner I didn’t find it too intuitive and it has taken a long time to make it stick.

The goal of this article is to provide you with the important basics of TypeScript in a way that has helped the tricky language stick for me.

What is TypeScript?

TypeScript is JavaScript with syntax for types.

In plain English: TypeScript adds additional information to a variable to state what type it should be (e.g. string, boolean, number, etc).

Here is a visual of the types we have in JavaScript:

TypeScript Basics

Types

Left: JavaScript, right: TypeScript

As you can see in the image above, TypeScript adds additional syntax (about the variable types) to JavaScript to support a tighter integration with your editor.

The example above lets the editor know that myName should only ever be of type string and myAge should only ever be of type number

TypeScript basically helps to catch errors early in your editor and prevent type errors during runtime.

Simple examples of JS vs TS

boolean type simple example in JavaScript

The above example is written in JavaScript and you can see that isItTrue starts as a boolean but is then changed to a string on line 5. isItTrue could actually be changed to any type of variable and this could be done unintentionally.

boolean type simple example in TypeScript

The above example is written in TypeScript.

Note the syntax here. We have simply added : boolean after the variable name and this assigns type boolean to isItTrue.

This is called a type annotation, which basically tells you the datatype of the variable. Type annotations are what we use to assign types in TypeScript.

This means that isItTrue can only have the values true or false and can not be assigned to any other type such as a string as we can see from the error on line 5.

This is the main function of TypeScript — to prevent accidental type errors.

The same goes for all other types. Here are a few more examples:

Additional types in TypeScript

TypeScript adds three more key types to the ones we know from JavaScript:

◦ Unknown
◦ Any
◦ Void

Unknown is used when the type of the value is not known in advance.

For example: when making a request to an API, we may not know what the response is going to be in advance.

Any is used when the type of the value can be any type.

This basically allows you to ‘switch-off’ type checking and is the same as not using TypeScript.

Void is used when there is no data.

This is typically used for functions which do not return a value.

You can also be flexible with your type assignments in TypeScript.

Instead of assigning just one type, you can state that a variable can be of more than one type. Let’s look at this example:

In the above screenshot, we use the | (or operator), which means:

onlyStringOrNumber can be of type string or number

You can see that we don’t get an error when we make this variable a number.

Creating your own types

You can also create your own types in TypeScript. You’re not simply limited to string, number, boolean, etc.

In the example above we have created our own type called fullName.

Note how simple the syntax is here. We simply need to write type and then the name of the type we are creating, followed by the shape our type should be.

For the example above, it means that any variable with the type fullName has to have the exact same shape as the type fullName. This means they all require a firstName and lastName property, which must be of type string.

The example above shows us how to use the fullName type.

Again, we simply need to declare our variable with const or let plus a variable name (myName) and then the type we want this variable to be (fullName), followed by data which follows the shape of the type.

If we added more data here, such as age: 30, this would show as an error because the shape is different to what we stated the fullName type should be. Go ahead and try it yourself if you’re feeling brave and ready.

You can make your types as simple or as complex as you want. They simply act as a guard to make sure all subsequent variables, which are assigned this type, follow the same shape.

Interfaces

At this point you can think of an interface as basically the same as a type.
(There are differences, but they can be used interchangeably so don’t get too hung up on their differences at this stage).

As with types, any variable with a certain interface must follow the same shape as the interface.

Simple interface with example in TypeScript

Note: The syntax is slightly different for interfaces, as we omit the = before the curly braces.

As mentioned earlier, if you try to add or remove properties (change the shape) when using a type or interface, you will get an error:

This error can be resolved by adding the middleName property to the type or interface, or by removing it altogether.

You will also get an error if you try to add a number instead of a string to either of these properties.

Types and interfaces are very similar and, as mentioned before, you should definitely not worry too much about how they differ just yet.

The important thing you need to know is that you can have multiple interfaces with the same name, but once you have given a type a name then you can’t give this name to another type or interface (think of Type as a variable — all variables need unique names).

error message when trying to duplicate type name

For more information on the differences between type and interface, check out this link.

TypeScript Basics II

Union types

I already mentioned that you can be flexible with your type assignments and you can state that a variable can be of more than one type (e.g. string or number). This is a Union type.

Awesome that you already have experience with them, right!?

We’re going to go just a little bit further and see how we can customise our own Union types, and not be restricted to the types that TypeScript gives us.

Don’t worry, it’s nice and simple. This is a beginner’s guide after all ;)

customised union type example in TypeScript

The example above shows two Union types. The first one is called Characters and will only take the arguments Marty Byrde or Michael Bluth (both great, great characters from great, great shows).

The second argument is called Shows and will only take the arguments Ozark and Arrested Development.

successful use of union types in TypeScript

The screenshot above shows us how to correctly use our types. We created a variable called JasonBatemanShow and said it was type Shows and assigned it the argument Ozark , which is totally acceptable for the types we created.

But what happens when we don’t respect these types? (I’m sure you know already, but let’s see anyway):

Yes, that’s exactly what we expected. We didn’t follow the rules of our types and TypeScript isn’t happy. But even though we’ve angered TypeScript, it is still happy to help us. (It’s not angry, it’s just disappointed…)

If we hover over the error lines, we get a helpful error message from TypeScript, which tells us that type Ozark is not assignable to type Characters . Of course it’s not! Ozark is a show! A great, great show…

TypeScript helps us a lot like this. You’ll get a similar message if you hover over the JasonBatemanCharacter variable.

TypeScript also protects us from spelling errors, which can be tricky bugs to catch later on:

TypeScript protecting us from tricky bugs

Again, TypeScript is super helpful here and even gives us a hint when we hover over the error:

TypeScript is actually kind of sweet, isn’t it? Not as sweet as Jason Bateman but that’s something for another article.

Speaking of sweet, let’s take a look at the next sweet step we can take with our newly created union types:

In the screenshot above, you can see that we have created 4 variables and have stated that they can be of type Characters or type Shows.

Just to be crystal clear: this means that they can have any of the values from type Characters or type Shows.

And, I’m sure you know by now, that if we try to give one these 4 variables another value, or if we make a spelling error, then TypeScript is going to shake its head, throw us some squiggly red lines, and say “hmm, maybe try that one again, sunshine”.