Chainable Options

Disclosure

Most of the problems under my TypeHero Challenges folder were either obtained from typehero.dev or from type-challenges repo. Purpose of these articles are just to document my approaches for my easy reference. Please visit the respective links for more info.

Link to original

Problem Description

Chainable options are commonly used in Javascript. But when we switch to TypeScript, can you properly type it?

In this challenge, you need to type an object or a class - whatever you like - to provide two function option(key, value) and get(). In option, you can extend the current config type by the given key and value. We should about to access the final result via get.

For example:

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

You don’t need to write any JS/TS logic to handle the problem - just in type level.

You can assume that key only accepts string and the value can be anything - just leave it as-is. Same keywon’t be passed twice.

Solutions

Approach

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

Can replace { [P in K]: V } with Record<K, V>. We can’t write { K: V } because K would be inferred as the literal name of the property, i.e, { "K": someValueOfTypeV }.

The Omit<T, K> is present because as per the test cases, even though the error should appear when calling option() with the same property name, the result should have the type of the latest key’s value.