第四章 TypeScript的枚举和类型约束的介绍和使用

最新推荐文章于 2024-06-10 18:34:50 发布
最新推荐文章于 2024-06-10 18:34:50 发布
阅读量800 收藏 21
点赞数 25
分类专栏： 从零开始学TypeScript 文章标签： typescript ecmascript 前端 javascript 枚举 类型约束 ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41636483/article/details/138410169
版权

image.png

文章目录

一、枚举

认识枚举

  • 在很多计算机语言中都有枚举的概念，但是 JS 中是没有枚举这个概念的，为了弥补这个缺憾 在 TS 加入了枚举类型
  • 什么是枚举呢 ?
  • 枚举( mei ju ) : 枚举的意思就是一一列举，把所有情况都列举出来，那么取值的时候，只有这几个可以使用，其他的都不行
  • 计算机语言里面的枚举( enumerations ) : 把所有的常量放在一个集合内，让若干个常量变成一组有关联的内容

image.png

// 针对一个业务逻辑，我需要频繁用到四个方向的字符串
const UP = 'up'
const RIGHT = 'right'
const DOWN = 'down'
const LEFT = 'left'
  • 对于以上四个变量来说
  • 我不管做任何逻辑，我没办法限制你只能使用这四个变量中的一个
// 封装一个功能函数
function util(dir) {}
  • 不管用什么方法，你都没办法限制这个 dir 参数接收到的必须是上面列出的四个方向
  • 这个时候，我们就可以用到枚举了
  • 首先，在 TS 中，利用 enum 关键字创建一个枚举集合，把我们需要的四个常量放进去
enum Direction {
  UP = 'up',
  RIGHT = 'right',
  DOWN = 'down',
  LEFT = 'left'
}
  • 制作了一个 DIrection 枚举集合，那么就可以用这个集合来对某些数据进行限制了
function util(dir: Direction) {}
  • 这就约定了，dir 这个参数的值只能是 Direction 这个枚举集合里面的常量，其他都不行

image.png

  • 只要你写的不是 Direction 这个枚举内的内容都不行

数字枚举

  • 数字枚举 : 枚举类型中的每一个常量都是数字
  • 在 TS 中，枚举内的每一个常量，当你不设置值的时候，默认就是 number 类型
enum Pages {
  ONE,    // 0
  TWO,    // 1
  THREE   // 2
}
  • 你在枚举内的常量，第一个默认值是 0，后面的依次 +1 递
  • 此时
    • Pages.ONE => 0
    • Pages.TWO => 1
    • Pages.THREE => 2
  • 我们也可以自己指定值
enum Pages {
  ONE = 10,    // 10
  TWO = 20,    // 20
  THREE = 30   // 30
}
  • 这个时候枚举集合内的常量就是我们指定好的值
  • 我们也可以指定部分值
enum Pages {
  ONE = 10,    // 10
  TWO,         // 11
  THREE        // 12
}
  • 指定常量后面的未指定常量，就会按照 +1 的规则一次递增
enum Pages {
  ONE,         // 0
  TWO = 10,    // 10
  THREE        // 11
}

enum Pages {
  ONE,         // 0
  TWO = 10,    // 10
  THREE,       // 11
  FOUR = 30,   // 30
  FIVE         // 31
}

字符串枚举

  • 字符串枚举：枚举集合中的每一个常量的值都是 string 类型
  • 在 TS 内，你必须要指定一个值，才可能会出现 string 类型
enum Direction {
  UP = 'up',
  RIGHT = 'right',
  DOWN = 'down',
  LEFT = 'left'
}
  • 在 TS 中，枚举常量和任何内容都是不一样的，包括原始字符串
function util(dir: Direction) {}

image.png

  • 这是因为，在 TS 中，枚举内的每一个常量都是一个独一无二的值
  • 所以当你用枚举去限定一个数据的时候，用的时候也只能用枚举内的值
  • 这样也避免你因为手误出现的单词错误，比如你会不会认为 ‘form’ 和 ‘from’ 是一个单词呢

