文档章节

复杂场景下的 typescript 类型锚定 (1) ----- 对象索引提取

阿里云官方博客
 阿里云官方博客
发布于 10/18 15:52
字数 978
阅读 11
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

前言:在编写 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]

 

阅读原文

本文为云栖社区原创内容,未经允许不得转载。

© 著作权归作者所有

阿里云官方博客
粉丝 204
博文 2266
码字总数 5560474
作品 0
杭州
程序员
私信 提问
复杂场景下的 typescript 类型锚定 (1) ----- 对象索引提取

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

richardo2016
10/17
0
0
复杂场景下的 typescript 类型锚定 (2) ----- 泛型与类型推导

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

10/29
0
0
【TS 演化史 -- 破晓】一步一个脚印带你入门 TS

作者:Valentino Gagliardi 译者:前端小智 来源:valentinog 上个月自己花了 1300 买了阿(a)里(li)的 服 务 器来学习 node 及对应的框架,在 号之前它们有做活动,1300 的配置现在一年只要 ...

前端小智
11/04
0
0
浅谈 TypeScript - 接口

浅谈 TypeScript - 接口 return x + y;} x: number;y: number;} function sum ({ x, y }: ISum): number {return x + y;} x: number;y?: number;} function xsum({x, y}: ISumx): number {re......

icepy
2018/09/02
0
0
TypeScript学习笔记之四接口(Inferfaces)

一、使用环境 Mac 电脑 WebStorm TypeScript3.x版本 二、接口 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型,在OOP编程中接口都是比较常见且重要的概念 接口的作用 A、对类...

摸着石头过河_崖边树
2018/12/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

写的简单sh脚本2

#!/bin/bashexport LANG="en_US.UTF-8"#chmod +x filename 记得给文件加可执行权限#./vsimstart.sh#启动vsim项目echo "start vism"#207------------------------------assets=vsim-a......

hexiaoming123
昨天
4
0
java基础(1)变量和常量

概要和总结: 数据类型图: 基本数据类型:只有基本功能-----保存数据 (4类8种)byte-short-int-long-float-double-char-boolean 引用数据类型:有更多功能,保存数据,处理数据...

煌sir
昨天
5
0
年底了,整理了一份程序员面试必看的文章合集

本系列文章整合了本号发表和转载过的,有关技术招聘干货、笔试面试经验和技巧、简历、招聘等方面的精品文章,希望对想要找工作,以及正在找工作的你,能够有所帮助。 原创面试干货文章 校招季...

Java技术江湖
昨天
4
0
curl 命令行下工作的文件传输工具---应用篇

抓取页面内容到一个文件中 curl -o home.html http://www.sina.com.cn 模拟用户登录 # 此参数相当于设置http头 Authorization:curl --user user:password http://blog.mydomain.com/logi...

edison_kwok
昨天
4
0
JAVA--高级基础开发Cookie实现记住用户名和密码

前端JSP页面: 实现保存用户名和密码<%@ page import="java.net.URLDecoder" %><%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>Coo......

李文杰-yaya
昨天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部