What are the differences between a type and interface alias in Typescript?

Asked

Viewed 398 times

6

Typescript allows us to create aliases for types. For example:

type State = 'inactive' | 'active' | 'banned';

The type allows to also create types for objects, such as:

type User = {
  username: string;
  age: number;
}

But a interface also allow the creation of "types" for objects, thus:

interface User {
  username: string;
  age: string;
}

So what are the differences between using a interface and a type alias?

2 answers

6


Interface

The interface is still a type, but it is a contract only, it is not a type to be instantiated. You can create a type that conforms to an existing interface so there will be a new type that is partly an existing type (an object can have several types).

When you access an object through the interface only its members can be accessed in that context.

Let’s say she’s an incomplete guy, so she always needs another to exist concretely.

Alias

As its name says, the type alias only creates a nickname for an existing (albeit anonymous) type. The alias does not generate a type, only gives a new name, so in several situations there will be some confusion because the type of truth is what gave rise to the nickname (you may notice in Ides and error messages since the name displayed will be the real type and not the nickname).

I don’t like the documentation, in the part that speaks of the differences, because it says that it does not create a new name, but clearly is creating a new name, what it does not create is a new type, it uses an existing one and calls something else. And that’s in the part that talks about what a type alias.

You can instantiate a type through its alias, although the actual type of that object will be the original type and not the alias name. Any place that waits for a guy can use an alias that makes sense there.

Differences from the examples

The first example creates a union of values (not types), so the type of the object that will be saved using this alias will be a string, but you can refer to it as State, and only the three constant values there can be used. Actually I don’t even know if this can be called type alias (have I mentioned that the documentation is bad? It seems something common in languages of script).

Already the name User can be used to create objects that have that structure, but the type itself is only structural (anonymous).

It can be used directly as a complete type because it is usually on top of a complete type, but not always.

What may have generated a doubt is that an alias can be used as a form of interface, if it is used with a type to conform, as it is a normal inheritance, then in the example shown you will get the same result, but not all aliases will be like that. Although it works it is better to use the most correct mechanism to conform to a type that is the interface.

Something like:

class UserSpecial implements User {

I put in the Github for future reference.

will certainly require that such implementation has a username of the kind string and a age of the kind int. It doesn’t matter if you’re using the interface or type alias, but I recommend using the interface, unless you have a good reason to do it differently.

Typescript is a breakthrough but it has its oddities, just like Javascript already had. Even for not being an active language user I do not know if there is any valid reason to use the type alias so I work as if I don’t, and if I do, it’s something very punctual.

  • I’ve had to make a simple code I couldn’t make with interface (I don’t know if there’s a way): export type Theme = {
 [K in ThemeColorsKeys]: string;
};

0

A alias is analogous to a shortcut in the context of a filesystem. It is just a reference to another type. In its second example (type User == { ...), you are creating an anonymous interface and assigning it to a named alias User

Browser other questions tagged

You are not signed in. Login or sign up in order to post.