【TypeScript】类型断言-类型的声明和转换(五)


【TypeScript】类型断言-类型的声明和转换(五)



在这里插入图片描述

    • 【TypeScript】类型断言-类型的声明和转换(五)
        • 一、简介
        • 二、断言形式
          • 2.1 尖括号语法
          • 2.2 as形式
        • 三、断言类型
          • 3.1 非空断言
          • 3.2 肯定断言-肯定化保证赋值
          • 3.3 将任何类型断言为any
          • 3.4 调用函数时将参数和返回值断言成精确的值

一、简介

TypeScript 断言是指在编写代码时,开发者能够告诉编译器某个值的具体类型,从而可以在编译阶段强制类型检查。

为什么要有 断言 这个概念?TS中并不能判断在使用联合类型时具体是哪种类型?当我们不知道是什么类型的情况下要使用某个类型特有的属性或者方法,那么就可以用断言来实现,它实际上是对编辑器做了提前告知的行为,但是并不能保证运行中报错。这其实在某些强类型语言中,类似于强制类型转换的操作。

主要有两种方式来实现:

  • 尖括号语法
  • as语法

二、断言形式

2.1 尖括号语法

尖括号语法:开发者可以使用 “<类型>” 的方式指定某个值的类型,例如:

let someValue: any = "This is a string";
let strLength: number = (<string>someValue).length;

anyValue是any类型,在使用时候将其断言为string类型。从而继续执行接下来的操作。


let anyValue:string | number = 'zhangsan';
let length:number = (<string>anyValue).length;//0

anyValue是string或者number联合类型,在使用时候将其断言为string类型。

需要注意的是,使用断言虽然能避免编译中的报错,但是却避免不了运行中的报错,如下面代码:

type Count = number | string;
function func(val:Count):string{return  (<string>val).substr(0,1)
}
func(1)

可以看到在编辑器中并没有报错,但熟悉代码的效果伴一眼就能看看出这是有问题的代码。
打开控制台或编辑器运行这段代码,显示出错

在这里插入图片描述

所以除非确切的知道变量的数据类型,否则不要使用类型断言,这是因为类型断言会让 TypeScript 编译器 将变量当做指定的类型,而不管它实际的类型,在程序运行时可能有类型错误,因此使用断言需要慎用

2.2 as形式

as语法:开发者也可以使用 值 as 类型 的语法进行类型断言,例如:

let someValue: any = "This is a string";
let strLength: number = (someValue as string).length;

使用断言的好处是可以在编译阶段捕获一些潜在的类型错误,从而提高代码的可靠性。不过需要注意,过度使用断言会导致代码可读性和可维护性降低,因此需要谨慎使用

as形式的断言在实际开发中比较推荐。

三、断言类型

3.1 非空断言

含义:非空断言用!表示,它用来断定某变量一定不是nullundefined
如果不做非空判断则会直接报错,具体如下:

type ClassTime = () => number;
const start = (ClassTime: ClassTime | undefined | null) => {const time = ClassTime(); console.log(time);
}

请添加图片描述

我们进行非空断言处理,修改调用方式为 ClassTime!();

type ClassTime = () => number;
const start = (ClassTime: ClassTime | undefined | null) => {const time = ClassTime!(); console.log(time);
}

现在,在编译时就不会报错了。但是还是需要注意,当在运行时,真正的传入了null或者undefined时,则会出现异常。请务必注意。

3.2 肯定断言-肯定化保证赋值

含义:允许在实例属性或者变量声明后面放置一个 !号,从而告诉 TS该属性会被明确地赋值。
错误示范,我们在对变量赋值之前就使用变量,就会报错。

let score: number;
startClass();
console.log('' + score); // 使用前赋值
function startClass() {score = 5;
}

在这里插入图片描述
如果我们非常肯定我们会进行赋值,那么怎么避免这种现象呢?我们可以在变量声明的时候就告诉编辑器该属性一定会被赋值,即在变量名后面加个!符号.

let score!: number;
startClass();
console.log('' + score); // 使用前赋值
function startClass() {score = 5;
}

此时,再去执行编译,则不会出现定义前使用的错误提示了。

3.3 将任何类型断言为any

为什么会有这种需求呢?其实想想,实际应用中很多小伙伴为了节省时间,就会进行一系列的any断言,比如以下案例:我们知道obj一定是有值的,请求接口后赋值给obj,所以一定是有值的,但是我们直接赋值,就会报错

const obj = {};
obj.name = 'zhangsan';
obj.age = 19;

在这里插入图片描述
那我们使用any断言处理,就不会报错了

const obj: any = {};
obj.name = 'zhangsan';
obj.age = 19;
3.4 调用函数时将参数和返回值断言成精确的值

