前戏：嘻嘻
在我们开发的过程中经常会写一些对象的类型，这时候发现我们使用 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 设计出来用于定义对象类型的，可以对对象的形状进行描述。（如上示例）
type
type（类型别名），顾名思义，类型别名只是给类型起一个新名字。它并不是一个类型，只是一个别名而已。（就像我们在 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 就可以了
日积月累，共筑知识长城。手动狗头
