Location>code7788 >text

Type and interface in TypeScript: Do you really understand their differences?

Popularity：966 ℃/2025-02-18 23:52:46

If you have written Vue3 projects, you will definitely be familiar with TypeScript. Whether it is the company's new project technology selection or personal learning and development of new front-end projects, Vue3 + TypeScript has become one of the preferred technical solutions.

In the powerful static type system of TypeScript,typeandinterfaceare two important keywords used to define and describe data types. However, what is the difference between the two, and how should we use them in the actual development process? Let's go into the main topic without saying nonsense. Let's discuss it in depth together

1. Definition of type and interface

  • type: You can define a collection that can contain various types of attributes and values ​​to describe objects, functions, union types, cross types, etc.
type Person = {
  name: string;
  age: number;
  sex: 0 | 1;
};
  • interface: It defines the shape of an object, describing the properties and types that the object should have
interface Person {
  name: string;
  age: number;
  sex: 0 | 1;
}

Through the example above, we can see that although both type and interface can be used to describe the structure of an object, their syntax is slightly different.typeuseequal signto define type alias, andinterfaceuseCurly bracesDefine the members of the interface directly

2. Scalability of type and interface

  • type: It can be passed through union type (|) and cross type (&) is combined, but cannot directly expand other thingstype 
type A = { x: string };
 type B = { y: string };
 type C = A & B; // C has both A and B properties
  • interface: It can be expanded and can be usedextendsKeywords to implement interface inheritance, thereby adding more properties or methods
interface Fruit {
  name: string;
}

interface Apple extends Fruit {
  kind: string;
}

Based on comprehensive examples,typeSuitable for defining complex type alias and generic types, as well as defining conditional types.interfaceIt also has similar capabilities, which are suitable for describing the shape of an object, defining the contracts and implementations of classes, and inheritance and extensions between interfaces. These two can be replaced by each other in many cases

3. Compatibility between type and interface

  • type: If you repeatedly define the type alias, TypeScript will report an error. This means that an existing type cannot be redefined
type A = { x: string };
 type A = { y: string }; // Error: Repeat definition
  • interface: If multiple interfaces with the same name are defined, they will be merged into a single interface instead of an error. When multiple interfaces with the same name appear, their members are merged into one interface. This merge will take place at the type level and will not have an impact at runtime.
interface A {
  x: string;
}
interface A {
  y: string;
  z: string;
}

Take this example, no matter which one you useinterface A, will refer to the same merged interface definition. This merge mechanism allows interfaces in TypeScript to be organized and managed more flexibly

Conclusion

typeandinterfaceIn TypeScript, they are all keywords used to define types, and they each have their own advantages and applicable scenarios. Understanding the differences and features between them can better utilize TypeScript's type system to improve code quality and development efficiency

In daily development work, we must follow team specifications. For example, it can be usedinterfaceDefine a complex object type, which can be used when combining different types.typeKeyword definition

<Previous Next>