问题

在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)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部