vue3 + TS ts判断问题?

作者站长头像
站长
· 阅读数 15

vue3 + TS ts判断问题?为什么用 > 或 < 判断就要报错啊

回复
1个回答
avatar
test
2024-06-25

分析

answer image

这里的val是一个可选参数,所以val可能为undefined

这其实是ts的静态类型检查跟js中比较操作符的类型转换比较不同导致。

jsval > 12,在valundefined时,会将undefined转换为数字类型NaN,而NaN > 12的结果是false(因为NaN不和任何值相等)。

ts编译时会进行严格的类型检查,包括对可能为undefined的值的处理。ts的静态类型检查器不允许在可能为undefined的变量上执行不安全的比较操作。

举例

ts这样设计其实也是有道理的,例如:

function isGreaterThanThreshold(value, threshold) {
  return value > threshold;
}

const value = undefined; // 或者没有设置值
const threshold = 10;

const result = isGreaterThanThreshold(value, threshold);

if (result) {
  console.log("value > threshold");
} else {
  console.log("value < threshold");
}

在上面的示例中,如果 valueundefined,那么 result 会被设置为 false,然后会输出 "value < threshold",这是不符合预期的。

还有这个例子:

function multiplyByTwo(value) {
  return value * 2;
}

const value = undefined; // 或者没有设置值

const result = multiplyByTwo(value);

console.log(result); // 输出 NaN

result的结果是NaN,而NaN可能会对后面的计算逻辑产生意想不到的影响。

措施

所以在val为可选值时的处理应该是给val设置一个默认值:

const func = (val: number = 0) => {
  if (val == 2 || val > 12) {
    
  }
};

这样val就是一个可选的参数了

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容