TypeScript 类型与运行时值：深入理解与实践

1. TypeScript 类型基础与运行时行为

TypeScript 的核心价值在于其强大的静态类型系统，它允许开发者在代码编写阶段捕获潜在的类型错误。type 关键字用于声明类型别名，它本质上是一种编译时构造，仅用于提供类型信息，帮助编译器进行检查。例如：

type CardType = 'InformationCard';

这里的 CardType 声明了一个字符串字面量类型 'InformationCard'。在 TypeScript 代码被编译成纯 JavaScript 后，所有的类型信息都会被“擦除” (Type Erasure)，这意味着在运行时，这些类型声明将不复存在。因此，尝试在运行时直接访问一个 type 声明，例如 console.log(CardType)，是不可行的，因为 CardType 在 JavaScript 运行时环境中并没有对应的实体。

2. 运行时获取值的替代方案

由于类型在运行时不可用，如果我们需要在运行时获取或使用一个特定的字面量值（例如上述的 'InformationCard'），我们需要将其存储在一个 JavaScript 运行时可访问的实体中，如 const 变量或对象属性。

2.1 使用常量声明字符串字面量

最直接的方法是使用 const 关键字声明一个常量来存储所需的字符串字面量。这样，这个值在运行时是可访问的。

// 定义一个常量，其值在运行时可用
const CARD_TYPE_VALUE = 'InformationCard';

console.log(CARD_TYPE_VALUE); // 输出: InformationCard

// 可以在类型定义中引用这个常量的值类型，以保持类型一致性
type MyCardType = typeof CARD_TYPE_VALUE; // MyCardType 的类型是 'InformationCard'

function processCard(type: MyCardType) {
    console.log(`处理卡片类型: ${type}`);
}

processCard(CARD_TYPE_VALUE); // 正确
// processCard('OtherCard'); // 编译错误，因为 'OtherCard' 不是 MyCardType

这种方法清晰地分离了类型定义和值定义，同时通过 typeof 确保了类型与值的关联性。

2.2 使用对象存储字面量值

当需要管理一组相关的字面量值时，将它们作为对象的属性来存储是一种常见的做法。这种方式不仅可以在运行时访问这些值，还能提供更好的组织结构。

// 定义一个对象，其属性值在运行时可用
const CardConstants = {
    informationCard: "InformationCard",
    warningCard: "WarningCard",
    // 更多卡片类型...
} as const; // 使用 'as const' 断言，将属性值推断为字面量类型

console.log(CardConstants.informationCard); // 输出: InformationCard

// 从对象属性中提取类型，创建联合类型
type AvailableCardType = typeof CardConstants[keyof typeof CardConstants];
// AvailableCardType 的类型是 "InformationCard" | "WarningCard"

function displayCard(type: AvailableCardType) {
    console.log(`显示卡片类型: ${type}`);
}

displayCard(CardConstants.informationCard); // 正确
// displayCard("UnknownCard"); // 编译错误

使用 as const 断言是一个重要的技巧，它告诉 TypeScript 将对象中的每个属性值推断为其最窄的字面量类型（例如，"InformationCard" 而不是 string），这对于创建精确的联合类型至关重要。

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

56

查看详情

3. 注意事项与最佳实践

• 明确区分类型与值： 始终记住 type 声明仅存在于编译时，而 const 声明或对象属性则在运行时持有实际的值。

• 利用 typeof 运算符： typeof 运算符在 TypeScript 中有两种用法。当它用于表达式时，它返回一个字符串，表示表达式的数据类型（如 JavaScript 的 typeof）。当它用于类型上下文时，它用于获取变量或属性的 TypeScript 类型。这是将运行时值与编译时类型关联起来的关键。

• 枚举类型 (Enums)： 对于一组相关的常量，TypeScript 的 enum 类型也是一个可行的选择。枚举成员既可以作为类型使用，也可以作为运行时值使用。

  enum CardEnum {
      Information = 'InformationCard',
      Warning = 'WarningCard',
  }
  
  console.log(CardEnum.Information); // 输出: InformationCard
  
  function processCardByEnum(type: CardEnum) {
      console.log(`处理枚举卡片类型: ${type}`);
  }
  
  processCardByEnum(CardEnum.Warning); // 正确

  登录后复制

  然而，在现代 TypeScript 开发中，as const 断言的对象字面量通常比 enum 更受青睐，因为它提供了更灵活的类型推断和更小的编译产物。

4. 总结

在 TypeScript 中，类型声明（如 type 别名）是编译时概念，它们在运行时会被擦除。因此，我们不能直接从 type 声明中获取运行时值。要实现运行时对特定字面量值的访问，我们需要将这些值存储在 JavaScript 运行时可用的实体中，例如 const 常量或对象的属性。通过结合使用 const 声明和 typeof 类型运算符，我们可以在保持严格类型检查的同时，有效地管理和使用运行时值，从而编写出既健壮又灵活的 TypeScript 代码。

以上就是TypeScript 类型与运行时值：深入理解与实践的详细内容，更多请关注php中文网其它相关文章！