TypeScript 与 JavaScript 互操作：any 与 unknown

在将 JavaScript 代码库迁移至 TypeScript，或在 TypeScript 中调用动态 JavaScript 库时，最常见的问题是如何处理“类型不确定”的值。TypeScript 提供了 any 和 unknown 两种顶层类型来应对这种情况。理解二者的区别，是构建安全且可维护应用的关键。

理解 any：完全自由的“后门”

any 类型表示“任何类型”。它是 TypeScript 中的一个逃生舱口，告诉编译器关闭对该值的所有类型检查。

1. 声明 变量为 any 类型。
2. 赋予 任何类型的值给该变量，包括数字、字符串或对象。
3. 调用 该变量上任意名称的方法，即使这些方法根本不存在。

let dynamicValue: any;

dynamicValue = 42;
dynamicValue = "Hello World";

// 即使 foo 方法并不存在，编译器也不会报错
dynamicValue.foo();
dynamicValue.bar().baz;

核心特性：

• 任意赋值：可以将 any 类型的值赋值给任何其他类型的变量。
• 完全信任：TypeScript 假定你知道自己在做什么，因此允许任何操作。

互操作场景：
当你快速粘贴一段现存的 JavaScript 代码，或者正在处理类型极其复杂且暂无时间定义的第三方库时，any 能让你迅速通过编译。

潜在风险：
使用 any 意味着放弃了 TypeScript 的核心优势——类型安全。一旦运行时实际结构与代码假设不符，程序将崩溃。

理解 unknown：安全的“黑盒”

unknown 同样表示“任何类型”，但它强制要求在使用前必须进行类型检查。它是 any 的类型安全替代品。

1. 声明 变量为 unknown 类型。
2. 赋予 任何类型的值给该变量（这一步与 any 相同）。
3. 尝试 直接访问其属性或调用其方法（这一步会触发编译错误）。
4. 执行 类型收窄（Type Narrowing），确认具体类型后，方可操作。

let secureValue: unknown;

secureValue = 42;
secureValue = "Hello World";

// 错误：对象类型为 "unknown"
secureValue.foo(); 

// 正确做法：先判断类型
if (typeof secureValue === "string") {
    // 此时 TypeScript 知道它是 string
    console.log(secureValue.toUpperCase()); 
}

核心特性：

• 禁止任意赋值：不能将 unknown 类型的值直接赋值给 string 或 number 等具体类型的变量。
• 强制检查：在操作变量之前，必须通过 typeof、instanceof 或自定义类型守卫来确认其类型。

互操作场景：
当你从 API 接口获取 JSON 数据，或从动态脚本加载内容时，使用 unknown 可以确保你在解析数据前不会贸然使用它。

类型收窄流程图

处理 unknown 类型时，必须遵循特定的检查流程才能安全使用数据。

对比与选择策略

为了在实际开发中做出正确选择，参考下表进行决策。

实操指南：安全处理 JSON 响应

假设你正在编写一个函数，从 JavaScript 后端获取用户数据。后端返回的 JSON 结构是动态的。

1. 定义 函数返回类型为 Promise<unknown>，表示“目前不知道里面是什么”。
2. 接收 数据并赋值给 data 变量。
3. 判断 data 是否为对象且不为 null。
4. 检查 data 内部是否包含预期的属性（如 name 和 age）。
5. 断言 或使用数据，确保代码不会因为结构错误而崩溃。

async function fetchUserData(): Promise<unknown> {
    const response = await fetch('/api/user');
    const data = await response.json();
    return data;
}

async function displayUser() {
    const data = await fetchUserData();

    // 步骤 1：基础类型检查
    if (typeof data !== 'object' || data === null) {
        throw new Error("返回数据不是对象");
    }

    // 步骤 2：结构检查（类型守卫）
    if ('name' in data && typeof data.name === 'string' &&
        'age' in data && typeof data.age === 'number') {

        // 步骤 3：现在可以安全使用 data.name 和 data.age
        console.log(`用户: ${data.name}, 年龄: ${data.age}`);
    } else {
        console.log("数据结构不符合预期");
    }
}

类型断言的陷阱

在使用 unknown 进行互操作时，你可能会倾向于使用类型断言（如 as User）。

1. 避免 直接对 unknown 变量使用 as 断言，除非你 100% 确信数据源是可信的。
2. 优先 使用上述的“类型守卫”进行运行时验证。
3. 使用 断言函数（Assertion Functions）封装验证逻辑。

// 更好的做法：定义一个验证函数
function isUser(obj: unknown): obj is User {
    return typeof obj === 'object' && obj !== null &&
           'name' in obj && 'age' in obj;
}

if (isUser(data)) {
    // 此处 data 自动被推断为 User 类型，无需手动 as
    console.log(data.age);
}

迁移策略：从 any 到 unknown

如果你正在维护一个充满 any 的老旧项目，不必一次性重写所有代码。

1. 开启 tsconfig.json 中的 noImplicitAny 选项。
2. 搜索 代码库中显式使用 : any 的地方。
3. 替换 为 : unknown。
4. 修复 随之而来的编译报错，这是 TypeScript 在提示你哪里缺少了类型检查。
5. 运行 测试用例，确保类型收窄逻辑正确捕获了运行时错误。

// 迁移前
function processInput(input: any) {
    console.log(input.toUpperCase()); // 如果 input 不是字符串，运行时报错
}

// 迁移后
function processInput(input: unknown) {
    // 编译器强制你先检查
    if (typeof input === 'string') {
        console.log(input.toUpperCase()); // 安全
    }
}