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

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

类型断言 as


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


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

1. 非空类型断言 !


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

微信图片_20221012161610.png

2. 可选链的使用


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

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

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


??和!!的作用


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

!!操作符

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

image.png

??操作符

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

image.png

字面量类型


image.png

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

image.png

类型缩小


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


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


1. typeof


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

image.png

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


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

image.png

3. instanceof


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

image.png

4. in


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

image.png

相关文章
|
6月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
3月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
4月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
61 4
|
4月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
7月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
37 0
|
8月前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 的内置数据类型有哪些?
【5月更文挑战第1天】【Web 前端】TypeScript 的内置数据类型有哪些?
|
8月前
|
存储 JavaScript 前端开发
TypeScript基本数据类型详解
【4月更文挑战第23天】TypeScript基础知识概览:包括Boolean、Number、String、Array、Tuple、Enum、Any、Void、Null和Undefined以及Never类型。了解这些数据类型能提升代码质量和可维护性。示例代码展示了各种类型的用法,如定义布尔变量、数字转换、字符串操作、数组和元组声明、枚举创建、任意类型使用,以及空值和Never类型的场景。掌握这些将有助于更好地使用TypeScript进行开发。
|
8月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
115 0
|
8月前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
93 0
|
8月前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
158 0
下一篇
开通oss服务