ts 类型体操 Chainable Options 可链式选项示例详解

目录
  • 问题
  • 答案
    • 传参
    • option部分
    • get

问题

在JavaScript我们通常会使用到可串联(Chainable/Pipline)的函数构造一个对象,但是在Typescript中,你能合理地给它赋上类型吗?

题目是: 可以使用任何你喜欢的方式实现这个类型 - interface, type, 或者 class 都行。你需要提供两个函数option(key, value)get()

option 中你需要使用提供的key和value来扩展当前的对象类型,通过 get()获取最终结果。

注意: 你只需要在类型层面实现这个功能 - 不需要实现任何 ts/js 的实际逻辑。 你可以假设key只接受字符串而value接受任何类型,你只需要暴露它传递的类型而不需要进行任何处理。同样的key只会被使用一次。

例子是:

declare const config: Chainable
const result = config
    .option('foo', 123)
    .option('bar', { value: 'Hello World' })
    .option('name', 'type-challenges')
    .get()
// expect the type of the result to be:
interface Result {
    foo: number
    name: string
    bar: {
        value: string
    }
}

答案

type Chainable = {
  option(key: string, value: any): any
  get(): any
}

把这个any改成答案即可。作者要求我们做什么?需要实现两个方法,一个是options(key, value),另一个是get()

option(key, value): 必须在某处累加 keyvalue 的类型信息。累加操作必须持续进行,直到调用get函数将累加的信息作为一个对象类型返回。

先看看提供的样例:

const result1 = a
    .option('foo', 123)
    .option('bar', {value: 'Hello World'})
    .option('name', 'type-challenges')
    .get()
希望得到的是:
type Expectd1 = {
    foo: number,
    bar: {
        value: string
    },
    name: string
}

传参

把option传的key值和value值给对应改了。所以我们把keyvalueany替换成类型参数,以便ts可以推断出它们的类型并将其分配给类型参数:

type Chainable<T = {}> = {
  option<K, V>(key: K, value: V): any
  get(): any
}

我们现在有了关于keyvalue的类型信息。ts会将key推断为字符串字面量类型, 而将value推断为常见的类型。

例如: 调用option('foo', 123)将得出的类型为: key = 'foo‘ 和 value = number

我们有了信息后,把它存储在哪里呢?它必须是一个在若干次方法调用中保持其状态的地方。唯一的地方便是Chainable类型本身。

让我们为Chainable类型添加一个新的类型参数T,并且不能忘记默认它是一个空对象。

type Chainable<T = {}> = {}

option部分

注意,我们希望option(key, value)返回Chainable类型本身(我们希望有可能进行链式调用),但是要将类型信息累加到其类型参数中。

那么我们使用&来将新的类型添加到累加器中:

type Chainable&lt;T = {}&gt; = {
    option&lt;K, V&gt;(key: K, value: V): Chainable&lt;T &amp; { [k in K] : V }&gt;;
    get(): any
}

这里值得提一下为什么是 { [k in K] : V }, 直接写 { K : V } 不行吗?为什么还要in一下?

由于K是类型,类型是不能直接当成key的,在ts中对象如若想要以类型来当key也就是类型当键,要[k in K]这样写才行。

比如说: 定义一个类型key value这种字面量的对象,当时必须value是string类型。

type a<K extends string> = {[k in K]: string}
type b = a<>
const c:b = {
  a: 'c'
}

那接上面,所以这个K必须是string类型,js中字面量的key必须是string类型。所以改一下:

type Chainable<T = {}> = {
    option<K extends string, V>(key: K, value: V): Chainable<T & { [k in K] : V }>;
    get(): any
}

get

那么,这个get()函数调用的时候,应该返回什么呢,它必须从Chainable返回类型参数T,也就是option(key, value)链式调用所得到的的这么一个对象,也就是option(key, value)一直点调用的整体类型信息,那么就是传入的这个参数也就是T本身。

type Chainable<T = {}> = {
    option<K extends string, V>(key: K, value: V): Chainable<T & { [k in K] : V }>;
    get(): T
}

那么这样就完成了吗?我们来看一下测试结果

怎么还有红色波浪线,我们来看看

