【前端vue3】TypeScrip-元组类型和枚举类型

发布于:2024-07-02 ⋅ 阅读:(158) ⋅ 点赞:(0)

元组类型

元组就是数组的变形

元组(Tuple)是固定数量的不同类型的元素的组合。

元组与集合的不同之处在于,元组中的元素类型可以是不同的,而且数量固定。元组的好处在于可以把多个元素作为一个单元传递。如果一个方法需要返回多个值,可以把这多个值作为元组返回,而不需要创建额外的类来表示。

let arr:[number,string,boolean,undefined] = [1,"小C",true,undefined]

当需要赋值或者访问某个已知索引的元素时,会得到正确的类型
在这里插入图片描述

可以设置为可选
在这里插入图片描述

越界元素

对于越界的元素他的类型被限制为 联合类型(就是你在元组中定义的类型)

let arr:[x:number,y?:string] =[1]

arr.push(true)

在这里插入图片描述

枚举类型

在javaScript中是没有枚举的概念的TS帮我们定义了枚举这个类型

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。

枚举关键字enum

数字枚举

import { log } from "console";

enum xiaoc {
 xiaobai,
 xiaohei,
 xiaohong
}

log(xiaoc)

在这里插入图片描述
如上,我们定义了数字枚举,没有使用初始化,所有成员从0开始增长

使用初始化,从1开始增长,如下:

import { log } from "console";

enum xiaoc {
    xiaobai = 1,
    xiaohei,
    xiaohong
}

log(xiaoc)

在这里插入图片描述

字符串枚举

字符串枚举的概念很简单。 在一个字符串枚举里,每个成员都必须用字符串字面量,或另外一个字符串枚举成员进行初始化。

import { log } from "console";

enum xiaoc {
    xiaobai = "xiaobai",
    xiaohei = "xiaohei",
    xiaohong = "xiaohong",
}

log(xiaoc)

在这里插入图片描述

异构枚举

异构枚举可以混合字符串和数字成员

enum Types{
   No = "No",
   Yes = 1,
}

接口枚举

定义一个枚举Types 定义一个接口A 他有一个属性red 值为Types.yyds

声明对象的时候要遵循这个规则

   enum Types {
      yyds,
      dddd
   }
   interface A {
      red:Types.yyds
   }
 
   let obj:A = {
      red:Types.yyds
   }

const枚举

大多数情况下,枚举是十分有效的方案。 然而在某些情况下需求很严格。 为了避免在额外生成的代码上的开销和额外的非直接的对枚举成员的访问,我们可以使用 const枚举。 常量枚举通过在枚举上使用 const修饰符来定义。

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

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]

生成后的代码:

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

反向映射

它包含了正向映射( name -> value)和反向映射( value -> name)

要注意的是 不会为字符串枚举成员生成反向映射。

enum Enum {
   fall
}
let a = Enum.fall;
console.log(a); //0
let nameOfA = Enum[a]; 
console.log(nameOfA); //fall

网站公告

今日签到

点亮在社区的每一天
去签到