异构枚举

  • 异构枚举 : 其实就是在一个枚举集合内同时混合了数字枚举和字符串枚举
  • 但是你大概率是不会这样使用的，因为我们作为一组数据的集合，一般不会把数字和字符串混合在一起使用
enum Info {
  ONE,
  UP = 'up',
  TWO = 2,
  LEFT = 'left'
}
  • 在这里有一个点需要注意
    • 因为在枚举集合内，当某一个 key 你没有设置值的时候，会默认按照上一个的值 +1
    • 所以如果前一个是 字符串枚举，那么下一个必须要手动赋值，不然会报错
    • 如果前一个是 数字枚举，那么下一个可以不必要手动赋值，会按照上一个 +1 计算

枚举合并

  • 在 TS 内的枚举，是支持合并的
  • 多个枚举类型可以分开书写，会在编译的时候自动合并
enum Direction {
  UP = 'up',
  RIGHT = 'right',
  DOWN = 'down',
  LEFT = 'left'
}

enum Direction {
  TOP = 'top',
  BOTTOM = 'bottom'
}

function util(dir: Direction) {}

util(Direction.BOTTOM)
util(Direction.LEFT)
  • 这里定义的两个枚举都叫做 Direction，会在编译的时候自动放在一起，不会出现冲突

反向映射

  • TS 内的数字枚举，在编译的时候，会同时将 key 和 value 分别颠倒编译一次
enum Pages {
  ONE,    // 0
  TWO,    // 1
  THREE   // 2
}
  • 以这个为例，他是如何进行编译的呢
var Pages;
(function (Pages) {
  Pages[Enum["ONE"] = 0] = "ONE"
  Pages[Enum["TWO"] = 1] = "TWO"
  Pages[Enum["THREE"] = 2] = "THREE"
})(Pages || (Pages = {}));
  • 编译完毕的结果
Pages = {
  ONE: 0,
  TWO: 1,
  THREE: 2,
  '0': 'ONE',
  '1': 'TWO',
  '2': 'THREE'
}
  • 也就是说，我们在 TS 内使用的时候，如果是数字枚举
  • 那么我们可以通过 key 得到对应的数字，也可以通过对应的数字得到对应的 key
enum Pages {
  ONE,    // 0
  TWO,    // 1
  THREE   // 2
}

console.log(Pages.ONE)    // 0
console.log(Pages.TWO)    // 1
console.log(Pages.THREE)  // 2
console.log(Pages[0])     // 'ONE'
console.log(Pages[1])     // 'TWO'
console.log(Pages[2])     // 'THREE'

常量枚举

  • 常量枚举，是在枚举的基础上再加上 const 关键字来修饰
  • 会在编译的时候，把枚举内容删除，只保留编译结果
  • 并且对于数字枚举来说，不在支持反向映射能力，只能利用 key 来访问
  • 非常量枚举
enum Pages {
  ONE,    // 0
  TWO,    // 1
  THREE   // 2
}

console.log(Pages.ONE)
console.log(Pages.TWO)
console.log(Pages.THREE)
  • 编译完毕的 js 文件

image.png

  • 常量枚举
const enum Pages {
  ONE,    // 0
  TWO,    // 1
  THREE   // 2
}

console.log(Pages.ONE)
console.log(Pages.TWO)
console.log(Pages.THREE)
  • 编译完毕的 js 文件

image.png

二、类型约束

  • 在 TS 中，还有一个很神奇的关键字，叫做 type
  • type 又叫做类型别名有很多神奇的功能，不仅能支持 interface 定义的对象结构，还支持任何手写类型
  • 先来看一个很简单的例子

image.png

let n1: number | string | boolean
let n2: number | string | boolean
let n3: number | string | boolean
  • 观察上面一段代码，我们定义了 n1 和 n2 和 n3 三个变量
    • 对于类型的限制都是 number 或者 string 或者 boolean
  • 写起来的时候就非常麻烦
  • 这个时候，我们就可以使用 type 对其进行别名设置
type Info = number | string | boolean
let n1: Info
let n2: Info
let n3: Info
  • 这样一来，我们的代码是不是变得简洁了起来
  • 可能小伙伴们认为这个用的并不多，但是 type 也不是只有这一个功能

