TypeScript中使用类型断言的几种方式分享

 更新时间:2023年09月18日 09:56:43   作者:思路大于开发  
在TypeScript中,类型断言用于告诉编译器某个变量的类型,这在我们确定变量的类型比编译器更准确时非常有用,本文给大家分享了几种TypeScript中使用类型断言方式,需要的朋友可以参考下

正文

  • 为什么需要类型断言

尽管类型推断很智能,但同时也很死板,不懂得变通。如果严格按照推断来定义类型可能会让开发者付出一些额外的却有不必要的工作与精力。事实上,开发者在不犯错的情况下,往往比编译器更清楚自己想要的类型,因此需要一种手段来绕过默认的推导行为

  • 如何断言

1.as

通过as关键字,可以强制将一个类型断言为另一个类型。如下,将Ani断言为Spp

2.as const

TypeScript中,let声明的变量具有更宽泛的类型推导

const则范围更小

下边是一个与联合类型结合使用的例子。由于s表示的是一个更宽泛的number类型,number又是1|2的父类型,从而产生报错

此时,只需要将s替换为ss,由于ss表示的是子类型,根据协变特性,子类型可以代替父类型使用

3.非空断言

当我们明确在一定条件下,某个对象的某个key一定存在时,可以通过!进行标记

  • 断言的条件

断言与any不同,它必须在一定的条件和范围内才能实现类型的互换,如下,两个不相干的类型之间无法断言

断言的前提条件是两个类型之间存在父子关系,能够产生协变或者逆变

  • 超越断言规则的断言

由于unknowany的子类型,而any又是任意类型的父类型,因此通过此中转,可以完成任意类型的断言转换

如果本文对您有用,希望能得到您的点赞和收藏

到此这篇关于TypeScript中使用类型断言的几种方式分享的文章就介绍到这了,更多相关TypeScript类型断言的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • webpack3升级到webpack4遇到问题总结

    webpack3升级到webpack4遇到问题总结

    这篇文章主要介绍了webpack3升级到webpack4遇到问题总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 使用正则替换变量

    使用正则替换变量

    使用正则替换变量...
    2007-05-05
  • js大数相加出现精度丢失、运算错误的问题

    js大数相加出现精度丢失、运算错误的问题

    js中数字类型长度达到16位时,进行加减乘除运算,会出现精度丢失,运算结果错误的问题,本文讲述精度丢失的原因及解决办法
    2023-08-08
  • 详解webpack进阶之loader篇

    详解webpack进阶之loader篇

    本篇文章主要介绍了详解webpack进阶之loader篇,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS简单实现tab切换效果的多窗口显示功能

    JS简单实现tab切换效果的多窗口显示功能

    这篇文章主要介绍了JS简单实现tab切换效果的多窗口显示功能,可实现响应鼠标事件的文字切换显示效果,涉及javascript页面元素遍历与样式变换相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • 利用JS实现窗口最大化和最小化效果

    利用JS实现窗口最大化和最小化效果

    在现代 Web 开发中,JavaScript 提供了多种方法来与浏览器窗口进行交互,包括最大化和最小化浏览器窗口,虽然浏览器通常会限制对窗口尺寸的直接控制,但我们依然可以实现一些常见的行为,本文将探讨如何使用 JavaScript 实现窗口的最大化和最小化效果
    2024-12-12
  • layui form.render(''select'', ''test2'') 更新渲染的方法

    layui form.render(''select'', ''test2'') 更新渲染的方法

    今天小编就为大家分享一篇layui form.render('select', 'test2') 更新渲染的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 光标的一些操作总结

    光标的一些操作总结

    IE下的Range操作比Mozilla下强很多,这里只讨论IE下的操作,这里选介绍几个光标定位的特点
    2006-10-10
  • 在element-ui的select下拉框加上滚动加载

    在element-ui的select下拉框加上滚动加载

    这篇文章主要介绍了在element-ui的select下拉框加上滚动加载,本文以以element-ui中的select为例,给大家介绍的非常详细,需要的朋友可以参考下
    2019-04-04
  • JavaScript和jQuery制作光棒效果

    JavaScript和jQuery制作光棒效果

    本文主要介绍了使用javaScript和jQuery制作光棒效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论