TypeScript 类型与运行时值的根本区别
typescript 是一种 javascript 的超集，它引入了静态类型系统，旨在提高代码的可维护性和健壮性。然而，理解 typescript 的一个核心概念是：类型仅在编译时存在，而在运行时会被擦除（type erasure）。这意味着，当你编写 typescript 代码并将其编译成 javascript 时，所有的类型信息都会被移除。最终在浏览器或 node.js 环境中执行的，是纯粹的 javascript 代码，其中不包含任何 typescript 的类型声明。
例如，当你声明一个类型别名：
type CardType = 'InformationCard';
这个 CardType 仅仅是一个编译时构造，用于在开发阶段对变量进行类型检查。它不会被编译成任何 JavaScript 变量或对象。
为什么不能直接访问声明的类型
基于上述类型擦除的原理，尝试直接在运行时访问或打印一个 TypeScript 类型别名是不可行的。例如，以下代码在 TypeScript 中会引发编译错误，或在编译成 JavaScript 后因 CardType 未定义而导致运行时错误：
type CardType = 'InformationCard'; // 尝试直接访问类型别名，这是不正确的用法 // console.log(CardType); // 编译时会报错：'CardType' refers to a type, but is used as a value here.
错误信息明确指出 CardType 是一个类型，而不是一个值。JavaScript 运行时只识别值（如字符串、数字、对象、函数等），而不识别 TypeScript 的类型声明。
获取与类型对应的运行时值的方法
尽管类型本身不能在运行时直接访问，但我们可以通过 JavaScript 的运行时构造来存储和使用与类型对应的字面量值。以下是几种常用的方法：
方法一：使用常量存储字面量值
最直接的方法是声明一个 const 变量来存储与你类型定义中字面量相同的值。这样，你既可以利用 TypeScript 的类型检查，又能在运行时访问该值。
// 1. 定义一个类型别名，用于编译时类型检查 type CardTypeAlias = 'InformationCard'; // 2. 声明一个常量，其值与类型别名中的字面量一致 // 我们可以为这个常量显式指定类型，以确保类型安全 const cardTypeNameValue: CardTypeAlias = 'InformationCard'; // 3. 在运行时访问并使用这个常量 console.log(cardTypeNameValue); // 输出: InformationCard // 或者，如果你只是需要一个字面量值，可以直接声明一个常量 const directCardTypeName = 'InformationCard'; console.log(directCardTypeName); // 输出: InformationCard
这种方法简单明了，适用于需要将单个字面量值与特定类型关联的场景。
方法二：通过对象属性封装值
当字面量值是某个对象的一部分时，将其作为对象的属性存储是常见的做法。TypeScript 接口（interface）或类型别名可以很好地定义这些对象的结构。
// 1. 定义一个联合类型，表示可能的卡片类型字面量
type CardTypeLiteral = 'InformationCard' | 'ProductCard' | 'ServiceCard';
// 2. 定义一个接口或类型，描述包含卡片类型属性的对象
interface Card {
type: CardTypeLiteral; // 这里的 type 属性会受到 CardTypeLiteral 的类型检查
id: string;
// 其他属性...
}
// 3. 创建一个符合接口定义的运行时对象
const myCard: Card = {
type: 'InformationCard', // 'InformationCard' 是一个运行时值
id: 'card-123',
};
// 4. 在运行时访问对象的属性值
console.log(myCard.type); // 输出: InformationCard这种方法非常适合在数据结构中存储和管理类型相关的字面量值。
方法三：利用 TypeScript 枚举（Enum）
TypeScript 的枚举（enum）提供了一种同时定义一组命名常量和对应运行时值的方式。枚举成员既是类型，也是运行时可用的值。
// 1. 定义一个字符串枚举
enum CardTypesEnum {
InformationCard = 'InformationCard',
ProductCard = 'ProductCard',
ServiceCard = 'ServiceCard',
}
// 2. 枚举成员既可以作为类型使用，也可以作为运行时值使用
const currentCardType: CardTypesEnum = CardTypesEnum.InformationCard;
// 3. 在运行时访问枚举成员的值
console.log(currentCardType); // 输出: InformationCard
console.log(CardTypesEnum.ProductCard); // 输出: ProductCard
// 4. 枚举也可以用于类型检查
function processCard(type: CardTypesEnum) {
if (type === CardTypesEnum.InformationCard) {
console.log('Processing an Information Card.');
}
// ...
}
processCard(CardTypesEnum.ServiceCard); // 输出: (无特定输出，但类型检查通过)枚举是处理一组相关命名常量时的强大工具，它在编译时提供类型安全，同时在运行时提供可访问的值。
注意事项与最佳实践
- 区分编译时与运行时：始终牢记 TypeScript 类型是编译时概念，而 JavaScript 变量和对象是运行时概念。这是理解和正确使用 TypeScript 的基础。
- 保持一致性：当你通过常量或对象属性来模拟类型字面量时，确保这些运行时值与你的类型定义保持一致。例如，使用 as const 断言可以帮助 TypeScript 推断出更窄的字面量类型，从而提高类型安全性。
-
选择合适的构造：
- 如果只需要一个单一的字面量值，使用 const 变量是最简单的。
- 如果值是复杂数据结构的一部分，将其作为对象属性是标准做法。
- 如果有一组相关的、需要命名的常量，并且希望它们同时具备类型和值的功能，那么枚举是理想选择。
总结
TypeScript 的类型系统旨在提供强大的静态分析能力，以在开发阶段捕获错误并增强代码可读性。然而，它不会改变 JavaScript 在运行时的工作方式。要获取和使用与 TypeScript 声明类型对应的字面量值，我们必须依赖 JavaScript 的运行时构造，如 const 变量、对象属性或 enum 枚举。理解这一核心区别，并选择适当的运行时策略，是有效利用 TypeScript 进行开发的关键。
