如何通过您在 TypeScript 中的键名将 function 运行到 Object 中？

Question

I have an Object like this:

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

I would like to call these functions this way:

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

Unfortunately, TypeScript doesn't compile this code.

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

What do I need to do to enable the function call by the index name?

#EDIT

I create this snippet to show the problem:

Playground Link

Answer 1

The code you provided works as-is, at least in typescript 3.9.2 . It's possible though that either 1. it does not work that way in an earlier version of TS, or 2. the code you provided was simply an example and isn't exactly the code you have trouble with.

In either case, the error has to do with string and subtypes of string ( bar and baz ).

Your object Foo 's type is inferred as:

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

as opposed to

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

or in other words, the keys can only be specific sub-types of string .

When you run Foo["bar"](); , the latest typescript should correctly interpret the index provided as 'bar' , but an earlier version might not be doing so.

You can get around this by forcing TS to interpret this as a literal type using a const assertion like so:

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

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

Alternatively, you can provide a type annotation to your Foo object with a wider type like so:

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