TypeScript 中的 is 关键字，它被称为类型谓词，用来判断一个变量属于某个接口或类型。
1. 类型谓词的基本使用
is 关键字一般用于函数返回值类型中，判断参数是否属于某一类型，并根据结果返回对应的布尔类型。
例如:通过判断将字符串类型并转为大写
// 判断参数是否为string类型, 返回布尔值
function isString(s:unknown):boolean{
return typeof s === 'string'
}
// 参数转为大写函数
// 直接使用转大写方法报错, str有可能是其他类型
function upperCase(str:unknown){
str.toUpperCase()
// 类型“unknown”上不存在属性“toUpperCase”。
}
// 判断参数是否为字符串,是在调用转大写方法
function ifUpperCase(str:unknown){
if(isString(str)){
str.toUpperCase()
// (parameter) str: unknown
// 报错:类型“unknown”上不存在属性“toUpperCase”
}
}
示例中我们虽然判断了参数str是string类型, 但是条件为true时, 参数str的类型还是unknown.也就是说这个条件判断并没有更加明确str的具体类型
此时,可以在判断是否为string类型的函数返回值类型使用is关键词(即类型谓词)
例如:
// 判断参数是否为string类型, 返回布尔值
function isString(s:unknown):s is string{
return typeof s === 'string'
}
// 判断参数是否为字符串,是在调用转大写方法
function ifUpperCase(str:unknown){
if(isString(str)){
str.toUpperCase()
// (parameter) str: string
}
}
s is string不仅返回boolean类型判断参数s是不是string类型, 同时明确的string类型返回到条件为true的代码块中.
因此当我们判断条件为true, 即str为string类型时, 代码块中str类型也转为更明确的string类型
类型谓词的主要特点是：
- 返回类型谓词，如
s is string； - 包含可以准确确定给定变量类型的逻辑语句，如
typeof s === 'string'。
接下来看一个联合类型的问题, 类型谓词是最好的解决方法
2. 了解联合类型的问题
在TypeScript中，我们往往会定义一个联合类型，来解决一些业务中复杂数据的处理
例如:
// 接口 interfaceA
interface interfaceA {
name: string;
age: number;
}
// 接口 interfaceB
interface interfaceB {
name: string;
phone: number;
}
// 推断类型
const obj1 = { name: "andy", age: 2 };
// const obj1: {name: string;age: number;}
const obj2 = { name: "andy", phone: 2 };
// const obj2: {name: string;phone: number;}
// 创建数组
// arr1, 创建两个interfaceA[]数组, 数组每一项都是 obj1
const arr1 = new Array<interfaceA>(2).fill(obj1);
// const arr1: interfaceA[]
// arr2, 创建两个interfaceB[]数组, 数组每一项都是 obj2
const arr2 = new Array<interfaceB>(2).fill(obj2);
// const arr2: interfaceB[]
// 合并两种类型数组,
// arr3类型就是一个联合数组
const arr3 = [...arr1, ...arr2];
// const arr3: (interfaceA | interfaceB)[]
const target = arr3[0];
// const target: interfaceA | interfaceB
// Ok获取两个结构共有的属性
console.log(target.name);
// 获取两个接口不同的属性报错:
console.log(target.phone);
// 报错: 类型“interfaceA”上不存在属性“phone”
console.log(target.age);
// 报错: 类型“interfaceB”上不存在属性“age”
示例代码中我们定义了一个接口interfaceA，一个接口interfaceB，他们各自对应一个具体的数据类型，但我们有时需要将这2个数据数组进行合并，TypeScript会自动推断这个数据的类型为联合类型数组
const arr3: (interfaceA | interfaceB)[]
当我们通过数组操作取出数组里的元素时，这个元素的类型其实也是这个联合类型，但我们需要取值的时候，由于name属于interfaceA和interfaceB共有的，即交叉属性
TypeScript判定无风险，可用。但我们使用phone或者age这种不交叉的属性时候，TypeScript会报错，报错信息如下
// 类型“interfaceA | interfaceB”上不存在属性“phone”。
// 类型“interfaceA”上不存在属性“phone”。ts(2339)
3. 解决联合类型问题的方法
3.1 将所有非交叉属性设置 为可选属性
例如:
// 接口 interfaceA
interface interfaceA {
name: string;
age?: number;
}
// 接口 interfaceB
interface interfaceB {
name: string;
phone?: number;
}
说明: 这种方式也不是特别好, 因为对于interfaceB来说，可能phone属性就是必选的，定义成可选属性是一种逃避，且不安全
3.2 使用断言
在每次使用到非交叉属性是使用断言
例如:
// 使用断言
console.log((target as interfaceB).phone);
console.log((<interfaceA>target).age);
但也不是特别好，因为难道在一个作用域下，我每次取值都要断言，麻烦且有风险，
3.3 条件判断
使用in运算符判断属性是否属于当前对象
例如:
// 通过使用in运算符 的条件判断, 缩小target类型
if('phone' in target){
console.log(target.phone);
// const target: interfaceB
}
if('age' in target){
console.log(target.age);
// const target: interfaceA
}
缺点和断言一样, 每次都需要判断
3.4 类型 谓词
使用TypeScript中的自定义类型保护和类型谓词.
我们需要创建一个函数，在这个函数的方法体中，我们不仅要检查target 变量是否含有 age属性，而且还要告诉 TypeScript 编译器，如果上述逻辑语句的返回结果是 true，那么当前判断的target 变量值的类型是 interfaceA类型
创建一个自定义类型保护函数 —— isInterfaceA，它的具体实现如下：
// 联合类型
type interfaceAB = interfaceA | interfaceB;
// 自定义类型保护函数
const isInterfaceA = (item: interfaceAB): item is interfaceA => {
return (item as interfaceA).age !== undefined;
};
// 判断target 属于哪个类型
if (isInterfaceA(target)) {
console.log(target.age); //target的类型为interfaceA
} else {
console.log(target.phone); //target的类型为interfaceB
}
你可以传递任何值给 isInterfaceA 函数，用来判断它是不是interfaceA。isInterfaceA函数与普通函数的最大区别是，该函
4. 通过泛型解决类型谓词复用问题
如果你要检查的类型很多，那么为每种类型创建和维护唯一的类型保护可能会变得很繁琐。针对这个问题，我们可以利用 TypeScript 的另一个特性 —— 泛型，来解决复用问题：
例如:定义通用类型保护函数
// 通过泛型定义通用类型保护函数
function isOfType<T>(
target: unknown,
prop: keyof T
): target is T {
return (target as T)[prop] !== undefined;
}
// 类型保护
if (isOfType<interfaceA>(target, "age")) {
console.log(target.age);
}
if (isOfType<interfaceB>(target, "phone")) {
console.log(target.phone);
}
示例中通过使用类型保护函数来缩窄类型。
5. 小结:
is 关键字经常用来封装”类型保护函数”，通过和函数返回值的比较，从而缩小参数的类型范围，所以类型谓词 is 也是一种类型保护。
网友评论