假设这样一个场景,目前业务上仅对接了三方支付 'Alipay', 'Wxpay', 'PayPal', 实际业务 getPaymentMode 会根据不同支付方式进行不同的付款/结算流程。

const PAYMENT_MODE = ['Alipay', 'Wxpay', 'PayPal'];

function getPaymentMode(paymode: string) {
  return PAYMENT_MODE.find(thirdPay => thirdPay === paymode)
}

 getPaymentMode('Alipay')      //  ??
 getPaymentMode('Wxpay')      // ??
 getPaymentMode('PayPal')    // ??
 getPaymentMode('unknow') // ?? 正常编译,但可能引发运行时逻辑错误 

由于声明仅约束了入参 string 类型,无法避免由于手误或上层业务处理传参不当引起的运行时逻辑错误。

可以通过声明字面量联合类型来解决上述问题。

const PAYMENT_MODE = ['Alipay', 'Wxpay', 'PayPal'];
type mode = 'Alipay' | 'Wxpay' | 'PayPal';

function getPaymentMode(paymode: mode) {
  return PAYMENT_MODE.find(thirdPay => thirdPay === paymode)
}

 getPaymentMode('Alipay')      // ??
 getPaymentMode('Wxpay')      // ??
 getPaymentMode('PayPal')    // ??
 getPaymentMode('unknow') // ? Argument of type '"unknow"' is not assignable to parameter of type 'mode'.(2345) 

字面量联合类型虽然解决了问题,但是需要保持值数组和联合类型之间的同步,且存在冗余。

两者声明在同一个文件时,问题尚且不大。若 PAYMENT_MODE 由第三方库提供,对方非 TypeScript 技术栈无法提供类型文件,那要保持同步就比较困难,新增支付类型或支付渠道合作终止,都会引入潜在风险。

const PAYMENT_MODE = ['Alipay', 'Wxpay', 'PayPal'] as const; //亦可 import { PAYMENT_MODE } from 'outer' 
type mode = typeof PAYMENT_MODE[number]   //  "Alipay" | "Wxpay" | "PayPal"    1)

function getPaymentMode(paymode: mode) {
  return PAYMENT_MODE.find(thirdPay => thirdPay === paymode)
}

 getPaymentMode('Alipay')      // ??
 getPaymentMode('Wxpay')      // ??
 getPaymentMode('PayPal')    // ??
 getPaymentMode('unknow') // ? Argument of type '"unknow"' is not assignable to parameter of type '"Alipay" | "Wxpay" | "PayPal"'. 

1)处引入了本文的主角 typeof ArrayInstance[number] 完美的解决了上述问题,通过数组值获取对应类型


typeof ArrayInstance[number] 如何拆解

首先可以确定 type mode = typeof PAYMENT_MODE[number] TypeScript 类型声明上下文 ,而非 JavaScript 变量声明上下文。

PAYMENT_MODE 是数组实例,numberTypeScript数字类型。若是 PAYMENT_MODE[number] 组合,则语法不正确,数组实例索引操作 [] 中只能具体数字, 不能是类型。

所以 typeof PAYMENT_MODE[number] 等同于 (typeof PAYMENT_MODE)[number]

可以看出 typeof PAYMENT_MODE 是一个数组类型

type mode1 = typeof PAYMENT_MODE //  readonly ["Alipay", "Wxpay", "PayPal"] 

typeof PAYMENT_MODE[number] 等效 mode1[number] ,我们知道 mode1[] indexed access types[]Index 来源于 Index Type Query 也即 keyof 操作 。

type mode1 =keyof typeof PAYMENT_MODE 
//  number | "0" | "1" | "2" | "length" | "toString" | "toLocaleString" | "concat" | "join" | "slice" | "indexOf" | "lastIndexOf" | "every" | "some" | "forEach" | "map" | "filter" | ... 7 more ... | "includes" 

可以看出得到的联合类型第一项就是 number 类型,我们常见 keyof 得到的都是类型属性名组成的字符串字面量联合类型,如下所示,那这个 number 是怎么来的。

interface Person {
  name: string;
  age: number;
  location: string;
}

type K1 = keyof Person; // "name" | "age" | "location" 

从 TypeScript-2.9 文档可以看出,

