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
|
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : Symbol(React, Decl(file.tsx, 0, 0))
function Greet(x: {name?: string}) {
>Greet : Symbol(Greet, Decl(file.tsx, 0, 32))
>x : Symbol(x, Decl(file.tsx, 2, 15))
>name : Symbol(name, Decl(file.tsx, 2, 19))
return <div>Hello, {x}</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2400, 45))
>x : Symbol(x, Decl(file.tsx, 2, 15))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2400, 45))
}
class BigGreeter extends React.Component<{ name?: string }, {}> {
>BigGreeter : Symbol(BigGreeter, Decl(file.tsx, 4, 1))
>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55), Decl(react.d.ts, 161, 66))
>React : Symbol(React, Decl(file.tsx, 0, 0))
>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55), Decl(react.d.ts, 161, 66))
>name : Symbol(name, Decl(file.tsx, 6, 42))
render() {
>render : Symbol(BigGreeter.render, Decl(file.tsx, 6, 65))
return <div></div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2400, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2400, 45))
}
greeting: string;
>greeting : Symbol(BigGreeter.greeting, Decl(file.tsx, 9, 2))
}
// OK
let a = <Greet />;
>a : Symbol(a, Decl(file.tsx, 14, 3))
>Greet : Symbol(Greet, Decl(file.tsx, 0, 32))
// OK - always valid to specify 'key'
let b = <Greet key="k" />;
>b : Symbol(b, Decl(file.tsx, 16, 3))
>Greet : Symbol(Greet, Decl(file.tsx, 0, 32))
>key : Symbol(key, Decl(file.tsx, 16, 14))
// Error - not allowed to specify 'ref' on SFCs
let c = <Greet ref="myRef" />;
>c : Symbol(c, Decl(file.tsx, 18, 3))
>Greet : Symbol(Greet, Decl(file.tsx, 0, 32))
>ref : Symbol(ref, Decl(file.tsx, 18, 14))
// OK - ref is valid for classes
let d = <BigGreeter ref={x => x.greeting.substr(10)} />;
>d : Symbol(d, Decl(file.tsx, 22, 3))
>BigGreeter : Symbol(BigGreeter, Decl(file.tsx, 4, 1))
>ref : Symbol(ref, Decl(file.tsx, 22, 19))
>x : Symbol(x, Decl(file.tsx, 22, 25))
>x.greeting.substr : Symbol(String.substr, Decl(lib.d.ts, --, --))
>x.greeting : Symbol(BigGreeter.greeting, Decl(file.tsx, 9, 2))
>x : Symbol(x, Decl(file.tsx, 22, 25))
>greeting : Symbol(BigGreeter.greeting, Decl(file.tsx, 9, 2))
>substr : Symbol(String.substr, Decl(lib.d.ts, --, --))
// Error ('subtr' not on string)
let e = <BigGreeter ref={x => x.greeting.subtr(10)} />;
>e : Symbol(e, Decl(file.tsx, 24, 3))
>BigGreeter : Symbol(BigGreeter, Decl(file.tsx, 4, 1))
>ref : Symbol(ref, Decl(file.tsx, 24, 19))
>x : Symbol(x, Decl(file.tsx, 24, 25))
>x.greeting : Symbol(BigGreeter.greeting, Decl(file.tsx, 9, 2))
>x : Symbol(x, Decl(file.tsx, 24, 25))
>greeting : Symbol(BigGreeter.greeting, Decl(file.tsx, 9, 2))
// Error (ref callback is contextually typed)
let f = <BigGreeter ref={x => x.notARealProperty} />;
>f : Symbol(f, Decl(file.tsx, 26, 3))
>BigGreeter : Symbol(BigGreeter, Decl(file.tsx, 4, 1))
>ref : Symbol(ref, Decl(file.tsx, 26, 19))
>x : Symbol(x, Decl(file.tsx, 26, 25))
>x : Symbol(x, Decl(file.tsx, 26, 25))
// OK - key is always valid
let g = <BigGreeter key={100} />;
>g : Symbol(g, Decl(file.tsx, 29, 3))
>BigGreeter : Symbol(BigGreeter, Decl(file.tsx, 4, 1))
>key : Symbol(key, Decl(file.tsx, 29, 19))
// OK - contextually typed intrinsic ref callback parameter
let h = <div ref={x => x.innerText} />;
>h : Symbol(h, Decl(file.tsx, 32, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2400, 45))
>ref : Symbol(ref, Decl(file.tsx, 32, 12))
>x : Symbol(x, Decl(file.tsx, 32, 18))
>x.innerText : Symbol(HTMLElement.innerText, Decl(lib.d.ts, --, --))
>x : Symbol(x, Decl(file.tsx, 32, 18))
>innerText : Symbol(HTMLElement.innerText, Decl(lib.d.ts, --, --))
// Error - property not on ontextually typed intrinsic ref callback parameter
let i = <div ref={x => x.propertyNotOnHtmlDivElement} />;
>i : Symbol(i, Decl(file.tsx, 34, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2400, 45))
>ref : Symbol(ref, Decl(file.tsx, 34, 12))
>x : Symbol(x, Decl(file.tsx, 34, 18))
>x : Symbol(x, Decl(file.tsx, 34, 18))
|
