你真的懂 TypeScript 吗?

接下来我要介绍一个牛逼哄哄的特性,我敢说,这个特性 99.9% 掌握 TypeScript 的人都不知道,当你掌握了这个特性,你会发现并没什么用,但是当你认识到了这个特性,你就会觉得自己搞不懂 TypeScript。

准备好了吗?接下来毁三观的事情要来了,看下面真实的代码:source link

const isString = (val: unknown): val is string => typeof val === 'string';

上面的代码如果只看 JS 的部分,我相信任何一个基础的开发者都能看懂,不止前端开发者,但是加上类型之后,你心里可能就会打上问号了?

val is string,这是什么东西,我怎么没有见过,这真的是我学习的 TS 吗?我是不是学了假的TS?这是什么语法的干活?

事实上,这个语法不仅是 TS 的内容还在实践中被人使用了

这个语法属于 TS 类型保护机制下的,还有一个专有名词,叫做类型谓词,它可以缩小函数参数的类型,结合上面的例子,我们来解释一下它的作用机制。

首先,isString 函数,它的参数是不确定的,我们如何限定传入的参数必须是字符串呢?就可以通过类型约束来实现。

类型约束的位置定义在函数的返回类型位置,is 前面是必须是函数的参数,is 后面就是参数的类型。

除此之外,还可以应用在另一个地方,那么就是类的方法,使用 is 约束方法里面的 this。

image.png

这个语法用不用呢?不要用,为什么不要用,很鸡肋,因为约束之后在某些情况下使用的时候还要在函数体里面用上 as:

interface Bird {}
interface Fish {
    swim: () => void
}
function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}

而且基本上看不懂,如果你不去看 ta 的文档的话,就算学了,也最好是忘掉 ,大多数的时候,直接把类型省略,就能看懂代码到底写的是什么意思。

猜你喜欢

转载自juejin.im/post/7255628830131896376