ts中枚举

简介: ts中枚举

现实生活喜欢对称和轻微的时间错移。——博尔赫斯《南方》

填坑,官方文档:https://www.typescriptlang.org/docs/handbook/enums.html

我新建了一个vue项目用来演示

这里代码如下:

enum Direction {
  Up,
  Down,
  Left,
  Right
}
console.log({ Direction });
console.log({ 'Object.entries(Direction)': Object.entries(Direction) });
console.log({ 'Direction[0]': Direction[0] });
console.log({ 'Direction.Up': Direction.Up });


打印结果如下:

定义一个双向绑定的值

const count = ref(Direction.Up)

在下方使用

<button type="button" @click="count++">count is: {{ count + Direction[count] }}</button>

默认是0Up

点一下

这说明对枚举进行递增,等于对齐值进行递增

我们这里将枚举中定义字符串初始值

enum Direction {
  Up = '上',
  Down = '下',
  Left = '左',
  Right = '右'
}

然后发现之前生成的8个属性变成了4个,不支持直接使用值进行反向映射了

也无法自增了

但我们仍然可以使用这种方式

让其初始值变为1,后面的也会依次递增

比如这样写:

enum Direction {
  Up = 1,
  Down,
  Left,
  Right = 10
}

生成的结果为:

{
    "1": "Up",
    "2": "Down",
    "3": "Left",
    "10": "Right",
    "Up": 1,
    "Down": 2,
    "Left": 3,
    "Right": 10
}
相关文章
|
4天前
|
存储 JavaScript 算法
TS泛型类型
TS泛型类型
11 0
|
4天前
|
JavaScript 编译器 开发者
TS类型断言
TS类型断言
6 0
|
9月前
TS中的泛型
TS中的泛型
45 0
|
9月前
|
JavaScript
对TS里泛型的理解
对TS里泛型的理解
42 1
|
6天前
|
JavaScript
TS中的枚举是什么如何使用
TS中的枚举是什么如何使用
24 0
|
6月前
|
JavaScript 前端开发 开发者
ts详解以及相关例子(一篇带你详细了解ts)
ts详解以及相关例子(一篇带你详细了解ts)
45 1
|
8月前
|
JavaScript 前端开发
ts -函数的类型
在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression)
|
8月前
|
JavaScript
ts - 重载
重载允许一个函数接受不同数量或类型的参数时,作出不同的处理。
|
8月前
ts - 泛型
泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
|
8月前
|
JavaScript 前端开发
ts - 类
TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程。让我们创建一个Student类,它带有一个构造函数和一些公共字段。 注意类和接口可以一起工作。