Question

我一直在跟踪Typescript代码，但我对最后一行代码的理解还是不够。

const tuple = <T extends string[]>(...args: T) => args;
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link');
export type ButtonType = (typeof ButtonTypes)[number];

这是我要说的更明确的一行。

(typeof ButtonTypes)[number]

更新：

这直接来自Ways to get string literal type of array values without enum overhead

Answer 1

tuple是一个接受参数并返回所有参数数组的函数。例如，tuple('foo', 'bar')的计算结果为['foo', 'bar']。

使用

const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link');

您将获得所有这些字符串的数组：

const ButtonTypes = ['default', 'primary', 'ghost', 'dashed', 'danger', 'link'];

然后，使用(typeof foo)[number]检索变量foo上的所有属性，可以使用数字索引对其进行访问。因此，就像执行以下操作一样：

export type ButtonType = "default" | "primary" | "ghost" | "dashed" | "danger" | "link";

仅重复性较低。

Answer 2

第(typeof ButtonTypes)[number]行由以下部分组成：

typeof ButtonTypes提取常量ButtonTypes的类型。 ButtonTypes的类型为tuple。
方括号[]的类型为indexed access operator。它从对象类型中提取属性的类型（与类型有关）。在这种情况下，对象类型为typeof ButtonTypes，即元组。
在方括号中有number，它得到type of index signature。由于元组本质上是数组，因此它具有数字索引签名。由于元组包含不同类型的元素，因此(typeof ButtonTypes)[number]解析为union type "default" | "primary" | "ghost" | "dashed" | "danger" | "link"

还有几个例子可以理解所有这些人员：-）

这是类型

interface I1 {
    prop1: string;
    func2: (a: string) => void;
}

这是类型I1

的常量

const c1: I1 = {/*...*/}

typeof c1是I1。

I1的索引访问运算符将获得属性的类型。例如

type s = I1['prop1']; // Type s is string
type f = I1['func2']; // Type f is function

要获得索引签名的类型，我们应该具有带有索引签名的类型。因此，创建一个

interface I2 {
    [key: string]: string;
}

现在

type s1 = I2[string]; // type of s1 is string
let str: s1 = "some string"; // This is allowed, as type of s1 is string

数组和元组的索引签名类型为number，所以

let a = [1, 2, 3];
type ta = (typeof a)[number];  // type ta is number

具有索引类型签名的typeof元组代表什么？

2 个答案: