|
| 1 | +declare module React { |
| 2 | + |
| 3 | + interface ComponentClass<P> { |
| 4 | + new(props: any): Component<any, any>; |
| 5 | + prototype: { props: P }; |
| 6 | + } |
| 7 | + |
| 8 | + interface ReactCompositeElement<P extends ReactAttributes> { |
| 9 | + type: ComponentClass<P>; |
| 10 | + props?: P; |
| 11 | + key?: number | string; |
| 12 | + ref?: string; |
| 13 | + } |
| 14 | + |
| 15 | + interface ReactHtmlElement { |
| 16 | + type: string; |
| 17 | + props?: ReactAttributes; |
| 18 | + key?: number | string; |
| 19 | + ref?: string; |
| 20 | + } |
| 21 | + |
| 22 | + type ReactElement = ReactCompositeElement<any> | ReactHtmlElement; |
| 23 | + |
| 24 | + interface ReactElementArray extends Array<string | ReactElement | ReactElementArray> { |
| 25 | + |
| 26 | + } |
| 27 | + |
| 28 | + class Component<P extends ReactAttributes, S> { |
| 29 | + constructor(props: P, childen?: any[]); |
| 30 | + |
| 31 | + props: P; |
| 32 | + state: S; |
| 33 | + |
| 34 | + setState(state: S, callback?: () => void): void |
| 35 | + render(): ReactElement; |
| 36 | + } |
| 37 | + |
| 38 | + interface ReactAttributes { |
| 39 | + children?: ReactElementArray; |
| 40 | + key?: number | string; |
| 41 | + ref?: string; |
| 42 | + |
| 43 | + // Event Attributes |
| 44 | + |
| 45 | + dangerouslySetInnerHTML?: { |
| 46 | + __html: string; |
| 47 | + }; |
| 48 | + } |
| 49 | + |
| 50 | + interface HTMLAttributes extends ReactAttributes { |
| 51 | + accept?: string; |
| 52 | + acceptCharset?: string; |
| 53 | + accessKey?: string; |
| 54 | + action?: string; |
| 55 | + allowFullScreen?: boolean; |
| 56 | + allowTransparency?: boolean; |
| 57 | + alt?: string; |
| 58 | + async?: boolean; |
| 59 | + autoComplete?: boolean; |
| 60 | + autoFocus?: boolean; |
| 61 | + autoPlay?: boolean; |
| 62 | + cellPadding?: number | string; |
| 63 | + cellSpacing?: number | string; |
| 64 | + charSet?: string; |
| 65 | + checked?: boolean; |
| 66 | + classID?: string; |
| 67 | + className?: string; |
| 68 | + cols?: number; |
| 69 | + colSpan?: number; |
| 70 | + content?: string; |
| 71 | + contentEditable?: boolean; |
| 72 | + contextMenu?: string; |
| 73 | + controls?: any; |
| 74 | + coords?: string; |
| 75 | + crossOrigin?: string; |
| 76 | + data?: string; |
| 77 | + dateTime?: string; |
| 78 | + defer?: boolean; |
| 79 | + dir?: string; |
| 80 | + disabled?: boolean; |
| 81 | + download?: any; |
| 82 | + draggable?: boolean; |
| 83 | + encType?: string; |
| 84 | + form?: string; |
| 85 | + formNoValidate?: boolean; |
| 86 | + frameBorder?: number | string; |
| 87 | + height?: number | string; |
| 88 | + hidden?: boolean; |
| 89 | + href?: string; |
| 90 | + hrefLang?: string; |
| 91 | + htmlFor?: string; |
| 92 | + httpEquiv?: string; |
| 93 | + icon?: string; |
| 94 | + id?: string; |
| 95 | + label?: string; |
| 96 | + lang?: string; |
| 97 | + list?: string; |
| 98 | + loop?: boolean; |
| 99 | + manifest?: string; |
| 100 | + max?: number | string; |
| 101 | + maxLength?: number; |
| 102 | + media?: string; |
| 103 | + mediaGroup?: string; |
| 104 | + method?: string; |
| 105 | + min?: number | string; |
| 106 | + multiple?: boolean; |
| 107 | + muted?: boolean; |
| 108 | + name?: string; |
| 109 | + noValidate?: boolean; |
| 110 | + open?: boolean; |
| 111 | + pattern?: string; |
| 112 | + placeholder?: string; |
| 113 | + poster?: string; |
| 114 | + preload?: string; |
| 115 | + radioGroup?: string; |
| 116 | + readOnly?: boolean; |
| 117 | + rel?: string; |
| 118 | + required?: boolean; |
| 119 | + role?: string; |
| 120 | + rows?: number; |
| 121 | + rowSpan?: number; |
| 122 | + sandbox?: string; |
| 123 | + scope?: string; |
| 124 | + scrollLeft?: number; |
| 125 | + scrolling?: string; |
| 126 | + scrollTop?: number; |
| 127 | + seamless?: boolean; |
| 128 | + selected?: boolean; |
| 129 | + shape?: string; |
| 130 | + size?: number; |
| 131 | + sizes?: string; |
| 132 | + span?: number; |
| 133 | + spellCheck?: boolean; |
| 134 | + src?: string; |
| 135 | + srcDoc?: string; |
| 136 | + srcSet?: string; |
| 137 | + start?: number; |
| 138 | + step?: number | string; |
| 139 | + tabIndex?: number; |
| 140 | + target?: string; |
| 141 | + title?: string; |
| 142 | + type?: string; |
| 143 | + useMap?: string; |
| 144 | + value?: string; |
| 145 | + width?: number | string; |
| 146 | + wmode?: string; |
| 147 | + |
| 148 | + // Non-standard Attributes |
| 149 | + autoCapitalize?: boolean; |
| 150 | + autoCorrect?: boolean; |
| 151 | + property?: string; |
| 152 | + itemProp?: string; |
| 153 | + itemScope?: boolean; |
| 154 | + itemType?: string; |
| 155 | + } |
| 156 | + |
| 157 | + function createElement(type: string, props?: HTMLAttributes, ...rest: any[]): ReactHtmlElement; |
| 158 | + function createElement<P>(type: ComponentClass<P>, props?: P, ...rest: any[]): ReactCompositeElement<P>; |
| 159 | +} |
| 160 | + |
| 161 | +class TodoList extends React.Component<{ items: string[] },{}> { |
| 162 | + render(): React.ReactElement { |
| 163 | + return <ul>{this.props.items.map(itemText => <li>{itemText}</li>)}</ul>; |
| 164 | + } |
| 165 | +} |
| 166 | + |
| 167 | +class TodoApp extends React.Component<{},{items?: string[]; text?: string}> { |
| 168 | + state = {items: [], text: ''}; |
| 169 | + |
| 170 | + onChange = (e: any) => { |
| 171 | + this.setState({ |
| 172 | + text: <string>e.target.value |
| 173 | + }); |
| 174 | + } |
| 175 | + |
| 176 | + handleSubmit = (e: any) => { |
| 177 | + e.preventDefault(); |
| 178 | + var nextItems = this.state.items.concat([this.state.text]); |
| 179 | + var nextText = ''; |
| 180 | + this.setState({items: nextItems, text: nextText}); |
| 181 | + } |
| 182 | + |
| 183 | + render(): React.ReactElement { |
| 184 | + return ( |
| 185 | + <div> |
| 186 | + <h3>TODO</h3> |
| 187 | + <TodoList items={this.state.items} /> |
| 188 | + <form onSubmit={this.handleSubmit}> |
| 189 | + <input onChange={this.onChange} value={this.state.text} /> |
| 190 | + <button>{'Add #' + (this.state.items.length + 1)}</button> |
| 191 | + </form> |
| 192 | + </div> |
| 193 | + ); |
| 194 | + } |
| 195 | +} |
0 commit comments