TypeScript类型与运行时值：理解类型擦除及其实际应用-js教程-PHP中文网

TypeScript类型与运行时值：理解类型擦除及其实际应用

心靈之曲

发布： 2025-10-04 13:55:20

原创

274人浏览过

TypeScript类型与运行时值：理解类型擦除及其实际应用

TypeScript的类型系统主要用于编译时提供类型安全，在代码编译为JavaScript后，所有类型信息都会被擦除，因此无法直接在运行时访问或获取声明类型的值。若需在运行时使用类型相关的标识，应采用常量、枚举或对象字面量等JavaScript运行时结构来承载这些值，从而实现类型与值的协同。

理解TypeScript的类型擦除机制

typescript作为javascript的超集，其核心价值在于为javascript代码提供了静态类型检查能力。这意味着，你在typescript中声明的所有类型（如type、interface、enum、class的类型部分等）都只在开发阶段和编译阶段发挥作用。当typescript代码被编译成纯javascript代码时，这些类型信息会被完全移除（即“类型擦除”）。

例如，当你定义一个类型别名：

type CardType = 'InformationCard';

登录后复制

在编译后的JavaScript代码中，CardType这个概念将不复存在。它仅仅是一个编译时期的标记，用于确保变量或表达式符合预期的字符串字面量类型。因此，尝试在运行时直接访问CardType，如console.log(CardType)，是无法成功的，因为在JavaScript运行时环境中，CardType没有任何对应的实体。

运行时值的实现方案

既然TypeScript类型本身无法在运行时被访问，那么当我们需要一个既能提供类型信息又能作为运行时值使用的标识时，就需要借助JavaScript的运行时构造。以下是几种常用的解决方案。

1. 使用常量或对象字面量

最直接的方法是使用JavaScript的const声明一个常量，它既可以作为运行时值，也可以在某些情况下被TypeScript推断为类型。

示例：

千帆大模型平台

面向企业开发者的一站式大模型开发及服务运行平台

查看详情

// 定义一个常量作为运行时值
const CARD_TYPE_INFORMATION = 'InformationCard';

// 在运行时使用这个值
console.log(CARD_TYPE_INFORMATION); // 输出: "InformationCard"

// TypeScript可以从常量推断出其字面量类型
type MyCardType = typeof CARD_TYPE_INFORMATION; // MyCardType的类型是 'InformationCard'

// 结合对象使用
const myCard = { cardType: CARD_TYPE_INFORMATION };
console.log(myCard.cardType); // 输出: "InformationCard"

// 也可以直接在对象中定义字符串字面量
const anotherCard = { cardType: "InformationCard" };
console.log(anotherCard.cardType); // 输出: "InformationCard"

登录后复制

注意事项：

使用const声明的字符串字面量，TypeScript会将其类型推断为该字面量本身，而非宽泛的string类型，这在很多场景下非常有用。
这种方法简单直接，适用于需要单个或少量特定字符串值作为标识的场景。

2. 利用枚举类型（Enum）

TypeScript的枚举（Enum）是一种特殊的数据类型，它允许我们定义一组命名的常量。枚举在编译后会生成对应的JavaScript对象，因此它们既可以作为类型使用，也可以在运行时作为值被访问。

示例：

// 定义一个字符串枚举
enum CardTypeEnum {
    InformationCard = 'InformationCard',
    WarningCard = 'WarningCard',
    ErrorCard = 'ErrorCard'
}

// 在运行时访问枚举成员的值
console.log(CardTypeEnum.InformationCard); // 输出: "InformationCard"
console.log(CardTypeEnum.WarningCard);     // 输出: "WarningCard"

// 枚举也可以作为类型使用
let currentCard: CardTypeEnum = CardTypeEnum.InformationCard;
// currentCard = 'InvalidCard'; // 编译错误，因为'InvalidCard'不是CardTypeEnum的成员

function processCard(type: CardTypeEnum) {
    if (type === CardTypeEnum.InformationCard) {
        console.log("处理信息卡片...");
    } else {
        console.log("处理其他卡片...");
    }
}

processCard(currentCard);

登录后复制

注意事项：

枚举提供了更好的组织性和可读性，特别是在需要管理一组相关常量时。
字符串枚举在运行时会生成一个映射对象，例如{ InformationCard: 'InformationCard', WarningCard: 'WarningCard', ... }。
如果不需要将值限制为字符串，也可以使用数字枚举，但字符串枚举通常更具可读性。

3. 从运行时值推断类型 (typeof 操作符)

虽然不能从类型获取值，但可以从一个已存在的运行时值中提取其类型。这通常通过typeof操作符结合类型别名实现。

示例：

// 定义一个运行时常量
const DEFAULT_COLOR = 'blue';

// 使用 typeof 操作符从常量中提取其字面量类型
type DefaultColorType = typeof DEFAULT_COLOR; // DefaultColorType 的类型是 'blue'

let myColor: DefaultColorType = 'blue';
// myColor = 'red'; // 编译错误，因为 'red' 不是 'blue' 类型

console.log(DEFAULT_COLOR); // 输出: "blue"

登录后复制

注意事项：