首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TypeScript中枚举名称的`keyof`

基础概念

在TypeScript中,enum是一种特殊的类型,它允许你定义一组命名的常量。而keyof是一个关键字,用于获取一个对象类型的所有键(属性名)构成的联合类型。

相关优势

  • 类型安全enum提供了一种类型安全的方式来定义和使用一组相关的常量。
  • 代码清晰:使用enum可以使代码更加清晰和易于理解,因为它将相关的常量组织在一起。
  • 联合类型keyof可以用来获取对象类型的所有键,这在泛型约束和类型保护中非常有用。

类型

  • 枚举(Enum):可以是数字枚举或字符串枚举。
  • keyof:用于获取对象类型的所有键构成的联合类型。

应用场景

  • 状态管理:在状态管理库中,可以使用enum来定义不同的状态。
  • 配置对象:当有一个配置对象时,可以使用keyof来获取所有可用的配置项。

示例代码

代码语言:txt
复制
// 定义一个枚举
enum Color {
  Red,
  Green,
  Blue
}

// 使用 keyof 获取枚举的所有键
type ColorKeys = keyof typeof Color; // "Red" | "Green" | "Blue"

// 示例:使用枚举和 keyof
function getColorName(color: Color): string {
  switch (color) {
    case Color.Red:
      return "红色";
    case Color.Green:
      return "绿色";
    case Color.Blue:
      return "蓝色";
    default:
      return "未知颜色";
  }
}

console.log(getColorName(Color.Red)); // 输出: 红色

遇到的问题及解决方法

问题:为什么keyof不能用于非对象类型?

原因keyof关键字只能用于对象类型,因为它需要获取对象的键。对于非对象类型(如基本类型、枚举等),它们没有键的概念。

解决方法:如果你需要对非对象类型进行操作,可以考虑使用其他方法,例如使用typeof来获取类型的字符串表示。

代码语言:txt
复制
enum Color {
  Red,
  Green,
  Blue
}

type ColorType = typeof Color; // Color

问题:如何处理枚举值的联合类型?

原因:枚举值本身是一个联合类型,但在某些情况下,你可能需要将其转换为字符串或数字类型。

解决方法:可以使用类型断言或映射类型来处理枚举值的联合类型。

代码语言:txt
复制
enum Color {
  Red = "red",
  Green = "green",
  Blue = "blue"
}

type ColorString = Color["Red" | "Green" | "Blue"]; // "red" | "green" | "blue"

参考链接

希望这些信息对你有所帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

深入理解 TypeScript 中的 Keyof 运算符,让你的代码更安全、更灵活!

keyof 运算符是在 TypeScript 2.1 版本中引入的。这个关键字已经成为 TypeScript 中高级类型的基石,并在代码中经常使用。...一、如何定义 KeyOf 运算符 在 TypeScript 中,keyof 运算符用于获取用户定义的值。它主要用于泛型,格式类似于联合运算符及其属性。keyof 运算符会检索用户指定的值的索引。...二、在泛型中使用 KeyOf 运算 使用 KeyOf 运算符应用约束 在 TypeScript 中,keyof 运算符常用于在泛型函数中应用约束。...三、 KeyOf 与映射类型的结合使用 在 TypeScript 中,我们可以使用 keyof 运算符与映射类型结合,将现有类型转换为新类型。...结束 TypeScript 的 keyof 运算符虽然小巧,但却是 TypeScript 机制中不可或缺的一环。

