Tyepscript中is使用实践

42 阅读2分钟

本文在开聊之前,默认你已经知道 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用起来。

结束了