基於泛型接口推斷參數和返回類型

Question

我正在構建一個接受接口的 function 並且我希望它從作為 function 參數傳遞的選項 object 中的“鍵”推斷返回類型

我想要的結果將類似於這個簡化的代碼示例：

const stringKeyValue = createKeyValueMapped<{a: string, b: number}>({
 key: "a", // key: "a"
 value: "hi",  // value: string
 transform: (value) => value + ' more text', // (value: string) => string
}); 

stringKeyValue.key;  // key: 'a'
stringKeyValue.value; // value: string 

但是使用我當前的代碼， key類型是'a' | 'b' 'a' | 'b'和值類型是'string' | 'number' 'string' | 'number' 。

我目前的解決方案是：

export type KeyValue<
  Inputs,
  Key extends keyof Inputs,
  Value = Inputs[Key]
> = {
  key: Key;
  value: Value;
  transform: (value: Value) => Value;
};

type KeyValuesMapped<Inputs> = {
  [Key in keyof Inputs]: KeyValue<Inputs, Key>;
}[keyof Inputs];

const createKeyValueMapped = <Inputs,>({ key, value }: KeyValuesMapped<Inputs>) =>
  ({
    key,
    value,
  });

我試圖為KeyValue創建一個類型，其中包括 function 中的選項並鍵入返回，但完全破壞了映射。

更完整的示例在此指向 Playground 的鏈接中

Answer 1

目前， key屬性不是通用的。 function 不知道也不關心您傳遞給它的值。 因此 output 類型不能根據key進行更改。

---

“簡單”的解決方案是為key添加泛型類型。

const createKeyValueMapped = <
  Inputs, 
  K extends keyof Inputs
>({ key, value }: KeyValue<Inputs, K>) =>
  ({
    key,
    value,
  });

調用者在調用 function 時必須明確指定鍵，因為TypeScript 還不支持部分類型推斷。

const stringKeyValue = createKeyValueMapped<CustomInputs, "a">({
  key: "a",
  value: "hi",
  transform: (value) => value + ' more text',
});

---

如果我們想避免顯式設置第二個泛型類型，我們可以使用柯里化。

const createKeyValueMapped = <Inputs,>() =>
  <K extends keyof Inputs>({key, value}: KeyValue<Inputs, K>) => ({
    key,
    value,
  });

const stringKeyValue = createKeyValueMapped<CustomInputs>()({
  key: "a",
  value: "hi",
  transform: (value) => value + ' more text',
});

外部 function 采用顯式泛型類型，而內部 function 推斷key 。

stringKeyValue.key; // "a"
stringKeyValue.value; // string

---

操場