# type 和 interface 的区别

# 介绍

interface只能定义对象、方法的数据结构类型;

type 可以定人任何数据（对象、方法、数组、基本类型、枚举...）的类型;

type 声明的算是类型别名，而 interface 声明的是一个新类型。

interface Point {
    x: number;
    y: number;
}
// 或者
type Point = {
    x: number;
    y: number;
};

// ===================

interface func {
  (x: number, y: number): void;
}
// 或者
type Function = (x: number, y: number): void;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 相同点

1、都可以用来描述一个对象或者函数

例子如上。
2、都允许扩展

// interface 扩展 interface
interface Name {
  name: string;
}

interface Info extends Name {
  age:number
}

// interface 扩展 type
type Name  = {
  name: string;
}

interface Info extends Name {
  age:number
}

// type 扩展 type
type Name  = {
  name: string;
}

type Info = Name & {age: number}

// type 扩展 interface
interface Name {
  name: string;
}

type Info = Name & {age: number}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

区别是，interface使用关键字extends扩展，type使用&符号连接

# 实现 implements

类可以实现interface 以及 type(除联合类型外)

interface ICat{
    setName(name:string): void;
}

class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}

// type 
type ICat = {
    setName(name:string): void;
}

class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

上面提到了特殊情况，类无法实现联合类型, 是什么意思呢？

type Person = { name: string; } | { setName(name:string): void };

// 无法对联合类型Person进行实现
// error: A class can only implement an object type or intersection of object types with statically known members.
class Student implements Person {
  name= "张三";
  setName(name:string):void{
        // todo
    }
}

1
2
3
4
5
6
7
8
9
10

# 不同之处

1、用法不一样

2、interface支持声明合并

interface 重名了会合并属性。

interface Info {
  name: string;
}

interface Info {
  age: number;
}

// 实际上的接口Info是
{
  name: string;
  age: number;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

3、type不但可以声明基本类型别名，除此之外还可以声明联合类型、交叉类型、元祖等类型

// 基本类型别名
type Name = string;

// 联合类型
type Name = string;
type Age = number;
type Info =  Name | Age

// 元祖类型
type Name = string;
type Age = number;
type Info =  [Name , Age]

1
2
3
4
5
6
7
8
9
10
11
12

4、type的其它用法

// 泛型变量
type Callback<T> = (data: T) => void;  
// Pair是一个泛型变量
type Pair<T> = [T, T]; 
// 下面这个就相当于type Coordinates = [number, number]; Coordinates是一个接受number参数类型的数组
type Coordinates = Pair<number>;

1
2
3
4
5
6
7

(opens new window)

← 练习