TypeScript 中类型转换时为什么使用 `as number` 仍然显示为 `string`？

typescript 类型转换疑难解答：as number 转换失效

本文分析 TypeScript 中使用 as number 进行类型转换却仍然显示为 String 类型的问题，并提供正确的解决方案。

问题描述

开发者在使用 as number 进行类型转换时，发现即使已声明变量为 number 类型，运行时仍然显示为 string 类型。代码示例如下：

const props = defineProps()  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' }

尝试使用 parseInt(sid) 也遇到问题：number 类型参数无法赋值给 string 类型函数参数。

问题根源

as 关键字是 TypeScript 的类型断言，它仅仅告诉编译器该变量应该被视为某种类型，不会在运行时执行实际的类型转换。 console.info(typeof sid) 输出 string，是因为 sid 变量的实际值仍然是字符串。as number 只是绕过了编译器的类型检查，并没有改变变量的运行时类型。

正确的类型转换方法

要实现运行时类型转换，需要使用相应的转换函数：

• 将字符串转换为数字: Number() 或 parseInt()。Number() 会尝试将整个字符串转换为数字，而 parseInt() 只会转换字符串的开头部分，直到遇到非数字字符。

• 将数字转换为字符串: String()。

以下是一个正确的类型转换示例：

let sid: string = "12345"; let numSid: number = Number(sid); // 或 parseInt(sid, 10);  (10表示十进制) console.log(typeof numSid); // 输出 'number' console.log(numSid); // 输出 12345  let n: number = 12345; let strN: string = String(n); console.log(typeof strN); // 输出 'string' console.log(strN); // 输出 "12345"

总结

as 关键字用于类型断言，而非运行时类型转换。 需要进行运行时类型转换时，必须使用 Number()、parseInt()、String() 等函数。 确保在转换前检查输入数据的有效性，避免潜在的错误。 如果props.group本身就是字符串，则需要在传递给getDictGroup函数之前进行类型转换。 例如：getDictGroup(Number(props.group))。 如果转换失败，Number()会返回NaN，需要进行相应的错误处理。