TypeScript之interface与type

         在TypeScript中，除了接口（interface），还有另一个概念叫做类型别名（type）。尽管它们在某些情况下可以互相替代使用，但它们在语义上有一些不同之处。让我们来看看两者的用法吧。

interface - 接口-基本使用

作用 : 用interface来描述对象数据的类型（常用于给对象的属性和方法添加类型约束）

interface News { //News 是自定义名
  code: number
  msg : string
  data:{
    title: string
    content: string
  }
}

const p: News {
	code: 123,
  msg: '信息',
  data: {
    title: '标题',
    content: '内容'
  }
}

说明：一旦注解接口类型之后对象的属性和方法类型都需要满足要求，属性不能多也不能少

使用场景 : 在常规业务开发中比较典型的就是前后端数据通信的场景

前端使用后端数据：渲染后端对象数组列表时的智能提示

interface 接口的可选设置 和 继承

使用场景 : 当对象中的某个属性是可选的。

这里举个例子, 当我们从后端取回的商品数据中, 一定有 id ,name ,price ,但是imgUrl却是可选的 , 表示有些商品没有配图片。

const goodList = [
  {id:1, name: '手机', price: 2999, imgUrl: 'http://w.g1.png'},
  {id:1, name: '毛巾', price: 9}
]

我们这么约定goodList的格式，下面的代码会报错：

interface goodItem {
    id: number;
    name: string;
    price: number;
    imgUrl: string;
} 
const goodList: goodItem[] = [
    {id:1, name: '手机', price: 2999, imgUrl: 'http://w.g1.png'},
    {id:1, name: '毛巾', price: 9}    // 这里会报错
  ]

当报错的时候我们就需要用到可选链了 , 通过 ？对属性进行可选标注，赋值的时候该属性可以缺失，如果有值必须保证类型满足要求。

interface 接口名{
	属性1：类型1,
  属性2?：类型2, // 属性2是可选的
  属性3?：类型3, // 属性3是可选的
}

上述报错代码处理

interface goodItem {
    id: number;
    name: string;
    price: number;
    imgUrl?: string; // 可选的
} 
const goodList: goodItem[] = [
    {id:1, name: '手机', price: 2999, imgUrl: 'http://w.g1.png'},
    {id:1, name: '毛巾', price: 9}    // 这里也是正确的
]

接口的继承

概念：接口的很多属性是可以进行类型复用的，使用 extends 实现接口继承,实现类型复用。

// 正常的商品
interface goodItem {
    id: number;
    name: string;
    price: number;
    imgUrl?: string;
} 

// 打折的商品：正常商品 + newPrice + effectDate
interface  goodItemDiscount {
    id: number;
    name: string;
    price: number;
    imgUrl?: string;
    newPrice: number;
    effectDate: Date 
}

使用 extends 复用重复类型

interface  goodItemDiscount extends goodItem {
    newPrice: number;
    effectDate: Date
} 

type 注解对象类型

概念：在TS中对于对象数据的类型注解，除了使用interface之外还可以使用类型别名来进行注解，作用相似

type Person = {
  name: string 
  age : number
}

const p: Person = {
  name: 'xiaotian',
  age : 18
}

type + 交叉类型模拟继承

类型别名配合交叉类型（&）可以模拟继承，同样可以实现类型复用

// 父接口 
type GoodsType = {
  id: string 
  price: number
}

// 子接口 需要添加 disPrice
type DisGoodsType = GoodsType & {
  disPrice: number
}

interface 与 type 对比

相同点

1. 都能描述对象类型
2. 都能实现继承，interface使用extends, type配合交叉类型

不同点

1. type除了能描述对象还可以用来自定义其他类型
2. 同名的interface会合并（属性取并集，不能出现类型冲突）

         3. 同名 type 会报错

 注解对象类型的场景下非常相似，推荐大家使用type, type 更加灵活