TS元组和枚举

新星_
239 阅读5分钟

元组

数组合并了相同数据类型的对象，而元组（Tuple）是合并了不同数据类型的对象。元组类型表示一个已知元素数量和类型的数组，各元素的类型不必相同。

//定义一个第一个元素为 string 和第二个元素为 number 的元组
//该元组只能有两个元素，第一个元素类型是字符串，第二个元素是数字。
let tom: [string, number] = ['Tom', 25];

当赋值或访问一个已知索引的元素时，会得到正确的类型：

let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;
tom[0].slice(1);
tom[1].toFixed(2);

也可以只赋值其中一项：

let tom: [string, number];
tom[0] = 'Tom';

但是当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项，元素和数量都必须相同。

//编译通过
let tom: [string, number] = ['Tom', 25];
//编译报错
let tom: [string, number] = ['Tom', 25,ture];
//编译报错
let tom: [string, number] = ['Tom', '25'];
//编译报错
let tom: [string, number] = ['Tom'];

image.png

image.png

image.png

当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：

//元组添加元素时，需要是number或者string类型，会被定义为联合类型
tom.push(267);
tom.push("267");
//编译报错
tom.push(true)

枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。枚举使用 enum 关键字来定义。使用枚举类型给一组数值赋予名称，枚举对象的每一个数据值就是一个元素。

  • 枚举成员默认会被赋值为从 0 开始递增的数字，同时也会对枚举属性值到枚举属性名进行反向映射，一般是存储为数字的。

image.png

可以通过名称取值，也可以通过值取名称

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
//根据元素属性名得到编号
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
//根据编号得到元素属性名
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

上面的例子被编译为的js代码如下

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));
  • 给枚举项手动赋值，没有赋值第一个参数默认为0，后面递增加1，后面的未手动赋值的枚举项会接着上一个枚举项递增。
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

image.png

enum NumberType {
    one = 2,
    two = 1,
    three,
    four
}
console.log(NumberType);

上面的例子中，two被赋值为1，three递增到 2 的时候与前面的 one 的取值重复了，但是 TypeScript 并没有报错，导致 NumberType[2] 的值先是 "one"，而后又被 "three" 覆盖了

image.png

ps:手动赋值不要使用重复值，通过编号取名称会被覆盖

  • 手动赋值的枚举项也可以为小数或负数，此时后续未手动赋值的项的递增步长仍为 1

image.png

手动赋值的枚举项可以不是数字，此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的)：

enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};
//编译后的js
var Days;
(function (Days) {
    Days[Days["Sun"] = 7] = "Sun";
    Days[Days["Mon"] = 8] = "Mon";
    Days[Days["Tue"] = 9] = "Tue";
    Days[Days["Wed"] = 10] = "Wed";
    Days[Days["Thu"] = 11] = "Thu";
    Days[Days["Fri"] = 12] = "Fri";
    Days[Days["Sat"] = "S"] = "Sat";
})(Days || (Days = {}));

枚举项类型

枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。枚举项是指枚举里面的元素

前面所举的例子都是常数项，一个典型的计算所得项的例子：

enum Color {Red, Green, Blue = "blue".length};

上面的例子中，枚举项Blue"blue".length 就是一个计算所得项，Red和Green是常数项。

上面的例子不会报错，但是如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错，计算所得项后面的枚举项必须手动赋值：

enum Color {Red = "red".length, Green, Blue};

// 编译报错: Enum member must have initializer.
// 编译报错: error TS1061: Enum member must have initializer.
enum Color {Red = "red".length, Green=6, Blue=7};

常数枚举

常数枚举是使用 const enum 定义的枚举类型：

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
//js编译后的结果
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

常数枚举与普通枚举的区别是，它会在编译阶段被删除不会出现在编译后的js文件，并且不能包含计算成员。

//编译报错
const enum Directions {
    Up,
    Down,
    Left,
    Right="j".length
}
//编译成功，
const enum Directions {
    Up,
    Down,
    Left,
    Right=10+10//不是计算所得项
}

image.png

外部枚举

外部枚举是使用 declare enum 定义的枚举类型：

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
//js编译后的结果
var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

declare 定义的类型只会用于编译时的检查，编译结果中会被删除。

外部枚举与声明语句一样，常出现在声明文件中。

同时使用 declare 和 const 也是可以的：

declare const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
//js编译后的结果
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];
avatar
文章
阅读
粉丝