now,我们来看一看TS里面的断言,听起来很上档次啊,其实看完你就发出惊叹,这就是断言啊

类型断言

  类型断言(Type Assertion)可以用来手动指定一个值的类型

  语法  

  1.   <类型>值

   或者

  1.   值 as 类型

  注意:在 tsx 语法(React 的 jsx 语法的 ts 版)中必须用后一种。

例子:将一个联合类型的变量指定为一个更加具体的类型

  之前提到过,当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法:

  1. function getLength(something: string | number): number {
  2. return something.length;
  3. }
  4.  
  5. // index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
  6. // Property 'length' does not exist on type 'number'.

而有时候,我们确实需要在还不确定类型的时候就访问其中一个类型的属性或方法,比如:

  1. function getLength(something: string | number): number {
  2. if (something.length) {
  3. return something.length;
  4. } else {
  5. return something.toString().length;
  6. }
  7. }
  8.  
  9. // index.ts(2,19): error TS2339: Property 'length' does not exist on type 'string | number'.
  10. // Property 'length' does not exist on type 'number'.
  11. // index.ts(3,26): error TS2339: Property 'length' does not exist on type 'string | number'.
  12. // Property 'length' does not exist on type 'number'.

上例中,获取 something.length 的时候会报错。

此时可以使用类型断言,将 something 断言成 string

  1. function getLength(something: string | number): number {
  2. if ((<string>something).length) {
  3. return (<string>something).length;
  4. } else {
  5. return something.toString().length;
  6. }
  7. }

类型断言的用法如上,在需要断言的变量前加上 <Type> 即可。

注意:类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的

  1. function toBoolean(something: string | number): boolean {
  2. return <boolean>something;
  3. }
  4.  
  5. // index.ts(2,10): error TS2352: Type 'string | number' cannot be converted to type 'boolean'.
  6. // Type 'number' is not comparable to type 'boolean'.

TS学习随笔(六)->断言的更多相关文章

  1. TS学习随笔(一)->安装和基本数据类型

    去年学过一段时间的TS,但由于在工作中不常用.就生疏了,最近项目要求用TS,那我就再回去搞搞TS,写一篇记录一下自己学习TS的进度以及TS知识点 首先,关于TS的定义我就不在这描述了,想看百度一下你就 ...

  2. TS学习随笔(七)->声明文件

    now我们来看一看TS怎么声明文件, 在JS里面我们经常会使用各种第三方类库,引入方式也不太相同,常见的就是在HTML中通过script标签引入,然后就可以使用全局变量$或者jQuery了 我们通常这 ...

  3. TS学习随笔(三)->接口

    终于来到了比较重要的知识,接口,有多重要呢,反正是很重要好啵 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型. 那什么是接口呢,在面向对象语言中,接口(Interf ...

  4. TS学习随笔(四)->数组的类型

    少侠们,今天我们继续来搞一搞TS 今天我们要来看一看TS中数组的定义是个什么鬼样子 数组的类型: 在 TypeScript 中,数组类型有多种定义方式,比较灵活.下面我们来看看有哪些定义方法 「类型 ...

  5. android 学习随笔六(网络要求及配置)

    android在4.0之后已经不允许在主线程执行http请求了. 主线程阻塞,应用会停止刷新界面,停止响应用户任何操作,耗时操作不要写在主线程   只有主线程才能修改UI ANR异常:Applicat ...

  6. TS学习随笔(五)->函数

    这篇文章我们来看一下TS里面的函数 函数声明 在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expre ...

  7. TS学习随笔(二)->类型推论,联合类型

    这篇内容指南:        -----类型推论  -----联合类型 类型推论 第一篇中我们看了TS的基本使用和基本数据类型的使用,知道了变量在使用的时候都得加一个类型,那我们可不可以不加呢,这个嘛 ...

  8. android 项目学习随笔六(网络缓存)

    1. 对SharePreference的封装 import android.content.Context; import android.content.SharedPreferences; /** ...

  9. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

随机推荐

  1. FluentDataflow - Fluent Style TPL Dataflow

    我的新英文博客文章: FluentDataflow - Fluent Style TPL Dataflow 介绍了本人最新发布的一个开源类库:FluentDataflow--Fluent风格的TPL ...

  2. [Swift]LeetCode473. 火柴拼正方形 | Matchsticks to Square

    Remember the story of Little Match Girl? By now, you know exactly what matchsticks the little match ...

  3. [Swift]LeetCode617. 合并二叉树 | Merge Two Binary Trees

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  4. [Swift]LeetCode770. 基本计算器 IV | Basic Calculator IV

    Given an expression such as expression = "e + 8 - a + 5" and an evaluation map such as {&q ...

  5. 使用javamelody进行web监控

    引入maven依赖 <dependency> <groupId>net.bull.javamelody</groupId> <artifactId>ja ...

  6. JavaScript 正则表达式全面总结

    本文适合有 JavaScript 基础 && 面向搜索引擎书写正则的人群. 正则表达式是用于匹配字符串中字符组合的模式.正则表达式的模式规则是由一个字符序列组成的.包括所有字母和数字在 ...

  7. 我曾做过陈士成,也做过孔乙己,还做过阿Q

    一. 我现在是陈士成,陈士成现在是我.为什么这么说呢? 那年那天,天刚微微亮,似乎还在打着哈欠.我和父亲去得很早,为的就是在“小升初的考试成绩榜单”前面占一个有利的位置.我不记得当时穿的厚还是不厚,体 ...

  8. 『最大M子段和 线性DP』

    最大M子段和(51nod 1052) Description N个整数组成的序列a[1],a[2],a[3],-,a[n],将这N个数划分为互不相交的M个子段,并且这M个子段的和是最大的.如果M &g ...

  9. SpringCloud中使用Hystrix

    1.  引言 一般而言,一个服务都是部署了多台机器的,那么在这种情况下,当其中一个服务挂了以后Hystrix是怎么处理的呢? 为了验证这个问题,我们准备两个服务:user-api 和 app-gate ...

  10. MVC从路由到Controller运行机制

    下图中每个箭头的左侧对应的右侧方法为对象调用方法的过程: 由于UrlRoutingModule这个HttpModule被注册到Web应用中,所有对每个抵达的请求来说,当代表当前应用的HttpAppli ...