Restrict the intellisense/auto completion of mapped tuples depending on the first element of the tuple

Bug Report - Intellisense/Auto completion

Typescript can't infer tuple's second element type depending on first one's type

🔎 Search Terms

• Intellisense
• Auto completion
• Mapped tuples

🕗 Versions

• Typescript version v4.2.3
• VS Code version v1.55.2

🎈 Context

The goal is to build a text editor with a structure like

Tuple = [Element, ItsAttributes, ...Tuple[]] (with mapped tuples & recursivity)

This will help when I need to construct data with this format

⏯ Payground link

Playground link

💻 Code

Creation of a type Tuple that only accepts the structure [Element, ItsAttributes] :

interface MyComponents  {
    Container: {
      fluid?: boolean
    },
    Text: {
      text?: string
      className?: string
      size: number
    }
}

//Get the keys of the list of my components
type Element = keyof MyComponents

//Create a mapped tuple type [Element, Attributes]
// and the attributes depend on the element
export type Tuple = { 

  [Element in keyof MyComponents] : readonly [Element, MyComponents[Element]]

}[keyof MyComponents]

const tuple1 : Tuple = ['Text', { size : 3}] //Okay

const tuple2 : Tuple = ['Text', { fluid : true}] //Throw error

Creation of the editor with all possibles combinations :

type RecursiveDepth = readonly [never, 0, 1, 2, 3, 4, 5, 6, 7, 8]

//Editor
type Editor<N extends number> = 
N extends 0 
? void 
: readonly [...(Tuple) , ...Editor<RecursiveDepth[N]>[]]
  | readonly [Element, ...Editor<RecursiveDepth[N]>[]]
  | readonly [...(Tuple), string]
  | readonly [...(Tuple)]
  | readonly [Element, string]
  | readonly [Element]

How to use it ?

const data : Editor<3>[] = [

  ['Container', { fluid: true}, 
    ['Text', { size : 3}]
  ]
  
]

🙁 Actual behavior

After typing first element, the second element shows all possible attributes (even the wrong ones).
When I choose a wrong one Typescript also knows it's incompatible

Example:

['Container', { /* It currently shows all attributes in MyComponents : fluid, text, className, size */}]

🙂 Expected behavior

After typing first element (Container, Text, etc), Typescript shows only the attributes that belongs to it.

Example:

['Container', { /* Should only show fluid */}]  

Start with the linked TypeScript Playground and reproduce the completion behavior using the mapped Tuple and recursive Editor examples. Trace how TypeScript language-service completions handle discriminated tuple elements, then verify that after entering "Container" or "Text", only the corresponding attribute properties are suggested while type checking remains correct.