TypeScript函数和类型断言实例详解

 更新时间:2022年06月08日 16:35:59   作者:成成请努力  
在某些情况下,我们会比TS更清楚一个数据的类型,这种时候我们就可以使用断言来告诉TS相信我,我知道自己在干什么,下面这篇文章主要给大家介绍了关于TypeScript函数和类型断言的相关资料,需要的朋友可以参考下

开始

现在要加速学习了,大佬们有没有内推,给个推荐

会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"));

当我们传入不同的值时,会返回调用不同的函数

结束

到此这篇关于TypeScript函数和类型断言的文章就介绍到这了,更多相关TS函数和类型断言内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于JavaScript+IntersectionObserver实现高性能图片懒加载

    基于JavaScript+IntersectionObserver实现高性能图片懒加载

    在 Web 开发中,图片懒加载是一种常见的优化手段,尤其在长列表页面中,按需加载图片可以显著提升页面性能,本篇文章将通过 JavaScript 和 Intersection Observer,实现一个带有卡片样式的高性能图片懒加载示例,需要的朋友可以参考下
    2025-01-01
  • 聊聊那些使用前端Javascript实现的机器学习类库

    聊聊那些使用前端Javascript实现的机器学习类库

    本文介绍了前端Javascript实现的机器学习类库,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js操作数组函数实例小结

    js操作数组函数实例小结

    这篇文章主要介绍了js操作数组函数,实例分析了JavaScript针对数组删除指定元素、去重及删除指定下标元素的实现方法,需要的朋友可以参考下
    2015-12-12
  • JS中的提升机制变量提升函数提升实例详解

    JS中的提升机制变量提升函数提升实例详解

    这篇文章主要为大家介绍了JS中的提升机制变量提升函数提升实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • JS弹出窗口代码大全(详细整理)

    JS弹出窗口代码大全(详细整理)

    如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,平时利用业余时间整理了一些,需要的朋友可以参考一下
    2012-12-12
  • 微信小程序实现自定义modal弹窗封装的方法

    微信小程序实现自定义modal弹窗封装的方法

    这篇文章主要介绍了小程序自定义modal弹窗封装实现方法,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-06-06
  • 如何用前端html实现2024烟花效果

    如何用前端html实现2024烟花效果

    这篇文章主要给大家介绍了关于如何用前端html实现2024烟花效果的相关资料,文中介绍的是JavaScript代码定义了烟花碎片和火箭类,通过动画循环模拟烟花爆炸效果,需要的朋友可以参考下
    2024-11-11
  • js中什么时候不能使用箭头函数

    js中什么时候不能使用箭头函数

    箭头函数是和我们工作密切相关的东西,本文主要介绍了js中什么时候不能使用箭头函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 微信小程序自定义组件和通信的方法

    微信小程序自定义组件和通信的方法

    开发中常见的组件主要分为公共组件和页面组件两种,因此注册组件的方式也分为两种全局注册和局部注册,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • 基于纯JS实现多张图片的懒加载Lazy过程解析

    基于纯JS实现多张图片的懒加载Lazy过程解析

    这篇文章主要介绍了基于纯JS实现多张图片的懒加载Lazy过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10

最新评论