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

Bắt đầu với TypeScript Playground được liên kết và tái hiện hành vi hoàn thành bằng cách sử dụng các ví dụ mapped Tuple và Editor đệ quy. Theo dõi cách TypeScript language-service completions xử lý các phần tử Tuple được phân biệt, sau đó xác minh rằng sau khi nhập "Container" hoặc "Text", chỉ các thuộc tính attribute tương ứng được gợi ý trong khi việc kiểm tra kiểu vẫn chính xác.