如果 X 是对象类型, keyof X 解析规则如下:

  1. 如果 X 包含字符串索引签名, keyof X 则是由string 、number 类型, 以及symbol-like 属性字面量类型组成的联合类型, 否则
  2. 如果 X 包含数字索引签名, keyof X 则是由number类型 , 以及string-like 、symbol-like 属性字面量类型组成的联合类型, 否则
  3. keyof X 由 string-like, number-like, and symbol-like 属性字面量类型组成的联合类型.

其中

  1. 对象类型的 string-like 属性可以是 an identifier, a string literal, 或者 string literal type的计算属性名 .
  2. 对象类型的number-like 属性可以是 a numeric literal 或 numeric literal type 的计算属性名.
  3. 对象类型的symbol-like 属性可以是a unique symbol type的计算属性名.

示例如下:

const c = "c1";
const d = 10;
const e = Symbol();

const enum E1 {
  A
}
const enum E2 {
  A = "A"
}

type Foo1 = {
  "f": string,   // String-like 中 a string literal
  ["g"]:string;  // String-like 中 计算属性名
  a: string; // String-like 中 identifier
  [c]: string; // String-like 中 计算属性名
  [E2.A]: string; // String-like 中计算属性名

  5: string; // Number-like 中 numeric literal
  [d]: string; // Number-like 中 计算属性名
  [E1.A]: string; // Number-like 中 计算属性名

  [e]: string; // Symbol-like 中 计算属性名
};

type K11 = keyof Foo1; // type K11 = "c1" | E2.A | 10 | E1.A | typeof e | "f" | "g" | "a" | 5 

再次回到前面内容:

type payType = typeof PAYMENT_MODE; // readonly ["Alipay", "Wxpay", "PayPal"]

type mode1 =keyof typeof PAYMENT_MODE 
// number | "0" | "1" | "2" | "length" | "toString" | "toLocaleString" | "concat" | "join" | "slice" | "indexOf" | "lastIndexOf" | "every" | "some" | "forEach" | "map" | "filter" | ... 7 more ... | "includes" 

