16 使用类型保护让TS更聪明
这个小节我们来学习类型保护,在学习前面知识的时候我们有遇到过需要告诉编译器某个值是指定类型的场景,当时我们使用的是类型断言,这一节我们来看一个不同的场景: const valueList = [123, "abc"]; const getRandomValue = () => { const number = Math.random() * 10; // 这里取一个[0, 10)范围内的随机值 if (number < 5) return valueList[0]; // 如果随机数小于5则返回valueList里的第一个值,也就是123 else return valueList[1]; // 否则返回"abc" }; const item = getRandomValue(); if (item.length) { // error 类型“number”上不存在属性“length” console.log(item.length); // error 类型“number”上不存在属性“length” } else { console.log(item.toFixed()); // error 类型“string”上不存在属性“toFixed” } 上面这个例子中,getRandomValue 函数返回的元素是不固定的,有时返回数值类型,有时返回字符串类型。我们使用这个函数生成一个值 item,然后接下来的逻辑是通过是否有 length 属性来判断是字符串类型,如果没有 length 属性则为数值类型。在 js 中,这段逻辑是没问题的,但是在 TS 中,因为 TS 在编译阶段是无法知道 item 的类型的,所以当我们在 if 判断逻辑中访问 item 的 length 属性的时候就会报错,因为如果 item 为 number 类型的话是没有 length 属性的。...