TypeScript中的类型断言[as语法|<>语法]的使用

 更新时间:2022年06月22日 11:01:22   作者:@带甜味的盐@  
本文主要介绍了TypeScript中的类型断言[as语法|<>语法]的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

Typescript中类型断言官方解释

要理解好类型断言,其实就深刻理解一句话:你会比TypeScript更了解某个值的详细信息 。

类型断言,断言 断言,顾名思义,我断定怎么怎么样,代入这句话里就是,我断定这个类型是什么。当然这是我们主观上的思维逻辑,程序并不认可,所以我们需要告诉程序:“相信我,我知道自己在干什么” 。

这么干说,大家可能还是理解的不够透彻,我用两个函数举一个例子:

/**
 * @param d 日期
 * @param f 想要格式化的字符串
 */
function dateFormatter(d: Date | string, f?: string) {
    const date = new Date(d);
    if (f) {
        return `${date.getFullYear()}${f}${date.getMonth() + 1}${f}${date.getDate()}`
    } else {
        return new Date(d);
    }
}

上面这是一个简单的日期格式化的小函数, f 是连接符,如果 f 有值,那么就用 f 来连接日期并返回,如果没有值,则直接返回一个new Date(d) 。

/**
 * @param d 日期字符串
 */
function dealDate(d: string) {
    return new Date(d).getTime();
}

dealDate()函数接受要给string类型的字符串,返回这个时间的毫秒数。

接下来,我们先调用第一个dateFormatter() 函数,接收返回值,然后传递给dealDate()函数,此时我们一般这么调。

const date = dealDate(dateFormatter('2020-7-28', '/'));

这么调用的问题就在于,我们知道 dateFormatter() 函数因为 f 参数的存在,返回的值肯定是一个string类型。

但是TS不这么认为,在TS的推导中,dateFormatter()函数可能还会返回 Date 类型的值,所以就会给你标红,提示你 dealDate() 函数需要传递字符串类型的值,但是你传递过来的可能是 string 或者 Date,类型不匹配。

但是可以编译通过。

这种时候我们就符合我们前面说的那种情况了,我们可以断定传过去一定是字符串。此时我们可以这么用:

const date = dealDate(dateFormatter('2020-7-28','/') as string);

// 或者这么用
const a = dealDate(<string>dateFormatter('2020-7-28', '/'));

这就是Typescript中的类型断言了。

到此这篇关于TypeScript中的类型断言[as语法|<>语法]的使用的文章就介绍到这了,更多相关TypeScript 类型断言内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript navigator.userAgent获取浏览器信息案例讲解

    JavaScript navigator.userAgent获取浏览器信息案例讲解

    这篇文章主要介绍了JavaScript navigator.userAgent获取浏览器信息案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • js getBoundingClientRect() 来获取页面元素的位置

    js getBoundingClientRect() 来获取页面元素的位置

    该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
    2010-11-11
  • JS关键字变色实现思路及代码

    JS关键字变色实现思路及代码

    JS关键字变色详细很多朋友都很想实现吧接下来将执行以下几个步骤:1.替换关键字,对字体变色2.用正则,CSS背景变色;该方法可结合前台JS调用,感兴趣的朋友可以参考下,希望可以帮助到你
    2013-02-02
  • js仿小米手机上下滑动效果

    js仿小米手机上下滑动效果

    这篇文章主要为大家详细介绍了JavaScript仿小米手机上下滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JS实现时间校验的代码

    JS实现时间校验的代码

    这篇文章主要介绍了JS实现时间校验的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript判断输入值是否为正整数(判断变量为数字)

    JavaScript判断输入值是否为正整数(判断变量为数字)

    在项目开发中,有时候需要使用JavaScript验证用户输入的是否为正整数,这篇文章主要给大家介绍了关于JavaScript判断输入值是否为正整数(判断变量为数字)的相关资料,需要的朋友可以参考下,
    2023-11-11
  • JavaScript 中从 URL 获取数据的方法

    JavaScript 中从 URL 获取数据的方法

    这篇文章主要介绍了在 JavaScript 中从 URL 获取数据,我们使用了open函数,将请求方法类型和URL作为参数传递,并调用XMLHttpRequest()的send()方法,结合示例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • javascript 处理事件绑定的一些兼容写法

    javascript 处理事件绑定的一些兼容写法

    javascript 事件绑定的一些兼容写法整理非常不错,感谢
    2009-12-12
  • 分享XmlHttpRequest调用Webservice的一点心得

    分享XmlHttpRequest调用Webservice的一点心得

    因为项目需要,以后前端、手机客户端调用ASP.NET的Webservice来获取信息.所以这段时间开始看Webservice,试着通过XmlHttpRequest调用Webservice,过程中碰到不少问题,也有不少的收获
    2012-07-07
  • js复制内容到剪贴板代码,js复制代码的简单实例

    js复制内容到剪贴板代码,js复制代码的简单实例

    下面小编就为大家带来一篇js复制内容到剪贴板代码,js复制代码的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10

最新评论