typescript中interface和type的区别

在TypeScript中,interface和type都用于定义类型,但它们有以下区别:

  1. 语法
    interface使用关键字interface来定义类型,而type使用关键字type来定义类型。
  2. 定义方式
    • interface 可以通过继承其他interface来扩展自身的属性和方法,也可以多次声明同名的interface,它们会自动合并成一个接口。
    • type可以使用交叉类型(用&连接)或联合类型(用 | 连接)来组合其他类型,但不能直接继承其他type。同样的,多次声明同名的type导致类型冲突错误。
javascript 复制代码
interface Person {
	name: string
}

interface Employee extends Person {
	salary: number;
}

const john: Person = { name: 'John' };

type Dog = {
	name: string;
}

type GuardDog = Dog & {
	isGurading: boolean;
}

const dog: GuardDog = { name: "Buddy", isGuarding: true}
  1. 同名合并
    • 如果你定义了多个同名的interface,它们会被自动合并成一个,合并后的interface会拥有所有定义的属性和方法。
    • type不支持同名合并,如果多次声明同名的type,则会导致类型冲突错误。
javascript 复制代码
interface Person {
	name: string;
}
interface Person{
	age: number;
}

const p: Person = { name: 'John', age: 25 };
  1. 兼容性
    • 对于对象类型,interface会进行兼容性检查以确保属性的兼容性和缺失属性的检查;而type则更加宽松,只要目标类型具有所需的属性即可。
    • 当使用implement关键字实现一个接口时,编译器会强制检查是否实现了所有接口的属性和方法。
javascript 复制代码
interface Animal {
	name: string;
}

type Dog = {
	name: string;
	breed: string;
}

const animal: Animal = { name: 'Tom' };
const dog: Dog = { name: 'Spike', breed: "Labrador"};

animal = dog; // 兼容
dog = animal; // 不兼容

总体来说,interface主要用于定义对象类型和接口的继承,而type则更灵活,可以定义复杂的类型别名。在选择使用interface还是type时,可以根据具体情况和个人偏好来决定。一般情况下,如果需要定义对象的结构或者实现类似接口的功能,可以使用interface;如果需要描述更复杂的类型或进行类型组合,可以使用type。

相关推荐
IT_陈寒几秒前
深入理解Redis:核心原理与最佳实践
前端·人工智能·后端
Zhu7589 分钟前
开源项目-Sablewisp-轻量、现代的 Chrome 书签管理扩展(Manifest V3)
前端·chrome
wespaul10 分钟前
一条自然语言命令的 49 个节点:可视化编排与每段强校验
前端·数据库
OH_TPC11 分钟前
【鸿蒙优选三方库】@ohos/axios:前端转鸿蒙,网络层几乎不用改
前端·华为·harmonyos·鸿蒙
程序员大阳13 分钟前
副队长CSS教程(38)–transform 变换
前端·css·变换·transform
程序员Sunday22 分钟前
Vue 3 响应式原理是什么?Proxy、ref 和 reactive 有什么区别?
前端·javascript
mldong32 分钟前
一个 npm 包,九页审批中心:Vue3 项目接上工作流引擎
前端·javascript·vue.js
架构技术专栏9 小时前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海10 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
志尊宝11 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发