如果我们的函数处理完结果后,我们能够确定其返回值,那就应该将返回值断言为精确值。

如下函数:

function func(val:any):any{return 1
}
func(1)

调用函数时我们改成以下所示,这样方便我们维护代码,约束了传参和函数返回值,不能any走天下。根据上述函数定义,我们就能够断言具体返回值。

let data = <number>func(<string>'zhangsan')
let data2 = <number>func(<number>1)

编译运行后的结果如下:

function func(val) {return 1;
}
var data = func('zhangsan');
var data2 = func(1);




以上就是【TypeScript】类型断言-类型的声明和转换的总结,如果对你有帮助,请不要吝啬你的小手给我狠狠的点赞、关注加分享。





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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

multi-head_seft-attention(多头自注意力)

对比 相比于single-head&#xff0c;multi-head就是将 q i q^i qi分成了 h h h份 multi-head_seft-attention的计算过程 将 q i q^i qi分成了 h h h份 计算过程 对于每个Head&#xff0c;我们可以提取出他的 b 11 b_{11} b11​到 b m 1 b_{m1} bm1​&#xff0c;以 H e…

B2B2C小程序商城系统--跨境电商后台数据采集功能开发

搭建一个B2B2C小程序商城系统涉及到多个步骤和功能开发&#xff0c;其中包括跨境电商后台数据采集功能的开发。具体搭建步骤如下&#xff1a; 一、系统搭建 1. 确定需求和功能&#xff1a;根据B2B2C商城的需求&#xff0c;确定系统的功能和模块&#xff0c;包括商品管理、订单…

问道管理:信创概念走势活跃,恒银科技斩获四连板

信创概念9日盘中走势活泼&#xff0c;截至发稿&#xff0c;新晨科技、竞业达、恒银科技等涨停&#xff0c;宇信科技涨近10%&#xff0c;中孚信息涨近9%&#xff0c;华是科技、神州数码涨超7%。 新晨科技今天“20cm”涨停&#xff0c;公司昨日晚间公告&#xff0c;近来收到投标代…

【数据结构】单链表OJ题(二)

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;数据结构 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、链表分割 &#x1f4a1;方法一&#xff1a; 二、链表的回文 &#x…

idea报“Could not autowire. No beans of ‘UserMapper‘ type found. ”错解决办法

原因和解决办法 1.原因 idea具有检测功能&#xff0c;接口不能直接创建bean的&#xff0c;需要用动态代理技术来解决。 2.解决办法 1.修改idea的配置 1.点击file,选择setting 2.搜索inspections,找到Spring 3.找到Spring子目录下的Springcore 4.在Springcore的子目录下…

Leetcode24 两两交换链表相邻的节点

迭代解法&#xff1a; class Solution {public ListNode swapPairs(ListNode head) {ListNode dummyHead new ListNode(0);dummyHead.next head;ListNode temp dummyHead;while (temp.next ! null && temp.next.next ! null) {ListNode node1 temp.next;ListNode n…

利用NtDuplicateObject进行Dump

前言 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。&#xff08;本文仅用于交流学习&#xff09; 这是国外老哥2020年提出的一种蛮有意思的思路。 我们先来看看大致的思路是…

前端js--剪刀石头布

效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><linkrel"stylesheet"href"ht…

LeetCode--HOT100题(24)

目录 题目描述&#xff1a;234. 回文链表&#xff08;简单&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;234. 回文链表&#xff08;简单&#xff09; 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &…

【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio构建React完成点餐H5页面

前言 【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio 构建React完成点餐H5页面一、Cloud Studio介绍1.1 Cloud Studio 是什么1.2 相关链接1.3 登录注册 二、实战练习2.1 初始化工作空间2.2 开发一个简版的点餐系统页面1. 安装 antd-mobile2. 安装 less 和 less-loader3. …

电力系统电流三段式保护MATLAB仿真模型

整体模型如下&#xff1a; Matlab/Simulink搭建的电力系统电流保护模型采用辐射型单电源供电的运行方式 Ⅰ段保护的搭建 Ⅰ段保护为瞬时速断保护&#xff0c;根据Ⅰ段整定原则确定整定值。线路发生短路故障时&#xff0c;短路电流急剧增大&#xff1b;超过设置的整定值时&…

【C# 基础精讲】为什么选择C# ?

C#&#xff08;C Sharp&#xff09;是由微软开发的一种通用、面向对象的编程语言。它最初于2000年发布&#xff0c;自那时以来逐渐成为开发者的首选之一。C#的设计目标是提供一种简单、现代、可靠且安全的编程语言&#xff0c;使开发者能够轻松构建各种类型的应用程序。 为什么…