3. typescript的扩展类型 - 枚举

最新推荐文章于 2024-04-12 04:06:31 发布
最新推荐文章于 2024-04-12 04:06:31 发布
阅读量570 收藏
点赞数
分类专栏： typescript 文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44387370/article/details/121862935
版权

扩展类型 - 枚举

扩展类型：类型别名、枚举、接口、类

枚举通常用于约束某个变量的取值范围。

字面量和联合类型配合使用，也可以达到同样的目标。

字面量类型的问题

  • 在类型约束位置，会产生重复代码。可以使用类型别名解决该问题。 在这里插入图片描述

  • 逻辑含义和真实的值产生了混淆，会导致修改真实值得时候，产生大量得修改。
    这是什么意思呢，如果在大中型项目里面，需要改变性别的值。改成帅哥和美女，需要进行大量的修改。但是帅哥和男的逻辑含义是一样的。而枚举可以解决这个问题。

  • 字面量类型不会进入编译结果。
    在这里插入图片描述
    可以发现，最终的编译结果没有字面量类型取值范围。如果需要动态的取值，字面量类型有很大的局限性。

枚举

如何定义一个枚举

enum 枚举名 {
    枚举字段1 = 值1,
    枚举字段2 = 值2
}

在这里插入图片描述

枚举会出现到编译结果中。
在这里插入图片描述

枚举的规则：

  • 枚举的字段值可以是字符串或数字
    数字枚举的值会自动自增（有初始值则按初始值递增，否则从0开始）
  • 被数字枚举约束的变量，可以直接赋值为数字(最好不用，尽量使用逻辑名称)。
  • 数字枚举的编译结果 和 字符串枚举有差异

最佳实践

  • 尽量不要再一个枚举中既出现字符串字段，又出现数字字段。
  • 使用枚举时，尽量使用枚举字段的名称，而不是真实的值
