React TypeScript中as number与Number()的区别是什么？

1. 二者核心差异 #

• as number 是 TypeScript 专属的类型断言语法，仅在编译阶段生效，运行时会被完全擦除，不会对实际的值产生任何修改。它的作用是主动告知 TypeScript 编译器：「我确定这个值的类型是 number，无需再做类型校验」，本质是绕过编译器的类型检查规则，没有任何运行时逻辑。
• Number() 是 JavaScript 原生的类型转换方法，完全作用于运行时，会按照 JS 隐式类型转换规则，将传入的值实实在在转换为数字类型的返回值，会直接改变值的类型。

2. IDE 类型错误消失的原因 #

TypeScript 的类型校验仅在编译阶段执行，IDE 的实时报错就是编译器类型检查的结果。当你使用 as unknown as number 双重断言时，相当于你主动向编译器下达了「跳过当前值类型校验」的指令，编译器会直接采信你声明的 number 类型，自然就不会抛出类型不匹配的错误。
但类型断言不会修改运行时的实际值，所以你示例中 typeof (strVariable as unknown as number) 的运行结果依旧是 string，和断言没有任何关系。

额外注意 #

类型断言属于高风险操作，相当于开发者主动为值的类型做了担保，如果实际运行时值的类型和断言不符，会直接引发运行时错误。无特殊场景不推荐使用双重断言，会极大提升类型风险。

示例代码运行逻辑验证：

const strVariable: string = '';
const numVariable: number = 0;
// 仅编译阶段跳过校验，strVariable 运行时还是字符串
numVariable = strVariable as unknown as number; 
// 输出 string，和断言无关，取的是变量实际运行时类型
console.log(typeof (strVariable as unknown as number)); 
// 输出 number，运行时实际完成了类型转换
console.log(typeof (Number(strVariable)));

内容的提问来源于stack exchange，提问作者Flippingflop