697 TypeScript接口的使用：接口的声明，可选属性，只读属性，索引类型，函数类型，接口继承，交叉类型，接口的实现，字面量赋值，枚举类型

接口的声明

---

可选属性

---

只读属性

---

索引类型

---

函数类型

---

接口继承

---

接口的实现

---

交叉类型

---

交叉类型的应用

---

interface和type区别

---

字面量赋值

---

TypeScript枚举类型

---

枚举类型的值

---

01_声明对象类型.ts

// 通过类型(type)别名来声明对象类型
// type InfoType = {name: string, age: number}

// 另外一种方式声明对象类型: 接口interface
// 在其中可以定义可选类型，也可以定义只读属性
interface IInfoType {
  readonly name: string
  age: number
  friend?: {
    name: string
  }
}

const info: IInfoType = {
  name: 'why',
  age: 18,
  friend: {
    name: 'kobe',
  },
}

console.log(info.friend?.name)
console.log(info.name)
// info.name = "123"
info.age = 20

---

02_索引类型.ts

// 通过interface来定义索引类型 【根据数据结构，推导出要定义的类型的结构。】
interface IndexLanguage {
  [index: number]: string
}

const frontLanguage: IndexLanguage = {
  0: 'HTML',
  1: 'CSS',
  2: 'JavaScript',
  3: 'Vue',
}

interface ILanguageYear {
  [name: string]: number
}

const languageYear: ILanguageYear = {
  C: 1972,
  Java: 1995,
  JavaScript: 1996,
  TypeScript: 2014,
}

---

03_函数类型.ts

// type CalcFn = (n1: number, n2: number) => number

// 可调用的接口 【interface定义对象类型更合适，函数类型推荐使用类型别名type，阅读性更强。】
interface CalcFn {
  (n1: number, n2: number): number
}

function calc(num1: number, num2: number, calcFn: CalcFn) {
  return calcFn(num1, num2)
}

const add: CalcFn = (num1, num2) => {
  return num1 + num2
}

calc(20, 30, add)

---

04_接口的继承.ts

interface ISwim {
  swimming: () => void
}

interface IFly {
  flying: () => void
}

// 可以继承多个接口
interface IAction extends ISwim, IFly {}

const action: IAction = {
  swimming() {},
  flying() {},
}

---

05_交叉类型.ts

// 一种组合类型的方式: 联合类型
type WhyType = number | string
type Direction = 'left' | 'right' | 'center'

// 另一种组件类型的方式: 交叉类型
type WType = number & string

interface ISwim {
  swimming: () => void
}

interface IFly {
  flying: () => void
}

// 【定义对象类型用interface，函数、联合、交叉类型用类型别名type。】
type MyType1 = ISwim | IFly
type MyType2 = ISwim & IFly

const obj1: MyType1 = {
  flying() {},
}

const obj2: MyType2 = {
  swimming() {},
  flying() {},
}

export {}

---

06_接口的实现.ts

// 【1、编写接口ISwim、IEat；2、编写Fish，实现ISwim、IEat；3、编写Pesron，实现ISwim；4、编写函数swimAction，调用参数的swimming方法；5、调用swimAction，传入Fish类、Person类。】

interface ISwim {
  swimming: () => void
}

interface IEat {
  eating: () => void
}

// 类实现接口
class Animal {}

// 继承: 只能实现单继承
// 实现: 【类】实现接口, 类可以实现多个接口
class Fish extends Animal implements ISwim, IEat {
  swimming() {
    console.log('Fish Swmming')
  }

  eating() {
    console.log('Fish Eating')
  }
}

class Person implements ISwim {
  swimming() {
    console.log('Person Swimming')
  }
}

// 编写一些公共的API: 面向接口编程 【面向接口编程的前提：让类实现接口。】
function swimAction(swimable: ISwim) {
  swimable.swimming()
}

// 所有实现了接口的类对应的对象, 都可以传入
swimAction(new Fish())
swimAction(new Person())

swimAction({ swimming: function () {} })

---

07_interface和type的区别.ts

// interface IFoo {
//   name: string
// }

// interface IFoo {
//   age: number
// }

// const foo: IFoo = {
//   name: "why",
//   age: 18
// }

document.getElementById("app") as HTMLDivElement  // 【有内置的 Document类型。】
window.addEventListener // 【有内置的 Window类型】

interface Window {
  age: number
}

// window.age = 19
// console.log(window.age)

// type IBar = {
//   name: string
//   age: number
// }

// type IBar = {}

interface IPerson {}

---

08_字面量赋值.ts

interface IPerson {
  name: string
  age: number
  height: number
}

// const info = {
//   name: "why",
//   age: 18,
//   height: 1.88,
//   address: "广州市"
// }

// // freshness擦除: 【当把info赋值给p的时候，会去除info中多余的属性。不是真正删除属性，而是类型检测这一步做了 freshness擦除 操作。】
// const p: IPerson = info

// console.log(info)
// console.log(p)


function printInfo(person: IPerson) {
  console.log(person)
}

// 代码会报错
// printInfo({
//   name: "why",
//   age: 18,
//   height: 1.88,
//   address: "广州市"
// })

const info = {
  name: "why",
  age: 18,
  height: 1.88,
  address: "广州市"
}

printInfo(info)

---

09_枚举类型的使用.ts

// type Direction = "left" | "Right" | "Top" | "Bottom"

enum Direction {
  LEFT,
  RIGHT,
  TOP,
  BOTTOM,
}

function turnDirection(direction: Direction) {
  switch (direction) {
    case Direction.LEFT:
      console.log('改变角色的方向向左')
      break
    case Direction.RIGHT:
      console.log('改变角色的方向向右')
      break
    case Direction.TOP:
      console.log('改变角色的方向向上')
      break
    case Direction.BOTTOM:
      console.log('改变角色的方向向下')
      break
    default:
      const foo: never = direction
      break
  }
}

turnDirection(Direction.LEFT)
turnDirection(Direction.RIGHT)
turnDirection(Direction.TOP)
turnDirection(Direction.BOTTOM)

---

10_枚举类型的值.ts

// type Direction = "left" | "Right" | "Top" | "Bottom"

enum Direction {
  LEFT = "LEFT",
  RIGHT = "RIGHT",
  TOP = "TOP",
  BOTTOM = "BOTTOM"
}

let name: string = "abc"
let d: Direction = Direction.BOTTOM

function turnDirection(direction: Direction) {
  console.log(direction)
  switch (direction) {
    case Direction.LEFT:
      console.log("改变角色的方向向左")
      break;
    case Direction.RIGHT:
      console.log("改变角色的方向向右")
      break;
    case Direction.TOP:
      console.log("改变角色的方向向上")
      break;
    case Direction.BOTTOM:
      console.log("改变角色的方向向下")
      break;
    default:
      const foo: never = direction;
      break;
  }
}

turnDirection(Direction.LEFT)
turnDirection(Direction.RIGHT)
turnDirection(Direction.TOP)
turnDirection(Direction.BOTTOM)

export {}

---