【旦夕教导】《鸿蒙原生应用开辟从零根本到多实战》005-TypeScript 中的罗列

---

🚀前言

在当代编程中，罗列是一种非常实用的范例，它可以资助我们管理和构造一组相干的常量，使代码更加清楚和易于维护。TypeScript作为一种静态范例语言，提供了对罗列的强大支持，使得开辟者可以或许更有用地界说和利用常量聚集。在鸿蒙原生应用开辟中，把握TypeScript中的罗列，不光可以提拔代码的可读性，还能淘汰堕落的大概性。
本篇文章将深入探究TypeScript中的罗列范例，包罗数字罗列、字符串罗列以及异构罗列的利用方法。通过具体的实例，我们将展示怎样在鸿蒙原生应用中机动运用罗列，资助你更好地管理应用中的状态和选项，使代码更加轻便明白。
🚀一、TypeScript 中的罗列

🔎1.罗列根本概念

界说：罗列（enum）是 TypeScript 对 JavaScript 的扩展，用于界说一组具名常量聚集，支持通过名称或值双向访问，提拔代码可读性。
🔎2.罗列与数组/对象的对比

特性数组对象罗列访问方式仅通过索引 (arr[0])键名 (obj.key)双向访问（键名或值）值范例恣意范例恣意范例数字、字符串或肴杂范例自动编号不支持不支持支持（默认从0开始）示例对比：

1. // 数组：只能通过索引访问
2. const arr = ['a', 'b', 'c'];
3. arr[0];      // ✅ 'a'
4. arr['a'];    // ❌ undefined
6. // 对象：通过键名访问
7. const obj = { a: 'a', b: 'b' };
8. obj.a;       // ✅ 'a'
9. obj['a'];    // ✅ 'a'
11. // 枚举：双向访问
12. enum Color { Red, Green, Blue }
13. Color.Green;     // ✅ 1（值）
14. Color[1];        // ✅ 'Green'（名称）

复制代码

🔎3.罗列焦点特性

🦋3.1 自动编号规则

• 默认从 0 开始递增
  
• 手动赋值后会基于前一项自动+1
  

1. enum Color1 { Red, Green, Blue }          // 0,1,2
2. enum Color2 { Red=1, Green, Blue }        // 1,2,3
3. enum Color3 { Red=1, Green=5, Blue=9 }    // 1,5,9

复制代码

🦋3.2 反向映射（Reverse Mapping）

通过值获取键名（仅实用于数字罗列）：

1. enum Color4 { Red=1, Green=5, Blue=2 }
2. console.log(Color4[2]); // 'Blue'

复制代码

🦋3.3 肴杂范例罗列

支持数字、字符串、盘算值肴杂，但需留意：

• 盘算项（如表达式、变量）后的成员必须手动赋值
  
• 字符串成员后不能自动递增
  

1. let a = '123';
2. enum MixedEnum {
3.   Num = 1,                  // 数字项
4.   Str = 'hello',            // 字符串项
5.   Computed = a.length,      // 计算项（值为3）
6.   MustAssign = 4            // 必须手动赋值（否则报错）
7. }

复制代码

🦋3.4 恣意值范例

通过范例断言 <any> 允许非尺度值，但会粉碎自动递增：

1. enum SpecialEnum {
2.   Red = 1.5,                // 小数
3.   Green,                    // 自动+1 → 2.5
4.   Blue = <any>'b'           // 字符串（需断言）
5. }

复制代码

🔎4.留意事项与陷阱

🦋4.1 值覆盖标题

手动赋重复值时，反面的值会覆盖前面的键名：

1. enum OverlapEnum { A=1, B=1, C=2 }
2. console.log(OverlapEnum[1]); // 'B'（覆盖了A）

复制代码

🦋4.2 盘算项限定

盘算所得项后的成员必须手动初始化：

1. // ✅ 合法
2. enum ValidEnum {
3.   A = 1 + 1,    // 计算项
4.   B = 2         // 手动赋值
5. }
7. // ❌ 错误：C没有初始化
8. enum InvalidEnum {
9.   A = '123'.length,  // 计算项（值为3）
10.   B                  // Error: Enum member must have initializer
11. }

复制代码

🦋4.3 字符串罗列特性

• 无反向映射
  
• 后续成员必须手动赋值
  

1. enum StringEnum {
2.   A = 'Apple',
3.   B = 'Banana',
4.   // C  // ❌ 必须赋值
5. }

复制代码

🔎5.最佳实践

• 优先数字罗列
  须要反向映射时利用数字罗列，否则思量字符串罗列（更直观）。
  
• 克制重复值
  防止反向映射时键名被覆盖。
  
• 显式赋值
  肴杂范例时明白全部值，淘汰自动递增导致的不测运动。
  
• 常量罗列优化
  利用 const enum 提拔性能（编译时内联值）：
  1. const enum OptimizedEnum { A=1, B=2 }
  2. console.log(OptimizedEnum.A); // 编译后直接输出1

  复制代码