React中number|number[]类型变量访问数组属性报错解决

• TypeScript 静态类型拦截：你定义的myValue是number | number[]联合类型，TS 在编译阶段无法确定运行时变量的实际类型，而原始数字类型本身不支持下标访问、也不存在length属性，因此直接写myValue[0]、myValue.length会直接触发类型报错，阻止编译通过。
• 运行时值不符合预期：双选范围滑块组件普遍存在两种返回逻辑——单选模式返回纯数字，双选模式返回长度为2的数字数组。你在控制台看到值是数组，是因为console.log打印引用类型时存在特殊机制：

控制台打印数组、对象这类引用类型时，展示的是你手动点开控制台查看时的变量最新值，不是代码执行到console.log那一行的瞬时值。很多时候你第一次取值时myValue还是初始的数字类型，等组件更新完值变成数组了，你点开控制台看打印结果就会误以为代码执行到打印语句时值已经是数组了。

• 额外的语法误区：typeof是JS的原生操作符，不是挂载在变量上的方法，不存在myValue.typeOf这种写法，且typeof无法区分数组和普通对象（typeof []返回结果是'object'），不能用来判断值是否为数组。

核心思路是先做运行时类型收窄，确认myValue的实际类型之后，再访问对应类型的属性和方法，TS 会根据你的判断自动推断类型，不会再报类型错误。

1. 最稳妥的判断方式是用原生方法Array.isArray()，TS 对这个方法做了专门的类型适配，可以自动完成类型收窄：

// 直接用三目运算简化写法即可
const [minVal, maxVal] = Array.isArray(myValue) ? myValue : [myValue, myValue];

如果需要兼容数组长度不符合预期的边界情况（比如组件异常返回了空数组、长度为1的数组），可以加一层兜底：

let minVal: number, maxVal: number;
if (Array.isArray(myValue) && myValue.length >= 2) {
  [minVal, maxVal] = [myValue[0], myValue[1]];
} else if (Array.isArray(myValue) && myValue.length === 1) {
  minVal = myValue[0];
  maxVal = myValue[0];
} else {
  minVal = myValue as number;
  maxVal = myValue as number;
}

2. 额外排查点：检查你给滑块组件传入的初始值，双选模式下必须传入长度为2的数组格式初始值，比如用React state的话要写成：

// 错误写法：初始值传数字，首次渲染时myValue就是数字类型
// const [myValue, setMyValue] = useState(0);
// 正确写法：双选模式初始值传数组
const [myValue, setMyValue] = useState<number | number[]>([0, 100]);

如果初始值传了数字，首次渲染执行到取值逻辑时myValue一定是数字，直接访问下标必然报错。

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