The difference between interface and type in Typescript
In typeScript, "interface" and "type" are both keywords used to define custom types. They have some differences in the following differences and usage (you are welcome to continue to add...)
1. Syntax Differences
- 'interface' is defined using the keyword 'interface', for example: interface Person { name: string; }
- 'type' is defined using the keyword 'type', for example: type Person = { name: string; }
2. The ability to declare merge (Merging)
- 'interface' has the ability to declare merges, allowing multiple interfaces with the same name to merge, in this way, the member definition of the interface can be extended.
- 'type' does not have the ability to declare merges, and it will report an error if you define the same type multiple times.
3. Scalability
- 'interface' can use the keyword 'extends' to inherit another interface, implementing interface reuse and extension.
- 'type' can be reused and extended using Intersection Types, but cannot be inherited using extends keyword.
4. Compatibility
- When performing type compatibility checks, 'interface' will perform "compatibility recursive checks" and as long as the target type meets the member requirements of the source type, the type is considered to be compatible.
- 'type' does not perform "compatibility recursive checking" and only exact matches are considered compatible.
5. Type annotations and type alias
- 'interface' can be used to define annotations for complex types such as function types and class types.
- 'type' can be used to define alias of any type and can simplify writing of complex types.
6. Access modifier
- 'interface' can use public, private, and protected access modifiers on properties and methods.
- 'type' cannot specify an access modifier, it assumes that all members are public.
7. Union type and cross type
- 'type' can use Union Types and Intersection Types to combine multiple types.
- 'interface' does not directly support syntax for union and cross-types, but similar effects can be achieved by inheriting and declaring merges.
8. Implement interface and type alias
- 'interface' can be implemented by class to enforce constraints on the structure of the class.
- 'type' cannot be implemented directly by classes, it is more suitable as a type alias to simplify the definition of complex types.
9. Mapping Type
- 'type' can use mapping types to generate new types based on existing types.
- 'interface' does not support mapping types.
type Options<T> = {
[K in keyof T]: boolean;
};
interface PersonOptions {
name: boolean;
age: boolean;
}
// Use map typetype Result = Options<PersonOptions>;
// The type of Result is { name: boolean, age: boolean }
// Mapping type cannot be used// interface ResultInterface extends Options<PersonOptions> {}10. Paradigm parameter position
- At the normal parameter position, 'type' can appear anywhere and can cross and union multiple types.
- At the normal parameter position, 'interface' can only appear to the right of the type alias.
type Tuple = [number, string];
type NumberArray = Array<number>;
type Union = number | string;
// Valid definitiontype MyType<T> = { value: T };
type MyType2 = MyType<number>;
// Valid definitioninterface MyInterface<T> {
value: T;
}
type MyInterface2 = MyInterface<number>;
// Invalid definition// interface MyInterface<T> {
// value: T;
// }
// interface MyInterface2 extends MyInterface<number> {}11. Extend object type
- 'interface' can extend existing object types by declaring merges, thereby adding new attributes or methods.
- 'type' requires the use of cross type to implement the extension of object types.
interface Person {
name: string;
}
interface ExtendedPerson extends Person {
age: number;
}
// Use declaration merge to extendconst person: ExtendedPerson = {
name: 'John',
age: 25,
};
type Person = {
name: string;
};
type ExtendedPerson = Person & {
age: number;
};
//Extend with cross typeconst person: ExtendedPerson = {
name: 'John',
age: 25,
};12. Call signature and constructor
- 'interface' can define the call signature to describe the function type, or it can define the constructor signature to describe the constructor of the class.
- 'type' can use function type and constructor type alias to describe the constructor of a function type and class.
interface Greeting {
(name: string): string;
}
interface Person {
new (name: string): Person;
name: string;
sayHello(): void;
}
// Define call signature and constructor signatureconst greeting: Greeting = (name) => `Hello, ${name}!`;
class PersonClass implements Person {
constructor(public name: string) {}
sayHello() {
(`Hello, my name is ${}.`);
}
}
type Greeting = (name: string) => string;
type Person = {
new (name: string): Person;
name: string;
sayHello(): void;
};
// Use type aliasconst greeting: Greeting = (name) => `Hello, ${name}!`;
class PersonClass implements Person {
constructor(public name: string) {}
sayHello() {
(`Hello, my name is ${}.`);
}
}Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.