24.【TypeScript 教程】is 关键字

简介: 24.【TypeScript 教程】is 关键字

TypeScript is 关键字

本节介绍 TypeScript 中的 is 关键字,它被称为类型谓词,用来判断一个变量属于某个接口或类型。如果需要封装一个类型判断函数,你应该第一时间想到它,本节列出了一些常用的类型判断函数以供参考。

1. 解释

is 关键字一般用于函数返回值类型中,判断参数是否属于某一类型,并根据结果返回对应的布尔类型

语法:prop is type

2. 举例说明

在一些兑换码场景,经常会需要将兑换码全部转为大写,之后再进行判断:

function isString(s: unknown): boolean {
  return typeof s === 'string'
}
 
function toUpperCase(x: unknown) {
  if(isString(x)) {
    x.toUpperCase() // Error, Object is of type 'unknown'
  }
}

代码解释:


第 7 行,可以看到 TypeScript 抛出了一个错误提示,一个 unknown 类型的对象不能进行 toUpperCase() 操作,可是在上一行明明已经通过 isString() 函数确认参数 x 为 string 类型,但是由于函数嵌套 TypeScript 不能进行正确的类型判断。

这时,就可以使用 is 关键字:

const isString = (s: unknown): s is string => typeof val === 'string'
 
function toUpperCase(x: unknown) {
  if(isString(x)) {
    x.toUpperCase()
  }
}

解释: 通过 is 关键字将类型范围缩小为 string 类型,这也是一种代码健壮性的约束规范。

3. 一些拓展函数

下面是一些常用的类型判断函数:

const isNumber = (val: unknown): val is number => typeof val === 'number'
const isString = (val: unknown): val is string => typeof val === 'string'
const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
const isFunction = (val: unknown): val is Function => typeof val === 'function'
const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object'
 
function isPromise<T = any>(val: unknown): val is Promise<T> {
  return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}
 
const objectToString = Object.prototype.toString
const toTypeString = (value: unknown): string => objectToString.call(value)
const isPlainObject = (val: unknown): val is object => toTypeString(val) === '[object Object]'

4. 小结

is 关键字经常用来封装"类型判断函数",通过和函数返回值的比较,从而缩小参数的类型范围,所以类型谓词 is 也是一种类型保护。

相关文章
|
5月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
5月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
5月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
5月前
|
JavaScript 编译器 数据安全/隐私保护
TypeScript :关键字
本文介绍了 TypeScript 中的一些核心类型和工具类型,包括 `interface` 和 `type` 的基本使用和区别,以及一些高级类型如 `keyof`、`Record`、`Pick`、`Partial`、`Readonly` 和 `Omit` 的使用方法。文章还详细解释了 `namespace` 的作用和使用场景,帮助开发者更好地组织和管理代码,避免命名冲突,并提高代码的可维护性和可读性。
|
7月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
5月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
91 0
|
5月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
69 0
|
7月前
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理
|
8月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
114 0
|
9月前
|
JavaScript 前端开发
37.【TypeScript 教程】TSLint 与 ESLint
37.【TypeScript 教程】TSLint 与 ESLint
118 0