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。

相关推荐
yuzhiboyouye39 分钟前
web前端英语面试
前端·面试·状态模式
canonical_entropy2 小时前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
前端·低代码·前端框架
东方小月2 小时前
5分钟搞懂Harness Engineering(驾驭工程):从提示词到AI Agent的进化之路
前端·后端·架构
我叫黑大帅2 小时前
为什么需要 @types/react?解决“无法找到模块 react 的声明文件”报错
前端·javascript·面试
之歆2 小时前
DAY_21JavaScript 深度解析:数组(Array)与函数(Function)(一)
前端·javascript
XinZong3 小时前
【AI社交】基于OpenClaw自研轻量化AI社交平台实战
前端
Le_ee3 小时前
ctfweb:php/php短标签/.haccess+图片马/XXE
开发语言·前端·php
爱上好庆祝3 小时前
学习js的第七天(wed APIs的开始)
前端·javascript·css·学习·html·css3
KaMeidebaby4 小时前
卡梅德生物技术快报|冻干工艺开发:注射用心肌肽全流程参数优化与工程化方案
前端·其他·百度·新浪微博
ooseabiscuit4 小时前
Laravel6.x核心优化与特性全解析
android·开发语言·javascript