芜湖芜芜芜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PA_typescript-lab-4
02-21
TypeScript 提供了枚举类型，用于表示一组预定义的常量。在 PA_typescript-lab-4 中，你将学习如何定义枚举并使用它们，这在处理固定选项集合时非常有用。 6. **模块（Modules）** TypeScript 支持 CommonJS 和 ...
typescript-test-2
04-03
在IT行业中，TypeScript是一种广泛使用的强类型、静态类型的编程语言，它是JavaScript的超集，为开发者提供了更多高级特性和工具支持。"typescript-test-2"这个项目标题暗示了我们可能正在处理一个与TypeScript相关...
TypeScript详解十七：类型扩展
to_the_Future的博客
10-11 1411
在其他文件就可以拿到拓展的属性或者方法。注意：如果在扩展变量的文件加上了。此时也可以在其他文件使用。
TypeScript基础之类型拓宽（Type Widening）
zxl1990_ok的博客
06-16 438
TypeScript基础之类型拓宽（Type Widening）， 拓宽的字面量类型， 非拓宽的字面量类型， 非拓宽字面量类型的用处
TypeScript系列教程四《扩展类型》
最新发布
m0_61409125的博客
04-12 819
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！新**
TypeScript扩展
qq_41923008的博客
11-04 421
接口 为我们有结构的数据进行类型约束 interface Post { title: string content: string } function printPost (post: Post) { console.log(post.title) console.log(post.content) } printPost({ title: 'Hello TypeScript', content: 'A javascript superset' }) 可选，只读，动态
TypeScript基础（四）扩展类型 - 类
俊刚的博客
01-09 1347
TypeScript是一种静态类型的编程语言，它是JavaScript的超集，可以编译成纯JavaScript代码。TypeScript引入了类的概念，使得开发者可以使用面向对象的方式来编写代码。本文将介绍TypeScript的类、继承、访问修饰符和访问器的用法。
Understanding-Typescript-2021-U:Typescprit Udemy课程
03-20
8. **枚举（Enums）**：枚举是 TypeScript 中一种强大的类型，用于表示一组相关的常量，如状态或方向。 9. **严格模式（Strict Mode）**：启用严格模式后，TypeScript 编译器会报告更多的潜在错误，比如未使用的...
摸鱼低代码前端采用 Vue3.x、Vite5.x、 Ant-Design-Vue4.x、TypeScript 等新技.zip
03-03
TypeScript是JavaScript的一个超集，它为JavaScript添加了静态类型检查、接口、枚举等特性，提高了代码的可维护性和可读性，尤其在大型项目中，TypeScript可以显著减少因类型错误导致的bug。在Vue3.x中，TypeScript...
GOF-TYPESCRIPT:GOF-设计图案-带类型脚本
03-17
TypeScript可以使用枚举和条件判断来实现状态切换。 21. **策略模式**：定义一组算法，并将每一个算法封装起来，使它们可以互相替换。TypeScript中的策略接口和具体策略类是实现此模式的关键。 22. **模板方法模式...
TypeScript基础（三）扩展类型-接口和类型兼容性
俊刚的博客
01-09 1109
在TypeScript中，接口（Interface）用于定义对象的结构和类型。它是一种约定，用于描述对象应该具有哪些属性和方法。接口可以提高代码的可读性、可维护性和可重用性。 接口的定义使用关键字`interface`，后面跟着接口的名称和一对花括号。在花括号中，可以定义接口的属性、方法和其他成员。
typescript 接口+类+枚举+解构+扩展+接口+类+函数
qq_38674970的博客
07-22 644
interface Person { // 定义一个接口 firstName:string lastName:string } function gretter(person:Person){ return " hello "+person.firstName+""+person.lastName } let user:...
18. TypeScript 扩展全局变量类型
舜岳的博客
11-22 2149
TypeScript 扩展全局变量类型 1. 扩展局部变量 // 可以直接使用接口对已有类型进行扩展 interface String { double():string } String.prototype.double = function () { return this as string + this; } let str = '123'; interface Window { mynane:string } console.log(Window.mynane) 2. 模块内全局扩
[typescript]为包扩展typescript类型 d.ts注册全局变量
宏斌的博客
11-09 1699
看文档可以解决百分之80的问题 但他没告诉我d.ts定义在哪???? 为styled-components的自定义主题定义类型 需要拓展styled-components的 DefaultTheme 接口 styled-components文档 我的环境 create-react-app 在tsconfig.json中有一个 include字段 我的include值为一个数组 里面有一个src目录 所以把d.ts文件放在src目录下就生效了 src/d.ts import "styled-compon
TypeScript学习
qq_42708400的博客
06-08 250
typescript
typescript 添加基础类型的扩展方法
weixin_30411997的博客
03-05 915
以时间转换为案例： //声明接口，也是在声明date这个基础类型要定义一个format的扩展方法，不写接口声明会报错 interface Date { Format(fmt:string):string; } //要写到class类的外面，不然会划红线报错 Date.prototype.Format = function (fmt) { //author: meizz ...
《现代Typescript高级教程》扩展类型定义
linwu的博客
07-04 230
@charset "UTF-8"; .markdown-body { font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB...
TypeScript基础（二）扩展类型-枚举及其位运算
俊刚的博客
01-07 1033
TypeScript中的枚举（Enum）是一种数据类型，用于定义一组具有命名值的常量。枚举可以帮助我们在代码中使用更具有可读性和可维护性的常量。 本文将介绍字面量类型的问题、类型别名的局限以及枚举的优缺点及示例详细说明枚举的用处,以及扩展知识`枚举的位运算`。
1.Vue3相比Vue2有什么不一样的地方？ 2.Setup有什么作用 3.请用代码展示ref函数 的使用步骤 4.请用代码展示reactive函数 的使用步骤 5.文字说明ref跟reactive区别 6.vue3中计算属性怎么使用 7.vue3中wacth 怎么使用？ 8描述下wactchEfffect函数的作用 9.Vue2与vue3的生命周期钩子函数有什么区别 10.toRef跟toRefs函数的作用是什么，怎么使用 11.除前面提到的,你自己有了解过vue3其他新的东西，如有，描述一下 12.TypeScript 是什么，与js相比，有什么区别 13.ts有那些数据类型 14.ts中接口是什么，什么是属性接口，什么是函数类型接口 15.你在项目中有用过那些es6 后的新特性，或者你自己了解过的，简述其含义 16.vue3是什么类型框架？ 17.这段代码中的三个属性在Ts中是什么意思 export interface QueryInt { upState: string | number, keyword: string, sendMsgState ？: string|number }
07-15
1. Vue3相较于Vue2有以下不同之处： - 更好的性能：Vue3通过Proxy代理对象实现了更高效的响应式系统，提升了性能。 - 更小的体积：Vue3进行了重构，移除了一些不常用的API，使得整个库的体积更小。 - Composition API：Vue3引入了Composition API，提供了一种更灵活的组件组织方式，使得逻辑复用更简便。 2. Setup函数是Vue3中的一个新特性，它用于替代Vue2中的选项API中的created和mounted钩子函数。Setup函数在组件创建阶段执行，在组件实例化之前运行，可以用来初始化组件的响应式数据、引入组件所需的依赖等操作。 3. ref函数的使用步骤如下： ``` import { ref } from 'vue'; const count = ref(0); // 创建一个响应式的数据 console.log(count.value); // 访问响应式数据 count.value++; // 修改响应式数据 ``` 4. reactive函数的使用步骤如下： ``` import { reactive } from 'vue'; const state = reactive({ count: 0 }); // 创建一个响应式对象 console.log(state.count); // 访问响应式对象的属性 state.count++; // 修改响应式对象的属性 ``` 5. ref跟reactive的区别： - ref用于创建一个单一的响应式数据，而reactive用于创建一个响应式对象，可以包含多个属性。 - ref返回的是一个包装过的对象，需要通过`.value`来访问和修改数据，而reactive返回的是原始对象，可以直接访问和修改属性。 6. Vue3中计算属性的使用与Vue2类似，通过`computed`函数来定义计算属性： ``` import { computed } from 'vue'; const doubleCount = computed(() => count.value * 2); console.log(doubleCount.value); // 访问计算属性 ``` 7. Vue3中watch的使用方式也有所改变，在setup函数中使用`watch`函数来监听响应式数据的变化： ``` import { watch } from 'vue'; watch(count, (newValue, oldValue) => { console.log('count has changed:', newValue); }); ``` 8. watchEffect函数是Vue3中的一个新函数，它会立即执行传入的副作用函数，并在依赖的响应式数据发生变化时重新执行。主要用于执行一些具有副作用的操作，例如发送网络请求等。 9. Vue2与Vue3的生命周期钩子函数有以下区别： - Vue2中有beforeCreate和created两个钩子函数，而Vue3中使用setup函数替代了这两个钩子函数。 - Vue3中去除了beforeMount和mounted钩子函数，而使用onBeforeMount和onMounted替代。 - Vue3中去除了beforeUpdate和updated钩子函数，而使用onBeforeUpdate和onUpdated替代。 - Vue3中去除了beforeDestroy和destroyed钩子函数，而使用onBeforeUnmount和onUnmounted替代。 10. toRef和toRefs函数的作用是将响应式对象的属性转换为单独的ref对象。toRef用于将单个属性转换为ref对象，而toRefs可以一次性将整个响应式对象的所有属性转换为ref对象。 ``` import { toRef, toRefs, reactive } from 'vue'; const state = reactive({ count: 0, title: 'Hello' }); const countRef = toRef(state, 'count'); // 将count属性转换为ref对象 const refs = toRefs(state); // 将整个响应式对象的所有属性转换为ref对象 console.log(refs.count.value); console.log(refs.title.value); ``` 11. 除了前面提到的，Vue3还引入了Teleport组件用于实现跨组件的Portal功能，Suspense组件用于实现异步组件加载和错误处理等新特性。 12. TypeScript是一种静态类型检查的编程语言，它是JavaScript的超集，可以编译为纯JavaScript代码。与JavaScript相比，TypeScript具有以下特点： - 强类型：TypeScript具有静态类型检查机制，可以在编译阶段发现类型错误。 - 类型推断：TypeScript可以根据变量的赋值推断出变量的类型，减少显式类型声明的需求。 - 更丰富的面向对象特性：TypeScript支持类、接口、泛型等面向对象的特性。 - 更好的工具支持：TypeScript具有更完善的编辑器支持和开发工具链。 13. TypeScript中包含以下数据类型： - 基本类型：number、string、boolean、null、undefined、symbol。 - 数组类型：number[]、string[]等。 - 元组类型：[number, string]等。 - 对象类型：{ key: value }等。 - 函数类型：(param: type) => returnType等。 - 枚举类型：enum。 - 泛型类型：Array<number>等。 14. TypeScript中的接口用于定义对象的结构和类型。属性接口用于定义对象的属性结构，函数类型接口用于定义函数的参数和返回值的类型。 - 属性接口示例： ``` interface Person { name: string; age: number; } const person: Person = { name: 'John', age: 25 }; ``` - 函数类型接口示例： ``` interface AddFunc { (a: number, b: number): number; } const add: AddFunc = (a, b) => a + b; ``` 15. 除了前面提到的Vue3的新特性外，ES6后的一些常用特性还包括箭头函数、解构赋值、模板字符串、扩展运算符、Promise等。箭头函数可以简化函数的定义和使用；解构赋值可以方便地从对象或数组中提取值；模板字符串可以方便地拼接字符串和插入变量；扩展运算符可以方便地合并对象和数组；Promise可以更好地处理异步操作。 16. Vue3是一种渐进式JavaScript框架，可以用于构建用户界面。它通过响应式系统和组件化开发模式，使得开发者可以更方便地构建复杂的Web应用程序。 17. 这段代码中的三个属性在TypeScript中的意思是： - upState: 表示一个字符串或数字类型的属性。 - keyword: 表示一个字符串类型的属性。 - sendMsgState?: 表示一个可选的字符串或数字类型的属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值