type 的常见使用

  • 基本类型的别名
type n = number
let num: n = 100
  • 这是一个非常基础的使用，把 number 这个类型起了一个别名叫做 n
  • 今后再用 n 来限制变量的时候，其实就是在使用 number
  • 基本类型联合
type i = number | string
let str: i = '千锋大前端'
str = 100
  • 这就是联合类型，那 number 或者 string 这个类型齐了一个别名叫做 i
  • 我们再用 i 来限制变量的时候，这个变量就被限制为了 number 或者 string
  • 对象类型
type User = { name: string, age: number }
let person: User = { name: '千锋大前端', age: 10 }
  • 这就是对象类型，和 interface 很像，用处基本一致
  • 对象联合类型
type User = { name: string, age: number }
type Person = User & { gender: boolean }
let person: Person = { name: '千锋大前端', age: 10, gender: true }
  • 这就是对象联合类型，和 interface 的 extends 继承很像
  • 元组类型
type data = [ number, string ]
let info: data = [ 10, '千锋大前端' ]
  • 函数类型
type func = (x: number, y: number) => number
  • 常量限定
type color = 'yellow' | 'orange' | 'blue'
function util(c: color) {}
util('yellow')
  • 这个 color 被限定为了几个值，将来用 color 去约束一个变量的时候
  • 这个变量只能接受这几个值，这里和 enum 比较像了

type 和 interface 的共同点

  1. 都可以约束 对象 或者 函数 类型
    • interface
interface User { name: string; age: number }
interface Func { (x: number): number }
  • type
type User = { name: string; age: number }
type Func = (x: number) => number
  • 我们看到，两个定义方式略有区别，但是后期用法基本一致
  1. 扩展类型
    • interface 使用 extends 进行继承
interface Person {
  name: string
  age: number
}

// 使用 extends 关键字继承自 Person
interface Student extends Person {
  classRoom: number
}
let s: Student = { name: '千锋大前端', age: 10, classRoom: 1 }
  • type 使用 交叉(&) 来实现
type Person = {
  name: string
  age: number
}

// 使用 交叉(&) 
type Student = Person & {  
  classRoom: number
}
let s: Student = { name: '千锋大前端', age: 10, classRoom: 1 }
  1. 联合类型
    • interface 使用 extends 继承 type
type Person = {
  name: string
  age: number
}

// 使用 extends 关键字继承自 Person
interface Student extends Person {
  classRoom: number
}
let s: Student = { name: '千锋大前端', age: 10, classRoom: 1 }
  • type 使用 交叉(&) 扩展 interface
interface Person {
  name: string
  age: number
}

// 使用 交叉(&) 
type Student = Person & {  
  classRoom: number
}
let s: Student = { name: '千锋大前端', age: 10, classRoom: 1 }

type 和 interface 的区别

  1. interface 支持多次声明自动合并，type 不支持
interface User {
  name: string
  age: number
}
interface User {
  classRoom: string
}
/*
    真实的 User 接口
    {
        name: string
        age: number
        classRoom: string
    }
*/
  • type 如果声明重名标识符会报错

image.png

  1. 对于 ES6 模块化语法的默认导出语法
    • interface 支持声明的同时进行默认导出
export default interface User {  
  name: string
  age: number
}
  • type 必须先声明，在默认导出
type User = {
  name: string
  age: number
}
export default User
  • 必须要先声明好，在进行默认导出，如果直接连写默认导出，会报错

image.png

  1. type 可以使用 typeof 关键字去获取某一数据类型
let box = document.querySelector('.box')
type EleType = typeof box
  • 这里定义了一个 EleType 标识符，会自动根据 typeof 关键字检测的 box 的类型限制
  1. type 支持使用 in 关键字去遍历成映射类型
