TypeScript函数和类型断言实例详解
作者:成成请努力 时间:2024-04-17 10:00:09
开始
现在要加速学习了,大佬们有没有内推,给个推荐
会vue2/vue3 + ts
断言
非空断言
非空断言就是确定这个变量不是null或者undefined,就是把null或者undefined从他的类型中排除
function demo(message:string|undefined|null) {
const str: string = message
}
demo(undefined)
此时我们没有用非空断言,message的值是undefined和null,所以不能赋值给str,此事运行会报错(Type 'string | null | undefined' is not assignable to type 'string'.Type 'undefined' is not assignable to type 'string'.)
如果用上非空断言
let message:string
function demo(message:string|undefined|null) {
const str: string = message!
}
demo(undefined)
此时代码没有问题
类型断言
确定此时的变量类型
尖括号
我们可以用尖括号
let message: any = "scc"
let mesLength:number = (<string>message).length
as
as用来判断变量是不是后面的类型
let message: any = "scc"
let mesLength:number = (message as string).length
确定赋值断言
这个变量一定会被赋值,就可以使用确定赋值断言
let message!:string
变量名后面添加一个!就可以
类型守卫
ts类型守卫就是起到一个缩小类型范围作用
trpeof
typeof关键字可以使用===判断此时的类型是什么
function demo(message: string | number | boolean) {
if (typeof message === "string") {
message.toUpperCase()
}
}
此时message的类型被缩小成string类型,所以能调用toUpperCase方法
道理很简单,相信有一定基础的同学很快就会明白
in
in用来判断变量是否在类型范围内
interface Person {
name: string
age:number
}
interface Dog {
name: string
walk:string
}
type x = Dog|Person
function all(emp: x) {
if ("walk" in emp) {
console.log(d.walk);
}
}
函数
可选参数
参数可以设成可选参数,可选参数最好在必填参数和有默认值的参数后面
function demo(num:number,str?:string){
}
默认值参数
function demo(num:number,bol:boolean = true,str?:string){
}
bol就是有默认值的参数,如果传值,那么值为传来的值,不传就是默认值
函数重载
函数重载可以让函数根据传值得类型,自动选择应该执行的函数
function add(a1: number, a2: number):number
function add(a1: string, a2: string):string
function add(a1: any, a2: any):any {
return a1 + a2
}
console.log(add(20,30));
console.log(add("scc","brd"));
当我们传入不同的值时,会返回调用不同的函数
结束
来源:https://juejin.cn/post/7106445622755983373
标签:ts,类型,断言
0
投稿
猜你喜欢
处理SQL Server 2000的命名实例和多实例
2009-01-19 13:28:00
Sanic框架Cookies操作示例
2022-12-24 05:29:04
mysql 不能插入中文问题
2024-01-26 01:19:50
JS踩坑实战之19位数Number型精度丢失问题详析
2024-04-10 10:44:23
详解用python写一个抽奖程序
2023-07-06 10:28:12
vue中使用svg封装全局消息提示组件
2024-04-09 10:48:24
Python 识别12306图片验证码物品的实现示例
2021-04-03 22:17:24
Python中强大的命令行库click入门教程
2023-05-01 04:24:09
Win7 x64 IIS运行ASP+Access故障完美解决方法(转)
2012-03-27 18:30:35
MySQL不使用order by实现排名的三种思路总结
2024-01-17 13:43:46
让ASP组件来保护你的网站,自定义加密方法的使用
2009-11-07 19:27:00
C#连接Oracle数据库的实例方法
2024-01-20 14:37:05
python光学仿真面向对象光学元件类的实现
2022-10-11 19:45:06
MySQL数据表添加字段的三种方式
2024-01-13 10:49:30
Mysql自增主键id不是以此逐级递增的处理
2024-01-19 03:07:55
什么是Ajax及Ajax的优势
2007-09-07 09:56:00
Linux/UNIX和Window平台上安装Mysql
2024-01-24 00:00:15
ndarray的转置(numpy.transpose()与A.T命令对比分析)
2023-11-13 05:57:27
php如何利用ffmpeg获取视频第一帧为缩略图
2024-05-03 15:48:20
JavaScript Table行定位效果
2009-05-25 10:47:00