• A discussion link on StackOverflow
• Interface vs Type alias in TypeScript 2.7
• Differences Between Type Aliases and Interfaces
• Types vs. interfaces in TypeScript

interface X {
    a: number
    b: string
}

type X = {
    a: number
    b: string
};

We can use interface to extend type:

Implement type with class:

Class mixes type and interface:

2. The type intersection is used to intersect multiple types:

Use partial type to make the field optional:

Hybrid Types with both type alias and interface

Occasionally, you might want to define an object that acts as both a function and an object, and has additional properties.

What we’re talking about here is defining types for functions (callable objects) and static properties of that function.

Here’s an example:

interface Counter { // callable part (start: number): string // static properties interval: number reset(): void } const getCounter = () => { const counter = ((start:number) => {}) as Counter counter.interval = 123 counter.reset  = () => {} return counter } const callable = getCounter(); callable(10); callable.reset(); callable.interval = 5;

Interface defines a Counter, which has both callable and static properties.

Best practice: Let’s define it separately.

Definition of Callable:

Definition of static properties:

The final counter type:

Types are joined with &, and interfaces are combined with extends.

In TypeScript, we have a lot of basic types, such as string, boolean, and number. These are the basic types of TypeScript. You can check the list of all the basic types here. Also, in TypeScript, we have advanced types and in these advanced types, we have something called type aliases. With type aliases, we can create a new name for a type but we don’t define a new type.

So when we use the type keyword, we define only a type alias, not a completely new type.

We use the type keyword to create a new type alias, that’s why some people might get confused and think that it’s creating a new type when they’re only creating a new name for a type. So, when you hear someone talking about the differences between types and interfaces, like in this article, you can assume that this person is talking about type aliases vs interfaces.

The difference between

In the latest version of TypeScript, the distinction is getting smaller and smaller.

• Interfaces are basically a way to describe data shapes, for example, an object.
• Type is a definition of a type of data, for example, a union, primitive, intersection, tuple, or any other type.

Interface supports declaration merging, while Type Alias does not.

interface Song {
  artistName: string;
};

interface Song {
  songName: string;
};

const song: Song = {
  artistName: "Freddie",
  songName: "The Chain"
};

TypeScript will automatically merge both interfaces declarations into one, so when we use this Song interface, We ‘ll have to both properties.

Type alias is not supported, and you will encounter compilation error:

Extends and implements

In TypeScript, we can easily extend and implement interfaces. This is not possible with types though.

Interfaces in TypeScript can extend classes, this is a very awesome concept that helps a lot in a more object-oriented way of programming. We can also create classes implementing interfaces.

Example:

class Car {
  printCar = () => {
    console.log("this is my car")
  }
};

interface NewCar extends Car {
  name: string;
};

class NewestCar implements NewCar {
  name: "Car";
  constructor(engine:string) {
    this.name = engine
  }
  printCar = () => {
    console.log("this is my car")
  }
};

Here the interface extends the original class, and a new class implements the interface.

Tuples Tuples

Tuples are a very useful concept in TypeScript that brings us to this new data type, which contains two sets of values of different data types.

You cannot define primitives with an interface, but you can use primitives as data types for properties inside an interface.

interface Response {
  value: [string, number]
}

When to use interface and when to use type alias?

Interfaces are better when you need to define new objects or methods on objects. For example, in the React application, when you need to define props that a particular component will receive, it is better to use interfaces rather than types:

interface TodoProps {
  name: string;
  isCompleted: boolean
};

const Todo: React.FC<TodoProps> = ({ name, isCompleted }) => {
  ...
};

For example, types are better when you need to create functions. Suppose we have a function that will return an object that was called. This method prefers to use type aliases:

type Person = {
  name: string,
  age: number
};

type ReturnPerson = (
  person: Person
) => Person;

const returnPerson: ReturnPerson = (person) => {
  return person;
};

Interfaces work better with object and method objects, and types work better with functions, complex types, and so on.

More of Jerry’s original articles can be found on “Wang Zixi “: