猿创征文|【Typescript入门】常用数据类型(3)

news2024/11/18 11:47:59

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

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

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

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

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

常用数据类型(3)

    • 🧢 类型断言 as
      • 1. 非空类型断言 !
      • 2. 可选链的使用
    • 🌽 ??和!!的作用
    • 🥕 字面量类型
    • 🍤 类型缩小
      • 1. typeof
      • 2. 平等缩小(比如===、!==)
      • 3. instanceof
      • 4. in

🧢 类型断言 as

​ 有时候TypeScript无法获取具体的类型信息,这个我们需要使用类型断言。可以把一个相对普遍的类型转换成一个相对具体的类型。

场景:比如我们通过 document.getElementById,TypeScript只知道该函数会返回 HTMLElement ,但并不知道它具体的类型。

image-20220831182623321

1. 非空类型断言 !

​ 非空断言使用的是 ! ,表示可以确定某个标识符是有值的,跳过ts在编译阶段对它的检测。

image-20220831203408226

2. 可选链的使用

可选链事实上并不是TypeScript独有的特性,它是ES11(ES2020)中增加的特性。

​ 可选链使用可选链操作符 ?.

作用是当对象的属性不存在时,会短路,直接返回undefined,如果存在,那么才会继续执行。

🌽 ??和!!的作用

这两个操作符不是TS特有的,有时候在JavaScript中需要的时候也可以使用

!!操作符

将一个其他类型转换成boolean类型,类似于Boolean(变量)的方式;

image-20220831205425503

??操作符

空值合并操作符(??)是一个逻辑操作符,当操作符的左侧是 null 或者 undefined 时,返回其右侧操作数, 否则返回左侧操作数

image-20220831205536001

🥕 字面量类型

image-20220831205755314

默认情况下的字面量类型是没什么意义的。

image-20220831212416194

🍤 类型缩小

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

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

1. typeof

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

image-20220831213137558

2. 平等缩小(比如===、!==)

​ Switch或者相等的一些运算符来表达相等性(比如===, !==, ==, and != )

image-20220831213513088

3. instanceof

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

image-20220831213616156

4. in

​ in 运算符,用于确定对象是否具有带名称的属性。如果指定的属性在指定的对象或其原型链中,则in 运算符返回true。

image-20220831213950868

PS:

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

image-20220917104224568


在这里插入图片描述

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

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

相关文章

Vue项目中的接口调用

在企业开发过程中,往往有着明确的前后端的分工,前端负责接收、使用接口,后端负责编写、处理接口。 对于前端如何使用接口,今天在Vue中进行讲解。 一个项目往往由这几个部分组成。 其中在src文件夹中,,有这…

windows系统完全卸载并重装Node(亲测可用)

windows系统完全卸载并重装Node(亲测可用) 完成上述6步之后开始重新下载配置Node 根据自己的需要下载对应版本即可 安装完成查看 查看是否安装成功 A、node -v 查看 node 版本 B、npm -v 查看 npm 版本 2、安装完成后,文件目录如下图 如果 npx 为 5.2.0&#xf…

第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴

