系统学习 TypeScript(五)——联合类型
前言
在初步学习了 TypeScript 的变量声明后,对它的静态类型检查功能简直是爱不释手,但同时也发现一个问题:在正常的开发中,一个变量的类型有时可能不仅仅只限于 number 或者 string 中的一种,有可能是两种类型或者更多,比如:
// index.js
let res;
if(userInfo.age && userInfo.age > 12){res = userInfo.age;
}else{res = userInfo.name;
}
上面例子中的 res 类型可能是 number,也可能是 string。
到底该怎样限制 res 的类型,让它同时满足 number 和 string 的类型检查呢?这就涉及到我们今天要学的 TypeScript 的另一种类型声明——联合类型。
关于联合类型
从字面意思来看,所谓“联合类型”其实就是多种类型的联合,也就是不仅仅一种类型。
联合类型(Union Types)可以通过管道(|)给变量设置多种类型,赋值时可以根据设置的类型来赋值。
基本语法如下:
let tag:Type1|Type2|Type3
其中使用“|”分隔的三种类型代表变量 tag 可被赋值的类型范围。
注意:对于指定了联合类型的变量,其值的类型必须只能是联合类型中包含的某一种,如果取了联合类型之外的类型值,在编译过程中会报错。
指定了联合类型的变量可以在运行过程中被赋予联合类型中的任一类型值。
实际使用示例
以下是联合类型的几种实际应用举例。
声明变量
let res: number | string; // 联合类型声明
if (userInfo.age > 12) {res = userInfo.age;
} else {res = userInfo.name;
}
return res;
上例中的 res 只能赋值为 number 类型或 string 类型,赋值其它类型会产生报错。
函数传参
我们在函数传参中也可以使用联合类型来控制参数的预期类型:
function sayRes(res: number | string){console.log(res);
}sayRes(true); // Error: 类型“boolean”的参数不能赋给类型“string | number”的参数。
联合类型数组
对于可能由不同单一类型元素组成的数组声明,我们也可以使用联合类型进行声明。
let arr5: number[] | string[];
arr5[0] = true; // Error: 不能将类型“boolean”分配给类型“string | number”。
扩展知识
针对联合类型的数据,主要扩展以下几点。
只能访问共有属性或方法
一般情况下,使用联合类型是因为不能确定变量最终值的类型。
对于联合类型的变量或参数,如果不能确定其具体类型的时候,只能访问联合类型中所有类型共有的属性或方法,若访问某一类型独有的属性或方法,会产生报错。
function sayRes(res: number | string) {if (res.length > 0) { // Error: 类型“number”上不存在属性“length”。}
}
当 res 为 number 类型时,是不存在 .length
属性的,所以会报错。
下面这个例子中,因为 .toString()
是 number 和 string 类型共有的方法,所以可正常编译:
function sayRes(res: number | string) {if (res.toString() === "12") {}
}
类型推断
对于联合类型变量,在赋值后会根据值的类型推断该变量的类型。
let res :number | string;
res = "编程三昧";
console.log(res.length);
res = 12;
console.log(res.length); // Error: 类型“number”上不存在属性“length”。
在给 res 赋值为 12 后,TypeScript 推断 res 的类型为 number,number 类型不存在 .length
属性,所以报错。
总结
以上就是 TypeScript 联合类型的相关知识,总结起来就是:
- 联合类型包含了变量可能的所有类型;
- 对联合类型变量赋值为联合类型之外的值,会产生报错;
- 在不能确定联合类型变量的最终类型之前,只能访问联合类型所共有的属性和方法。
- ~
- 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
系统学习 TypeScript(五)——联合类型相关推荐
- 系统学习 TypeScript(一)——认识 TypeScript
前言 TypeScript 很流行,这是前端从业者众所周知的事. TypeScript 很好用,仁者见仁智者见智.但是,很多大型前端框架都使用 TypeScript 进行了重构. 为了不落伍,我也需要 ...
- 系统学习 TypeScript(四)——变量声明的初步学习
前言 认识了 TypeScript 中的基础类型,接下来当然是变量声明的相关学习了. 声明多维数组 假如有这么一个声明: let arr3: number[][][]; 想要知道 arr3 的具体类型 ...
- struct类型重定义 不同的基类型_C++学习大纲:联合类型
C++联合类型 联合类型(又称共同体类型),一种能够表示多种数据(类型可以相同可以不同,变量名字不同就行)的数据类型. 1. 联合类型的定义 union {}; 与结构类型类似,只是把struct 换 ...
- 系统学习 TypeScript(三)——基础类型
前言 TypeScript 包含的基础类型总结起来有: 布尔值 数字 字符串 数组 元组 枚举 任意值 空值 Null 和 undefined Never Object 今天,我们就来详细了解一下各个 ...
- 【JAVA基础】重新系统学习Java(五)案例一
目录 Java基础知识案例 运算符 身高遗传 红茶绿茶 外卖 if语句 手机以旧换新 三数最小 本息计算 顾客优惠 个人所得税 switch语句 加减乘除 循环语句 猪年年份 输出长方形 输出三角形 ...
- 系统学习 TypeScript(二)——开发流程和语法规则
前言 我们已经知道了 TypeScript 是什么,以及为什么要用 TypeScript,今天,我们就来学习怎么初步使用它. TypeScript 的使用流程 原始的 TypeScript 文件以 . ...
- 移动计费系统学习(五)
下边是一些运行后的输出: 程序创建了运营商已有的5个VIP用户和15个普通用户,并设置他们的入网日期为2012年1月1日. 程序开始模拟从2012年1月1日开始,连续15个月的运行情况. ------ ...
- TypeScript 3.3发布:改进了联合类型调用和构建时间
TypeScript团队继续以双月发布节奏发布了TypeScript 3.3,这一版本改进了调用联合类型的行为以及复合项目增量文件的监听性能.该团队还宣布了未来六个月的TypeScript路线图. T ...
- TypeScript学习(三):联合类型及推论
前面说到了typescript中的数据类型的定义及类型推论,定义的方式也就是单数据类型定义或者是任意类型的定义,但是我们在开发中,有时候会涉及到一些变量的值类型校验,例如只需要数值和字符串,或者数值和 ...
最新文章
- 推荐8款有趣实用的软件,建议你先收藏,总有一天你会用到
- Layout两列定宽中间自适应三列布局
- 芯片巨头为何痴恋开源软件?英特尔Imad Sousou来解密
- 谁是最强的女汉子_JAVA
- 如何用Snapgene 4.3.6进行序列比对及查找碱基位点
- Ninject使用demo
- 安卓java桌面图标程序_android如何定制默认桌面上应用程序和shortcut图标 | 学步园...
- android viewflipper图片轮播,android开发:ViewFlipper实现图片轮播
- 热烈庆祝个人博客突破1万人!
- HTML转图片利器:wkhtmltox
- Python之函数参数介绍
- 5分钟带你入门vuex(vue状态管理)
- MySQL数据库(三)
- 安卓问题报告小记(四):Some projects cannot be imported because they already exist in the workspace...
- 使用C++调用Socket接口实现简易TCP服务器
- 项目实战(一)HTML5+CSS3+JS完成前端网站的制作
- 计算机出现蓝屏怎么解决,教你电脑出现蓝屏是怎么回事
- 【算法】整数拆分问题
- 使用百度API实现热点(WIFI)、GPS、基站定位
- CTeX:中英文混排无法正常换行+字体调整+行距调整