Repository: TypeScript
Issue: Restrict the intellisense/auto completion of mapped tuples depending on the first element of the tuple
Labels: Suggestion,Experience Enhancement

# 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 <br/>
Tuple =  [Element, ItsAttributes, ...Tuple[]] (with mapped tuples & recursivity) <br/>
This will help when I need to construct data with this format


### ⏯  Payground  link

[Playground link](https://www.typescriptlang.org/play?#code/AQSwdgLgpgTgZgQwMZWAWQJ4GED2BbABxzCkgGdhgBvAKEst0gXFgC5q77K4AbAVxAATAPzsARjhw8oCMJ0oBfADTzgAFSgAPCO1pdK0baOBkIMcAHNVlJDwRkyAOQR4ox0+bBX9JkAC8odjA+PDFYVQUaSJoAehiAcSgIYAgAC1QAaygMChw4FPTgHhBTYDzgPAxgJHwiEnIaCAwCVABRaVdIYABeYCyMcsxcQmJSCDI6GliYrBgZaGAECoQCFsEUvgJpFObUAG12qE6IJWAAQQgzEDE+aDIAXWnFsHW01ARL8xu74EEoFpeZTABVQUA6YxoWiIMGSTRa6k2216VGAU0oB3BXXAfWyg2wtVG5HuwHYcwQgmIPCqGKOY1OQwJ9XGNOO90eUT2-TxwzqYweU0au2AACUoEg+DAyCAAG5QAAi-zSPWAZIpYCpwD2JFlMFOAAZTgBGU4AJlOAGZTgAWU4AVlOADZTgB2U4ADnZ01aghAEBwMEF8O9vv9AB5HMAtNAXhRgqFYAA+ZU0CNR0iCCh61HCYDSnBCVGkmRqjV7AB0FYAFGpEVAAJTAU4VsvBv0wUOi8WSmXyxWpPaOe4JvZszgAHxVxcp1MOxybFdbYc7EqlsoVBDSA6HI8elAnqunmub1drddOHksu+A+6n6upx5rW3rV5v5MPLLpJiuXhfk7fd81Wcxk9GgajAUpBA+JZ2EXdtzWHYlej2NFNQAckYCBmBIGBUNOFFeAEQR2DMPgoGUVEuD2VCNG0XDqF8AISWAc0FCvK8aHuIA)


### 💻 Code

Creation of a type Tuple that only accepts the structure [Element, ItsAttributes] :

```ts
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 :

```ts

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 ?

```ts

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).<br/> When I choose a wrong one Typescript also knows it's incompatible<br/>
Example: <br/>

```ts
['Container', { /* It currently shows all attributes in MyComponents : fluid, text, className, size */}]
```
<img width="262" alt="img3" src="https://user-images.githubusercontent.com/46561028/116071196-e2c39480-a68d-11eb-9cea-f05ff79ad793.PNG">

### 🙂 Expected behavior

After typing first element (Container, Text, etc), Typescript shows only the attributes that belongs to it.<br/>
Example: <br/>
```ts
['Container', { /* Should only show fluid */}]  

```