content
1. Both can be used to define objects and functions
1. Type can do it but interface can't do it
2. Interface can do it but type cannot do it
foreword
In TypeScript, the concepts of type and interface are easy to confuse. They can both be used to represent interfaces , but there will be some differences in actual use. This article mainly briefly describes the difference between the two, hoping to help you better distinguish and use them.
text
1. Basic Concepts
1. type (type alias)
Used to give a new name to a type, use type to create a type alias. Type aliases can be used to represent not only primitive types, but also object types, union types, tuples, and intersections.
type userName = string; // 基本类型
type userMsg = string | number; // 联合类型
// 对象类型
type Person = {
name: userName;
age: number;
};
// 使用Person类型
let user: Person = {
name: "leo",
age: 18
};2. interface
Interfaces are another way of naming data structures such as objects; unlike types, interfaces are limited to describing object types. The declaration syntax for interfaces is also different from the declaration syntax for type aliases. Such as rewriting the above type alias Person into an interface declaration as shown below.
interface Person {
name: userName;
age: number;
}2. Similarities
1. Both can be used to define objects and functions
type
type Position = {
x: number;
y: number;
};
type SetPosition = (x: number, y: number) => void;interface
interface Position {
x: number;
y: number;
}
interface SetPosition {
(x: number, y: number): void;
}2, can achieve inheritance
type and interface are not mutually exclusive. type can inherit interface and vice versa. Only in the form of realization, slightly different.
type
// type 继承 type
type Person {
name: string
}
type Student = Person & { stuId: number }
// type 继承 interface
interface Person {
name: string
}
type Student = Person & { stuId: number }interface
// interface 继承 interface
interface Person {
name: string
}
interface Student extends Person { stuId: number }
// interface 继承 type
type Person {
name: string
}
interface Student extends Person { stuId: number }Summary: For interface, inheritance is achieved through extends ; type is achieved through & , which can also be called cross type.
3. Differences
1. Type can do it but interface can't do it
type can declare primitive types .
type userName = string;type can declare union types .
type userMsg = string | number; type can declare a tuple type .
type Data = [number, string];type can be declared with the typeof operator
type myType = typeof someObj;2. Interface can do it but type cannot do it
interface declarations can be merged .
interface test {
name: string
}
interface test {
age: number
}
/*
test实际为 {
name: string
age: number
}
*/If it is type, it will report a warning of duplicate definition , so it is impossible to achieve declaration merging .
4. Recommendations for use
1. The official recommendation is to use interface, and type is used when other requirements cannot be met. However, because union types and intersection types are more commonly used, it is impossible to avoid the scenario of using a large number of types, and some complex types also need to be used by forming type aliases after assembly.
2. If you want to keep the code uniform, you can choose to use type. Through the above comparison, type can actually cover most scenarios of interface.
3. For props and state in React components, it is recommended to use type, which can ensure that properties cannot be arbitrarily added to the place where the component is used. If there are custom requirements, it can be encapsulated by HOC (Higher-Order Component).
4. It is recommended to use interface when writing third-party libraries. Its more flexible and automatic type merging can cope with unknown and complex usage scenarios.