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 */}]  

Commencez par le TypeScript Playground lié et reproduisez le comportement de complétion à l’aide des exemples de mapped Tuple et d’Editor récursif. Suivez la manière dont TypeScript language-service completions gère les éléments discriminés de Tuple, puis vérifiez qu’après avoir saisi "Container" ou "Text", seules les propriétés d’attribut correspondantes sont proposées, tout en conservant une vérification des types correcte.