Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

When should you use type class or interface in TypeScript?

When should we use classes and interfaces? If you want to create and pass a type-checked class object, you should use TypeScript classes. If you need to work without creating an object, an interface is best for you.

What is the difference between interface vs type statements?

The key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable. Show activity on this post. One difference is that interfaces create a new name that is used everywhere. Type aliases don't create a new name — for instance, error messages won't use the alias name.

What is the difference between type and class in TypeScript?

A TypeScript/JavaScript class is a function. A TypeScript type is just a definition that helps the TS compiler check the code. It is not translated to anything in the generated JS code.

What is a type in TypeScript?

What is a type in TypeScript. In TypeScript, a type is a convenient way to refer to the different properties and functions that a value has. A value is anything that you can assign to a variable e.g., a number, a string, an array, an object, and a function.


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.


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.


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


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'
}

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
}

Also, an interface can be implemented.