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中类型断言好理解也好用的更多相关文章

  1. TypeScript 中装饰器的理解?应用场景?

    一.是什么 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上 是一种在不改变原类和使用继承的情况下,动态地扩展对象功能 同样的,本质也不是什么高大上的结构,就是一个普通的 ...

  2. 理解和正确使用Java中的断言(assert)

    一.语法形式:    Java2在1.4中新增了一个关键字:assert.在程序开发过程中使用它创建一个断言(assertion),它的语法形式有如下所示的两种形式:1.assert conditio ...

  3. 十分钟教你理解TypeScript中的泛型

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://blog.bitsrc.io/understanding-generics-in-t ...

  4. Typescript - 类型断言

    原文:TypeScript基本知识点整理 零.序言 类型断言,可以用来手动指定一个值的类型. 给我的感觉,和 java 中的强制类型转换很像. 常常和联合类型配合使用,如: // 错误示例 funct ...

  5. 聊聊 TypeScript 中的类型保护

    聊聊 TypeScript 中的类型保护 在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird { // 独有方法 fly(); // 共有方法 lay ...

  6. TypeScript 入门自学笔记 — 类型断言(二)

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  7. typescript 中的 infer 关键字的理解

    infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer 是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中 ...

  8. Typescript中的可索引接口 类类型接口

    /* 5.typeScript中的接口 可索引接口 类类型接口 */ /* 接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用 ...

  9. TypeScript 中命名空间与模块的理解?区别?

    一.模块 TypeScript 与ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地,如果一个文件不带有顶级的import或者expo ...

随机推荐

  1. Spring Boot教程(三十九)使用MyBatis注解配置详解(2)

    增删改查 MyBatis针对不同的数据库操作分别提供了不同的注解来进行配置,在之前的示例中演示了@Insert,下面针对User表做一组最基本的增删改查作为示例: public interface U ...

  2. [CSP-S模拟测试]:那一天她里我而去(堆优化Dijkstra)

    题目传送门(内部题3) 输入格式 每个测试点有多组测试数据.第一行有一个正整数T表示数据组数.接下来对于每组数据,第一行有两个正整数n,m分别代表图的点数和边数.接下来有m行,每行三个整数u,v,d表 ...

  3. BZOJ1123 BLO

    割点的好题. 联通图,难度降低.首先对于一个点,如果他不是割点,那它的贡献是2*(n-1),就是任何一个其他节点都少了正反两个数对,这个看样例可以看出来. 如果它是一个割点,去掉他以后会出现若干个联通 ...

  4. redis远程连接命令

    redis-cli -h 172.17.0.85 -p 6379 输入密码 auth "1234

  5. (转)linux中wget未找到命令

    转:https://blog.csdn.net/djj_alice/article/details/80407769 在装数据库的时候发现无法使用wget命令,提示未找到命令,如图所示 那是因为没有安 ...

  6. TCP输入 之 tcp_rcv_established

    概述 tcp_rcv_established用于处理已连接状态下的输入,处理过程根据首部预测字段分为快速路径和慢速路径: 1. 在快路中,对是有有数据负荷进行不同处理: (1) 若无数据,则处理输入a ...

  7. linu逻辑分区动态调整大小

    注意: 这个动态调整的方法是有丢数据风险的,要确保调整的源分区没有使用或者使用率很低.源分区中如果有重要的文件最好先备份 在centos 6.5上操作过 lvdisplay 查看已有的分区的大小 lv ...

  8. Mysql general_log 日志详解

    开启 general log  将所有到达MySQL Server的SQL语句记录下来. 一般不会开启开功能,因为log的量会非常庞大.但个别情况下可能会临时的开一会儿general log以供排障使 ...

  9. 从浏览器地址栏输入url到显示页面的步骤

      在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期 HTTP1.1增加了Cache-Cont ...

  10. openerp学习笔记 tree视图增加复选处理按钮

    wizard:用于确认或选择 wizard/sale_multi_action.py # -*- encoding: utf-8 -*-from openerp.osv import fields, ...