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.
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.
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. 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With