6、什么是类型断言?

news2024/11/15 1:56:06

        虽然 TypeScript 很强大,但有时还不如我们了解一个值的类型方便,这时候我们更希望 TypeScript 不要帮我们进行类型检查,而是交给我们自己来,所以就用到了类型断言。类型断言有点像是一种类型转换,它把某个值强行指定为特定类型,我们先看个例子:

const getLength = target => {
  if (target.length) {
    return target.length;
  } else {
    return target.toString().length;
  }
};

        这个函数能够接收一个参数,并返回它的长度,我们可以传入字符串、数组或数值等类型的值。如果有 length 属性,说明参数是数组或字符串类型,如果是数值类型是没有 length 属性的,所以需要把数值类型转为字符串然后再获取 length 值。现在我们限定传入的值只能是字符串或数值类型的值:

const getLength = (target: string | number): number => {
  if (target.length) { // error 报错信息看下方
    return target.length; // error 报错信息看下方
  } else {
    return target.toString().length;
  }
};

        当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法,所以现在加了对参数target和返回值的类型定义之后就会报错:

// 类型"string | number"上不存在属性"length"
// 类型"number"上不存在属性"length"

        很显然,我们是要做判断的,我们判断如果 target.length 不为 undefined, 说明它是有 length 属性的,但我们的参数是string | number联合类型,所以在我们开始做判断的时候就会报错。这个时候就要用类型断言,将tagrget的类型断言成string类型。它有两种写法,一种是<type>value,一种是value as type,下面例子中我们用两种形式都写出来:

const getStrLength = (target: string | number): number => {
  if ((<string>target).length) { // 这种形式在JSX代码中不可以使用,而且也是TSLint不建议的写法
    return (target as string).length; // 这种形式是没有任何问题的写法,所以建议大家始终使用这种形式
  } else {
    return target.toString().length;
  }
};

        例子的函数体用到了三次target,前两次都是访问了 target.length 属性,所以都要用类型断言来表明这个地方是 string 类型;而最后的 target 调用了 toString方法,因为 number 和 string 类型的值都有 toString 方法,所以没有报错。

        这样虽然没问题了,但是每一处不同值会有不同情况的地方都需要用类型断言,后面讲到高级类型的时候会讲如何使用自定义类型保护来简化这里。注意了,这两种写法都可以,但是 tslint 推荐使用as关键字,而且在 JSX 中只能使用as这种写法。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/459253.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue收集表单数据学习笔记

收集表单数据 v-model双向数据绑定&#xff0c;收集的是input框的value&#xff0c;单选按钮不存在value&#xff0c;就像代码中的男女选项&#xff0c;即使绑定性别v-model“sex”&#xff0c;控制台依然不能接收性别的值&#xff0c;因为没有value值&#xff0c;&#xff0c…

python 第二章——数据类型详解

文章目录 前言一、什么是数据类型1.变量2.注释 二、数字三、字符串四、布尔五、列表六、元组七、集合八、字典总结 前言 本系列教程目录&#xff0c;可点击这里查看&#xff1a;Python教程目录 学习一门编程语言&#xff0c;第一件事就应该是熟练掌握这门编程语言的基本数据类…

[Java]JavaWeb开发中的MVC设计模式

一、有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet&#xff0c;如何编写jsp及如何更新浏览器中显示的内容。但是我们之前自己编写的应用一般存在无条理性&#xff0c;对于一个小型的网站这样的编写没有任何问题&#xff0c;但是一但…

MCDF代码详解,mcdf_rgm_pkg.sv代码超详细注释

寄存器模块代码详解 好戏开始: `include "param_def.v" package mcdf_rgm_pkg; import uvm_pkg::*; `include "uvm_macros.svh" import reg_pkg::*; //具有uvm_reg类型的专用寄存器描述[write-red-reg] class ctrl_reg extends uvm_r…

机器人教学中游戏化课程案例尝试

本文内容严格按创作模板发布&#xff1a; 2023年LPL春季赛季后赛正在火热进行中&#xff0c;你们心中的总冠军是哪支队伍呢&#xff1f;作为热爱游戏的程序猿&#xff0c;一起来聊聊你那些有意义的游戏开发经历吧&#xff01; 游戏化ROS机器人课程的优势有以下七点&#xff1a…

第3章-运行时数据区

此章把运行时数据区里比较少的地方讲一下。虚拟机栈&#xff0c;堆&#xff0c;方法区这些地方后续再讲。 转载https://gitee.com/youthlql/JavaYouth/tree/main/docs/JVM。 运行时数据区概述及线程 前言 本节主要讲的是运行时数据区&#xff0c;也就是下图这部分&#xff0c…

5.微服务项目实战---Gateway--服务网关,实现统一认证、鉴权、监控、路由转发等

5.1 网关简介 大家都都知道在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用 这么多的微服务呢&#xff1f;如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去调用。 这样的架构&#xff0…

用友联合7家信创生态伙伴成立“信创领先实践联盟”,助力企业数智化国产替代

数字经济背景下&#xff0c;面对国际局势不稳定等以切不确定因素&#xff0c;只有突破和掌握关键核心技术&#xff0c;打造生态话语权&#xff0c;掌握产业发展主动权&#xff0c;向产业价值链高端迈进&#xff0c;我国才能摆脱受制于人局面。而推动信创产业繁荣发展&#xff0…

SAP-选择实施离散制造模式还是重复制造模式?

Implement Discrete Manufacturing or Repetitive Manufacturing? 翻译一篇&#xff0c;反正我也写不出来~~~~ “狗还是猫&#xff1f;” 这可能是世界上第二难的问题。 想知道最难的是什么&#xff1f; 这里是&#xff1a; “实施离散制造还是重复制造&#xff1f;” 作…

【设计模式】我终于读懂了访问者模式。。。

&#x1f330;测评系统的需求 将观众分为男人和女人&#xff0c;对歌手进行测评&#xff0c;当看完某个歌手表演后&#xff0c;得到他们对该歌手不同的评价(评价 有不同的种类&#xff0c;比如 成功、失败 等)传统方案 &#x1f331;传统方式的问题分析 如果系统比较小&…

2023年面试题入门篇和进阶篇万余字题目总结【答案+解析】

2023年Java面试题入门篇和进阶篇总结【答案解析】 入门篇1.、下列代码输出结果是()2.x为float类型&#xff0c;y为double类型&#xff0c;a为int类型&#xff0c;b为long类型&#xff0c;c为char类型&#xff0c;问xy*a/xb/ac的值是什么类型3.下列哪种说法是正确的4.mysql表use…

rollup打包封装的js类库

rollup中文网&#xff1a;简介 | rollup.js 中文文档 | rollup.js中文网Rollup 是一个 JavaScript 模块打包器&#xff0c;可以将小块代码编译成大块复杂的代码&#xff0c;Rollup 对代码模块使用新的标准化格式&#xff0c;这些标准都包含在 JavaScript 的 ES6 版本中。https:…

postman解决报错填坑指南

postman报错问题处理总结 问题1&#xff1a;如何解决postman请求异常丢掉proxy开头header自动使用系统环境变量代理问题描述&#xff1a;postman请求&#xff0c;配置了proxy开头的header&#xff0c;但是发请求的时候没有携带&#xff0c;可以查看postman的View-Show Postman …

D. Frets On Fire(二分 + 前缀和)

Problem - D - Codeforces Miyako带着一个乌克丽丽来到跳蚤王国。她与当地的跳蚤居民成为好朋友&#xff0c;并每天为他们演奏美妙的音乐。 作为国报&#xff0c;跳蚤们为她制作了一个更大的乌克丽E:它有n根这&#xff0c;每核这上都有(10181)个品位&#xff08;ires)&#xff…

危险区域闯入识别系统 yolov8

危险区域闯入识别系统通过YOLOv8网络模型技术&#xff0c;危险区域闯入识别系统对现场画面中发现有人违规闯入禁区&#xff0c;系统立即抓拍告警同步回传后台。YOLOv8 提供了一个全新的 SOTA 模型&#xff0c;包括 P5 640 和 P6 1280 分辨率的目标检测网络和基于 YOLACT 的实例…

打电话用的耳机哪个牌子的好?打电话专用的蓝牙耳机推荐

耳机是可以帮助我们进行工作的娱乐设备&#xff0c;像日常中使用最多的就是通话和听歌啦&#xff0c;近几年不论是从产品推出速度&#xff0c;还是做工及品质上来说都有了质的飞跃&#xff0c;下面分享几款打电话音质好的蓝牙耳机。 一、南卡小音舱Lite2蓝牙耳机 蓝牙版本&am…

Inpaint Anything (AI替换)

1、介绍 Inpaint Anything 是一个结合了 SAM、图像修补模型&#xff08;例如 LaMa&#xff09;和 AIGC 模型&#xff08;例如 Stable Diffusion&#xff09;等视觉基础模型的AI图像替换&#xff0c;修补系统。 基于此系统&#xff0c;用户可以方便的使用IA进行图像替换&#…

electron+vue3全家桶+vite项目搭建【14】electron多窗口,多语言切换不同步更新问题

文章目录 引入问题演示补充逻辑注意封装缓存工具类补充状态管理调整多语言初始化调整多语言切换组件 解决方案思路整理渲染进程监听语言切换主进程创建多语言切换处理语言切换组件通知主进程语言切换 最终实现效果演示 引入 我们之前在这篇文章中集成了 多语言切换&#xff0c…

各种加法器介绍——真值表、表达式、电路图、verilog代码实现

文章目录 前言一、半加器二、全加器三、串行/行波进位加法器&#xff08;Ripple-Carry Adder/RCA&#xff09;四、超前进位加法器&#xff08;Lookahead Carry Adder/LCA&#xff09;五、进位保存加法器&#xff08;Carry Save Adder/CSA&#xff09; 前言 2023.4.25 一、半加…

Stable Diffusion人工智能图像合成

AI 图像生成大有来头。新发布的开源图像合成模型称为Stable Diffusion&#xff0c;它允许任何拥有 PC 和像样的 GPU 的人想象出他们能想象到的几乎任何视觉现实。它几乎可以模仿任何视觉风格&#xff0c;如果你给它输入一个描述性的短语&#xff0c;结果就会像魔术一样出现在你…