TypeScript 类型与运行时值不匹配的解决策略与最佳实践

在 TypeScript 开发中，类型与运行时值不匹配是一个常见问题。以下是一些解决这类问题的策略和最佳实践：

1. 类型断言（Type Assertion）

当你确信某个值的类型时，可以使用类型断言来告诉 TypeScript 编译器你期望的类型。

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

注意：类型断言不会改变运行时的值，它只是告诉 TypeScript 编译器你期望的类型。

2. 类型保护（Type Guards）

类型保护是一种在运行时检查类型的方法，通常用于处理联合类型。

function isString(value: any): value is string {
    return typeof value === "string";
}

let value: string | number = "hello";

if (isString(value)) {
    console.log(value.toUpperCase()); // 这里 TypeScript 知道 value 是 string 类型
} else {
    console.log(value.toFixed(2)); // 这里 TypeScript 知道 value 是 number 类型
}

3. 类型推断与类型注解

确保你在声明变量时使用正确的类型注解，或者让 TypeScript 自动推断类型。

let num: number = 42; // 显式类型注解
let str = "hello"; // 类型推断为 string

4. 运行时类型检查

在某些情况下，你可能需要在运行时检查值的类型，以确保它与 TypeScript 的类型一致。

function processValue(value: unknown) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else if (typeof value === "number") {
        console.log(value.toFixed(2));
    } else {
        throw new Error("Invalid value type");
    }
}

5. 使用 unknown 类型

unknown 类型比 any 更安全，因为它要求你在使用前进行类型检查。

let value: unknown = "hello";

if (typeof value === "string") {
    console.log(value.toUpperCase());
}

6. 使用第三方库进行运行时类型验证

你可以使用像 zod 或 io-ts 这样的库来进行运行时类型验证。

import { z } from "zod";

const schema = z.string();
const result = schema.safeParse("hello");

if (result.success) {
    console.log(result.data.toUpperCase());
} else {
    console.error(result.error);
}

7. 避免使用 any 类型

尽量避免使用 any 类型，因为它会绕过 TypeScript 的类型检查，导致类型与运行时值不匹配的问题。

// 不推荐
let value: any = "hello";
value = 42; // 这里 TypeScript 不会报错，但运行时可能会出现问题

// 推荐
let value: string | number = "hello";
value = 42; // 这里 TypeScript 会进行类型检查

8. 使用 as const 进行常量断言

当你希望一个对象的属性值是不可变的，并且类型是字面量类型时，可以使用 as const。

const obj = {
    name: "Alice",
    age: 30,
} as const;

// obj.name 的类型是 "Alice"，而不是 string
// obj.age 的类型是 30，而不是 number

9. 使用 never 类型处理不可能的情况

当你确定某个分支永远不会被执行时，可以使用 never 类型来确保类型安全。

function assertNever(value: never): never {
    throw new Error(`Unexpected value: ${value}`);
}

function processValue(value: string | number) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else if (typeof value === "number") {
        console.log(value.toFixed(2));
    } else {
        assertNever(value); // 这里 TypeScript 会确保 value 是 never 类型
    }
}

10. 使用 readonly 和 ReadonlyArray

使用 readonly 和 ReadonlyArray 来确保对象和数组在运行时不会被意外修改。

interface User {
    readonly name: string;
    readonly age: number;
}

const user: User = { name: "Alice", age: 30 };
// user.name = "Bob"; // 这里 TypeScript 会报错

const numbers: ReadonlyArray<number> = [1, 2, 3];
// numbers.push(4); // 这里 TypeScript 会报错

总结

解决 TypeScript 类型与运行时值不匹配的问题，关键在于在编译时和运行时都进行严格的类型检查。通过使用类型断言、类型保护、运行时类型检查、unknown 类型、第三方库等方法，可以有效地减少这类问题的发生。同时，避免使用 any 类型，确保代码的类型安全性和可维护性。