Type vs. Interface in Typescript - - All Things Typescript Newsletter - Issue #20

One question I get frequently asked by fellow developers learning Typescript is the difference between Type and Interfaces.

Good morning; I hope you had a fantastic weekend. Last week, I could not send out the mid-week, so I will cover the Type vs. Interface in this issue today. On top of that, I have included a few interesting articles in this issue that will help you improve your Typescript and general skills.

I hope you will enjoy today’s issue and if you haven’t subscribed, please subscribe.

Type vs. Interfaces

One question I get frequently asked by fellow developers learning Typescript is the difference between Type and Interfaces. Over the years, the difference has narrowed quite a lot, to a point most people use them interchangeably.

For instance, the following two will work the same:

Interface:

interface Person {

name: string;

age: number

}

Type:

type Person = {

name: string;

age: number;

}

There is no distinguishable difference between the above types apart from how they are defined syntactically, including the errors Typescript will throw when you make a typing mistake.

In most cases, what can be expressed as a Type can also be expressed as an interface, as shown below with functions.

You can also combine both Types and Interfaces, as shown below:

Differences

There are still some differences between the two that you should be aware of. Let’s look at some of them:

First, primitives can only be used by types and not interfaces:

type X = string;

type Y = number

Second, is that you can have union Types but not interfaces: defining type Switch = "On" | "Off" is not possible interfaces. On top of that, interfaces can not extend union types.

Third, with Types, you can take advantage of advanced features in Typescript, such as Conditional and Mapped Types.

Fourth, Interfaces allow declaration merging, where multiple different interface definitions are merged into one:

So, which should you use?

It depends on the use case and whether either Interfaces or Types support the feature you want to use. For instance, union types can not be defined using Interfaces, and Type doesn’t support declaration merging. Depending on your needs, you might prefer one over the other.

Another thing to consider is the style within your codebase, and you want it to be consistent; if coding style hasn’t been set, you should use Type as it’s more versatile unless you need features supported explicitly by interfaces.

And finally, I would argue code readability should be considered. Some types are easier to define on one and not the other. If using one comes at the expense of code readability, then you should use whichever makes it easier for the next person to read and understand what you are trying to do. An excellent example of the above is Tuples, where the Type one is more readable than the interface one, as shown in the example below.

.

In order to improve your Typescript skills, you need to be comfortable with both. This is because different developers can use either one of them and you want to be comfortable while reading Typescript code written using either.

Articles

Typescript Series - Awaited Type

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

Link

How TypeScript Default Parameters Work

In a previous article, I covered the concept of optional parameters in TypeScript. In this guide, we used the ? question mark symbol to denote if a function's argument was optional.

Link

End-to-end Typing for Next.js API

One thing I realized after writing TypeScript (TS) for some while is "we write TS so we can keep writing JS". I used to sprinkle type annotations for the sake of typings but that's not how it works. What I should do is, write TS in one place, and put a structure so I can infer the Type from where I need it without having to manage more types.

Link

All Hiring Decisions Are a Gamble (and That’s Okay).

Hiring is filled with uncertainty. It always will be. And uncertainty is the realm of gamblers.

Link

3 Ways To Use Bun With Create React App

A bun is an unsweet bread roll typically filled with savory fillings, such as hamburger. Baozi, or bao, is a yeast-leavened-filled bun in various Chinese cuisines. There are many variations in fillings (meat or vegetarian) and preparations, though the buns are most often steamed. Bao typically looks like the above image, and Bao is also a short film made By Disney Pixar.

Link

What is a virtual DOM in React? - LogRocket Blog

The virtual DOM is a fundamental React concept. You have probably heard of it if you have written React code in the last few years. However, you may not understand how it works and why React uses it.

Link

5 Ideas for GitHub Actions

A few years ago, GitHub announced a new feature, GitHub Actions. It was an answer to the success of GitLab. Because GitLab offers many development features like continuous integration out of the box.

Link