什么是鸭子🦆类型?

共 3960字,需浏览 8分钟

 ·

2021-12-14 19:18

大家好,我是 ConardLi,今天我们一起来看一个 TypeScript 中一个有趣的知识点 - 鸭子类型(Duck Typing)。

什么是鸭子类型

鸭子类型是很多面向对象(OOP)语言中的常见做法。它的名字来源于所谓的“鸭子测试”:

当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子,那么这只鸟就可以被称为鸭子。

我们不用关心鸭子的定义是什么,只要符合我们通常意义上的认知,那么他就是这个物体。在 TypeScript 中,只要对象符合定义的类型约束,那么我们就可以视为他是。

鸭子类型 通常用于需要处理一系列不同数据的代码中,我们可能不知道调用者要传递哪些参数。在一些 switch 语句或复杂的 if/else 判断中,通常是 鸭子类型 可能派上用场的地方。

为什么需要鸭子类型

在一些动态语言中,鸭子类型的常见用法就是假设给定值符合我们预期的,你可以先尝试执行一个操作,然后我们再去处理不符合预期的情况下的异常。比如在下面这段 Python 代码中:

from typing import Any

def is_duck(value: Any) -> bool:
  try:
    value.quack()
    return True
  except (Attribute, ValueError):
    return False

这段代码写的很蠢,不过表达的意思挺明确的,你通过调用传入参数的 .quack() 方法检查它是否可以嘎嘎叫,如果它嘎嘎叫了,就返回 true ,如果它没有这个方法,异常就会被捕获,则返回 false

Python 中,try-except 是一种常见的写法,它也被很多库(比如hasattr)广泛使用。

相比之下,在 JavaScript 中,try-catch 则存在很多限制 — 你既不能根据抛出异常的原型定义不同的 catch 块,也不能确定抛出的到底是不是一个异常实例。

所以,我们在处理异常的时必须更加谨慎,所以在 JavaScriptTypeScript 中我们要做这样的判断可能有点逆向思维。通常的做法可能是这样的:

function isDuck(value{
    return !!(
        value &&
        typeof value === 'object' &&
        typeof Reflect.get(value, 'quack') === 'function'
    );
}

在上面的函数中,我们做了下面几个判断:

  • 检查参数 value 是不是为空
  • 检查参数 value 是否为 object 类型
  • 通过 Reflect.get 方法更安全安全地判断 quack 是不是一个函数

你可能对这种代码再熟悉不过了,毕竟在 JavaScript 代码里这种布尔判断遍地都是。

如果用 TypeScript 的话写法可能就不一样了,参数 value 可能是只鸭子,但 IDEJavaScript 解析器都不知道鸭子是啥。在 TypeScript 中,我们可以把鸭子定义成一个类型:

interface Duck {
    quack(): string;
}

interface Cat {
    miao(): string;
}


function isDuck(value: Cat | Duck{
    return !!(
        value &&
        typeof value === 'object' &&
        typeof value.quack === 'function'
    );
}

这里我们在参数 value 的类型中告诉 TypeScript 解析器,它可能是只鸭子也可能是只猫,你需要再函数体的逻辑中再做进一步判断。

但是,解析器可能没我们想象中的那么聪明,这里会报错,因为他还是不能确定 value 到底是只鸭子还是只猫,所以无法确定 quack 函数是不是存在。

下面的写法就可以帮我们解决这个问题:

interface Duck {
    quack(): string;
}

function isDuck(value: unknown): value is Duck {
    return !!(
        value &&
        typeof value === 'object' &&
        typeof value.quack === 'function'
    );
}

注意,isDuck 的返回值类型中使用了 is 关键字,这在 TypeScript 中被叫做类型谓词(type predicates),类型谓词是一个返回布尔值的函数,可以用来做类型保护;

类型保护是可执行运行时检查的一种表达式,用于确保该类型在一定的范围内。换句话说,类型保护可以保证一个字符串是一个字符串,尽管它的值也可以是一个数字。

实际上它就是告诉 TypeScript 编译器给定的值是就是我们给定的那个类型。

简单的说,就是告诉编译器这个可能是鸭子的东西就是一只鸭子。

用法示例 recursiveResolve

鸭子类型的一个方便用法是当你的代码可能接受 Promise 或者 非Promise 时来帮我们进行更优雅的判断。

假设我们创建了一个自定义方法来递归遍历对象,解析可能嵌套在里面的任何 Promise,下面就是一个很好的用法:


function isRecord<T = any>(value: unknown): value is Record<string | symbolT{
    return !!(value && typeof value === 'object');
}

function isPromise<T = unknown>(value: unknown): value is Promise<T{
    return isRecord(value) && Reflect.has(value, 'then');
}

async function recursiveResolve<T>(
    parsedObject: Record<stringany>,
): Promise<T
{
    const output = {};
    for (const [key, value] of Object.entries(parsedObject)) {
        const resolved: unknown = isPromise(value) ? await value : value;
        if (isRecord(resolved)) {
            Reflect.set(output, key, await recursiveResolve(resolved));
        } else {
            Reflect.set(output, key, resolved);
        }
    }
    return output as T;
}

我们在上面定义了两个类型谓词 - isPromiseandisRecord,它们都接受一个可选的泛型参数,这样它们就能被复用。然后我们就可以在 recursiveResolve 函数中使用它们了,并且开销是很小的,在整个函数中都能正确推断输入。

小技巧 - 通用类型保护

上面的判断可能在我们的代码中是个很常见的用法,如果我们需要判断的类型有很多,为每个类型都实现一个这样的类型保护函数还挺麻烦的,所以我们可以稍微做个变形来封装一个更通用的类型保护函数:

export const isOfType = (
  varToBeChecked: any,
  propertyToCheckFor: keyof T
): varToBeChecked is T =>
  (varToBeChecked as T)[propertyToCheckFor] !== undefined;

你可以向这样用:

interface code秘密花园 {
    好文章: string;
}

if (isOfType(公众号, '好文章')) {
  console.log('这里有好文章,这里是code秘密花园!');
else {
  console.log("这里不是code秘密花园!");
}

参考

  • https://javascript.plainenglish.io/what-is-duck-typing-in-typescript-c537d2ff9b61
  • https://rangle.io/blog/how-to-use-typescript-type-guards/

往期推荐



解密初、中、高级程序员的进化之路(前端)


程序员一定会有35岁危机吗?


近 20k Star的项目说不做就不做了,但总结的内容值得借鉴


但凡早知道这28个网站,都不至于学得那么不扎实





如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

  1. 点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)

  2. 欢迎加我微信「huab119」拉你进技术群,长期交流学习...

    关注公众号「前端劝退师」,持续为你推送精选好文,也可以加我为好友,随时聊骚。



点个在看支持我吧,转发就更好了

如果觉得这篇文章还不错,来个【转发、收藏、在看】三连吧,让更多的人也看到~

浏览 70
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报