const result2 = a
  .option('name', 'another name')
  // @ts-expect-error
  .option('name', 'last name')
  .get()

哦,原来是这个对象中key相同的了,就不用再点调用下去了,直接省略。那么也就是说这个key的类型要控制一下,当判断到这个key已经存在了,我们就略过

type Chainable<T = {}> = {
    option<K extends string, V>(key: K extends keyof T ? never : K, value: V): Chainable<T & { [k in K] : V }>;
    get(): T
}

单拎出来看看

key: K extends keyof T ? never : K

至此,完成这一道题!

以上就是ts 类型体操 Chainable Options 可链式选项示例详解的详细内容,更多关于ts 类型Chainable Options的资料请关注我们其它相关文章!

(0)

相关推荐

  • TS 类型兼容教程示例详解

    目录 类型兼容 简单类型兼容 普通对象兼容 函数兼容 参数数量不一致 参数类型不一致 返回不同 类型兼容 因为JS语言不慎过于领过, 真实开发场景中往往无法做到严格一致的类型约束,此时TS就不得不做类型兼容 顶类型:unknown -- 任何类型都可以赋值给unknown 底类型:never -- never兼容任何类型(可以赋值给任何类型) any: 其实不是一个类型,它是一个错误关闭器,用了any就等同于放弃了类型约束 简单类型兼容 子集可以赋值给父级 type name = string

  • 前端React Nextjs中的TS类型过滤实用技巧

    目录 自我介绍 分步介绍 开胃小菜 keyof in Conditional 泛型 正餐开始 实战应用例子 最后 大家好,我是零一,相信大家在阅读同事写的代码或者优秀的开源库的代码时,一定见过各种各样的风骚的TS写法,不花点时间下去根本看不懂,换作是我们,可能就直接一个 any 完事了,但是真正当项目体积变大后,你会发现这些 TS骚操作真的很重要,因为它能很好地帮助你做静态类型校验 自我介绍 TS类型过滤,英文名(我自己取的)叫 FilterConditionally,这是它完整的样子 type

  • 为Vue3 组件标注 TS 类型实例详解

    目录 为 props 标注类型 使用 <script setup> 非 <script setup> 为 emits 标注类型 使用 <script setup> 非 <script setup> 为 ref() 标注类型 默认推导类型 通过接口指定类型 通过泛型指定类型 为 reactive() 标注类型 默认推导类型 通过接口指定类型 为 computed() 标注类型 默认推导类型 通过泛型指定类型 为事件处理函数标注类型 为 provide / in

  • vue3+ts中ref与reactive指定类型实现示例

    目录 ref 的基础特性 如何在ref中指定类型 reactive isRef.isReactive toRef.toRefs.toRaw ref 的基础特性 ref 约等于 reactive({ value: x }) ref() 可以定义时无参数,第一次赋值任意类型,然后就不能增加属性 const refa = ref(6) const rcta = reactive({ value: 12 }) console.log('refa:', refa) //RefImpl{...} conso

  • UMD的包导出TS 类型方法示例

    目录 TypeScript 里声明模块 类型提示检查 UMD 的 global 类型 总结 TypeScript 里声明模块 在 TypeScript 里声明模块,最早是用 namespace 和 module 的语法,后来支持了 es module,类型和变量会用 import 来导入.用 export 导出. 比如你写了一个库,导出的变量叫 Guang,它下面有 name 和 age 两个属性,所以你是这样声明类型的: export default Guang; declare namesp

  • ts 类型体操 Chainable Options 可链式选项示例详解

    目录 问题 答案 传参 option部分 get 问题 在JavaScript我们通常会使用到可串联(Chainable/Pipline)的函数构造一个对象,但是在Typescript中,你能合理地给它赋上类型吗? 题目是: 可以使用任何你喜欢的方式实现这个类型 - interface, type, 或者 class 都行.你需要提供两个函数option(key, value) 和 get() 在 option 中你需要使用提供的key和value来扩展当前的对象类型,通过 get()获取最终结

  • C语言 链式二叉树结构详解原理

    目录 前言 二叉树节点声明 二叉树的遍历 构建二叉树 1.前序遍历 2.中序遍历 3.后序遍历 二叉树节点的个数 二叉树叶子节点的个数 二叉树第K层节点个数 二叉树的高度/深度 二叉树查找值为x的节点 整体代码 前言 二叉树不同于顺序表,一颗普通的二叉树是没有增删改查的意义.普通的二叉树用来存储数据是不方便的.但是二叉树的一些基本实现结构,例如前序遍历,中序遍历...等等都是对我们学习更深层次的二叉树打下夯实的基础. 二叉树节点声明 typedef char BTDataType; typede

  • flutter中使用流式布局示例详解

    目录 简介 Flow和FlowDelegate Flow的应用 总结 简介 我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整.这时候就会用到flow layout,也就是流式布局. 同样的,在flutter中也有流式布局,这个流式布局的名字叫做Flow.事实上,在flutter中,Flow通常是和FlowDelegate一起使用的,FlowDelegate用来设置Flow子组件的大小和位置,通过使用FlowDelegate.paintChildre可

  • Java设计模式之责任链模式的示例详解

    目录 应用场景 实际代码案例 无模式情况下的代码 采用责任链模式优化代码 采用建造者+责任链模式优化代码 责任链模式优缺点 责任链模式是将链中的每一个节点看做是一个对象,每个节点处理的请求均不相同,且内部自动维护下一个节点对象,当一个请求从链式的首段发出时,会沿着链的路径依次传递给每一个节点对象,直至有对象处理这个请求位置,属于行为模式. 这里需要注意的是每个节点都能对对象进行一定的处理(也可以不处理),处理完成之后节点再进行判断还要进行后续处理还是说传递给下一个节点. 应用场景 首先举一个日常

  • JavaScript 链式结构序列化详解

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } switch: switch(name){ case ...:{ //TODO break; } case ...:{ //TODO break; } default:{ //TODO } } 疑问:诸如上述这些链式代码,倘若,我们想将其扁平化链式处理呢?如下: //fn1,f2,f3为处理函数 _if(

  • c++显式类型转换示例详解

    标准C++包含一个显式的转换语法: static_cast:用于"良性"和"适度良性"的转换,包括不用强制转换 const_cast:用于"const"和/或"volatile"进行转换 reinterpret_cast:转换为完全不同的意思.为了安全的使用它,关键必须转换回原来的类型.转换成的类型一般只能用于位操作,否则就是为了其他隐秘的目的.这是所有转换中最危险的. dynamic_cast:用于类型安全的向下转换 ---

  • JavaScript中运算符规则和隐式类型转换示例详解

    前言 本文主要给大家介绍了关于JavaScript运算符规则和隐式类型转换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 隐式类型转换 在 JavaScript 中,当我们进行比较操作或者加减乘除四则运算操作时,常常会触发 JavaScript 的隐式类型转换机制:而这部分也往往是令人迷惑的地方.譬如浏览器中的 console.log 操作常常会将任何值都转化为字符串然后展示,而数学运算则会首先将值转化为数值类型(除了 Date 类型对象)然后进行操作. 我们首先来

  • C语言实现二叉树链式结构的示例详解

    目录 前言 1. 链式二叉树结构 2. 二叉树的遍历 2.1 前序遍历 2.2 中序遍历 2.3 后序遍历 2.4 层序遍历 3. 常见功能 3.1 二叉树结点个数 3.2 二叉树叶子结点个数 3.3 第K层结点的个数 3.4 二叉树的深度 3.5 判断是不是树是不是完全二叉树 3.6 在二叉树中查找值为x的结点 3.7 拿到每一层的数据 4. 二叉树的创建和销毁 4.1 二叉树的创建 4.2 二叉树的销毁 前言 前面我们已经对堆进行学习,堆就是一个顺序结构的二叉树,把数组看成二叉树,下面一起学

  • 直观详细的typescript隐式类型转换图文详解

    正文 1.unknown是所有类型的父类型,其他类型都可以赋值给 unknown let a: undefined = undefined; let b: null = null; let x2: unknown; x2 = a; //正确 x2 = b; //正确 2.never 是任何类型的子类型,可以赋给任何类型 let a: undefined = undefined; let b: null = null; function err(): never { // OK throw new

随机推荐