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的更多相关文章

  1. eval5: TypeScript编写的JavaScript解释器

    eval5是基于TypeScript编写的JavaScript解释器,100%支持ES5语法. 项目地址:https://github.com/bplok20010/eval5 使用场景 浏览器环境中 ...

  2. 使用TypeScript如何提升JavaScript编程效果?

    TypeScript是个什么鬼?和JavaScript有什么关系? TypeScript是由微软开发的一种可快速入门的开源的编程语言,是JavaScript的一个超集,且向这个语言添加了可选的静态类型 ...

  3. 使用Typescript来写javascript

    使用Typescript来写javascript 前几天尝试使用haxejs来写javascript,以获得静态类型带来的益处.虽然成功了,但很快发现将它与angularjs一起使用,有一些不太顺畅的 ...

  4. JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标

    一.说明 取消事件的默认动作. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段 ...

  5. 分享:使用 TypeScript 编写的 JavaScript 游戏代码

    <上篇博客>我写出了我一直期望的 JavaScript 大型程序的开发模式,以及 TS(TypeScript) 的一些优势.博客完成之后,我又花了一天时间试用 TS,用它来重构之前编写的一 ...

  6. [TypeScript] 1. Catching JavaScript Mistakes with TypeScript

    The TypeScript compiler is a powerful tool which catches mistakes even in vanilla JavaScript. Try it ...

  7. CoffeeScript?TypeScript?还是JavaScript

    请注意本文只是我的偏见,我努力地理解借助CoffeeScript或TypeScript之类的编译器写JavaScript代码的理由.静态编译.强类型语言和框架,我有着这些流行的.丰富的背景.我的上一份 ...

  8. Fixing the JavaScript typeof operator

    https://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/javascript 类 ...

  9. 在TypeScript中扩展JavaScript基础对象的功能

    最近工作中用到,记录一下:假设我们需要一个功能,把一个数字比如10000输出为下面的字符串格式“10,000”,一般是写一个方法,那么我希望更方便一点,直接向Number类型添加一个格式化方法,比如叫 ...

随机推荐

  1. Java 原子性引用 AtomicReference

    http://www.jianshu.com/p/882d0e2c3ea6 实现 原子操作 使用场景: 一个线程使用student对象,另一个线程负责定时读表,更新这个对象.那么就可以用AtomicR ...

  2. Mysql缺少可执行的命令

    MySQL问题解决:-bash:mysql:command not found 问题:       [root@linux115 /]# mysql -uroot -p        -bash: m ...

  3. c语言,warning: return type of 'main' is not `int'怎么解决?

    ////警告可以忽略,但如果严格点的话 #include<stdio.h> #include<math.h>   int main(int argc, char *arg[]) ...

  4. docker官方文档中的dns,link,expose,publish

    link是过时的了,尽量不要用. dns内部集成,也可以用外部. expose只是用于记录,并不真的. publish是否起作用,也要看情况,是否被占用端口. -------------------- ...

  5. centos6.5 403 Forbidden 设置了777还是不行

    Forbidden You don't have permission to access /liuyanben/install on this server. Apache/2.2.15 (Cent ...

  6. QT各个版本的下载的地址

    http://download.qt.io/archive/qt/ USE [master]GO/****** Object:  Database [BookDB]    Script Date: 0 ...

  7. python 2 控制台传参,解包,编码问题初探

    python 2 控制台传参,需要从sys模块中导入argv,argv返回的第一个参数当前脚本(script)的文件名,后面是参数,参数个数必须和解包(unpack)时使用的参数个数一致 1.本例子演 ...

  8. LCA+差分【CF191C】Fools and Roads

    Description 有一颗 \(n\) 个节点的树,\(k\) 次旅行,问每一条边被走过的次数. Input 第一行一个整数 \(n\) (\(2\leq n\leq 10^5\)). 接下来 \ ...

  9. Centos7下安装7za 及7za常用命令

    安装必备环境 yum install kernel-devel kernel-headers gcc-c++ make bzip2 下载源码(16.02版本,2016.10.04 publish) w ...

  10. TDD开发案例

    前段时间把一个界面框架完成了,今天基于这个框架开发一个小模块,在这里把这个模块设计的全过程记录下来,希望大家讨论并指正. 一.起因 公司交给我一个任务,为测试员写一个手机模拟界面,以方便她们的手机短信 ...