Incorrect inference/autocompletion on generic arrays, when values can be inferred from a defined object.

TypeScript Version: 4.1.2

Search Terms: Autocompletion, incorrect, values, inference, generic, array, object, keys

Summary: When an interface/a type has an object with generic keys, and an array of those keys, the array values cannot be infered from the object keys.

Code

interface Recipe<INGREDIENTS extends string> {
  quantities: Record<INGREDIENTS, number>
  allergens?: INGREDIENTS[]
}

function createRecipe<INGREDIENTS extends string>(recipe: Recipe<INGREDIENTS>) {}

createRecipe({
  quantities: {
    eggs: 1,
    flour: 2,
  },
  allergens: ['']
})

Expected behavior: Here, when trying to give a value to allergens, the autocompletion should show "eggs" | "flour".

Actual behavior: The autocompletion doesn’t find anything.

Notes: The other way is working: you can fill the array first, then the object keys will autocomplete - but this rarely make sense to write things that way.

Failed workarounds: This bug is still present, even when:

• allergens is optionnal
• We switch from an interface to a type
• We use keyof this['quantities'] instead of INGREDIENTS[]

[andrewbranch]

This is because the array is a stronger inference candidate than the record, so as soon as the array is non-empty, the type parameter gets instantiated to the types that can be inferred from its contents. The completions behavior you expect seems so obvious, but it’s actually really tricky to make it work. This is very similar to #36556 though, where we got reasonably good results, so maaaaybe that approach can be applied here.

[devanshj]

Ah my bad. Here’s another workaround. You do get an error that property sugar is missing (so the types are correct) but there’s no autocomplete, I suspect that’s because of #44428 bug.