白话typescript中的【extends】和【infer】(含vue3的UnwrapRef)

最新推荐文章于 2024-07-11 10:52:16 发布

小雨小雨丶

最新推荐文章于 2024-07-11 10:52:16 发布

阅读量7.8k

点赞数 7

文章标签： typescript vue js

本文链接：https://blog.csdn.net/qq_34436866/article/details/105907418

版权

本文详细介绍了typescript中的`extends`和`infer`关键字，包括它们的基本概念、使用场景和示例。通过`extends`的分配式操作，以及`infer`在类型推断中的作用，特别是结合Vue3的`UnwrapRef`进行解析，帮助读者更好地掌握typescript的高级特性，提高代码的可读性和类型推断效率。

摘要由CSDN通过智能技术生成

大家好，我是小雨小雨，致力于分享有趣的、实用的技术文章。

内容分为翻译和原创，如果有问题，欢迎随时评论或私信，希望和大家一起进步。

分享不易，希望能够得到大家的支持和关注。

extends

typescript 2.8引入了条件类型关键字: extends，长这个样子:

T extends U ? X : Y

看起来是不是有点像三元运算符: condition ? result(1) : result(2)，用大白话可以表示为:

如果T包含的类型是 U包含的类型的 ‘子集’，那么取结果X，否则取结果Y。

再举几个ts预定义条件类型的例子，加深理解:

type NonNullable<T> = T extends null | undefined ? never : T;

// 如果泛型参数 T 为 null 或 undefined，那么取 never，否则直接返回T。
let demo1: NonNullable<number>; // => number
let demo2: NonNullable<string>; // => string
let demo3: No