vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-01-30 05:27:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

react: Add target type to events

Browse Source 
this allows getting the actual html element type from events.

Example:

```ts
render() {
    return <input onChange={e => console.log(e.target.value)}/>
}
```

Previously you would have to cast the target manually:
```ts
render() {
    return <input onChange={e => console.log((e.target as
    HTMLInputElement).value)}/>
}
```
This commit is contained in:
phiresky 2016-07-03 20:13:58 +02:00
parent ed0208ef72
commit 084926e23a
No known key found for this signature in database
GPG Key ID: 96FBF1D31E1991C9
3 changed files with 108 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react-dom/index.d.ts vendored
View File

@ -16,7 +16,7 @@ declare namespace ReactDOM {
function findDOMNode<E extends Element>(instance: ReactInstance): E;
function findDOMNode(instance: ReactInstance): Element;
function render<P extends DOMAttributes, T extends Element>(
function render<P extends DOMAttributes<T>, T extends Element>(
element: DOMElement<P, T>,
container: Element,
callback?: (element: T) => any): T;
@ -41,7 +41,7 @@ declare namespace ReactDOM {
function unstable_batchedUpdates<A>(callback: (a: A) => any, a: A): void;
function unstable_batchedUpdates(callback: () => any): void;
function unstable_renderSubtreeIntoContainer<P extends DOMAttributes, T extends Element>(
function unstable_renderSubtreeIntoContainer<P extends DOMAttributes<T>, T extends Element>(
parentComponent: Component<any, any>,
element: DOMElement<P, T>,
container: Element,

204
react/index.d.ts vendored
View File

@ -43,15 +43,15 @@ declare namespace React {
type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>;
interface DOMElement<P extends DOMAttributes, T extends Element> extends ReactElement<P> {
interface DOMElement<P extends DOMAttributes<T>, T extends Element> extends ReactElement<P> {
type: string;
ref: Ref<T>;
}
interface ReactHTMLElement<T extends HTMLElement> extends DOMElement<HTMLAttributes, T> {
interface ReactHTMLElement<T extends HTMLElement> extends DOMElement<HTMLAttributes<T>, T> {
}
interface ReactSVGElement extends DOMElement<SVGAttributes, SVGElement> {
interface ReactSVGElement extends DOMElement<SVGAttributes<SVGElement>, SVGElement> {
}
//
@ -73,14 +73,14 @@ declare namespace React {
type CFactory<P, T extends Component<P, ComponentState>> = ComponentFactory<P, T>;
type ClassicFactory<P> = CFactory<P, ClassicComponent<P, ComponentState>>;
interface DOMFactory<P extends DOMAttributes, T extends Element> {
interface DOMFactory<P extends DOMAttributes<T>, T extends Element> {
(props?: P & ClassAttributes<T>, ...children: ReactNode[]): DOMElement<P, T>;
}
interface HTMLFactory<T extends HTMLElement> extends DOMFactory<HTMLAttributes, T> {
interface HTMLFactory<T extends HTMLElement> extends DOMFactory<HTMLAttributes<T>, T> {
}
interface SVGFactory extends DOMFactory<SVGAttributes, SVGElement> {
interface SVGFactory extends DOMFactory<SVGAttributes<SVGElement>, SVGElement> {
}
//
@ -101,7 +101,7 @@ declare namespace React {
function createClass<P, S>(spec: ComponentSpec<P, S>): ClassicComponentClass<P>;
function createFactory<P extends DOMAttributes, T extends Element>(
function createFactory<P extends DOMAttributes<T>, T extends Element>(
type: string): DOMFactory<P, T>;
function createFactory<P>(type: SFC<P>): SFCFactory<P>;
function createFactory<P>(
@ -110,7 +110,7 @@ declare namespace React {
type: ClassType<P, T, C>): CFactory<P, T>;
function createFactory<P>(type: ComponentClass<P> | SFC<P>): Factory<P>;
function createElement<P extends DOMAttributes, T extends Element>(
function createElement<P extends DOMAttributes<T>, T extends Element>(
type: string,
props?: P & ClassAttributes<T>,
...children: ReactNode[]): DOMElement<P, T>;
@ -131,7 +131,7 @@ declare namespace React {
props?: P & Attributes,
...children: ReactNode[]): ReactElement<P>;
function cloneElement<P extends DOMAttributes, T extends Element>(
function cloneElement<P extends DOMAttributes<T>, T extends Element>(
element: DOMElement<P, T>,
props?: P & ClassAttributes<T>,
...children: ReactNode[]): DOMElement<P, T>;
@ -267,41 +267,41 @@ declare namespace React {
// Event System
// ----------------------------------------------------------------------
interface SyntheticEvent {
interface SyntheticEvent<T> {
bubbles: boolean;
cancelable: boolean;
currentTarget: EventTarget;
cancelable: boolean;
defaultPrevented: boolean;
eventPhase: number;
isTrusted: boolean;
nativeEvent: Event;
preventDefault(): void;
stopPropagation(): void;
target: EventTarget;
target: EventTarget & T;
timeStamp: Date;
type: string;
}
interface ClipboardEvent extends SyntheticEvent {
interface ClipboardEvent<T> extends SyntheticEvent<T> {
clipboardData: DataTransfer;
}
interface CompositionEvent extends SyntheticEvent {
interface CompositionEvent<T> extends SyntheticEvent<T> {
data: string;
}
interface DragEvent extends SyntheticEvent {
interface DragEvent<T> extends SyntheticEvent<T> {
dataTransfer: DataTransfer;
}
interface FocusEvent extends SyntheticEvent {
interface FocusEvent<T> extends SyntheticEvent<T> {
relatedTarget: EventTarget;
}
interface FormEvent extends SyntheticEvent {
interface FormEvent<T> extends SyntheticEvent<T> {
}
interface KeyboardEvent extends SyntheticEvent {
interface KeyboardEvent<T> extends SyntheticEvent<T> {
altKey: boolean;
charCode: number;
ctrlKey: boolean;
@ -316,7 +316,7 @@ declare namespace React {
which: number;
}
interface MouseEvent extends SyntheticEvent {
interface MouseEvent<T> extends SyntheticEvent<T> {
altKey: boolean;
button: number;
buttons: number;
@ -333,7 +333,7 @@ declare namespace React {
shiftKey: boolean;
}
interface TouchEvent extends SyntheticEvent {
interface TouchEvent<T> extends SyntheticEvent<T> {
altKey: boolean;
changedTouches: TouchList;
ctrlKey: boolean;
@ -344,12 +344,12 @@ declare namespace React {
touches: TouchList;
}
interface UIEvent extends SyntheticEvent {
interface UIEvent<T> extends SyntheticEvent<T> {
detail: number;
view: AbstractView;
}
interface WheelEvent extends SyntheticEvent {
interface WheelEvent<T> extends SyntheticEvent<T> {
deltaMode: number;
deltaX: number;
deltaY: number;
@ -360,22 +360,22 @@ declare namespace React {
// Event Handler Types
// ----------------------------------------------------------------------
interface EventHandler<E extends SyntheticEvent> {
interface EventHandler<E extends SyntheticEvent<any>> {
(event: E): void;
}
type ReactEventHandler = EventHandler<SyntheticEvent>;
type ReactEventHandler<T> = EventHandler<SyntheticEvent<T>>;
type ClipboardEventHandler = EventHandler<ClipboardEvent>;
type CompositionEventHandler = EventHandler<CompositionEvent>;
type DragEventHandler = EventHandler<DragEvent>;
type FocusEventHandler = EventHandler<FocusEvent>;
type FormEventHandler = EventHandler<FormEvent>;
type KeyboardEventHandler = EventHandler<KeyboardEvent>;
type MouseEventHandler = EventHandler<MouseEvent>;
type TouchEventHandler = EventHandler<TouchEvent>;
type UIEventHandler = EventHandler<UIEvent>;
type WheelEventHandler = EventHandler<WheelEvent>;
type ClipboardEventHandler<T> = EventHandler<ClipboardEvent<T>>;
type CompositionEventHandler<T> = EventHandler<CompositionEvent<T>>;
type DragEventHandler<T> = EventHandler<DragEvent<T>>;
type FocusEventHandler<T> = EventHandler<FocusEvent<T>>;
type FormEventHandler<T> = EventHandler<FormEvent<T>>;
type KeyboardEventHandler<T> = EventHandler<KeyboardEvent<T>>;
type MouseEventHandler<T> = EventHandler<MouseEvent<T>>;
type TouchEventHandler<T> = EventHandler<TouchEvent<T>>;
type UIEventHandler<T> = EventHandler<UIEvent<T>>;
type WheelEventHandler<T> = EventHandler<WheelEvent<T>>;
//
// Props / DOM Attributes
@ -401,104 +401,104 @@ declare namespace React {
ref?: Ref<T>;
}
interface HTMLProps<T> extends HTMLAttributes, ClassAttributes<T> {
interface HTMLProps<T> extends HTMLAttributes<T>, ClassAttributes<T> {
}
interface SVGProps extends SVGAttributes, ClassAttributes<SVGElement> {
interface SVGProps extends SVGAttributes<SVGElement>, ClassAttributes<SVGElement> {
}
interface DOMAttributes {
interface DOMAttributes<T> {
children?: ReactNode;
dangerouslySetInnerHTML?: {
__html: string;
};
// Clipboard Events
onCopy?: ClipboardEventHandler;
onCut?: ClipboardEventHandler;
onPaste?: ClipboardEventHandler;
onCopy?: ClipboardEventHandler<T>;
onCut?: ClipboardEventHandler<T>;
onPaste?: ClipboardEventHandler<T>;
// Composition Events
onCompositionEnd?: CompositionEventHandler;
onCompositionStart?: CompositionEventHandler;
onCompositionUpdate?: CompositionEventHandler;
onCompositionEnd?: CompositionEventHandler<T>;
onCompositionStart?: CompositionEventHandler<T>;
onCompositionUpdate?: CompositionEventHandler<T>;
// Focus Events
onFocus?: FocusEventHandler;
onBlur?: FocusEventHandler;
onFocus?: FocusEventHandler<T>;
onBlur?: FocusEventHandler<T>;
// Form Events
onChange?: FormEventHandler;
onInput?: FormEventHandler;
onSubmit?: FormEventHandler;
onChange?: FormEventHandler<T>;
onInput?: FormEventHandler<T>;
onSubmit?: FormEventHandler<T>;
// Image Events
onLoad?: ReactEventHandler;
onError?: ReactEventHandler; // also a Media Event
onLoad?: ReactEventHandler<T>;
onError?: ReactEventHandler<T>; // also a Media Event
// Keyboard Events
onKeyDown?: KeyboardEventHandler;
onKeyPress?: KeyboardEventHandler;
onKeyUp?: KeyboardEventHandler;
onKeyDown?: KeyboardEventHandler<T>;
onKeyPress?: KeyboardEventHandler<T>;
onKeyUp?: KeyboardEventHandler<T>;
// Media Events
onAbort?: ReactEventHandler;
onCanPlay?: ReactEventHandler;
onCanPlayThrough?: ReactEventHandler;
onDurationChange?: ReactEventHandler;
onEmptied?: ReactEventHandler;
onEncrypted?: ReactEventHandler;
onEnded?: ReactEventHandler;
onLoadedData?: ReactEventHandler;
onLoadedMetadata?: ReactEventHandler;
onLoadStart?: ReactEventHandler;
onPause?: ReactEventHandler;
onPlay?: ReactEventHandler;
onPlaying?: ReactEventHandler;
onProgress?: ReactEventHandler;
onRateChange?: ReactEventHandler;
onSeeked?: ReactEventHandler;
onSeeking?: ReactEventHandler;
onStalled?: ReactEventHandler;
onSuspend?: ReactEventHandler;
onTimeUpdate?: ReactEventHandler;
onVolumeChange?: ReactEventHandler;
onWaiting?: ReactEventHandler;
onAbort?: ReactEventHandler<T>;
onCanPlay?: ReactEventHandler<T>;
onCanPlayThrough?: ReactEventHandler<T>;
onDurationChange?: ReactEventHandler<T>;
onEmptied?: ReactEventHandler<T>;
onEncrypted?: ReactEventHandler<T>;
onEnded?: ReactEventHandler<T>;
onLoadedData?: ReactEventHandler<T>;
onLoadedMetadata?: ReactEventHandler<T>;
onLoadStart?: ReactEventHandler<T>;
onPause?: ReactEventHandler<T>;
onPlay?: ReactEventHandler<T>;
onPlaying?: ReactEventHandler<T>;
onProgress?: ReactEventHandler<T>;
onRateChange?: ReactEventHandler<T>;
onSeeked?: ReactEventHandler<T>;
onSeeking?: ReactEventHandler<T>;
onStalled?: ReactEventHandler<T>;
onSuspend?: ReactEventHandler<T>;
onTimeUpdate?: ReactEventHandler<T>;
onVolumeChange?: ReactEventHandler<T>;
onWaiting?: ReactEventHandler<T>;
// MouseEvents
onClick?: MouseEventHandler;
onContextMenu?: MouseEventHandler;
onDoubleClick?: MouseEventHandler;
onDrag?: DragEventHandler;
onDragEnd?: DragEventHandler;
onDragEnter?: DragEventHandler;
onDragExit?: DragEventHandler;
onDragLeave?: DragEventHandler;
onDragOver?: DragEventHandler;
onDragStart?: DragEventHandler;
onDrop?: DragEventHandler;
onMouseDown?: MouseEventHandler;
onMouseEnter?: MouseEventHandler;
onMouseLeave?: MouseEventHandler;
onMouseMove?: MouseEventHandler;
onMouseOut?: MouseEventHandler;
onMouseOver?: MouseEventHandler;
onMouseUp?: MouseEventHandler;
onClick?: MouseEventHandler<T>;
onContextMenu?: MouseEventHandler<T>;
onDoubleClick?: MouseEventHandler<T>;
onDrag?: DragEventHandler<T>;
onDragEnd?: DragEventHandler<T>;
onDragEnter?: DragEventHandler<T>;
onDragExit?: DragEventHandler<T>;
onDragLeave?: DragEventHandler<T>;
onDragOver?: DragEventHandler<T>;
onDragStart?: DragEventHandler<T>;
onDrop?: DragEventHandler<T>;
onMouseDown?: MouseEventHandler<T>;
onMouseEnter?: MouseEventHandler<T>;
onMouseLeave?: MouseEventHandler<T>;
onMouseMove?: MouseEventHandler<T>;
onMouseOut?: MouseEventHandler<T>;
onMouseOver?: MouseEventHandler<T>;
onMouseUp?: MouseEventHandler<T>;
// Selection Events
onSelect?: ReactEventHandler;
onSelect?: ReactEventHandler<T>;
// Touch Events
onTouchCancel?: TouchEventHandler;
onTouchEnd?: TouchEventHandler;
onTouchMove?: TouchEventHandler;
onTouchStart?: TouchEventHandler;
onTouchCancel?: TouchEventHandler<T>;
onTouchEnd?: TouchEventHandler<T>;
onTouchMove?: TouchEventHandler<T>;
onTouchStart?: TouchEventHandler<T>;
// UI Events
onScroll?: UIEventHandler;
onScroll?: UIEventHandler<T>;
// Wheel Events
onWheel?: WheelEventHandler;
onWheel?: WheelEventHandler<T>;
}
// This interface is not complete. Only properties accepting
@ -1886,7 +1886,7 @@ declare namespace React {
[propertyName: string]: any;
}
interface HTMLAttributes extends DOMAttributes {
interface HTMLAttributes<T> extends DOMAttributes<T> {
// React-specific Attributes
defaultChecked?: boolean;
defaultValue?: string | string[];
@ -2042,7 +2042,7 @@ declare namespace React {
[key: string]: any;
}
interface SVGAttributes extends HTMLAttributes {
interface SVGAttributes<T> extends HTMLAttributes<T> {
clipPath?: string;
cx?: number | string;
cy?: number | string;

5
react/react-tests.ts
View File

@ -116,8 +116,11 @@ class ModernComponent extends React.Component<Props, State>
render() {
return React.DOM.div(null,
React.DOM.input({
ref: input => this._input = <HTMLInputElement>input,
ref: input => this._input = input,
value: this.state.inputValue
}),
React.DOM.input({
onChange: event => console.log(event.target.value)
}));
}