use [""] in object will lose ts check

[Kanade-Lu]

🔎 Search Terms

          This seems to be a TypeScript bug/limitation:

TypeScript Playground

Originally posted by @KermanX in vuejs/language-tools#3819 (comment)

🕗 Version & Regression Information

• This is a crash
• This changed between versions ______ and _______
• This changed in commit or PR _______
• This is the behavior in every version I tried, and I reviewed the FAQ for entries about _________
• I was unable to test this on prior versions because _______

⏯ Playground Link

https://www.typescriptlang.org/play/?#code/FAYw9gdgzgLgBAQwFxwEoFNwCcAmAeWLASwgHMAaOCAVwFsAjdLAPjgDI4BvRARhR7gBfOAF4uQxFEQQAnsGAIAdAh7AA9GrgA9APwKA2gCIVhgLrrNuhcoBMF7XoRGENs3A1wAcgHk4ACQBJTwAVAEJ7KyA

💻 Code

const a: Record<string, number> & { a1: 1 } = { } as any

a.a1
// ^?
a["a1"]
// ^?
a.a2
// ^?
a["a2"] // NO HINT!
// ^?

🙁 Actual behavior

a["a2"] // NO HINT!

🙂 Expected behavior

a["a2"] should be hint by typescript

Additional information about the issue

No response

[RyanCavanaugh]

I'm not sure what's best here. We show

(property) a1: 1

But a2 isn't a property; it's an index signature. It'd be confusing to just show

number

here since "a2" is not a number.

We've never had reason to show (index signature) or whatnot here.

This doesn't seem like something people commonly encounter as a problem.

[fatcerberus]

Note that this isn't just about twoslash hints, but extends to hover tips as well. It is kind of frustratingly inconsistent (for no apparent reason, from an end-user point of view) that hovering over ["a1"] shows what type of value it's accessing, but not ["a2"]. If you want to see that type you have to assign it to a const first and hover over that.

[DanielRosenwasser]

How about number from [x: string]: number? Works similarly to how we show type parameters as T in f<T>(): void.

[Kanade-Lu]

How about number from [x: string]: number? Works similarly to how we show type parameters as T in f<T>(): void.怎么样 number from [x: string]: number ？工作方式类似于我们将类型参数显示为 T in f<T>(): void .

This seems intuitive.
While I'm not sure what's best to show, I'm a little confused that typescript shows me nothing when I encounter this situation.

[KermanX]

More information: If you destruct the object, then the type will be shown:

Playground

[Andarist]

How about number from [x: string]: number? Works similarly to how we show type parameters as T in f(): void.

There is already some support for those kinds of displays and the format is different (TS playground):

interface Foo {
  x: string
  [k: string]: string | number;
}

declare const foo: Foo

foo.something
//   ^? (index) Foo[string]: string | number

The formatting issue here is, in part, related to the fact that this index signature comes from a mapped type (TS playground):

type Foo = Record<string, string | number>;

declare const foo: Foo;

foo.something;
//   ^? string | number

and in part that it comes from an intersection since this doesn't work either (TS playground):

interface Bar {
  [k: string]: string | number;
}

interface Foo {
  x: string;
}

declare const foo: Foo & Bar;

foo.something;
//   ^? string | number

None of those works with foo['something'].