[TypeScript] Use the JavaScript “in” operator for automatic type inference in TypeScript
Sometimes we might want to make a function more generic by having it accept a union of different types as an argument. Using the JavaScript “in” operator, we can test for the presence of different properties on the argument object, and TypeScript will automatically infer the exact type of our object in that block. It does this by looking at all the possible types in the union and then keeping only the ones that have that specific property defined.
interface Admin {
id: string;
role: string:
}
interface User {
email: string;
} function redirect(usr: Admin | User) {
if(/*user is admin*/) {
routeToAdminPage(usr.role);
} else {
routeToHomePage(usr.email);
}
}
So in the code above, what we can write into the if block to ensure that, it is admin type, so that IDE won't complain that, 'role' or 'email' may not be defined on user object?
Solution we can use is 'in' operator in Javascript:
function redirect(usr: Admin | User) {
if("role" in usr) {
routeToAdminPage(usr.role);
} else {
routeToHomePage(usr.email);
}
}
'in' operator check whether one prop is existing on the object but also helps Typescript to narrow down the type, in this case, helps to choose from 'Admin' or 'User'.
[TypeScript] Use the JavaScript “in” operator for automatic type inference in TypeScript的更多相关文章
- eval5: TypeScript编写的JavaScript解释器
eval5是基于TypeScript编写的JavaScript解释器,100%支持ES5语法. 项目地址:https://github.com/bplok20010/eval5 使用场景 浏览器环境中 ...
- 使用TypeScript如何提升JavaScript编程效果?
TypeScript是个什么鬼?和JavaScript有什么关系? TypeScript是由微软开发的一种可快速入门的开源的编程语言,是JavaScript的一个超集,且向这个语言添加了可选的静态类型 ...
- 使用Typescript来写javascript
使用Typescript来写javascript 前几天尝试使用haxejs来写javascript,以获得静态类型带来的益处.虽然成功了,但很快发现将它与angularjs一起使用,有一些不太顺畅的 ...
- JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标
一.说明 取消事件的默认动作. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段 ...
- 分享:使用 TypeScript 编写的 JavaScript 游戏代码
<上篇博客>我写出了我一直期望的 JavaScript 大型程序的开发模式,以及 TS(TypeScript) 的一些优势.博客完成之后,我又花了一天时间试用 TS,用它来重构之前编写的一 ...
- [TypeScript] 1. Catching JavaScript Mistakes with TypeScript
The TypeScript compiler is a powerful tool which catches mistakes even in vanilla JavaScript. Try it ...
- CoffeeScript?TypeScript?还是JavaScript
请注意本文只是我的偏见,我努力地理解借助CoffeeScript或TypeScript之类的编译器写JavaScript代码的理由.静态编译.强类型语言和框架,我有着这些流行的.丰富的背景.我的上一份 ...
- Fixing the JavaScript typeof operator
https://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/javascript 类 ...
- 在TypeScript中扩展JavaScript基础对象的功能
最近工作中用到,记录一下:假设我们需要一个功能,把一个数字比如10000输出为下面的字符串格式“10,000”,一般是写一个方法,那么我希望更方便一点,直接向Number类型添加一个格式化方法,比如叫 ...
随机推荐
- Highcharts制作图片表设置线条颜色和粗细
Chart:图表区选项 Chart图表区选项用于设置图表区相关属性. 参数 描述 默认值 backgroundColor 设置图表区背景色 #FFFFFF borderWidth 设置图表边框宽度 0 ...
- SFTP获取数据文件
使用SFTP:客户端从服务端获取数据文件 客户机: 用户:client IP:13.00.00.11 服务端: 用户:server IP:16.00.00.66 1.在客户端的根目录下,执行下面的命令 ...
- ANSI、ASCII、Unicode和UTF-8编码
来自:http://blog.163.com/yang_jianli/blog/static/161990006201371451851274/ --------------------------- ...
- hdu5079
这道题的难点在于思考dp表示什么 首先可以令ans[len]表示白色子矩阵边长最大值大于等于len的方案数则ans[len]-ans[len+1]就是beautifulness为len的方案数 白色子 ...
- python操作数据库的几种方式
参照python 操作mysql python-mysqldb : http://www.cnblogs.com/wupeiqi/articles/5095821.html (python3 不支持) ...
- 洛谷P3926 SAC E#1 - 一道不可做题 Jelly【模拟/细节】
P3926 SAC E#1 - 一道不可做题 Jelly [链接]:https://www.luogu.org/problem/show?pid=3926 题目背景 SOL君(炉石主播)和SOL菌(完 ...
- AMQ学习笔记 - 04. 消息选择器
概述 消息选择器使用类似于SQL语法,为Consumer指定基于Message属性的筛选条件. 消息选择器 发送的时候,给消息添加一些属性:在接收的时候,根据属性进行过滤. API javax.jms ...
- POJ1128 (TopSort)(递归)(回溯)
Frame Stacking Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5220 Accepted: 1809 De ...
- Linux命令之free
free [选项] 显示系统中未使用和使用的内存情况,包括物理内存.交换区内存(swap)和内核缓冲区内存.共享内存将被忽略. (1).选项 -b,-k,-m,-g 以Byte,KB,MB,GB为单位 ...
- Coloring Dominoes
问题 E: Coloring Dominoes 时间限制: 1 Sec 内存限制: 128 MB提交: 279 解决: 95[提交] [状态] [讨论版] [命题人:] 题目描述 We have ...