TypeScript/tests/baselines/reference/contextuallyTypedJsxChildren.types at 19270ba0f966d2edcfd6ab4aaa80f7d00efccd70 · jakebailey/TypeScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
//// [tests/cases/compiler/contextuallyTypedJsxChildren.tsx] ////

=== Performance Stats ===
Assignability cache: 2,500
Type Count: 10,000
Instantiation count: 100,000
Symbol count: 50,000

=== contextuallyTypedJsxChildren.tsx ===
/// <reference path="react16.d.ts" />

import React from 'react';
>React : typeof React
>      : ^^^^^^^^^^^^

// repro from https://github.com/microsoft/TypeScript/issues/53941
declare namespace DropdownMenu {
  interface BaseProps {
    icon: string;
>icon : string
>     : ^^^^^^

    label: string;
>label : string
>      : ^^^^^^
  }
  interface PropsWithChildren extends BaseProps {
    children(props: { onClose: () => void }): JSX.Element;
>children : (props: { onClose: () => void; }) => JSX.Element
>         : ^     ^^                        ^^^^^
>props : { onClose: () => void; }
>      : ^^^^^^^^^^^          ^^^
>onClose : () => void
>        : ^^^^^^
>JSX : any
>    : ^^^

    controls?: never | undefined;
>controls : undefined
>         : ^^^^^^^^^
  }
  interface PropsWithControls extends BaseProps {
    controls: Control[];
>controls : Control[]
>         : ^^^^^^^^^

    children?: never | undefined;
>children : undefined
>         : ^^^^^^^^^
  }
  interface Control {
    title: string;
>title : string
>      : ^^^^^^
  }
  type Props = PropsWithChildren | PropsWithControls;
>Props : Props
>      : ^^^^^
}
declare const DropdownMenu: React.ComponentType<DropdownMenu.Props>;
>DropdownMenu : React.ComponentType<DropdownMenu.Props>
>             : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>React : any
>      : ^^^
>DropdownMenu : any
>             : ^^^

<DropdownMenu icon="move" label="Select a direction">
><DropdownMenu icon="move" label="Select a direction">  {({ onClose }) => (    <div>      <button onClick={onClose}>Click me</button>    </div>  )}</DropdownMenu> : JSX.Element
>                                                                                                                                                                  : ^^^^^^^^^^^
>DropdownMenu : React.ComponentType<DropdownMenu.Props>
>             : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>icon : string
>     : ^^^^^^
>label : string
>      : ^^^^^^

  {({ onClose }) => (
>({ onClose }) => (    <div>      <button onClick={onClose}>Click me</button>    </div>  ) : ({ onClose }: { onClose: () => void; }) => JSX.Element
>                                                                                          : ^           ^^^^^^^^^^^^^          ^^^^^^^^^^^^^^^^^^^
>onClose : () => void
>        : ^^^^^^
>(    <div>      <button onClick={onClose}>Click me</button>    </div>  ) : JSX.Element
>                                                                         : ^^^^^^^^^^^

    <div>
><div>      <button onClick={onClose}>Click me</button>    </div> : JSX.Element
>                                                                 : ^^^^^^^^^^^
>div : any
>    : ^^^

      <button onClick={onClose}>Click me</button>
><button onClick={onClose}>Click me</button> : JSX.Element
>                                            : ^^^^^^^^^^^
>button : any
>       : ^^^
>onClick : () => void
>        : ^^^^^^
>onClose : () => void
>        : ^^^^^^
>button : any
>       : ^^^

    </div>
>div : any
>    : ^^^

  )}
</DropdownMenu>;
>DropdownMenu : React.ComponentType<DropdownMenu.Props>
>             : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

<DropdownMenu
><DropdownMenu  icon="move"  label="Select a direction"  children={({ onClose }) => (    <div>      <button onClick={onClose}>Click me</button>    </div>  )}/> : JSX.Element
>                                                                                                                                                               : ^^^^^^^^^^^
>DropdownMenu : React.ComponentType<DropdownMenu.Props>
>             : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  icon="move"
>icon : string
>     : ^^^^^^

  label="Select a direction"
>label : string
>      : ^^^^^^

  children={({ onClose }) => (
>children : ({ onClose }: { onClose: () => void; }) => JSX.Element
>         : ^           ^^^^^^^^^^^^^          ^^^^^^^^^^^^^^^^^^^
>({ onClose }) => (    <div>      <button onClick={onClose}>Click me</button>    </div>  ) : ({ onClose }: { onClose: () => void; }) => JSX.Element
>                                                                                          : ^           ^^^^^^^^^^^^^          ^^^^^^^^^^^^^^^^^^^
>onClose : () => void
>        : ^^^^^^
>(    <div>      <button onClick={onClose}>Click me</button>    </div>  ) : JSX.Element
>                                                                         : ^^^^^^^^^^^

    <div>
><div>      <button onClick={onClose}>Click me</button>    </div> : JSX.Element
>                                                                 : ^^^^^^^^^^^
>div : any
>    : ^^^

      <button onClick={onClose}>Click me</button>
><button onClick={onClose}>Click me</button> : JSX.Element
>                                            : ^^^^^^^^^^^
>button : any
>       : ^^^
>onClick : () => void
>        : ^^^^^^
>onClose : () => void
>        : ^^^^^^
>button : any
>       : ^^^

    </div>
>div : any
>    : ^^^

  )}
/>;