In Typescript, what is the difference between type and interface?

Question

What are the differences between the following?

type Foo = { 
    foo: string 
};
interface Foo {
   foo: string;
}

Answer 1

Interfaces can be extended

interface A {
  x: number;
}
interface B extends A {
  y: string;
}

and also augmented

interface C {
  m: boolean;
}
// ... later ...
interface C {
  n: number;
}

Type aliases, however, can represent some things interfaces can't

type NumOrStr = number | string;
type NeatAndCool = Neat & Cool;
type JustSomeOtherName = SomeType;

So in general if you just have a plain object type, as shown in your question, an interface is usually a better approach. If you find yourself wanting to write something that can't be written as an interface, or want to just give something a different name, a type alias is better.

Answer 2

Putting things in perspective

let myAge = 25;
let totalStatesInMyCountry = 25

Look both the variables are equal, that is (myAge === totalStatesInMyCountry) but their context is totally different.

This is similar case for typescript's types and interfaces. Look for Foo

type Foo = {
    text: string
};
interface Foo {
    text: string;
}

Foo as a type and as an interface looks same, similar to (myAge === totalStatesInMyCountry), but this is just special case. Their context is totally different.

When to think about interface instead of types?

1. You are enforcing that this class must have these methods. You are thinking about interfaces not types.

2. You want to create multiple implementation of same contract. Like for contract toHumanReadableNumber(number) different implementations needed are 100000 -> 100,000, 100000 -> 100K and 100000 -> 100 Thousands. Lets say you are solving this problem by creating different classes for each requirement. You are thinking about classes and interfaces and not classes and types

3. Interfaces are there to make system loosely coupled like implementing SOLID principles.

4. Interfaces are substitute to multiple inheritances. A class can only inherit from single class, but can have multiple interfaces.

5. For a class Point{ x:number,y:number, distanceFromCenter():number} , in context of interfaces, only distanceFromCenter():number matters.

----------x----------

Old Answer (before 31st Dec 2022)

Differences between these too are already in this thread.

type Foo = {
    foo: string
};
interface Foo {
    foo: string;
}

Here type Foo andinterface Foo looks almost similar so its confusing.

interface is contract that the following properties (herefoo:string) should be there in a object. interface is not class. It is used when language does not support Multiple Inheritance. So interface can be a common structure between different classes.

class Bar implements Foo {
    foo: string;
}

let p: Foo = { foo: 'a string' };

Buttype and interface are used in very different context.

let foo: Foo;
let today: Date = new Date();

Here type of foo is Foo and today is Date. Its like a variable decleration which holds the information of typeof other variable. type is like a superset of interfaces, classes, function signature, other types or even values (like type mood = 'Good' | 'Bad'). At the end type describes the possible structure or value of a variable.

Answer 3

It is wrong to say "Interfaces can be implemented" since types can also be implemented

type A = { a: string };


class Test implements A {

    a: string;
}

Although you can do this, you can't implement a type that is a Union of types, which makes totally sense honestly :)

Answer 4

Types is kinda like Interfaces and vice versa: both can implemented by a class. but there are some important differences: 1. when Type is implemented by a class, the properties which belong to the Type must be initialized inside the class, whereas with Interface they must be declared. 2. as @ryan mentioned : Interface can extend another Interface. Types cannot.

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

// must initialize all props - unlike interface
class Manager implements Person {
    name: string = 'John';
    age: number = 55;

    // can add props and methods
    size:string = 'm';
}

const jane : Person = {
    name :'Jane',
    age:46,

    // cannot add more proprs or methods
    //size:'s'
}

Answer 5

type in the typescript is used to reference already existing types. It can not be extended like interface. Examples of type are:

type Money = number;
type FormElem = React.FormEvent<HTMLFormElement>;
type Person = [string, number, number];

you can use Rest and Spread in types:

type Scores = [string, ...number[]];
let ganeshScore = ["Ganesh", 10, 20, 30]
let binodScore = ["Binod", 10, 20, 30, 40]

Interface, on the other hand, allows you to create a NEW TYPE.

interface Person{
  name: string,
  age: number, 
}

Interface can be extended with extends keyword.
interface Todo{
  text: string;
  complete: boolean;
}

type Tags = [string, string, string]

interface TaggedTodo extends Todo{
 tags: Tags
}

Answer 6

Also, an interface can be implemented.