TypeScript 中的 is
前言
TypeScript里有类型保护机制。要定义一个类型保护,我们只要简单地定义一个函数,它的返回值是一个类型谓词:
function isString(test: any): test is string{
return typeof test === "string";
}
上述写法与写一个返回值为 boolean 值函数的区别在哪里呢?
function isString(test: any): boolean{
return typeof test === "string";
}
区别
使用 is 类型保护
function isString(test: any): test is string{
return typeof test === "string";
}
function example(foo: any){
if(isString(foo)){
console.log("it is a string" + foo);
console.log(foo.length); // string function
// 如下代码编译时会出错,运行时也会出错,因为 foo 是 string 不存在toExponential方法
console.log(foo.toExponential(2));
}
// 编译不会出错,但是运行时出错
console.log(foo.toExponential(2));
}
example("hello world");
返回值为 boolean
function isString(test: any): boolean{
return typeof test === "string";
}
function example(foo: any){
if(isString(foo)){
console.log("it is a string" + foo);
console.log(foo.length); // string function
// foo 为 any,编译正常。但是运行时会出错,因为 foo 是 string 不存在toExponential方法
console.log(foo.toExponential(2));
}
}
example("hello world");
总结
- 在使用类型保护时,TS 会进一步缩小变量的类型。例子中,将类型从 any 缩小至了 string
- 类型保护的作用域仅仅在 if 后的块级作用域中生效
参考文档
被 1 篇内容引用
推荐阅读
React SSR 原理梳理
本文从React + Redux + React-Router + Express 搭建的 SSR 框架具体讲一下 Next.js 的同构和getServerSideProps是如何实现的
深蓝一人赞 5阅读 2.8k评论 1
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...
边城赞 15阅读 6.1k评论 3
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等
似曾相识赞 17阅读 29.1k评论 7
JS 函数式概念: 管道 和 组合
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
前端小智赞 8阅读 747
Vue3 + Vite2 + TypeScript + Pinia(Vuex)+JSX 搭建企业级开发脚手架【开箱即用】
随着Vue3的普及,已经有越来越多的项目开始使用Vue3。为了快速进入开发状态,在这里向大家推荐一套开箱即用的企业级开发脚手架,框架使用:Vue3 + Vite2 + TypeScript + JSX + Pinia(Vuex) + Antd。废话不多话,...
阳晨@赞 11阅读 3.2k
快速构建页面结构的 3D Visualization
可以通过 控制台 --> 右边的三个小点 --> More Tools --> Layers 打开。即可以看到页面的一个 3D 层级关系,像是这样:
chokcoco赞 6阅读 1.6k
表格集算表高性能原理——怎样实现纯前端百万行数据秒级响应
集算表 (Table Sheet)是一个具备高性能渲染、数据绑定功能、公式计算能力的数据表格,通过全新构建的关系型数据管理器结合结构化公式,在高性能表格的基础上提供排序、筛选、样式、行列冻结、自动更新、单元格...
葡萄城技术团队赞 4阅读 15.3k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。