Chainable Options

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

In this medium-level challenge, you'll chainable options are commonly used in javascript. but when we switch to typescript, can you properly type it?. Master advanced TypeScript type manipulation in this medium-level challenge on TypeScriptPro.

This challenge will teach you essential skills for advanced TypeScript development and type-level programming.

For this challenge, you will need to change the following code to make the tests pass (no type check errors).

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
}
}

Detailed Explanation

To create a chainable interface, we track the accumulated type:

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

How it works:

• Each option call returns a new Chainable with the added property
• The type accumulates through intersection (&)
• get() returns the final accumulated type

This challenge helps you understand TypeScript's advanced type system and how to apply this concept in real-world scenarios.