前言:在编写 typescript 应用的时候,有时候我们会希望复用或者构造一些特定结构的类型,这些类型只从 typescript 靠内建类型和 interface、class 比较难以表达,这时候我们就需要用到类型推导。

keyof

在 typescript 我们可以用 keyof 关键字来提取对象的索引标记.

// obj 是一个对象, typeof 得到了其类型

keyof (typeof obj)

对象的 string 和 number 索引

对于 es5 而言,毋庸置疑一个对象(hash dictionary)的索引只可能是 string 和 number 两种类型;

// One simiple object with any type key-value

interface Foo {

[k: string]: any

}

type TFOO = keyof Foo // string | number

数组的元素索引有自己特殊含义,但它的类型仍然是 number.

const a = []

type TA = keyof (typeof a)

/**

number | "length" | "toString" | "toLocaleString" | "pop" | "push" | "concat" | "join" | "reverse" | "shift" | "slice" | "sort" | "splice" | "unshift" | "indexOf" | "lastIndexOf" | ...

*/

Symbol 索引

从 es6 开始, javascript 允许使用 Symbol 作为对象索引

interface objWithSymbol {

foo: string

[Symbol.toStringTag]: any

}

type T_OBJ_WITH_SYM = keyof objWithSymbol // "foo"

const a_with_symkey = {

[Symbol('#symA')]: 'bar'

}

type T_A = keyof typeof a_with_symkey // number | string

截止到笔者书写到此为止, typescript 还不支持通过 keyof 关键词提取 Symbol 类型的索引,这也无可厚非,因为在表述上,往往 Symbol 类型的索引并不被当成 "key". 也没有别的官方方式可以直接提取一个 interface 或对象类型中的 Symbol 类型的索引. 这其实可以理解: Symbol 作为对象索引的意义在于唯一性, 它本身不具有字面量(literal text),其唯一性的保障是运行时的内存分配,而非字面量.

在 typescript 中,这样写会被提示违反了类型约束:

const a = {}

// lint: 类型“{}”上不存在属性“foo”。ts(2339)

a.foo = 'bar'

但这样就不会:

const a = {}

a[Symbol('#symA')] = 'bar'

注意 Symbol 作为对象的索引是, 其不具有 enumerable: true 的属性,即默认无法被 Object.keys(...) 和 for...in 提取.

类似于获取获取一个对象中 string | number 类型的索引的方法是 Object.getOwnPropertyNames(); 获取一个对象中所有 Symbol 类型索引的方式 Object.getOwnPropertySymbols();

用 any 作为索引提取元素类型

有时候我们声明了一个所有元素类型一致(比如都为 string)的数组(类型为 string[]), 我们希望得到数组中的元素的类型, 用于后续的变量约束,这时候怎么办?

const a: string[] = []

type ELE_A = string

对简单的内建类型,我们当然可以简单声明,或者干脆就把 a 声明为 ELE_A[];

如果是这样呢?

const a: {a: string, b: string, c: number}[] = []

我们当然可以提前声明 ELE_A , 然后把 a 声明为 ELE_A[]

那如果是这样呢?

const a: {a: string, b: string, c: number}[] = []

const a1: {a: string, b: string}[] = []

const a2: {foo: string, c: string}[] = []

如果对每个变量都提前声明,难免让人有种在写 C 的感觉:先声明、再调用。

使用 any 可以帮我们提取其中的元素,比如

const a: {a: string, b: string, c: number}[] = []

type T_A = (typeof a)[any]

const a1: {a: string, b: string}[] = []

type T_A1 = (typeof a1)[any]

const a2: {foo: string, c: string}[] = []

type T_A2 = (typeof a2)[any]

这样,对于只复用一两次的数组元素中的类型,我们不必特意提前声明,而是先声明变量,再提取.

直接从已有的 interface 中提取

对于以下 interface, 如果想提取 foo2 (是一个数组)中的元素的类型,怎么办?

interface A {

foo: {

foo2: {

foo3: string[]

}[]

}

}

直接从 A 索引到 foo2, 然后使用 any 提取其元素

type FOO2_ELE = A['foo']['foo2'][any]

