如何通過您在 TypeScript 中的鍵名將 function 運行到 Object 中？

Question

我有一個像這樣的 Object：

const Foo = {
    bar: (): void => { console.log('foo.bar') },
    baz: (): void => { console.log('foo.baz') },
};

我想這樣調用這些函數：

Foo["bar"]();
Foo["baz"]();

不幸的是，TypeScript 不能編譯這段代碼。

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type {MY_OBJECT}

我需要做什么才能通過索引名稱啟用 function 調用？

＃編輯

我創建了這個片段來顯示問題：

游樂場鏈接

Answer 1

您提供的代碼至少在 typescript 3.9.2中按原樣工作。 盡管有可能 1. 它在早期版本的 TS 中不能以這種方式工作，或者 2. 您提供的代碼只是一個示例，並不完全是您遇到問題的代碼。

在任何一種情況下，錯誤都與string和string的子類型（ bar和baz ）有關。

您的 object Foo的類型被推斷為：

{ [key in 'bar' | 'baz']: () => void }

與

{ [key in string]: () => void }

或者換句話說，鍵只能是string的特定子類型。

當你運行Foo["bar"](); ，最新的 typescript 應正確解釋提供為'bar'的索引，但早期版本可能不會這樣做。

您可以通過強制 TS 使用const 斷言將其解釋為文字類型來解決此問題，如下所示：

const key1 = 'bar' as const
Foo[key1]() // should not error

const key2 = 'baz' as const
Foo[key2]() // should not error

或者，您可以使用更廣泛的類型為您的Foo object 提供類型注釋，如下所示：

const Foo: {[key in string]: () => void} = {
    bar: (): void => { console.log('foo.bar') },
    baz: (): void => { console.log('foo.baz') },
};

Foo['bar']() // should not error
Foo['baz']() // should not error