typescript中类型断言好理解也好用
typescript很强大,但是用不好时也会很头痛,开发遇到类型错误的情况不在少数,或许你需要了解类型断言。使用断言,简单来说就是先做好一个假设,使得编译通过。
我一开始接触类型断言时是有点不明白的,后来我了解到原因是 “类型断言更像是类型的选择,而不是类型转换”。我发现不少博客文章里把类型断言说成了类型转换,这在最开始给我带来了一些困扰。
使用类型断言有两种方式:
<类型>值 // 或者 值 as 类型
推荐以 as 方式,因为 jsx 这样的语法中只支持 as 方式。
我们还得知道什么时候来使用类型断言,但是这个我没办法一一列举出来,主要因为我也没有很多使用typescript的经验。但是可以举一个最直观的例子:
function func(val: string | number): number {
if (val.length) {
return val.length
} else {
return val.toString().length
}
}
函数的参数 val 是一个联合类型,在这里的意思是说 val 可以是字符串类型也可以是数值类型。代码中要返回参数的长度,但是 length 可以是字符串的属性,而数值是没有这个属性的,所以当 val 是数值时,就先用 toSting() 来将数字转换为字符串再取长度。这样的逻辑本身没问题,但是在编译阶段一访问 val.length 时就报错了,因为 访问联合类型值的属性时,这个属性必须是所有可能类型的共有属性,而length不是共有属性,val 的类型此时也没确定,所以编译不通过。为了通过编译,此时就可以使用类型断言了,如下:
function func(val: string | number): number {
if ((<string>val).length) {
return (<string>val).length
} else {
return val.toString().length
}
} 或者 function func(val: string | number): number {
if ((val as string).length) {
return (val as string).length
} else {
return val.toString().length
}
}
例子中,把 val 断言为了 string类型,此时就可以访问 length 属性了。你可能会疑惑如果 val 断言为了string,那么开始定义的联合类型是不是失去了它的意义?答案是否定的。我在一开始就说了类型断言不是类型转换,而是类型选择,可以理解为在编译阶段强行把 val 当作 string类型来访问了。
以上就是我对类型断言的一些了解,如有不对,欢迎指出。
typescript中类型断言好理解也好用的更多相关文章
- TypeScript 中装饰器的理解?应用场景?
一.是什么 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上 是一种在不改变原类和使用继承的情况下,动态地扩展对象功能 同样的,本质也不是什么高大上的结构,就是一个普通的 ...
- 理解和正确使用Java中的断言(assert)
一.语法形式: Java2在1.4中新增了一个关键字:assert.在程序开发过程中使用它创建一个断言(assertion),它的语法形式有如下所示的两种形式:1.assert conditio ...
- 十分钟教你理解TypeScript中的泛型
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://blog.bitsrc.io/understanding-generics-in-t ...
- Typescript - 类型断言
原文:TypeScript基本知识点整理 零.序言 类型断言,可以用来手动指定一个值的类型. 给我的感觉,和 java 中的强制类型转换很像. 常常和联合类型配合使用,如: // 错误示例 funct ...
- 聊聊 TypeScript 中的类型保护
聊聊 TypeScript 中的类型保护 在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird { // 独有方法 fly(); // 共有方法 lay ...
- TypeScript 入门自学笔记 — 类型断言(二)
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- typescript 中的 infer 关键字的理解
infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer 是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中 ...
- Typescript中的可索引接口 类类型接口
/* 5.typeScript中的接口 可索引接口 类类型接口 */ /* 接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用 ...
- TypeScript 中命名空间与模块的理解?区别?
一.模块 TypeScript 与ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地,如果一个文件不带有顶级的import或者expo ...
随机推荐
- Neko Performs Cat Furrier Transform CodeForces - 1152B 二进制思维题
Neko Performs Cat Furrier TransformCodeForces - 1152B 题目大意:给你一个x,在40步操作以内把x变成2m−1,m为非负整数.对于每步操作,奇数步可 ...
- luoguP1160 队列安排 x
P1160 队列安排 982通过 2.3K提交 题目提供者 该用户不存在 标签 云端 难度 普及/提高- 时空限制 1s / 128MB 题目描述 一个学校里老师要将班上N个同学排成一列,同学被编号为 ...
- Xargs用法详解(自创)
简介之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要,所以就有了xargs命令,例如: 这个命令是错误的find /sbin -perm +700 |ls -l ...
- 移动端的头部标签和 meta
使用 HTML5 doctype,不区分大小写 <!DOCTYPE html> 更加标准的 lang 属性写法 http://zhi.hu/XyIa <html lang=" ...
- Python中的OS对路径的操作以及应用
目录处理 OS目录处理目录-->路径,文件夹 文件:html 1. 新建和删除一个目录import os #引入os目录from xx import xxos.mkdir("D:\\P ...
- vue中如何刷新页面
vue中刷新页面的方法 1. 不能使用 this.$router.go(0) 或者 window.reload() 不起作用还特别恶心 这个才是有效果的刷新页面,只要照图敲,就能有效果 我们在 app ...
- 设计模式--观察者模式--python
观察者模式: 对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新. 主要解决: 当一个抽象模型有两个方面, 其中一个方面依赖于另一方面.将这二者封装在 ...
- Deep Visualization:可视化并理解CNN
原文地址:https://zhuanlan.zhihu.com/p/24833574 一.前言 CNN作为一个著名的深度学习领域的“黑盒”模型,已经在计算机视觉的诸多领域取得了极大的成功,但是,至今没 ...
- 网络通信框架之volley
介绍 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进行HTTP通信,Htt ...
- [zookeeper]ZooInspector的使用
一.背景 Zookeeper作为常用的集群协调者组件被广泛应用,尤其是在大数据生态圈中: Zookeeper集群存储各个节点信息,包括:Hadoop.Hbase.Storm.Kafka等等: ...