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

JavascriptTypescript

Javascript Problem Overview


What are the differences between the following?

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

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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.

Solution 3 - Javascript

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 :)

Solution 4 - Javascript

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'
    

    }

Solution 5 - Javascript

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
}

Solution 6 - Javascript

Also, an interface can be implemented.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmartiansnoopView Question on Stackoverflow
Solution 1 - JavascriptRyan CavanaughView Answer on Stackoverflow
Solution 2 - Javascriptamit77309View Answer on Stackoverflow
Solution 3 - JavascriptDanView Answer on Stackoverflow
Solution 4 - JavascriptnadavView Answer on Stackoverflow
Solution 5 - Javascriptudeep shresthaView Answer on Stackoverflow
Solution 6 - JavascriptDave FordView Answer on Stackoverflow