编译器提示的 readonly ["Alipay", "Wxpay", "PayPal" 类型不够具象,我们无从得知 payType 具体有哪些属性。

keyof typeof PAYMENT_MODE 只有 number 类型而没有 string 类型,根据上面 keyof 解析规则的第2条,可以推断 typeof PAYMENT_MODE 类型含有数字索引签名,以及之前的结果 type mode = typeof PAYMENT_MODE[number] // "Alipay" | "Wxpay" | "PayPal"

我们可以据此推测出 payType 更加直观的类型结构:

type payType = {
      [i :number]: "Alipay" | "Wxpay" | "PayPal";  //数字索引签名
      "length": number;
      "0": "Alipay"; //因为数组可以通过数字或字符串访问
      "1": "Wxpay";
      ....
     "toString": string;
    //省略其余数组方法属性
    .....
}

type eleType = payType[number] // "Alipay" | "Wxpay" | "PayPal" 

后来我在 lib.es5.d.ts 中找到了 ReadonlyArray 类型,更进一步验证了上面的推测:

interface ReadonlyArray {
    readonly length: number;   
    toString(): string;
   //......省略中间函数
    readonly [n: number]: T;
} 

值得一提的是,ReadonlyArray 类型结构中,没有常规数组 push 等写操作方法名的 key

const immutable = ['a', 'b', 'c'] as const;
immutable[2];  //??
immutable[4]; //? // length '3' has no element at index '4'
immutable.push ;//?  //Property 'push' does not exist on type 'readonly ["a", "b", "c"]'
immutable[0] = 'd'; // ? Cannot assign to '0' because it is a read-only property

const mutable = ['a', 'b', 'c'] ;
mutable[2]; //??
mutable[4]; //??
mutable.push('d'); //?? 

由于数组是对象,所以 mutable 是引用,即使用const声明变量, 依然可以修改数组中元素。得益于as const的类型断言,编译期可以确定ReadonlyArray 类型,无法修改数组,编译器就可以动态生成如下类型。

type indexLiteralType = {
      "0": "Alipay" ; 
      "1": "Wxpay";
      "2": "PayPal";
} 

按照设计模式中接口单一职责原则, 可以推断 payType (readonly ["Alipay", "Wxpay", "PayPal"]) 是由ReadonlyArray 只读类型和 indexLiteralType 字面量类型组成的联合类型。

type indexLiteralType = {
     readonly "0": "Alipay" ,
     readonly "1": "Wxpay",
     readonly "2": "PayPal"
};
type values = indexLiteralType [keyof indexLiteralType ];  
type payType = ReadonlyArray & indexLiteralType; 

type test1 = payType extends (typeof PAYMENT_MODE) ? true:false; //false
type test2 = (typeof PAYMENT_MODE) extends payType ? true:false; //true

type test3 = payType[number] extends (typeof PAYMENT_MODE[number]) ? true:false; //true
type test4 = (typeof PAYMENT_MODE[number]) extends payType[number] ? true:false; //true 

这里我们构造出的 payType typeof PAYMENT_MODE 的父类型,已经非常接近了,还需要再和其他类型进行联合才能得到一样的类型,现在 payType 的具象程度已经足够我们理解typeof PAYMENT_MODE了,不再进一步构造一样的类型,因目前掌握的信息可能无法构造完全一样的类型。

借助 typeof ArrayInstance[number] 从常量值数组中获取对应元素字面量类型 的剖析至此结束 。

示例地址 Playground

标签:TypeScript

TypeScript中 typeof ArrayInstance[number] 剖析的更多相关文章

  1. three.js cannon.js物理引擎之制作拥有物理特性的汽车

    今天郭先生说一说使用cannon.js的车辆辅助类让我们的汽车模型拥有物理特性。效果图如下,在线案例请点击博客原文。......

  2. JS实现公告上线滚动效果

    本文实例为大家分享了JS实现公告上线滚动效果的具体代码,供大家参考,具体内容如下实现的效果如下,新闻公告上下滚动。代......

  3. 一文秒懂nodejs中的异步编程

    文章目录 简介同步异步和阻塞非阻塞javascript中的回调回调函数的错误处理回调地狱 ES6中的Promise什......

  4. Socket.IO基础教程

    什么是Socket.IOSocket.IO是一个库,可用于在浏览器和服务器之间进行实时,双向和基于事件的通信。它包括......

  5. node.js常用内置模块一

    在使用内模块的时候需要先将所需的内置模块进行引入、OS模块在nodejs中OS模块提供了与操作系统相关的属性和方法/......

  6. Node.js 安全指南

    当项目周期快结束时,开发人员会越来越关注应用的“安全性”问题。一个安全的应用程序并不是一种奢侈,而是必要的。你应该在......

  7. 在nodejs中创建child process

    目录简介child process异步创建进程同步创建进程在nodejs中创建child process简介node......

  8. typescript编写微信小程序创建项目的方法

    创建项目在微信开发者工具创建项目,在语言中选择 TypeScript改造项目编辑 package.json 文件,修......

  9. nodejs事件和事件循环详解

    目录简介nodejs中的事件循环phase详解timerspending callbacksidle, prepar......

  10. TypeScript中 typeof ArrayInstance[number] 剖析

    假设这样一个场景,目前业务上仅对接了三方支付 'Alipay', 'Wxpay', 'PayPal', 实际业务 ......

随机推荐

  1. Json转换工具

    import java.util.List;import com.fasterxml.jackson.core.Js......

  2. c#里面的AES加密解密

    C#, Java, PHP, Python和Javascript几种语言的AES加密解密实现更多1AESJavasc......

  3. python,selenium爬取微博热搜存入Mysql

    python爬取微博热搜存入Mysql 最终的效果 ......

  4. Ocelot一个优秀的.NET API网关框架

    1 什么是Ocelot?Ocelot是一个用.NET Core实现并且开源的API网关,它功能强大,包括了:路由、请......

  5. Python数据可视化分析--豆瓣电影Top250

    Python数据分析–豆瓣电影Top250利用Python爬取豆瓣电影TOP250并进行数据分析,对于众多爬虫爱好者......

  6. 使用line_profiler对python代码性能进行评估优化

    介绍python的逐行性能分析工具line_profiler的安装与使用,对给定的两个案例用line_profile......

  7. Linux常用命令:文件操作命令

    Linux系统命令主要包括文件操作、网络命令和性能命令,本文介绍常用文件操作命令。修改文件属性文件类型:普通文件:-......

  8. Python jieba库分词模式实例用法

    在中文分词中,jiebe库是最为常见的,主要的原因还是它独特的支持分词模式如:精确模式、全模式、搜索引擎模式。也对应......

  9. java中gc算法实例用法

    在我们对gc中的算法有基本概念理解后,要把算法的理念实现还需要依托实际垃圾收集器的使用。因为光靠一些简单的原理不足以......

  10. linux源码安装软件的一般方法

    rhel系统貌似安装不了xmgrace,配置的时候居然说要那个M*tif库。百度了一下,需要openmotif库,然......