【TS】联合类型--类型断言--类型推断
2024-09-08 18:48:03
联合类型
在实际开发中,我们接收的变量可能不是一个固定的数据类型,而是动态的多个数据类型,此时用单个固定的数据类型去接收很明显是不行的,为了解决这种可能会接收多个不同数据类型的变量就需要用到联合类型。联合类型表示取值可以为多种类型中的一种。
语法:let 变量名 : 数据类型 | 数据类型2 = 值
let str : string | number = '世界现代设计史'
console.log(str); // 世界现代设计史
str = 100
console.log(str); // 100
// str = true // 报错
在函数中使用联合类型
// 该函数可以传入数字类型和字符串类型,返回值为字符串类型
const getString = (str:number|string):string =>{
// return str // 打印100 报错 返回的类型必须是字符串
return str.toString() // 转字符串,返回字符串类型
}
console.log(getString(100));
类型断言
类型断言也就是告诉编译器,我知道自己是什么类型,也知道自己在干什么。
类型断言的语法:
1、<类型>变量名 (<number[]>val)
2、变量名 as 类型 (val as number[])
类型断言也就是在编译的时候断定这个值是什么类型的,如果是的话就做什么操作。
let val : number[] = [100,200,300]
// 如果val存在,那么它是一个数组类型的,输出val.length
console.log((val as number[]).length); // 打印 3
可以通过类型断言来做对应的操作,比如遍历一个数组:
let val : number[] = [100,200,300]
// 如果val存在,那么它是一个数组,遍历数组
(<number[]>val).forEach(el=>{
console.log(el); // 打印 100,200,300
})
类型断言可以多重嵌套,比如双重类型断言
如果 val
存在,那么它是any
类型的,如果val
存在并且是any
类型的,它则是number[]
类型的,打印数组的长度
console.log(((val as any) as number[]).length);
// 打印 3
类型推断
类型推断: 在没有明确指定类型的时候,推测出一个类型。
声明一个变量,这个变量没有定义数据类型,系统会根据变量的值自动推断它是什么类型,并且以此类型为规范。
// 在没有明确指定类型的时候推测出一个类型
let txt = 100 // 推断 number类型
// txt = '东方不败' // 赋值 string类型 报错
console.log(txt); // 打印 100
如果声明的变量没有赋值,那么这个变量为any
类型,any
类型的变量可以是任何数据类型。
let txt2 // 变量声明了没赋值 any类型
txt2 = 200
txt2 = '世界现代设计史'
console.log(txt2);
案例源码:https://gitee.com/wang_fan_w/ts-seminar
如果觉得这篇文章对你有帮助,欢迎点亮star
最新文章
- appStore上传苹果应用程序软件发布流程
- 如何在android studio 1.0 启动时设置代理【解决WARN - ateSettings.impl.UpdateChecker - Connection failed.】
- mysql-python
- css3画图之大白(●—●)
- ReadingNotes@02-12-2013
- bach cello
- JavaScript 问答 - No.1
- IMP-00013 目前只有 DBA 其他导入能力 DBA 导出的文件
- BZOJ 3479: [Usaco2014 Mar]Watering the Fields(最小生成树)
- visibility: hidden和 display: none的区别
- 通过hadoop + hive搭建离线式的分析系统之快速搭建一览
- 利用qq设置个性化的域名邮箱
- [ExtJS5学习笔记]第三十六节 报表组件mzPivotGrid
- Linux运维(首页)
- 模拟Http请求的几种常用方式
- virltualbox 升级之后 苹果虚拟机报The installed support driver doesn&#39;t match the version of the user解决方案
- Python调用C++类
- luogu P4074 [WC2013]糖果公园
- WPF编程 ,TextBlock 显示百分数值的一种简单方法。
- 【DB】部分MySQL操作记录
热门文章
- Vue使用Element表单校验错误Cannot read property ‘validate’ of undefined
- 在CentOS编译Git源码
- 解决windows installation failed! Error: 无法访问 Windows Installer 服务
- Clickhouse表引擎之MergeTree
- easyUI ajax拼接样式失效
- Nginx 安装篇-1.19.9版本源码安装
- day29-JQuery02
- 零基础入门数据挖掘——二手车交易价格预测:baseline
- 【SQL】窗口函数:求数据组内累计值和累计百分比
- 【笔面试真题】Flow++赋乐科技-面试-2022年1月25日