在類型彈出窗口中簡化 TypeScript 類型

在 TypeScript 中，當我將滑鼠懸停在變數上時，是否可以簡化類型提示中顯示的類型？

我有以下程式碼：

type Debug<T> = {
    [key in keyof T]: T[key]
}

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

declare const config: Chainable
const result = config
  .option('foo', 123)
  .option('name', 'type-challenges')
  .option('bar', { value: 'Hello World' })
  .get()


type X = typeof result;

當我將滑鼠懸停在 result 變數上時，我得到：[

然而，當我將滑鼠懸停在 type X 上時，我看到：

問題：

1. 為什麼那些類型顯示得不一樣？（即使它們表示的是同一件事）
2. 有沒有辦法像第二個畫面那樣顯示類型？

遊樂場

答案＃1

看起來有可能創建一個工具型別來自動執行扁平化。因此，不需要像 @zecuria 那樣解析型別。

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

type Util_FlatType<T> = T extends object ? { [K in keyof T]: Util_FlatType<T[K]> } : T

Util_FlatType 是從這裡偷來的

答案＃2

你可以做類似這樣的事情：

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

基本上這做的事情和你做的事情是一樣的，只是方式更迂迴。

與其依賴會污染懸停提示的 & 參數，你可以有效地從頭重新創建整個對象。

這是通過使用 k in K | keyof Acc 作為鍵來實現的，但這也意味著你需要對值使用條件類型。

我想這可能效能較低，但老實說我不認為這會造成最大的差異。

遊樂場