类型谓词 is

复制代码
export function isNumber(value: unknown): value is number {
  return typeof value === 'number';
}
export const option4Fn = (): ECOption => {
}

以上是两个函数,但是在()后面确是不同的用法

第一个val is null属于类型谓词。

在这个例子中,isNumber 函数接受一个类型为 unknown 的参数 value,然后检查 value 是否是数字类型。如果 value 是数字,函数返回 true;否则返回 false关键是返回类型注解 value is number,它告诉 TypeScript 编译器,当 isNumber(value) 返回 true 时,value 可以被当作 number 类型处理。

然后在后续处理的时候就可以大胆放心的使用value这个类型为number的值

// 在这个 if 块内,TypeScript 确保 value 是 number 类型,可以放心大胆的使用number类型的方法

复制代码
let value: unknown = getSomeValue();

if (isNumber(value)) {
  // 在这个 if 块内,TypeScript 将 value 视为 number 类型
  value.toFixed(2); // 这里没有类型错误
} else {
  // 在这个 else 块内,TypeScript 将 value 视为非 number 类型
  // value.toFixed(2); // 这里会有类型错误
}

TypeScript 编译器就会允许你将 value 当作 number 类型来使用,而不会有类型错误警告。这在处理联合类型、动态类型数据或者类型不确定的情况时特别有用。

复制代码
type StringOrNumber = string | number;

function isString(value: StringOrNumber): value is string {
  return typeof value === 'string';
}

let data: StringOrNumber = loadData(); // 假设这是一个获取数据的函数

if (isString(data)) {
  // 在这个 if 块内,TypeScript 认为 data 是 string 类型
  data.toUpperCase(); // 没有类型错误,因为我们已经确认 data 是 string
} else {
  // 在这个 else 块内,TypeScript 认为 data 是 number 类型
  // 我们可以安全地进行数字相关的操作,例如:
  data.toFixed(2); // 没有类型错误
}

第二个属于函数的返回值类型。这个就不用多说。

相关推荐
烛阴15 分钟前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔24 分钟前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔25 分钟前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔1 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6141 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止2 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军2 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安2 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js
秋田君2 小时前
Vue3 + WebSocket网页接入弹窗客服功能的完整实现
前端·javascript·websocket·网络协议·学习
浪里行舟2 小时前
一网打尽 Promise 组合技:race vs any, all vs allSettled,再也不迷糊!
前端·javascript·vue.js