【Typescript重点】接口的使用

发布于:2022-12-25 ⋅ 阅读:(217) ⋅ 点赞:(0)

🍳作者: 贤蛋大眼萌,一名很普通但不想普通的程序媛 \color{#FF0000}{贤蛋 大眼萌 ,一名很普通但不想普通的程序媛} 贤蛋大眼萌,一名很普通但不想普通的程序媛🤳

🙊语录: 多一些不为什么的坚持 \color{#0000FF}{多一些不为什么的坚持} 多一些不为什么的坚持

📝本文章收录于专栏:Typescript学习

💭 眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂 o f f e r ,程序员的必备刷题平台 − − 牛客网 \color{#ff7f50}{眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂offer,程序员的必备刷题平台--牛客网} 眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂offer,程序员的必备刷题平台牛客网

👉🏻点击跳转刷题网免费注册学习

💼 类的类型

🧢 接口声明

在之前的文章中,我们了解到声明一个对象类型可以使用 type 关键字。对象还有另外一种声明方式,就是通过 interface 接口来声明。

image-20220906110048370

1. 可选属性

接口中也可以定义可选属性,上述例子中的 friend 属性就是可选属性。

image-20220906105921295

2. 只读属性

image-20220906105739598

🥕 索引类型

我们可能会遇到接口中不确定的属性名,类型,方法,这个时候可以使用索引类型。

image-20220906111533411

🍤 函数类型

通过interface来定义对象中普通的属性和方法的,实际上它也可以用来定义函数类型

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)
image-20220906114625440

🎨 接口继承

接口和类一样都是可以集成的,但是一般类只允许单继承,接口是支持多继承的。

interface ISwim {
  swimming: () => void
}

interface IFly {
  flying: () => void
}


interface IAction extends ISwim, IFly {

}

const action: IAction = {
  swimming() {

  },
  flying() {
    
  }
}

🌌 接口实现

一般使用实用类实现我们的接口。通过implements实现接口

image-20220906120706678

🚀 交叉类型

在开发中,通常会对对象类型进行交叉

image-20220906120035977

🏓 interface和type区别

​ 在开发中,我们是选择interface还是选择type来定义对象类型呢。

如果是定义非对象类型,通常推荐使用type。

  • interface 可以重复的对某个接口来定义属性和方法;
  • type定义的是别名,别名是不能重复的;

🎈 TypeScript枚举类型

​ 枚举类型是为数不多的TypeScript特性有的特性之一,枚举其实就是将一组可能出现的值,一个个列举出来,定义在一个类型中,这个类型就是枚举类型

​ 枚举允许开发者定义一组命名常量,常量可以是数字、字符串类型

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)

PS:

求知无坦途,学问无捷径。👣 一步一个脚印,你走过的路,每一步都算数。 \color{#ff7f50}{一步一个脚印,你走过的路,每一步都算数。} 一步一个脚印,你走过的路,每一步都算数。 每一次进步都是对自己努力的肯定。如果读了文章有收获,不如一起来学习,一起进步吧。传送门🚪刷题神器

image-20220917104224568


在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到