TS中的infer

简介: 处理方式 TS中的infer

假如想在获取数组里的元素类型,在不会infer之前我是这样做的:

type Ids = number[];
type Names = string[];

type Unpacked<T> = T extends Names ? string : T extends Ids ? number : T;

type idType = Unpacked<Ids>; // idType 类型为 number
type nameType = Unpacked<Names>; // nameType 类型为string

上次我写了20多行,就为了获取一堆各种不同类型的数组里的元素类型,然而如果使用infer,会变得十分简单。

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

type Tuple = string[];

type TupleToUnion = ElementOf<Tuple>

如果T是某个待推断类型的数组,则返回推断的类型,否则返回T

推断对象的属性类型

type Foo<T> = T extends { a: infer U } ? U : never;

type T10 = Foo<{ a: string }>; // T10类型为 string

根据他的位置推断出类型,也就是获取某一个部分的类型。

infer可以推断出联合类型

type Foo<T> = T extends { a: infer U; b: infer U } ? U : never;

type T11 = Foo<{ a: string; b: number }>; // T11类型为 string | number

infer可以推断出交叉类型

type T1 = {name: string};
type T2 = {age: number};

type K2<T> = T extends {a: (x: infer U) => void, b: (x: infer U) => void} ? U : never;

interface Props {
  a: (x: T1) => void;
  b: (x: T2) => void;
}

type k3 = K2<Props>
相关文章
|
设计模式 资源调度 Kubernetes
微前端应用 乾坤 开发实践
乾坤作为一款微前端应用框架,可以有效的实现前端应用程序的模块化设计,代码复用和可维护性。下面我们来通过实际开发来看看乾坤的使用方式以及实践。
|
3月前
|
存储 缓存 测试技术
开发文档的模版(参考)
本文档为[模块名称]的开发文档,详细介绍了系统模块的数据库表结构设计、接口定义、关键设计方案及外部API集成等内容,涵盖了核心表、从表、废弃表的设计规范,以及接口请求方式、参数说明、响应格式和异常处理机制。
287 0
|
存储 JavaScript 前端开发
敲黑板!vue3重点!一文了解Composition API新特性:ref、toRef、toRefs
该文章深入探讨了Vue3中Composition API的关键特性,包括`ref`、`toRef`、`toRefs`的使用方法与场景,以及它们如何帮助开发者更好地管理组件状态和促进逻辑复用。
敲黑板!vue3重点!一文了解Composition API新特性:ref、toRef、toRefs
|
移动开发 前端开发 JavaScript
vue-router学习一:什么是路由,路由分类,路由安装,路由使用,路由默认路径,history模式,默认的linkActiveClass属性,路由代码跳转
这篇文章是关于Vue.js官方路由管理器vue-router的详细介绍,包括路由的基本概念、分类、安装、使用以及在单页面应用中的路由模式和跳转方法。
845 0
vue-router学习一:什么是路由,路由分类,路由安装,路由使用,路由默认路径,history模式,默认的linkActiveClass属性,路由代码跳转
|
前端开发 JavaScript Python
好用的import: Vite的Glob 导入
好用的import: Vite的Glob 导入
1395 0
|
前端开发 JavaScript
node-sass与node版本不匹配问题解决方法
node-sass与node版本不匹配问题解决方法
3404 0
|
缓存 前端开发 JavaScript
React 数据请求最佳实践
React 数据请求最佳实践
707 0
|
JavaScript 前端开发 IDE
Typescript基础:如何更好的生成Typescript声明文件.d.ts
Typescript已经被前端广泛使用,如果你的项目还没有使用,建议赶紧使用起来,真的会对你的项目有足够的提升
956 0
|
前端开发 JavaScript
CSS中 解决文字高度上下存在留白的问题
CSS中 解决文字高度上下存在留白的问题
616 0
CSS中 解决文字高度上下存在留白的问题
【uni-app】使用外部组件不显示报错组件未找到解决方案
前言 大家好,今天和大家分享一下uni-app使用外部组件不显示报错的一个解决方案,希望能够帮助到大家。