typescript使用技巧(深入理解typescript中的infer关键字的使用)
类别:编程学习 浏览量:1270
时间:2021-10-21 08:43:08 typescript使用技巧
深入理解typescript中的infer关键字的使用目录
- infer
- 案例:加深理解
- 参考
infer 这个关键字,整理记录一下,避免后面忘记了。有点难以理解呢。
inferinfer 是在 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关键字
Vue3 跟着尤雨溪学 TypeScript 之 Ref 类型从零实现
巧用 TypeScript(五)---- infer
到此这篇关于深入理解typescript中的infer关键字的使用的文章就介绍到这了,更多相关typescript infer关键字内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- react新手指引页面编写(React+TypeScript进行项目构建案例讲解)
- typescript开发后端(教你使用webpack打包编译TypeScript代码)
- typescript怎么加号(Typescript中的as、问号与感叹号详解)
- typescript获取属性名(TypeScript 中如何限制对象键名的取值范围)
- TypeScript定义接口(interface)案例教程(TypeScript定义接口interface案例教程)
- typescript使用技巧(深入理解typescript中的infer关键字的使用)
- 数据类型typescript知多少(一文了解TypeScript数据类型)
- typescript技巧(为什么TypeScript的Enum会出现问题)
- 今天要吃什么(今天要吃什么菜好)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
- 不走心的古装造型 舒畅 毁容式 出演,萧蔷雷出新高度(不走心的古装造型)
热门推荐
- python简单代码实例(Python实现 版本号对比功能的实例代码)
- apache服务器设置301(Apache Rewrite实现URL的301跳转和域名跳转)
- php探针哪个牌子好用(php探针使用原理和技巧讲解)
- dedecms独立页面怎么加(DEDECMS实现文章tag关键词自动生成列表页的方法)
- mysql多表连接优化(浅谈Mysql多表连接查询的执行细节)
- 云服务器模式有哪些(私人云服务器用途有哪些?私人云服务器可以做什么?)
- 什么是依赖倒置原则
- ocr公式识别python(初探利用Python进行图文识别OCR)
- 云服务器可以搭建几个网站(使用云服务器搭建网站的注意事项)
- vue用于动态切换组件的内置组件(Vue 可拖拽组件Vue Smooth DnD的使用详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8