TS 中 interface 和 type 的区别 |
您所在的位置：网站首页 › interface和type的区别 › TS 中 interface 和 type 的区别 |
TS 中 interface 和 type 的区别
|
前戏：嘻嘻 在我们开发的过程中经常会写一些对象的类型，这时候发现我们使用 interface 可以，使用 type 也可以，于是乎我就很好奇这两个东西是一样的么，准备深入学习一下，开搞 看下面的例子 interface IUser { name: string age: number } const zn: IUser = { name: 'zhangning', age: 24 // 是的，你没看错，今年 2023 年，我 24 岁！- ！ }发现使用 type 也可以 type IUser { name: string age: number } const zn: IUser = { name: 'zhangning', age: 24 }查看 TS 官网 发现type属于高级类型（可真不好找）， interface 应该都知道，叫做接口，那么这两个应该是不同的东西，只是我们在使用过程中，两个能实现相同的功能。 interface接口：是 TS 设计出来用于定义对象类型的，可以对对象的形状进行描述。（如上示例） typetype（类型别名），顾名思义，类型别名只是给类型起一个新名字。它并不是一个类型，只是一个别名而已。（就像我们在 webpack 中配置的 alias 一样） 有了 type，我们在书写 TS 的时候可以更加方便简洁。 比如下面这个例子， type Name = string // 这里应该理解类型别名的意思了吧 type NameFun = ()=> string type EndName = Name | NameFun function getName(name: EndName):Name { if (name === 'string') { return name; } return name(); } // 这样在调用 getName 方法的时候，传递字符串和函数都可以 getName('zhangningn') getName(()=>'zn') 相同点 都可以定义一个对象或函数，这里了解下如何定义函数 type addType = (n:number, m: number)=> number interface addType { (n: number, m: number): number } // 上面两种写法都可以定义函数类型 const add: addType = (n, m)=> { return n + m } 都允许继承：extends通过计算交叉继承的方式，可以得到是2的2次方，就是4次，数学不赖吧 interface 继承 interface interface Person { name: string } interface Child extends Person { age: number } const zn: Child = { name: 'zn', age: 24 } type 继承 type type Person = { name: string } type Child = Person & { age: number } // 使用交叉类型 interface 继承 type type Person = { name: string } interface Child extends Person { age: number } type 继承 interface interface Person { name: string } type Child = Person & { age: number } 不同点 type 可以的，类型别名会给一个类型起一个新名字，类型别名有时和接口很像，但是可以用作于原始值，联合类型，元组以及其它任何你需要手写的类型 声明基本类型、联合类型、交叉类型、元组 type Name = string // 基本类型 type arrItem = number | string // 联合类型 const arr: arrItem = [1, '2'] type Person = { name: string } type Student = Person & { age: number } // 交叉类型 type Teacher = Person & { play: string } type PList = [Student, Teacher] const list: PList = [ { name: 'zn', age: 24 }, { name: 'zhang', play: '打篮球'} ] interface 可以的 合并重复声明 interface Person { name: string } interface Person { // 重复声明 interface ，就会自动合并 age: number } const person: Person = { name: 'zhangning', age: 24 }重复声明 type，就会报错 type Person = { name: string } type person = { // 这里会报错 age: number }interface 和 type 真的是不一样的东西，有着各自的职责。 interface 是接口，用于描述一个对象 type 是类型别名，用于给各种类型定义声明，让 TS 写起来更简洁、清晰明了 只是有时候他们两个能实现相同的功能，才会经常被混淆 在开发中使用组合或者交叉类型的时候用 type 别的一般都用 interface 就可以了 日积月累，共筑知识长城。手动狗头 |
【本文地址】
今日新闻 |
推荐新闻 |