javascript - TypeScript 是否可能從一個動態物件推斷出鍵值？

我在這裡想要達成的目標是對由陣列生成的物件進行智能提示/自動完成——類似於 Redux 的 Action Creator，一個字串陣列（string[]），可以被縮減為形狀為 { [string]: string } 的物件。

例如：

const a = ['ONE', 'TWO', 'THREE'];

const b = a.reduce((acc, type) => ({ ...acc, [type]: type }), {});

console.log(b);
// Output: b = { ONE: 'ONE', TWO: 'TWO', THREE: 'THREE' };

我已經設法讓 TypeScript 理解那麼多，使用以下方法。TypeScript 理解這些鍵是字串，但不知道它們是什麼。

interface ITypesReturnObject { [s: string]: string }

有人想出辦法通知 TypeScript 該物件上的鍵與陣列中的字串相等嗎？

任何幫助都將不勝感激。

答案＃1

（假設你在以下使用 TS3.0 或更高版本）

TypeScript 支援字串字面值型別以及元組型別，因此有可能讓你的值 a 擁有型別 ['ONE', 'TWO', 'THREE'] 以及值 ['ONE', 'TWO', 'THREE']，像這樣：

const a: ['ONE', 'TWO', 'THREE'] = ['ONE', 'TWO', 'THREE'];

(稍後會提供一種較不冗餘的方法來實現這個)：

然後你可以將 b 的預期類型表示為從鍵到與鍵精確匹配的值的映射，使用映射類型：

type SameValueAsKeys<KS extends string[]> = { [K in KS[number]]: K };

可以這樣使用：

const b: SameValueAsKeys<typeof a> = a.reduce((acc, type) => ({ ...acc, [type]: type }), {} as any);
b.ONE; // property type is "ONE"
b.TWO; // property type is "TWO"
b.THREE; // property type is "THREE"

注意編譯器如何知道 b 有三個鍵，"ONE"、"TWO" 和 "THREE"，以及它們的值與鍵相同。

所以 TypeScript 當然支持這種類型的動態類型。不幸的是，正如我上面所示，它的使用有點繁瑣。讓這個過程不那麼麻煩的一種方法是添加一些輔助函數，這些函數允許編譯器推斷出正確的類型，或者至少將類型斷言隱藏在一個庫中，這樣開發者就不必擔心它們。

首先，對於 a... 編譯器不會推斷元組類型，而且它也傾向於將字串字面值擴展為 string 類型，除非在某些特定情況下。我們來引入一個名為 stringTuple() 的輔助函數：

function stringTuple<T extends string[]>(...args: T) { return args; }

這會從剩餘參數推斷出一個元組類型。現在我們可以用它來創建 a，而不需要重複輸入字串值：

const a = stringTuple("ONE", "TWO", "THREE");

接下來，我們來介紹一個函數，它接受一個字串列表並返回一個對象，該對象的鍵是這些字串，而值與字串相對應：

function keyArrayToSameValueAsKeys<T extends string[]>(keys: T): SameValueAsKeys<T>;
function keyArrayToSameValueAsKeys(keys: string[]): { [k: string]: string } {
  return keys.reduce((acc, type) => ({ ...acc, [type]: type }), {});
}

這裡我們使用與你相同的程式碼搭配 reduce，但我們將它隱藏在自己的函式中，並使用單一的重載呼叫簽名來表示預期的輸出類型。現在，我們可以這樣取得 b：

const b = keyArrayToSameValueAsKeys(a);
b.ONE; // property type is "ONE"
b.TWO; // property type is "TWO"
b.THREE; // property type is "THREE"

如果你將 stringTuple() 和 keyArrayToSameValueAsKeys() 放入一個函式庫，使用者就可以使用它們而不會遇到太多麻煩：

const otherObject = keyArrayToSameValueAsKeys(stringTuple("x", "y", "z"));
// const otherObject: {X: "X", Y: "Y", Z: "Z"}

或者你可以像這樣將它們合併在一起：

function keysToSameValueAsKeys<T extends string[]>(...keys: T): { [K in T[number]]: K };
function keysToSameValueAsKeys(keys: string[]): { [k: string]: string } {
  return keys.reduce((acc, type) => ({ ...acc, [type]: type }), {});
}

然後像這樣一次獲取輸出：

const lastOne = keysToSameValueAsKeys("tic", "tac", "toe");
// const lastOne: {tic: "tic", tac: "tac", toe: "toe"};

好吧，希望這對你有幫助。祝你好運！

答案＃2

如果你事先知道陣列中會有哪些內容，你可以這樣做：

type myType = 'ONE' | 'TWO' | 'THREE';
const a: myType[] = ['ONE', 'TWO', 'THREE'];

const b: { [key in myType]: myType } = a.reduce<{ [key in myType]: myType }>((acc, type) => ({ ...acc, [type]: type }), <any>{});

// correct intellisense
b.ONE === 'ONE'