文档章节

TypeScript基础入门之高级类型的索引类型(Index types)

durban
 durban
发布于 2018/09/23 22:21
字数 757
阅读 12
收藏 1

转发 TypeScript基础入门之高级类型的索引类型(Index types)

高级类型

索引类型(Index types)

使用索引类型,编译器就能够检查使用了动态属性名的代码。 例如,一个常见的JavaScript模式是从对象中选取属性的子集。

function pluck(o, names) {
    return names.map(n => o[n]);
}

下面是如何在TypeScript里使用此函数,通过 索引类型查询和 索引访问操作符:

function pluck<T, K extends keyof T>(o:T, names: K[]): T[K][] {
  return names.map(n => o[n])
}

interface Interface1 {
  name: string;
  age: number;
}

let i: Interface1 = {
  name: "A",
  age: 1,
}

let pluckStr: string[] = pluck(i, ['name'])
console.log(pluckStr)

运行后输出如下

[ 'A' ]

编译器会检查 name是否真的是Interface1的一个属性。 本例还引入了几个新的类型操作符。 首先是 keyof T, 索引类型查询操作符。 对于任何类型 T, keyof T的结果为 T上已知的公共属性名的联合。 例如:

let someProps: keyof Interface1; // 'name' | 'age'

keyof Interface1是完全可以与'name'|'age'互相替换的。 不同的是如果你添加了其它的属性到Interface1,例如address: string,那么 keyof Interface1会自动变为'name'|'age'|'address'。 你可以在像pluck函数这类上下文里使用 keyof,因为在使用之前你并不清楚可能出现的属性名。 但编译器会检查你是否传入了正确的属性名给 pluck:

pluck(i, ['age', 'unknown']); // error, 'unknown' is not in 'name' | 'age'

第二个操作符是T[K],索引访问操作符。 在这里,类型语法反映了表达式语法。 这意味着 i['name']具有类型Interface1['name'] — 在我们的例子里则为string类型。 然而,就像索引类型查询一样,你可以在普通的上下文里使用 T[K],这正是它的强大所在。 你只要确保类型变量 K extends keyof T就可以了。 例如下面 getProperty函数的例子:

function getProperty<T, K extends keyof T>(o: T, name: K): T[K] {
    return o[name]; // o[name] is of type T[K]
}

getProperty里的 o: T和 name: K,意味着 o[name]: T[K]。 当你返回 T[K]的结果,编译器会实例化键的真实类型,因此 getProperty的返回值类型会随着你需要的属性改变。

let name: string = getProperty(i, 'name');
let age: number = getProperty(i, 'age');
let unknown = getProperty(i, 'unknown'); // error, 'unknown' is not in 'name' | 'age'

索引类型和字符串索引签名

keyof和T[K]与字符串索引签名进行交互。如果你有一个带有字符串索引签名的类型,那么 keyof T会是 string。并且T[string]为索引签名的类型:

interface Map<T> {
    [key: string]: T;
}
let keys: keyof Map<number>; // string
let value: Map<number>['foo']; // number

© 著作权归作者所有

durban
粉丝 100
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
TypeScript基础入门之高级类型的类型保护与区分类型

转发 TypeScript基础入门之高级类型的类型保护与区分类型 项目实践仓库 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。 后面自己在练习的时候可...

durban
2018/09/15
0
0
TypeScript基础入门之Javascript文件类型检查(三)

转发 TypeScript基础入门之Javascript文件类型检查(三) 继续上篇文章【TypeScript基础入门之Javascript文件类型检查(二)】 支持JSDoc 下面的列表概述了使用JSDoc注释在JavaScript文件中提供类...

durban
2018/10/31
0
0
TypeScript基础入门之高级类型的可null类型

转发 TypeScript基础入门之高级类型的可null类型 高级类型 可null类型(Nullable Types) TypeScript具有两种特殊的类型,null和undefined,它们分别具有值null和undefined。 默认情况下,类...

durban
2018/09/16
0
0
【译】30 分钟入门 Typescript

原文地址:learn-typescript-in-30-minutes 原文作者:Danny Markov 译者:Jerry 译文首发地址:jerryjiao.life/ 今天我们来学习Typescript,一门被设计用来开发大型和复杂apps的语言。相较于...

努力的Jerry
01/25
0
0
TypeScript入门完全指南(基础篇)

本文来源于团队内分享。TypeScript的官方文档虽然较为全面,但通读下来却要耗时不少;另外,TypeScript中文资料本身也比较缺乏,本文可作为准备尝试TypeScript的同学入门使用,涵盖了上手Typ...

KianM
2018/12/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nproc systemd on CentOS 7

Increasing nproc for processes launched by systemd on CentOS 7 Ask Question I have successfully increased the nofile and nproc value for the local users, but I couldn't find a p......

MtrS
今天
3
0
了解微信小程序下拉刷新功能

小程序提供了这个事件。 onPullDownRefresh() 监听用户下拉刷新事件。 如果要开启下拉刷新功能,要先到json配置: "enablePullDownRefresh":true 配置后下拉有反应了但是没有加载效果,在onP...

oixxan__
今天
2
0
springmvc java对象转json,上传下载(未完)拦截器Interceptor以及源码解析(未完待续)

package com.atguigu.my.controller;import java.util.Collection;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contr......

architect刘源源
今天
32
0
[日更-2019.5.24、25、26] Android系统中的Binder通信机制分析(一)--servicemanager

声明 其实对于Android系统Binder通信的机制早就有分析的想法,记得去年6、7月份Mr.Deng离职期间约定一起对其进行研究的,但因为我个人问题没能实施这个计划,留下些许遗憾... 最近,刚好在做...

Captain_小馬佩德罗
昨天
24
0
聊聊dubbo的DataStore

序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部