深入探讨 TypeScript 类型转换
本文将详细分析 TypeScript 类型转换，特别是 as 关键字的用法及其局限性，并提供最佳实践。
场景分析：Vue 组件与类型断言
假设一个 Vue 组件的 props 定义了 group 属性为 number 类型。getDictGroup 函数期望 sid 参数也为 number 类型。然而，运行时 sid 却可能为 string 类型，导致类型错误。以下代码片段展示了这个问题：
const props = defineProps<{ group: number }>();
getDictGroup(props.group);
export const getDictGroup = async (sid: number) => {
const dict = await getDict();
console.info(typeof sid); // 可能输出 "string"
sid = sid as number; // 类型断言，但不会改变运行时类型
console.info(typeof sid); // 仍然输出 "string"
console.info(typeof (sid as number)); // 仍然输出 "string"
};
使用 as number 进行类型断言，仅仅是告诉 TypeScript 编译器该变量应该被视为 number 类型，并没有进行运行时类型转换。 parseInt(sid) 也无法解决问题，因为 TypeScript 会报错，不允许将 number 赋值给 string。
类型转换的本质
as 关键字是类型断言，它是一种编译时机制，不会改变变量的运行时类型。要进行真正的类型转换，需要使用 JavaScript 的类型转换函数。
例如，将数字转换为字符串：
let n: number = 12345; n = String(n); console.log(n); // "12345" console.log(typeof n); // "string"
将字符串转换为数字：
let strNum: string = "42"; let num: number = Number(strNum); console.log(num); // 42 console.log(typeof num); // "number"
TypeScript 中的正确类型转换方法
在 TypeScript 中，安全的类型转换需要结合 JavaScript 的类型转换函数和必要的类型检查：
-
字符串转数字: 使用
Number()函数，并结合可选链和空值合并运算符处理潜在的错误：let strNum: string | undefined = "42"; let num: number = Number(strNum) ?? 0; // 使用空值合并运算符处理 undefined
-
数字转字符串: 使用
String()函数：let num: number = 42; let str: string = String(num);
-
更严格的类型检查: 在转换之前，先进行类型检查，避免潜在的运行时错误：
function convertToString(value: number | string): string { if (typeof value === 'number') { return String(value); } else if (typeof value === 'string') { return value; } else { throw new Error('Invalid input type'); } }
解决初始问题的方案
针对初始问题，正确的解决方法是使用 Number() 函数进行类型转换，并处理潜在的错误：
const props = defineProps<{ group: number | string }>(); // 修改props类型，允许string
getDictGroup(props.group);
export const getDictGroup = async (sid: number | string) => {
const dict = await getDict();
let convertedSid: number = Number(sid);
if (isNaN(convertedSid)) {
console.error("Invalid input: sid is not a number");
return; // or handle the error appropriately
}
console.info(typeof convertedSid); // "number"
// 使用 convertedSid 进行后续操作
};
通过这种方式，我们既进行了正确的运行时类型转换，又确保了 TypeScript 编译器的类型安全。 同时，我们也添加了对非数字输入的错误处理。 修改props类型允许string输入，更符合实际情况。
