Typescript高级类型与泛型难点详解
let test: {};
test = 1;
test = null;
test = false;
function printer (param: string | number) {
console.log(param)
}
class Dog {
eat () {}
guardHome () {}
}
class Cat {
eat () {}
catchMice () {}
}
function animalFactory (): Dog | Cat {
if (Math.random() * 10 > 5) {
return new Dog();
} else {
return new Cat();
}
}
let ani = animalFactory();
ani.guardHome(); // error
ani.eat()
根据上面的结论, animalFactory 的返回值应该是Dog类或Cat类的实例都可以,但是却偏偏只有eat方法能调用成功,属于各自单独类的guardHome或 catchMice方法都不能调用成功。
let str;
let val: number = (str as string).length;
let val2: number = (<string>str).length;
let str;
function checkString (str: any): str is string {
return str;
}
function checkString (param: number | string) {
if (typeof param === 'string') {
let temp = param; //ok 此处param为string
param += '1'; //ok 此处param为 string | number
param += '1'; //ok 此处param为 string | number
param += 1; // ok 此处string类型可以与数字相加
return param; // 此处param为number
} else { // 此处此处相当于 if (typeof param === 'number')
param += 1; // ok 此处param为 string | number
param += '1'; // error number类型不能与字符串相加
return param // 此处param为number
}
}
interface testInter {
name: string,
age: number
}
let testArr: string[] = ['tate', 'pomelott'];
let testObj: testInter = {name: 'tate', age: 26}
先来验证数组:
function showKey<K extends keyof T, T> (key: K, obj: Array<string>) {
return key;
}
showKey<number, Array<string>>(1, testArr);
再来验证对象:
function showKey<K extends keyof T, T> (keyItem: K, obj: T): K {
return keyItem;
}
let val = showKey('name', testObj)
此处有个需要特别注意的点:使用泛型如何表示某个特定key组成的数组:
function showKey<K extends keyof T, T> (items: K[], obj: T): T[K][] {
return items.map(item => obj[item])
}
上例中的 T[K][] 意为K类型的数组,而且需要满足,K为T的key
真正理解了上面这句话,自然就会明白下面四种写法其实是等价的:
function showKey<K extends keyof T, T> (items: K[], obj: T): T[K][] {
return items.map(item => obj[item])
} function showKey<K extends keyof T, T> (items: K[], obj: T): Array<T[K]> {
return items.map(item => obj[item])
} function showKey<K extends keyof T, T> (items: K[], obj: {[K in keyof T]: any}): K[] {
return items.map(item => obj[item])
} function showKey<K extends keyof T, T> (items: K[], obj: {[K in keyof T]: any}): Array<K> {
return items.map(item => obj[item])
} let obj = showKey(['name'], testObj)
关于TS泛型和高级类型的新发现,持续更新中。。。
Typescript高级类型与泛型难点详解的更多相关文章
- C# vs TypeScript - 高级类型
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 高级类型
C# vs TypeScript - 高级类型 上一篇讲了基础类型,基本上用基础类型足够开发了,不过如果要更高效的开发,还是要看下高级类型,这篇和C#共同点并不多,只是延用这个主题. 联合类型 可以从 ...
- STM32接口FSMC/FMC难点详解
STM32接口FSMC/FMC难点详解 转载 http://blog.sina.com.cn/s/blog_808bca130102x94k.html STM32F767的FMC将外部存储器划分为 ...
- PHP7中标量类型declare的用法详解
这篇文章主要介绍了PHP7标量类型declare用法,结合实例形式分析了PHP7中标量类型declare的功能.特性与相关使用技巧,需要的朋友可以参考下 本文实例讲述了PHP7标量类型declare用 ...
- c# 把一个匿名对象赋值给一个Object类型的变量后,怎么取这个变量? c# dynamic动态类型和匿名类 详解C# 匿名对象(匿名类型)、var、动态类型 dynamic 深入浅析C#中的var和dynamic
比如有一个匿名对象,var result =......Select( a=>new { id=a.id, name=a.name});然后Object obj = result ;我怎 ...
- java 泛型实例详解(普通泛型、 通配符、 泛型接口)
java 泛型详解(普通泛型. 通配符. 泛型接口) 2013-02-04 19:49:49| 分类: JAVA | 标签:java |举报|字号 订阅 下载LOFTER客户端 JDK1.5 令我们期 ...
- ( 转 ) MySQL高级 之 explain执行计划详解
使用explain关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的,分析你的查询语句或是表结构的性能瓶颈. explain执行计划包含的信息 其中最重要的字段为:i ...
- MySQL高级 之 explain执行计划详解
使用explain关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的,分析你的查询语句或是表结构的性能瓶颈. explain执行计划包含的信息 其中最重要的字段为:i ...
- MySQL高级 之 explain执行计划详解(转)
使用explain关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的,分析你的查询语句或是表结构的性能瓶颈. explain执行计划包含的信息 其中最重要的字段为:i ...
随机推荐
- sqlite 数据库 boolean类型的小小测试
根据官方文档的介绍: SQLite does not have a separate Boolean storage class. Instead, Boolean values are stored ...
- Java8学习笔记(一)--Lambda表达式
两个概念 函数式接口 函数式接口就是只显式声明一个抽象方法的接口.为保证方法数量不多不少,java8提供了一个专用注解@FunctionalInterface,这样,当接口中声明的抽象方法多于或少于一 ...
- 从零开始部署javaWeb项目到阿里云上面
[详情请看]http://www.cnblogs.com/softidea/p/5271746.html 补充几点特别需要注意的事情 一:putty相当于阿里云的控制台, WinSCP 相当于是专门上 ...
- bzoj4514 数字配对
思路 首先想到费用流. 对于每个点拆点.然后考虑我们怎样才能保证每个点只被用一次. 如果\(i\)与\(j\)满足条件.那么就从\(i\)向\(j\)连一条边并且从\(j\)向\(i\)连一条边.这样 ...
- JS学习笔记Day9
一.BOM (一)概念:是 Browser object model 的缩写,简称浏览器对象模型. BOM 提供了独立于内容而与浏览器窗口进行交互的对象 由于 BOM 主要用于管理窗口与窗口之间的通讯 ...
- EF CodeFirst系列(3)---EF中的继承策略(暂存)
我们初始化数据库一节已经知道:EF为每一个具体的类生成了数据库的表.现在有了一个问题:我们在设计领域类时经常用到继承,这能让我们的代码更简洁且容易管理,在面向对象中有“has a”和“is a”关系 ...
- Cygwin添加到鼠标右键
From:http://www.cnblogs.com/killerlegend/p/3960112.html 在cygwin中安装chere 管理员权限执行mintty,输入下列命令即可. cher ...
- Node.js实战项目学习系列(1) 初识Node.js
前言 一直想好好学习node.js都是半途而废的状态,这次沉下心来,想好好的学习下node.js.打算写一个系列的文章大概10几篇文章,会一直以实际案例作为贯穿的学习. 什么是node Node.js ...
- vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- [物理学与PDEs]第4章习题2 反应力学方程组形式的化约 - 能量守恒方程
试证明: 利用连续性方程及动量方程, 能量守恒方程 (2. 15) 可化为 (2. 21) 的形式. 证明: 注意到 $$\beex \bea &\quad\cfrac{\p}{\p t}\s ...