首页 > 其他分享 >Ts的infer类型推导

Ts的infer类型推导

时间:2022-11-12 19:32:02浏览次数:37  
标签:Obj 推导 number Ts extends 类型 let infer


Ts的infer类型推导

1.定义

在extends语句中,支持infer关键字,可以推断一个类型变量,高效的对类型进行模式匹配。但是,这个类型变量只能在true的分支中使用。

条件类型还提供了一种使用infer关键字在类型比较的true分支中进行目标类型推断的方法。

(可以将infer当作一种标记符,后续可以得到其标记的类型)

2.使用

exp1

type Flatten<Type> = Type extends Array<infer Item> ? Item : Type;

type Str = Flatten<string[]>;
// Str => string

type Num = Flatten<number[]>;
// Num => number

exp2

type GetReturnType<T> = T extends (...args: never[]) => infer Return ? Return : never;

type Num = GetReturnType<() => number>;
// Num => number

type Bools = GetReturnType<(a: boolean, b: boolean) => boolean[]>;
// Bools => boolean[]

exp3

// 如果泛型T是()=> infer R的子集,则返回infer R获取到的类型,否则返回boolean
type Func<T> = T extends () => infer R ? R : boolean;

let func1: Func<number>; // boolean;
let func2: Func<''>; // boolean
let func3: Func<() => Promise<number>>; // Promise<number>

exp4

type Obj<T> = T extends { a: infer VT, b: infer VT } ? VT : number;

let obj1: Obj<string>; // number;
let obj2: Obj<true>; // number;
let obj3: Obj<{a: string, b: string}>; // string
let obj4: Obj<a: number, b: string>; // string | number
// 当a、b为不同类型时,返回联合类型

标签:Obj,推导,number,Ts,extends,类型,let,infer
From: https://blog.51cto.com/u_15326986/5846773

相关文章

  • 24. echarts 可以画哪些图表
    1.折线图2.柱状图3.饼图 4.地图5.雷达图 延申问题:画折线图和柱状图哪些配置可以改变样式 1.  color 设置每个数据的颜色2. grid网格设......
  • TTS经典论文汇总
    WaveNet:《WaveNet:AGenerativeModelforRawAudio》Tacotron:《TACOTRON:TowardsEnd-to-EndSpeechSynthesis》Tacotron2:《NaturalTTSSynthesisbyConditioning......
  • 调用 setState 之后发生了什么?
    调用setState之后发生了什么?点击查看代码当调用setState后,新的state并没有马上生效渲染组件,而是,先看执行流中有没有在批量更新中,如果有,push到存入到dirtyeComp......
  • 【路径规划】基于遗传算法求解固定的开放式多旅行推销员问题(M-TSP)附matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进。......
  • After Effects 2022.11.12
    菜单栏:窗口-->效果和预设菜单栏:效果-->扭曲-->波形变形新建一个蓝色的纯色层,拖动波形变形的效果。波浪类型,正方形。设置波形宽度400,设置方向为0,波形速度5.0设置波形高......
  • TS 创建TreeNode类型
    想要实现的效果如:创建一个区域类,包含区域名称name,区域编码code,子区域childreninterfaceArea{name:string,code:string,children:Array<Area>}......
  • setState同步异步
    setState何时同步何时异步?点击查看代码1、setState只在合成事件(react为了解决跨平台,兼容性问题,自己封装了一套事件机制,代理了原生的事件,像在jsx中常见的onClick......
  • MFC-QT校园导航系统(旅行商TSP算法)
    MFC-QT校园导航系统(旅行商TSP算法)[问题描述]旅行商问题,给定若干城市和城市间距离,求解访问每一座城市一次并回到起始城市的最短回路。想象一个校园场景:某同学从宿舍出发......
  • departments/components/add.vue
    <template><!--组件v-modelxxxv-model='abc':value="abc"@input="abc=$event"xxx组件内props:{abc:{......
  • departments/index.vue
    <template><!--查:1:定义api2:导入api3:进入页面就调用api获取数据并存储4:渲染数据增:1:创建一个弹框组件2:导入注册使用3:点击新......