TypeScript type 和 interface区别

类型别名 type 和 接口 interface 区别与联系

不同点：

（1）类型别名type用来给一个类型起个新名字，接口interface是命名数据结构（例如对象）的另一种方式

（2）type可以用来表示基本类型、对象类型、联合类型、元组和交集；interface仅限于描述对象类型

（3）interface 定义重名了会合并属性，type 会报错

（4）interface 可以 extends， type 是不允许 extends ，但是 type 缺可以通过交叉类型 实现 interface 的 extend 行为，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 与 interface 类型 交叉

相同点：

（1）都可以描述 Object和Function

（2）interface 和 type 都可以继承。

类型别名 type

类型别名用来给一个类型起个新名字，使用 type 创建类型别名，类型别名不仅可以用来表示基本类型，还可以用来表示对象类型、联合类型、元组和交集

type userName = string; // 基本类型
type userAge = string | number; // 联合类型
type arr = number[]; 
 
// 对象类型
type Person = {
    name: userName;
    age: userAge;
    gender: string;
    isDev: boolean;
};
// 泛型
type Tree<T> = { value: T };
 
const user: Person = {
    name: "jiangyx",
    age: 18,
    gender: "女",
    isDev: false,
};
 
const numarr: arr = [1, 2, 3];

接口 interface

接口是命名数据结构（例如对象）的另一种方式；与type 不同，interface仅限于描述对象类型。

type userName = string; // 基本类型
type userAge = string | number; // 联合类型
 
interface Person {
    name: userName;
    age: userAge;
    gender: string;
    isDev: boolean;
}

两者都可以用来描述对象或函数,但语法不同:

Type

type Point = {
  x: number;
  y: number;
};
 
type SetPoint = (x: number, y: number) => void;

Interface

interface Point {
  x: number;
  y: number;
}
 
interface SetPoint {
  (x: number, y: number): void;
}

二者都可以被继承

interface 和 type 都可以继承。

另一个值得注意的是，接口和类型别名并不互斥。类型别名可以继承接口，反之亦然。只是在实现形式上，稍微有些差别。

interface 继承 interface

interface Person{
    name:string
}
 
interface Student extends Person { stuNo: number }

interface 继承 type

type Person{
    name:string
}
 
interface Student extends Person { stuNo: number }

type 继承 type

type Person{
    name:string
}
 
type Student = Person & { stuNo: number }

type 继承 interface

interface Person{
    name:string
}
 
type Student = Person & { stuNo: number }