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

Calandra ·

更新时间:2024-09-20

· 288 次阅读

问题

答案

传参

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): 必须在某处累加 key 和 value 的类型信息。累加操作必须持续进行，直到调用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值给对应改了。所以我们把key和value的any替换成类型参数，以便ts可以推断出它们的类型并将其分配给类型参数:

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

我们现在有了关于key和value的类型信息。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
}

单拎出来看看