TypeScript学习笔记之类型缩小

 更新时间:2022年09月03日 10:29:26   作者:林有酒  
在TypeScript中若一个变量使用了联合类型,那么当我们使用该变量时必不可少的会去明确的限制该变量的具体类型,这称为类型缩小,这篇文章主要给大家介绍了关于TypeScript学习笔记之类型缩小的相关资料,需要的朋友可以参考下

类型缩小

什么是类型缩小呢?

类型缩小的英文是 Type Narrowing;

我们可以通过类似于 typeof padding === "number" 的判断语句,来改变TypeScript的执行路径;

在给定的执行路径中,我们可以缩小比声明时更小的类型,这个过程称之为缩小;

而我们编写的 typeof padding === "number 语句可以称之为 类型保护( type guards);

常见的类型保护有如下几种:

  • typeof
  • 平等缩小(比如===、 !==)
  • instanceof
  • in
  • 等等…

我们主要讲解typeof、平等缩小、instanceof、in这四种

typeof

在TypeScript中,检查返回的值typeof是一种类型保护:因为TypeScript对如何typeof操作不同的值进行编码。

例如我们有下面一个常见, 封装一个函数, 函数要求传入参数ID, 传入的ID有可能是string类型有可能是number类型

当传入的ID是string类型时, 要求将ID的字母全部转为大写

function printID(id: string|number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase())
  } else {
    console.log(id)
  }
}

// 测试
printID(123)
printID("aaa")
  • 上面代码中, 整个if判断语句就是类型缩小, 例如当代码进入if语句第一个分支时, 一定是string类型, 进入第二个分支一定是number类型
  • if的判断语句就称为类型保护

平等缩小

我们可以使用Switch或者相等的一些运算符来表达相等性(比如=== , !== , == , and != ):

type Direction = "left" | "right" | "top" | "bottom"
function printDirection(direction: Direction) {
  // 平等类型缩小
  switch (direction) {
    case "left":
      console.log(direction)
      break
    case "right":
      console.log(direction)
      break
    case "top":
      console.log(direction)
      break
    case "bottom":
      console.log(direction)
      break
    default:
      console.log("调用默认方法")
  }
}

// 测试
printDirection("left")
printDirection("right")
printDirection("top")
printDirection("bottom")

instanceof

JavaScript 有一个运算符来检查一个值是否是另一个值的“实例”:

function printTime(time: string|Date) {
  // 判断time是否是Date的实例
  if (time instanceof Date) {
    console.log(time.toUTCString())
  } else {
    console.log(time)
  }
}

// 测试
printTime("2020-01-02")
const date = new Date()
printTime(date)

如果不好理解我们可以看下面这个例子

class Teacher {
  working() {
    console.log("正在工作")
  }
}

class Student {
  studying() {
    console.log("正在学习")
  }
}

function work(p: Student | Teacher) {
  // 判断是哪一个实例
  if (p instanceof Teacher) {
    p.working()
  } else {
    p.studying()
  }
}

// 测试
const stu = new Student()
const tec = new Teacher()

work(stu) // 正在学习
work(tec) // 正在工作

in

Javascript 有一个运算符,用于确定对象是否具有带名称的属性: in运算符

如果指定的属性在指定的对象或其原型链中,则in 运算符返回true;

// () => void表示是一个函数类型
type Dog = {running: () => void}
type Fish = {swimming: () => void}

function walk(animal: Dog|Fish) {
  // 判断函数是否在animal中
  if ("swimming" in animal) {
    animal.swimming()
  } else {
    animal.running()
  }
}

// 测试
const dog: Dog = {
  running() {
    console.log("狗是跑的")
  }
}
const fish: Fish = {
  swimming() {
    console.log("鱼是游的")
  }
}

walk(dog) // 狗是跑的
walk(fish) // 鱼是游的

总结

到此这篇关于TypeScript类型缩小的文章就介绍到这了,更多相关TypeScript类型缩小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序新增的拖动组件movable-view使用教程

    微信小程序新增的拖动组件movable-view使用教程

    这篇文章主要给大家介绍了微信小程序最近新增的拖动组件movable-view的简单使用教程,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • 使用JavaScript实现轮播图效果

    使用JavaScript实现轮播图效果

    这篇文章主要为大家详细介绍了使用JavaScript实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法

    关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法

    客户端是UTF-8编码,这也是现在大家公认的标准编码在这种情况下,实用AJAX异步获取GB2312编码的服务器端信息时,不可避免的要遇到汉字乱码问题
    2010-11-11
  • 微信小程序仿知乎实现评论留言功能

    微信小程序仿知乎实现评论留言功能

    这篇文章主要为大家详细介绍了微信小程序仿知乎实现评论留言功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Echarts实现点击列表联动饼图的示例代码

    Echarts实现点击列表联动饼图的示例代码

    本文主要介绍了Echarts实现点击列表联动饼图的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JS实现控制表格内指定单元格内容对齐的方法

    JS实现控制表格内指定单元格内容对齐的方法

    这篇文章主要介绍了JS实现控制表格内指定单元格内容对齐的方法,涉及javascript操作表格单元格内容样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 如何通过JavaScript来实现页面间数据传递

    如何通过JavaScript来实现页面间数据传递

    这篇文章主要给大家介绍了关于如何通过JavaScript来实现页面间数据传递的相关资料,在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,需要的朋友可以参考下
    2023-11-11
  • js事件监听器用法实例详解

    js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下
    2015-06-06
  • ios中视频的最后一桢问题解决

    ios中视频的最后一桢问题解决

    这篇文章主要给大家介绍了关于ios中视频的最后一桢问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • javascript简单实现滑动菜单效果的方法

    javascript简单实现滑动菜单效果的方法

    这篇文章主要介绍了javascript简单实现滑动菜单效果的方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论