23910
  • 5000 多字,让你一文掌握 TS 枚举

    一、基础知识 在 JavaScript 中布尔类型的变量含有有限范围的值,即true和false。而在 TypeScript 中使用枚举,你也可以自定义相似的类型。...如果枚举中某个成员的值使用显式方式赋值,但后续成员未显示赋值, TypeScript 会基于当前成员的值加 1 作为后续成员的值,比如以下 Enum 枚举中的成员 C: enum Enum { A,...,因为它们与属性名称相关:Symbol.asyncIterator; TypeScript 手册使用以大写字母开头的驼峰式名称。...但是,如果我们添加一个成员Maybe到NoYes枚举中,之后value的推断类型是NoYes.Maybe,这时该变量的类型与throwUnsupportedValue()方法中参数的类型在静态上不兼容。...这种方法的缺点:这种方法不适用于if语句。 7.3 keyof 和枚举 我们可以使用keyof类型运算符创建类型,其元素是枚举成员的 key。

    3.9K10

    一文让你彻底掌握 TS 枚举

    一、基础知识 在 JavaScript 中布尔类型的变量含有有限范围的值,即 true 和 false。而在 TypeScript 中使用枚举,你也可以自定义相似的类型。...如果枚举中某个成员的值使用显式方式赋值,但后续成员未显示赋值, TypeScript 会基于当前成员的值加 1 作为后续成员的值,比如以下 Enum 枚举中的成员 C: enum Enum { A,...,因为它们与属性名称相关: Symbol.asyncIterator; TypeScript 手册使用以大写字母开头的驼峰式名称。...TypeScript 2.6 支持在 .ts 文件中通过在报错一行上方使用 // @ts-ignore 来忽略错误。 // @ts-ignore 注释会忽略下一行中产生的所有错误。...这种方法的缺点: 这种方法不适用于 if 语句。 7.3 keyof 和枚举 我们可以使用 keyof 类型运算符创建类型,其元素是枚举成员的 key。

    4.8K21

    TypeScript 中枚举类型的理解?应用场景有哪些

    一、是什么 枚举是一个被命名的整型常数的集合,用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型 通俗来说,枚举就是一个对象的所有可能取值的集合 在日常生活中也很常见,例如表示星期的...SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY就可以看成是一个枚举 枚举的说明与结构和联合相似,其形式为: enum 枚举名{...标识符N[=整型常数], }枚举变量; 二、使用 枚举的使用是通过enum关键字进行定义,形式如下: enum xxx { ... } 声明关键字为枚举类型的方式如下: // 声明d为枚举类型Direction...let d: Direction; 类型可以分成: 数字枚举 字符串枚举 异构枚举 数字枚举 当我们声明一个枚举类型是,虽然没有给它们赋值,但是它们的值其实是默认的数字类型,而且默认从...,我们都可以通过枚举去定义,这样可以提高代码的可读性,便于后续的维护

    8010

    掌握 TypeScript:20 个提高代码质量的最佳实践

    类型别名和接口(interface)的主要区别在于,类型别名为类型创建一个新名称,而接口为对象的形状创建一个新名称。...运算符 keyof 运算符是 TypeScript 的一个强大功能,可以创建一个表示对象键的类型。...最佳实践11:使用枚举 枚举(Enums)是 TypeScript 中定义一组命名常量的一种方式。它们可以用于创建更具可读性和可维护性的代码,通过给一组相关的值赋予有意义的名称。...15: 类型保护 在 TypeScript 中,处理复杂类型时,很难跟踪变量的不同可能性。...文章中还介绍了一些如何使用 TypeScript 的高级特性的最佳实践,例如使用类型别名和枚举,以提高代码的可读性和可维护性。此外,该文章还强调了如何使用可选链操作符来避免一些运行时错误。

    4.2K30

    【TypeScript 演化史 — 第七章】映射类型和更好的字面量类型推断

    在方括号中,使用了 keyof 操作符。keyof T 将 T 类型的所有属性名表示为字符串字面量类型的联合。 方括号中的 in 关键字表示我们正在处理映射类型。...更多映射类型的示例 上面已经看到 lib.d.ts 文件中内置的 Readonly 类型。此外,TypeScript 定义了其他映射类型,这些映射类型在各种情况下都非常有用。...该方法返回一个新对象,该对象只包含咱们选择的属性。可以使用Pick对该行为进行构建,正如其名称所示。...在 TypeScript 2.0 中,类型系统扩展了几个新的字面量类型: boolean 字面量类型 数字字面量 枚举字面量 不带类型注解的 const 变量或 readonly 属性的类型推断为字面量初始化的类型...readonly 修饰符只限制从 TypeScript 代码中对属性的访问,在运行时就无能为力。也就是说,它会被编译时删除掉,不会出现在生成的 JS 代码中。

    3.8K40

    【TypeScript 演化史 -- 7】映射类型和更好的字面量类型推断

    在方括号中,使用了 keyof 操作符。keyof T 将 T 类型的所有属性名表示为字符串字面量类型的联合。 方括号中的 in 关键字表示我们正在处理映射类型。...该方法返回一个新对象,该对象只包含咱们选择的属性。可以使用 Pick 对该行为进行构建,正如其名称所示。...在 TypeScript 2.0 中,类型系统扩展了几个新的字面量类型: boolean 字面量类型 数字字面量 枚举字面量 不带类型注解的 const 变量或 readonly 属性的类型推断为字面量初始化的类型...字符串字面量扩展类型是 string,数字字面量扩展类型是number,true 或 false 的字面量类型是 boolean,还有枚举字面量扩展类型是枚举。...readonly 修饰符只限制从 TypeScript 代码中对属性的访问,在运行时就无能为力。也就是说,它会被编译时删除掉,不会出现在生成的 JS 代码中。

    2.9K10

    深入浅出 TypeScript

    本文是阅读小册 「《深入浅出 TypeScript》」 的阅读笔记,对TypeScript感兴趣的同学请继续阅读吧。...比如枚举、数组、元组都是 object 类型。 枚举类型 声明枚举类型时,如果没有显式的赋值,那么枚举值从 0 递增。如果显式赋值,那么后面的值从当前值递增。...在 TypeScript 的类中,成员都默认为 public, 被此限定符修饰的成员是「可以被外部访问」。 当成员被设置为 private之后, 被此限定符修饰的成员是「只可以被类的内部访问」。...T>,我们用「索引类型」 keyof T 把传入的对象的属性类型取出生成一个「联合类型」,这里的泛型 U 被约束在这个「联合类型」中。...函数类型」的「名称」取出来。

    2.9K30

    钉钉前端面试题~TypeScript相关问题及解答

    不了解 ts中如何枚举联合类型的key?...K] } 复制代码 TS是基于结构类型兼容 typescript的类型兼容是基于结构的,不是基于名义的。...implements,使用implements关键字的类将需要实现需要实现的类的所有属性和方法。 枚举和 object 的区别 枚举可以通过枚举的名称,获取枚举的值。...也可以通过枚举的值获取枚举的名称。 object只能通过key获取value 数字枚举在不指定初始值的情况下,枚举值会从0开始递增。 虽然在运行时,枚举是一个真实存在的对象。...但是使用keyof时的行为却和普通对象不一致。必须使用keyof typeof才可以获取枚举所有属性名。 never, void 的区别 never,never表示永远不存在的类型。

    1K20

    TypeScript 相关问题(含解答)

    不了解 ts中如何枚举联合类型的key?...K] } 复制代码 TS是基于结构类型兼容 typescript的类型兼容是基于结构的,不是基于名义的。...implements,使用implements关键字的类将需要实现需要实现的类的所有属性和方法。 枚举和 object 的区别 枚举可以通过枚举的名称,获取枚举的值。...也可以通过枚举的值获取枚举的名称。 object只能通过key获取value 数字枚举在不指定初始值的情况下,枚举值会从0开始递增。 虽然在运行时,枚举是一个真实存在的对象。...但是使用keyof时的行为却和普通对象不一致。必须使用keyof typeof才可以获取枚举所有属性名。 never, void 的区别 never,never表示永远不存在的类型。

    1.1K20

    【译】不是 TypeScript 的 TypeScript -- JSDoc 的超能力

    TypeScript的编译器(tsc)以及 VSCode 等编辑器中的语言支持无需任何编译步骤,就能提供出色的开发体验。下面我们来看看如何使用。...目录 带有JSDoc注释的TypeScript 激活检查 内联类型 定义对象 定义函数 导入类型 使用泛型 枚举 typeof 从类扩展 带有 JSDoc 注释的 TypeScript 在最优的情况下,...此外,TypeScript 可以识别名称为 Article 的 Article,从而在 IDE 中提供更好的信息。 请注意名为sold的可选参数。...这样,您就可以在 TypeScript 中编写 TypeScript 类型定义,并将它们导入源文件中。...: 403, notFound: 404, } 枚举与常规 TypeScript 枚举有很大不同, 枚举确保此对象中的每个键都具有指定的类型。

    3.2K30

    Typescript 的枚举可能不是你想象的那样

    ,它锁定了常量,并将其保持在可管理的对象格式中:const DirectiveKeys = { Skip: '__c_skip_me_', Remove: '__c_remove_me_',...没错,TypeScript 的枚举被编译进你的代码。你可能会说:“算了,反正是 TypeScript,它们知道自己在做什么。”...将枚举转换为对象/常量可以节省数百字节。为什么?对于每个枚举,都有类似上面的 JavaScript 片段进行匹配。生成的 JavaScript 只有在存在 TypeScript 时才能防止突变。...,同时生成了 TypeScript 枚举生成的交替键值。...我的代码片段也没有 Microsoft 和 TypeScript 团队的支持,这意味着它没有经过充分的测试。使用 TypeScript 枚举的最终和最重要的原因是?它们具有所有的智能提示优势。

    11510

    速查手册 - TypeScript 高级类型 cheat sheet

    温馨提示:因微信中外链都无法点击,请通过文末的” “阅读原文” 到技术博客中完整查阅版;(本文整理自技术博客) 学习 TypeScript 到一定阶段,必须要学会高阶类型的使用,否则一些复杂的场景若是用...版本引入的,附中文 TypeScript 2.8 引入条件类型 lib.es2015.d.ts:大部分的声明在这个文件中可以找到 TypeScript 强大的类型别名:行文结构比较合理,也比较完善,可以当手册来查...Foo { name: string; age: number } type T = keyof Foo // -> "name" | "age" 而 in 则可以遍历枚举类型, 例如: type...Keys = "a" | "b" type Obj = { [p in Keys]: any } // -> { a: any, b: any } keyof 产生联合类型, in 则可以遍历枚举类型...: T[P] }; 扩展:在 巧用 Typescript 中,作者创建了 DeepReadonly 的声明,使用 递归 的思想让任何子属性都不可更改 type DeepReadonly = {

    1.3K10

    TypeScript: 常用的高级类型

    per: string | string[] 我们在代码编写时,希望能够自动提示对应的api,typescript则不知道应该如何处理这种情况。...5 索引类型 我们可以使用 keyof 来获取一个对象中的key对应的具体值。...Key = 'name' | 'age'; 但 keyof 具备更强的灵活性,它会动态的去识别对象中的所有key值。...目标对象的类型,我们不确定,因此,只能使用一个泛型变量做一个简单约束。key值的类型呢?我们可以使用 keyof 从泛型对象中获取。于是又定义另外一个泛型变量 K 来接收获取的结果。...我们在实践场景中,还有更多更复杂的组合,这些经验很难通过技术文章获取到,需要在实践中慢慢体会。除此之外,typescript官方文档中,还有一些重要的东西需要去深入学习。

    1.9K10
    领券