Intro to Typescript. Interface, type and enum.

Let’s talk about what Typescript is.

Typescript is the programming language for both front-end and back-end development. Javascript syntax and approach are fundamental for Typescript. Some code that we wrote on Typescript is being transpile to Javascript. Some don’t.

Typescript is a strongly typed and static type check programming language. That means there is NO type check in runtime and NO runtime errors related to type-checking.

The critical thing we need to understand here is that Typescript is NOT executed. It’s being transpile to Javascript, then run as Javascript. Transpiling means code-to-code, source-to-source conversion of the code base.

It was created as a way how programmers can protect themself from stupidity and not shoot our self in the leg while they are writing on Javascript.

Since this is figured, let’s move to the next part.

I don’t like to say that there is something that you need to know, and other parts can be skipped. The reason is that every element is essential and must have, but some features you will use more frequently than others.

Elements that you are going to use more frequently others are:

Interfaces

Interfaces — the ultimate killer. The thing that Javascript, and a lot of other programming languages, are missing. The core idea here is to describe what kind of object you will have. When the object is defined — it is easier for you to determine the correctness of written code, it is easier for other developers to onboard, and it is easier to track things.

We describe interfaces with simple keyword interfaces. Inside the interface body, we can describe the key-value pair that the object will contain.

interface User {
  email: string;
}

As the value of the Interface, we can use any data type that we want — starting from simple primitives and finishing with your custom interfaces, types and enums.

What is it for you here? Well, now we can assign this Interface to our variable and say that our variable belongs to this specific Interface

const user: User = { email: “user@example.com” }

Nice! Now, Typescript knows to what type this variable belongs, and you’re protected from calling a key that is not present in the object. So, for example, user.email will work good, but user.password will produce a property doesn’t exist error.

When are we using Interface?

Simple answer — always! The Interface is your primary tool to define object properties.

We can use the Interface for inheritance or implementation, but this is another story.

It’s not being transpiled to JS.

Types

Types are close to Interface, type keyword can define object properties too, but it also can assign types to itself.

So, for example, if we want to define the same object properties as we did with the Interface, we can do it as follows:

type User = {
  email: string
}

And it will work pretty much the same as an interface, but the critical difference starts to appear when you want to describe the function. Here, type is used as an excellent tool. You can define the function like this:

type CreateUser = (email: string) => User;

Now we can use your function as a part of our custom interface, like this:

interface Handlers {
  createUser: CreateUser
}

Also, type can be used as a tool to hold multiple types. It’s called TypeUnion. For example:

type StringOrNumber = string | number;

I know that string or number is a bad example because it’s not commonly used, but this will come in handy when you have a more complex data structure.

Now you can describe literals with type, for example:

type UserType = “admin” | “customer”;

Cool right? Now we’re telling Typescript that the only value that property may hold is a literal of the string like “admin” or “customer”.

Similar to interfaces, types can be used for implementation or inheritance.

It’s not being transpiled to JS.

Interface vs Type

You will ask, what is the difference? Well, we can mention the following:

1. You can have multiple interfaces in one lexical environment; if you do so, Interfaces will unite. But you can have only one type in the lexical environment.
2. You can use type for direct-type assignments. Developers can only use interfaces to describe objects.
3. Type can hold the key as a custom data type, like Enum.

Enum

Enums are a fantastic tool, but unfortunately not widely used. Not used because front-end developers do not have any close alternative to enums, but back-end developers, on the opposite, have.

What are enums?

Enum is just a key-value pair, and it looks like an object. Please notice that I’m not describing what it is transpile to. I’m explaining how it works, the closes abstraction.

The approach is following:

enum UserType {
  Admin,
  Customer,
}

This approach will have Admin or Customer as keys and 0 and 1 as values. This solution is memory efficient approach to storing predefined data on the back-end.

As an alternative, we can use other values as values:

enum UserType {
  Admin = “admin”,
  Customer = “customer”
}

Now, these values can. Be used to define interfaces (or type):

interface User {
  email: string;
  type: UserType;
}

And then can be used in runtime to assign values:

const user: User = {
  email: “user@example.com”, 
  type: UserType.Admin
}

It’s transpiled to JS.

That’s it for today. See you in the next chapter.

Follow me for more.