typescript索引类型_复杂场景下的 typescript 类型锚定 (1) ----- 对象索引提取-阿里云开发者社区...相关推荐

  1. mysql 客户服务号获取_《MySQL排错指南》——1.4 获取查询信息-阿里云开发者社区...

    本节书摘来自异步社区出版社<MySQL排错指南>一书中的第1章,第1.4节,作者:[美]Sveta Smirnova(斯维特 斯米尔诺娃),更多章节内容可以访问云栖社区"异步社区 ...

  2. qiankun 传统项目配置_飞猪微前端实践:统一运营工作台的解决方案-阿里云开发者社区...

    作者:侑夕 飞猪一体化运营工作台一期工作经过 3 个月的开发终于内部开始使用,期间我们面向运营场景,基于微前端与 SDK 化的一体化集成方案,完成 4 大场景 10 余个平台的接入和配置打通,并对数百 ...

  3. mysql safe 关闭_新手请教,mysqld经常自动关闭是什么原因?-问答-阿里云开发者社区-阿里云...

    错误日志如下: 61103 22:12:15 mysqld_safe Number of processes running now: 0 161103 22:12:15 mysqld_safe my ...

  4. itext设置pdf的尺寸_如何获取pdf文档iText 7的页面大小-问答-阿里云开发者社区-阿里云...

    我在iText 7中有一个Java程序,可以接收JSON数据并生成一个PDF文档(带有页眉和页脚),该文档可以很好地处理clientData注释中的变量中的数据,但是当在无注释clientData中使 ...

  5. mysql join 索引 无效_ORACLE MYSQL中join 字段类型不同索引失效的情况-阿里云开发者社区...

    ORACLE MYSQL中join 字段类型不同索引失效的情况 重庆八怪 2016-12-29 780浏览量 简介: 关于JOIN使用不同类型的字段类型,数据库可能进行隐士转换,MYSQL ORACL ...

  6. mysql double 存储_关于MYSQL中FLOAT和DOUBLE类型的存储-阿里云开发者社区

    关于MYSQL中FLOAT和DOUBLE类型的存储 重庆八怪 2016-04-12 844浏览量 简介: 关于MYSQL中FLOAT和DOUBLE类型的存储 其实在单精度和双精度浮点类型存储中其存储方 ...

  7. python中引入sql的优点_引用sql-和引用sql相关的内容-阿里云开发者社区

    bboss持久层改进支持模块sql配置文件引用其它模块sql配置文件中sql语句 bboss持久层改进支持模块sql配置文件引用其它模块sql配置文件中sql语句. 具体使用方法如下: <pro ...

  8. 阿里mysql数据库同步_如何对MySQL数据库中的数据进行实时同步-阿里云开发者社区...

    数据传输(Data Transmission) 支持以数据库为核心的结构化存储产品之间的数据传输. 它是一种集数据迁移.数据订阅及数据实时同步于一体的数据传输服务.数据传输致力于在公有云.混合云场景下 ...

  9. mysql 轨迹数据存储_基于Tablestore实现海量运动轨迹数据存储-阿里云开发者社区...

    前言 现在越来越多的人都开始关心自己的运动数据,比如每日的计步.跑步里程.骑行里程等.运动APP与运动类的穿戴设备借助传感器.地图.GPS定位等技术,收集好运动数据以后,通过与互联网社交功能结合,产生 ...

最新文章

  1. SAP MM MB5L 报表里的差异金额如何调整?
  2. 在微型计算机中 如果电源突然中断,微型计算机在工作中电源突然中断,则其中的信息全部丢失,再次通电后也不能恢复的..._考试资料网...
  3. 第29课 布纳特老师出的难题 《小学生C++趣味编程》
  4. .NET MVC扩展UrlHelper支持CDN
  5. NoticeBoard 一个仿原生UI的消息通知控件
  6. perl 中文处理 乱码
  7. 错误上报_PCIe错误的上报方式
  8. Android Studio 查询RecyclerView最新依赖方法
  9. 思科模拟器路由表怎么看_思科路由器查看配置命令
  10. 使用CamlBuilder生成CAML查询语句
  11. 2021全国大学生信息安全竞赛初赛部分Write up
  12. 讲师面试流程及试讲指导
  13. 递归计算 1 - 100 的和
  14. 【投屏】Scrcpy源码分析四(最终章 - Server篇)
  15. aix7.1.4上安装12.1.0.2版本RAC集群时遇到的bug无法创建mgmt库
  16. <<视觉问答>>2021:Zero-shot Visual Question Answering usingKnowledge Graph
  17. 夜神模拟器adb查看log
  18. 如何搭建vue脚手架
  19. html5走格子游戏,JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
  20. poi下载模板含下拉框

热门文章

  1. js 判断 ““,null,undefined
  2. java获取每月最后一天_java获取每月的最后一天实现方法
  3. c语言 格式转换函数,C语言中的格式转换函数.doc
  4. matlab gui 制动程序设计,Matlab的GUI程序设计程序.doc
  5. 生成 oracle 连接串,Generator连接Oracle数据库生成Model报错
  6. 使用linux集体升级系统,一:Linux系统的升级
  7. php短路逻辑,JS利用短路原理简写if语句
  8. ibm websphere oracle weblogic,对比平台--WebLogic与WebSphere之间的区别
  9. python两行数据相加_小白python入门基础——Python安装教程与特色介绍
  10. android.intent.action.view 融云,Android 融云SDK集成单聊