type names = 'firstName' | 'lastName' | 'AKA'
type nameType = {
  [key in names]: string
}
/*
    真实的 nameType 类型
    {
        firstName: string
        lastName: string
        AKA: string
    }
*/
杨树林er
关注
  • 25
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
TypeScript的枚举与类型约束
sdasadasds的博客
03-22 713
● 上一章我们讲了 TS 的接口● 这一章, 我们就来聊一聊 TS 的枚举和约束。
TypeScript11(枚举类型)
xiaojian044的博客
11-30 327
数字枚举 字符串枚举 异构枚举 const枚举 反向映射
TS学习(五) :TS枚举的使用
最新发布
fcclzydouble的博客
06-10 321
这个时候如果有需求说不要用男女来表示，用其他的比如帅哥/美女，这样改的地方就会很多如 Gender ="帅哥" | "美女"，被数字枚举约束的变量，可以直接赋值为数字，这样的方法不建议使用，这样又在使用真实值。像开发一些游戏的上下左右的操作可以用枚举，还有定义用户的性别也可以用枚举，2、逻辑含义和真实的值产生了混淆，会导致当修改真实值的时候，产生大量的修改。数字枚举的值会自动自增，如果第一个值不赋值，则第一个值为0，后面依次递增。使用枚举时，尽量使用枚举的字段名称，而不使用真实值。//枚举字段1=值1。
TypeScript（四）枚举类型（Enum Types），类型别名（Type），运算符
chengcheng9876的博客
03-07 1576
使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。TypeScript支持数字的和基于字符串的枚举。枚举类型的特点。
11-ts枚举类型
sunnyboysix的博客
08-17 332
11-ts枚举类型
TS学习(三) :怎么使用TS类型约束(如何使用TS)
weixin_41277748的博客
03-11 3244
怎么在ts文件中如果进行使用基本类型约束（怎么使用） 重声一下：TS是一个可选的静态类型系统，你可以使用也可以不使用不强求 类型约可以约束什么？ 有变量、函数的参数、函数的返回值；在定义变量时就先告诉它该变量是什么类型； 在定义函数参数时约束参数的类型还有参数的返回值类型等；等到在使用这些变量、参数、返回值时就会进行类型检查，看你有没有违反约束 如何约束？ 仅需要在变量、函数的参数、函数的返回值位置上加上:类型 变量let name:string;注意这个类型是小写的不是大写的；如果后面..
typescript-crash-course:教程由codeSTACKr
03-13
这个速成课程将详细讲解如何声明和使用各种类型，如基本类型（字符串、数字、布尔值）、数组、元组、枚举、以及对象和接口。 **课程内容概览** 1. **基础知识** - 安装和配置TypeScript环境，包括设置tsconfig....
nlw4
02-25
NLW4，全称为Next Level Week 4，是由Rocket席会主办的一项在线编程活动，主要聚焦于使用TypeScript这一编程语言进行web开发。在TypeScript中，它是一种静态类型的JavaScript超集，为开发者提供了更丰富的类型系统、...
NLW-4
02-28
NLW-4，这个名字可能指的是Next Level Week的第四期活动，这是一个由Rocketseat组织的在线编程训练营，专注于教授Web开发技术。在这个活动中，TypeScript是主要的学习内容，这是一种强类型、面向对象的JavaScript超...
面样本
02-13
【描述】: TypeScript 是一种强大的静态类型编程语言，它在 JavaScript 的基础上增加了类型系统、模块化和接口等特性，为大型项目提供了更好的可维护性和开发效率。本资源集合包含了针对 TypeScript 的各种面试问题...
Javascript如何遍历一个文件夹下的所有文件与目录
03-14
Javascript如何遍历一个文件夹下的所有文件与目录
to-day-list
03-29
最后，TypeScript的类型断言（type assertions）可以用来告诉编译器我们对某个值的类型有特殊了解，这在处理第三方库或者非TypeScript编写的代码时尤其有用。在"今日清单"中，可能有地方需要对JSON数据进行解析，...
【js，ts】枚举
烧仙草奶茶的博客
07-08 686
一、环境 https://blog.csdn.net/u013654125/article/details/77867567 mac：10.12.2 CocosCreator：1.5.1 二、JS原生的enum JS没有enum类型的数据，如果想定义枚举，则： 可以定义一个对象这样来定义枚举， LoginType = { UserName : 0, Quick : 1, }; 但是，这样的对象，可以在脚本里用，但是，如果希望通过CocosCreator里的编辑器来设置值的话，就行不通了。 三、Cocos
【TS】enum 枚举（含数字枚举转数组方法）
qq_45677671的博客
09-16 1万+
枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。数字枚举: 枚举成员的值为数字的枚举。字符串枚举：枚举成员的值是字符串。
ts 枚举类型原理及其应用详解
JiuMeilove的博客
02-19 2222
TypeScript的枚举类型是一种特殊的数据类型，它允许开发者为一组相关值定义一个共同的名称，使我们可以更清晰、更一致地使用这些值。枚举类型在TypeScript中用enum关键字定义，每个枚举值默认都是数字类型，从0开始自动递增。枚举类型在TypeScript中用 enum 关键字定义。下面是一个简单的枚举例子：在这个例子中我定义了一个名为 Direction 的枚举类型，它有四个可能的值：Up，Down，Left 和 Right。我们可以使用这些值来表示一个角色在屏幕上的方向。
TS枚举详解
热门推荐
AMD23的博客
03-23 2万+
Enums（枚举）是TypeScript的少数功能之一，它不是JavaScript的类型级扩展。 枚举允许开发者定义一组命名的常量。使用枚举可以使其更容易记录意图，或创建一组不同的情况。TypeScript提供了基于数字和字符串的枚举。 1 数值型枚举 我们首先从数字枚举开始，如果你来自其他语言，可能会更熟悉它。一个枚举可以用 enum 关键字来定义。 enum Direction { Up = 1, Down, Left, Right, } 上面，我们有一个数字枚举，其
java的八大基本类型和类型之间的转换
qq_40226268的博客
09-07 1545
一、java的八大基本类型 四类： **1、整形** 类型 大小 范围 byte(字节类型) 1字节 -2^7 ~ 2^7-1 short(短整形) 2字节 -2^15 ~ 2^15-1 int(整形) 4字节 -2^31 ~ 2^31-1 long(长整型) 8字节 -2^63 ~ 2^63-1 **2、浮点型** 类型 大小 范围 float(单精度浮点数) 4字节 -2^128 ~ 2^128 double(双精度浮点数) 8字节 -2^102
TS-枚举类型enum
darabiuz的博客
05-17 2万+
枚举的作用是列举类型中包含的各个值，一般用它来管理多个相同系列的常量（即不能被修改的变量），用于状态的判断。这是一种无序的数据结构，把键映射到值上，可以理解为编译时键固定的对象，访问键时，ts将检查指定的键是否存在 在web中，比较常见的状态判断有响应状态的判断： const handleResponseStatus = (status: number): void => { switch (status) { case 200: // 请求成功时 // Do someth.
typescript 枚举
08-30
TypeScript 的枚举（enum）是一种数据类型，它允许我们为一组相关的值分配有意义的名称。枚举提供了一种方便的方式来定义一组常量，并可以在代码中使用这些常量，以增加代码的可读性和可维护性。 在 TypeScript 中，枚举可以通过使用 `enum` 关键字来定义。以下是一个示例： ```typescript enum Direction { Up, Down, Left, Right } ``` 在上面的示例中，`Direction` 枚举定义了四个常量：`Up`、`Down`、`Left` 和 `Right`。这些常量的默认值是从 0 开始自动递增的索引值。 我们可以通过枚举的名称和成员值来引用枚举常量。例如： ```typescript let dir: Direction = Direction.Up; console.log(dir); // 输出 0 // 可以直接使用成员值来比较 if (dir === Direction.Up) { console.log("向上"); } ``` 此外，我们还可以为枚举成员指定自定义的数值。例如： ```typescript enum ErrorCode { Success = 200, NotFound = 404, ServerError = 500 } let httpStatusCode: ErrorCode = ErrorCode.NotFound; console.log(httpStatusCode); // 输出 404 ``` 枚举还提供了一些实用的特性，比如反向映射和迭代枚举值等。你可以根据具体需求来使用 TypeScript 枚举来简化代码并提高代码的可读性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨树林er

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值