本文在开聊之前,默认你已经知道
typescript
的最基础知识。比如:你知道什么是类型
,类型
的声明语法...等等。
英文语义上的 is
当它是一个名词的时候,示意为
存在
typescript 中的 is
语法
- 用于判断一个对象是否为特定类型
- 一般用于判断区分联合类型
- 语法
function isType(obj: any): obj is Type {
return (obj as Type).prop !== unfefined;
}
其中,Type
表示要判断的类型, obj
表示要判断的对象。isType
的函数返回值为一个布尔值,表示 obj
是否为 Type
类型的对象。
当然,这个函数只是一个语法示例,仅仅为了用来讲清楚意思。它还是有一丝丝的不合适,比如:使用了 as
这种断言。
那么接下来,我说一个靠谱的🌰!~
靠谱的 🌰
- 判断一个对象是否是字符串?
// 定义一个 isString 的方法
function isString(obj: any): obj is string {
return typeof obj === 'string';
}
// 使用
const obj: any = 'hi';
if (isString(obj)) {
console.log(obj.toUpperCase()); // 输出: HI
}
这个🌰不错吧,很直接,清晰明了~
这里需要注意的是: is 这种语法,只有在ts 编译的时候才有效,与 js 运行时的类型检查 并不影响
当然,这个栗子还是丝丝有些过分的,但是它说明白了 is
的使用方式。
下面我说一下在具体的业务实践中的使用。这次来真的~!!
is
的业务实践
- 有两种车的类型,一种为电车,一种为油车,但是他俩都是车
- 期望可以把车的公共逻辑方法提出来,只在添加能源时,区分是该给吃电,还是吃油
- so, go.......
1.先定义一下车的基本类型
interface basicCar {
run: () => void;
}
刚才说了,只在能源上给区分。
2.定义一下吃什么
type oil = {
needMoney: number;
liters: number; // 升
}
type electricity = {
needMoney: number;
degree: number; // 度
}
interface basicCar {
....
eat: oil | electricity;
}
3. 去哪里加
// 假如,我有一辆油车,我需要去加油站加400块的油
const oilCar = {
run: () => {},
eat: {
needMoney: 400,
liters: 220,
}
};
// 油车,就需要油,油,油
const isOilCar = (car: basicCar): car is oilCar => {
return (car as oilCar).liters !== unfefined;
}
// 是油车了,需要去加油站
if (isOilCar(oilCar)) {
goFillingStation();
}
......
这个实践🌰,是不是很棒。
当然,还是油丝丝的不合适,使用了as
断言。我可以使用hasOwnProperty
在改一下..
const isOilCar = (car: basicCar): car is oilCar => {
return Object.prototype.hasOwnProperty.call(car, 'liters');
}
如上,在实际的ts
中,有区别的联合类型,在需要做不同的事情时,合适的把is
用起来。