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)都可以描述 ObjectFunction

(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;
}

二者都可以被继承

interfacetype 都可以继承。

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

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 }

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值