TS中interface和type的区别

## 1. 接口（interface）
接口主要用于类型检查，他只是一个结构契约，定义了具有相似的名称和类型的对象结构。除此之外，接口还可以定义方法和事件

## 2. 类型别名（Type Alias）
不同与intetrface只能定义对象类型，type声明任何类型，包括定义基础类型，联合声明或交叉类型

## 差异点
1. **定义类型范围**
interface只能定义对象类型，而type声明可以声明任何类型，包括基础类型、联合类型或交叉类型

```
    //基本数据类型
    type person = string
    
    //联合类型
    interface Dog {
     name: string;
    }
    interface Cat {
     age: number;
    }
    type animal = Dog | Cat
    
    //元组类型
    interface Dog {
    name: string;
    }
    interface Cat {
    age: number;
    }
    type animal = [Dog, Cat]
    // 交叉类型
    type Person = {
     name: string
    }
    type User = Person & { age: number }
    
    // type & interface
    interface Person {
     name: string
    }
    type User = {age: number} & Person
    ```
    
2. **扩展性**
接口可以extends、implements,从而扩展多个接口或类。类型没有扩展功能
    ```
    // interface extends interface
    interface Person {
     name: string
    }
    interface User extends Person {
     age: number
    }
    // interface extends type
    type Person = {
     name: string
    }
    interface User extends Person {
     age: number
    }
    ```
type可以使用交叉类型&，来使成员类型合并
    ```
    // type & type
    type Person = {
     name: string
    }
    type User = Person & { age: number }
    
    // type & interface
    interface Person {
     name: string
    }
    type User = {age: number} & Person
    
    ```

3. **合并声明**
定义两个相同名称的接口会合并声明
定义两个同名的type会出现异常
    ```
    interface Person {
     name: string
    }
    interface Person {
     age: number
    }
    //合并为：interface Person{ name: string, age: number }
    ```

4. **typeof**
type可以使用typeof获取实例类型
    ```
    let div = document.createElement('div');
    type B = typeof div
    ```

Leanote's Blog

Navigation

Recent Posts

Friend Links