文章目录1:网页PPT (5分) ✔✔✔2:蓝桥校园一卡通 (10分)✔✔✔3:心愿便利贴 (15分) ✔✔✔1:网页PPT (5分) ✔✔✔ switchPage( ) switchPage( ){ if(activeIndex 0 ){$(".btn.left").addClas…

浅谈vue中的$含义及其用法($xxx引用的位置)

看了各个帖子的描述,还是未能参透$在vue中所想发挥的本意,将一些一知半解的理解摘抄下来,顺带附上自己常见的用法,以加深理解和记忆。 摘抄 这些只是Vue的命名规则,为了区分普通变量属性,避免我们自己声明…

前端开发一枚,入职前自学的感觉不难,为什么工作起来很吃力?

前言 我是软件工程专业,学前端之前,学过 C/C、Java、PHP、.net 成绩还不错基本都是90多分。感觉自己干后端也不吃力。实验室里面的项目都是前后都写。最爱 PHP,本以为以后就走上PHP后端工程师的道路了。 由于项目需要的原因,后来…

关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现

📂文章目录​​二、📚网站介绍​​​​三、🔗网站效果​​​​▶️1.视频演示​​​​🧩 2.图片演示​​​​四、💒 网站代码​​​​🧱HTML结构代码​​​​🏠CSS样式代码​​​​五、&#x1…

Vue中实现自定义excel下载

最近在工作中遇到一个需求,就是需要在前端实现一个错误模板Excel的下载功能。 实现下载有两种方式,一种是后端生成一个excel,放在服务器指定目录下,然后前端直接去后端拿。第二种是后端传给前端一个json的list,前端用…

vue 中使用自定义字体

1.先下载字体 2.在新建的font.css文件中加入下面代码引入字体 font-face { font-family: MSYH; src: url(阿里巴巴普惠体 L.ttf); font-weight: normal; font-style: normal; } font-face { font-family: HY; src: url(汉仪天宇风行体W.ttf); font-weight: normal; f…

React Hooks概述及常用的Hooks介绍

React Hooks概述及常用的Hooks介绍1 为什么会有Hooks2 Hooks的含义3 Hooks的用法3.1 useState():状态钩子3.2 useEffect():副作用钩子3.3 useCallback():记忆函数3.4 useMemo():记忆组件3.5 useRef():保存引用值3.6 us…

【Fiddler Everywhere】史上最强抓包工具(安装 修改教程)

一、Fiddler简介 Fiddler Everywhere 是啥? 从名称上来看,就大概能猜出它的寓意,官方也通过一段话,解释了Fiddler Everywhere的作用: Fiddler Everywhere is a web debugging proxy for any browser, any application, any proc…

WEB核心【请求转发(阶段重点)】第六章

目录 1:请求转发【阶段重点】 1.1:语法格式及转发使用 1.2:request域对象 1.3:小结:请求转发间做数据传递 1.4:请求转发访问受保护目录 1:请求转发【阶段重点】 1.1:语法格式及转发使用 格式:forward:/要跳转的程序或者页面…

移动端适配方案总结

目录一、背景介绍1.1 为什么要进行移动端适配1.2 移动端适配方案二、rem方案2.1 什么是rem2.2 怎么根据屏幕尺寸设置根元素html的font-size2.3 postcss-pxtorem三、viewport方案3.1 什么是viewport方案3.2 postcss-px-to-viewport四、总结(如果只想看实现步骤可跳过…

《Vue.js前端开发实战》课后习题答案

《Vue.js前端开发实战》课后习题答案第一章一、 填空题二、 判断题三、 选择题四、 简答题五、 编程题第2章一、 填空题二、 判断题三、 选择题四、 简答题五、 编程题第3章一、 填空题二、 判断题三、 选择题四、 简答题五、 编程题第4章一、 填空题二、 判断题三、 选择题四、…

微信小程序 四种弹窗方式

微信小程序弹窗一、wx.showToast(Object object)二 、wx.showModal(Object object)三、wx.showLoading(Object object)四、wx.showActionSheet(Object object)五、官方文档一、wx.showToast(Object object) 显示消息提示框 wx.showToast({title: 内容, //提示的内容duration: …

uniapp web-view加载本地html

有个需求需要加载本地的html,用uniapp的官网demo和文档进行操作一直有问题,现在给大家排排雷: demo:https://hellouniapp.dcloud.net.cn/pages/component/web-view-local/web-view-local 文档:https://uniapp.dcloud.n…

scrollTop、clientHeight、 scrollHeight...学完真的理解了

在开发中我们常常会用到判断滚动条是否触底的逻辑。我一般都会在网上搜一段代码,这段代码有用到scrollTop、clientHeight、 scrollHeight 。接着我简单看一下好像理解了,再在项目里用一下好使了就没去深入研究相关概念。等下次用到了还是搜一下&#xff…

【Vue】图片拉近、全屏背景实战经验总结

文章目录1 图片拉近2 全屏背景2.1 background-attachment2.2 background-size2.3 display:flex;2.4 flex-direction2.5 100vh1 图片拉近 缘起是看到了下面的图片,我发现当鼠标悬浮的时候,发现他是可以拉近的,也就是图片的宽高不变&#xff0…

【学姐面试宝典】—— 前端基础篇Ⅱ(HTTP/HTML/浏览器)

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 文章目录Doctype 作用,严格模式与混杂模式如何区分&#x…

关于uni-app入门看完这篇就够了

关于uni-app的入门 前言 这是一篇关于uni-app入门的文章,也是我对uni-app的总结与归纳,刚开始的时候在这个平台上面找寻同类型的文章的时候发现讲的都很片面不怎么详细,所以就写了一篇关于基本入门的文章,全文总计 7500 字 预计…

Vue 清除Form表单校验信息 清除表单验证上次提示信息

问题描述 在Vue项目中使用Form组件进行表单验证,再次打开该表单时,上次的验证提示信息依然存在,业务场景要求再次打开该表单时清除验证提示信息和绑定的数据。 解决办法 在控制表单显隐的方法内加入以下代码即可实现: 1.使用…