infer 这个关键字,整理记录一下,避免后面忘记了。有点难以理解呢。

infer

infer 是在 typescript 2.8中新增的关键字。

infer 可以在 extends 条件类型的字句中,在真实分支中引用此推断类型变量,推断待推断的类型。

例如:用infer推断函数的返回值类型

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

type fn = () => number
type fnReturnType = ReturnType<fn> // number

在这个例子中,

T extends U ? X : Y的形式为条件类型。

infer R代表待推断的返回值类型,如果T是一个函数(...args: any[]) => infer R,则返回函数的返回值R,否则返回any

案例:加深理解

反解 Promise

// promise 响应类型
type PromiseResType<T> = T extends Promise<infer R> ? R : T // 验证
async function strPromise() {
return 'string promise'
} interface Person {
name: string;
age: number;
}
async function personPromise() {
return {
name: 'p',
age: 12
} as Person
} type StrPromise = ReturnType<typeof strPromise> // Promise<string>
// 反解
type StrPromiseRes = PromiseResType<StrPromise> // str type PersonPromise = ReturnType<typeof personPromise> // Promise<Person>
// 反解
type PersonPromiseRes = PromiseResType<PersonPromise> // Person

反解函数入参类型

type Fn<A extends any[]> = (...args: A) => any
type FnArgs<T> = T extends Fn<infer A> ? A : any function strFn (name: string) { } type StrFn = FnArgs<typeof strFn> // [string]

tuple 转 union ,如:[string, number] -> string | number

type ElementOf<T> = T extends Array<infer E> ? E : never

type TTuple = [string, number];

type ToUnion = ElementOf<ATuple>; // string | number

new 操作符

// 获取参数类型
type ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any ? P : never; // 获取实例类型
type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any; class TestClass { constructor(
public name: string,
public string: number
) {}
} type Params = ConstructorParameters<typeof TestClass>; // [string, numbder] type Instance = InstanceType<typeof TestClass>; // TestClass

react - reducer

// 定义
function useReducer<R extends Reducer<any, any>, I>(
reducer: R,
// ReducerState 推断类型
initializerArg: I & ReducerState<R>,
initializer: (arg: I & ReducerState<R>) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>]; // infer推断
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any>
? S
: never;
// Reducer类型
type Reducer<S, A> = (prevState: S, action: A) => S; // 使用 reducer
const reducer = (x: number) => x + 1;
const [state, dispatch] = useReducer(reducer, '');
// Argument of type "" is not assignable to parameter of type 'number'.

vue3 - ref

export interface Ref<T = any> {
[isRefSymbol]: true
value: T
} export function ref<T>(value: T): T extends Ref ? T : Ref<UnwrapRef<T>> export type UnwrapRef<T> = {
cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
ref: T extends Ref<infer V> ? UnwrapRef<V> : T
array: T
object: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>
? 'cRef'
: T extends Array<any>
? 'array'
: T extends Ref | Function | CollectionTypes | BaseTypes
? 'ref' // bail out on types that shouldn't be unwrapped
: T extends object ? 'object' : 'ref'] // 使用
const count = ref({
foo: ref('1'),
bar: ref(2)
}) // 推断出
const count: Ref<{
foo: string;
bar: number;
}> const count = ref(2) // Ref<number> const count = ref(ref(2)) // Ref<number>

参考

typescript 中的 infer 关键字的理解的更多相关文章

  1. TypeScript 中命名空间与模块的理解?区别?

    一.模块 TypeScript 与ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地,如果一个文件不带有顶级的import或者expo ...

  2. java中对final关键字的理解以及使用场景

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法.

  3. c++中的const关键字的理解

    看effective c++第二版推荐使用const,少用define.今天才发现发现这远远不够. #define定义的常量在预处理替换,debug的时候无法打印宏的,这种常量设置是有缺陷的, con ...

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

    大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 分享不易,希望能够得到大家的支持和关注. extends types ...

  5. TypeScript `infer` 关键字

    考察如下类型: type PromiseType<T> = (args: any[]) => Promise<T>; 那么对于符合上面类型的一个方法,如何得知其 Prom ...

  6. 正确理解JavaScript中的this关键字

    JavaScript有this关键字,this跟JavaScript的执行上下文密切相关,很多前端开发工程师至今对this关键字还是模棱两可,本文将结合代码讲解下JavaScript的this关键字. ...

  7. 深入理解java中的synchronized关键字

    synchronized 关键字,代表这个方法加锁,相当于不管哪一个线程A每次运行到这个方法时,都要检查有没有其它正在用这个方法的线程B(或者C D等),有的话要等正在使用这个方法的线程B(或者C D ...

  8. 转载 深入理解JavaScript中的this关键字

    转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字   1. 一 ...

  9. 深入理解python中的yield关键字

    想必大家都看过这样的代码: 上面的这段代码会计算0-9的平方并打印出来. 那么问题来了,这段代码和我们要说的东西有什么区别呢? 这里的关键字,yield,我在前面的文章里已经发过了.那么yield是什 ...

随机推荐

  1. InnoDB存储引擎简介

    前言: 存储引擎是数据库的核心,对于 MySQL 来说,存储引擎是以插件的形式运行的.虽然 MySQL 支持种类繁多的存储引擎,但最常用的当属 InnoDB 了,本篇文章将主要介绍 InnoDB 存储 ...

  2. JavaScrip条件表达式优化

    目录 1,前言 2,多条件if语句优化 3,参数默认值 4,Switch语句优化 1,前言 今早看了一篇文章<JavaScrip实现:如何写出漂亮的条件表达式>,原创于:华为云开发者社区, ...

  3. 反向解析 参数替换 reverse

  4. VS·.Net WCF多项目调试方法

    阅文时长 | 0.12分钟 字数统计 | 252.8字符 主要内容 | 1.引言&背景 2.声明与参考资料 『VS·.Net WCF多项目调试方法』 编写人 | SCscHero 编写时间 | ...

  5. Nacos服务发现

    基础配置初始化 NacosDiscoveryClientConfiguration NacosDiscoveryProperties 初始化Nacos基础配置信息的bean,主要指yaml中配置Nac ...

  6. [刷题] 112 Path Sum

    要求 给出一个二叉树及数字sum,判断是否存在一条从根到叶子的路径,路径上的所有节点和为sum 实现 转化为寻找左右子树上和为 sum-root 的路径,到达叶子节点时递归终止 注意只有一个孩子时,根 ...

  7. [刷题] 226 Invert Binary Tree

    要求 翻转一棵二叉树 实现 翻转左右子树,交换左右子树的根节点 1 class Solution { 2 public: 3 TreeNode* invertTree(TreeNode* root) ...

  8. [刷题] 203 Remove Linked List Elements

    要求 在链表中删除值为val的所有节点 示例 如 1->2->3->4->5->6->NULL,要求删除值为6的节点 返回1->2->3->4-& ...

  9. 小甲鱼零基础入门学习python--课后作业

    [小甲鱼零基础入门学习python--课后作业] 小甲鱼零基础入门学习python--课后作业 本章内容: 1.基础部分的作业 2.函数部分的作业 3.字典.集合.文件部分作业 4.异常 5.Easy ...

  10. linux使用createrepo制作本地yum源

    目录 linux使用createrepo制作本地yum源 安装createrepo软件包 进入本地rpm包目录 执行完后可以看到生成的repodata目录 编辑yum配置文件使用 完成,测试使用 关于 ...