mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-19 00:26:34 +08:00
Added tslint.json for react.
This commit is contained in:
Dovydas Navickas
482
types/react/index.d.ts
vendored
482
types/react/index.d.ts
vendored
File diff suppressed because it is too large
Load Diff
@@ -139,13 +139,13 @@ interface SCProps {
|
||||
|
||||
function StatelessComponent(props: SCProps) {
|
||||
return props.foo ? React.DOM.div(null, props.foo) : null;
|
||||
};
|
||||
}
|
||||
namespace StatelessComponent {
|
||||
export var displayName = "StatelessComponent";
|
||||
export var defaultProps = { foo: 42 };
|
||||
export const displayName = "StatelessComponent";
|
||||
export const defaultProps = { foo: 42 };
|
||||
}
|
||||
|
||||
var StatelessComponent2: React.SFC<SCProps> =
|
||||
const StatelessComponent2: React.SFC<SCProps> =
|
||||
// props is contextually typed
|
||||
props => React.DOM.div(null, props.foo);
|
||||
StatelessComponent2.displayName = "StatelessComponent2";
|
||||
@@ -153,138 +153,125 @@ StatelessComponent2.defaultProps = {
|
||||
foo: 42
|
||||
};
|
||||
|
||||
var StatelessComponent3: React.SFC<SCProps> =
|
||||
const StatelessComponent3: React.SFC<SCProps> =
|
||||
// allows usage of props.children
|
||||
// allows null return
|
||||
props => props.foo ? React.DOM.div(null, props.foo, props.children) : null;
|
||||
|
||||
// React.createFactory
|
||||
var factory: React.CFactory<Props, ModernComponent> =
|
||||
const factory: React.CFactory<Props, ModernComponent> =
|
||||
React.createFactory(ModernComponent);
|
||||
var factoryElement: React.CElement<Props, ModernComponent> =
|
||||
const factoryElement: React.CElement<Props, ModernComponent> =
|
||||
factory(props);
|
||||
|
||||
var statelessFactory: React.SFCFactory<SCProps> =
|
||||
const statelessFactory: React.SFCFactory<SCProps> =
|
||||
React.createFactory(StatelessComponent);
|
||||
var statelessFactoryElement: React.SFCElement<SCProps> =
|
||||
const statelessFactoryElement: React.SFCElement<SCProps> =
|
||||
statelessFactory(props);
|
||||
|
||||
var classicFactory: React.ClassicFactory<Props> =
|
||||
const classicFactory: React.ClassicFactory<Props> =
|
||||
React.createFactory(ClassicComponent);
|
||||
var classicFactoryElement: React.ClassicElement<Props> =
|
||||
const classicFactoryElement: React.ClassicElement<Props> =
|
||||
classicFactory(props);
|
||||
|
||||
var domFactory: React.DOMFactory<React.DOMAttributes<{}>, Element> =
|
||||
React.createFactory("foo");
|
||||
var domFactoryElement: React.DOMElement<React.DOMAttributes<{}>, Element> =
|
||||
const domFactory: React.DOMFactory<React.DOMAttributes<{}>, Element> =
|
||||
React.createFactory("div");
|
||||
const domFactoryElement: React.DOMElement<React.DOMAttributes<{}>, Element> =
|
||||
domFactory();
|
||||
|
||||
// React.createElement
|
||||
var element: React.CElement<Props, ModernComponent> =
|
||||
React.createElement(ModernComponent, props);
|
||||
var elementNoState: React.CElement<Props, ModernComponentNoState> =
|
||||
React.createElement(ModernComponentNoState, props);
|
||||
var statelessElement: React.SFCElement<SCProps> =
|
||||
React.createElement(StatelessComponent, props);
|
||||
var classicElement: React.ClassicElement<Props> =
|
||||
React.createElement(ClassicComponent, props);
|
||||
var domElement: React.ReactHTMLElement<HTMLDivElement> =
|
||||
React.createElement("div");
|
||||
var htmlElement = React.createElement("input", { type: "text" });
|
||||
var svgElement = React.createElement("svg", { accentHeight: 12 });
|
||||
const element: React.CElement<Props, ModernComponent> = React.createElement(ModernComponent, props);
|
||||
const elementNoState: React.CElement<Props, ModernComponentNoState> = React.createElement(ModernComponentNoState, props);
|
||||
const statelessElement: React.SFCElement<SCProps> = React.createElement(StatelessComponent, props);
|
||||
const classicElement: React.ClassicElement<Props> = React.createElement(ClassicComponent, props);
|
||||
const domElement: React.ReactHTMLElement<HTMLDivElement> = React.createElement("div");
|
||||
const htmlElement = React.createElement("input", { type: "text" });
|
||||
const svgElement = React.createElement("svg", { accentHeight: 12 });
|
||||
|
||||
// React.cloneElement
|
||||
var clonedElement: React.CElement<Props, ModernComponent> =
|
||||
React.cloneElement(element, { foo: 43 });
|
||||
const clonedElement: React.CElement<Props, ModernComponent> = React.cloneElement(element, { foo: 43 });
|
||||
|
||||
React.cloneElement(element, {});
|
||||
React.cloneElement(element, {}, null);
|
||||
|
||||
var clonedElement2: React.CElement<Props, ModernComponent> =
|
||||
const clonedElement2: React.CElement<Props, ModernComponent> =
|
||||
// known problem: cloning with key or ref requires cast
|
||||
React.cloneElement(element, <React.ClassAttributes<ModernComponent>>{
|
||||
React.cloneElement(element, <React.ClassAttributes<ModernComponent>> {
|
||||
ref: c => c && c.reset()
|
||||
});
|
||||
var clonedElement3: React.CElement<Props, ModernComponent> =
|
||||
React.cloneElement(element, <{ foo: number } & React.Attributes>{
|
||||
const clonedElement3: React.CElement<Props, ModernComponent> =
|
||||
React.cloneElement(element, <{ foo: number } & React.Attributes> {
|
||||
key: "8eac7",
|
||||
foo: 55
|
||||
});
|
||||
var clonedStatelessElement: React.SFCElement<SCProps> =
|
||||
const clonedStatelessElement: React.SFCElement<SCProps> =
|
||||
// known problem: cloning with optional props don't work properly
|
||||
// workaround: cast to actual props type
|
||||
React.cloneElement(statelessElement, <SCProps>{ foo: 44 });
|
||||
var clonedClassicElement: React.ClassicElement<Props> =
|
||||
React.cloneElement(statelessElement, <SCProps> { foo: 44 });
|
||||
const clonedClassicElement: React.ClassicElement<Props> =
|
||||
React.cloneElement(classicElement, props);
|
||||
var clonedDOMElement: React.ReactHTMLElement<HTMLDivElement> =
|
||||
const clonedDOMElement: React.ReactHTMLElement<HTMLDivElement> =
|
||||
React.cloneElement(domElement, {
|
||||
className: "clonedElement"
|
||||
});
|
||||
|
||||
// React.render
|
||||
var component: ModernComponent =
|
||||
ReactDOM.render(element, container);
|
||||
var componentNullContainer: ModernComponent =
|
||||
ReactDOM.render(element, null);
|
||||
const component: ModernComponent = ReactDOM.render(element, container);
|
||||
const componentNullContainer: ModernComponent = ReactDOM.render(element, null);
|
||||
|
||||
var componentElementOrNull: ModernComponent =
|
||||
ReactDOM.render(element, document.getElementById("anelement"));
|
||||
var componentNoState: ModernComponentNoState =
|
||||
ReactDOM.render(elementNoState, container);
|
||||
var componentNoStateElementOrNull: ModernComponentNoState =
|
||||
ReactDOM.render(elementNoState, document.getElementById("anelement"));
|
||||
var classicComponent: React.ClassicComponent<Props> =
|
||||
ReactDOM.render(classicElement, container);
|
||||
var domComponent: Element =
|
||||
ReactDOM.render(domElement, container);
|
||||
const componentElementOrNull: ModernComponent = ReactDOM.render(element, document.getElementById("anelement"));
|
||||
const componentNoState: ModernComponentNoState = ReactDOM.render(elementNoState, container);
|
||||
const componentNoStateElementOrNull: ModernComponentNoState = ReactDOM.render(elementNoState, document.getElementById("anelement"));
|
||||
const classicComponent: React.ClassicComponent<Props> = ReactDOM.render(classicElement, container);
|
||||
const domComponent: Element = ReactDOM.render(domElement, container);
|
||||
|
||||
// Other Top-Level API
|
||||
var unmounted: boolean = ReactDOM.unmountComponentAtNode(container);
|
||||
var str: string = ReactDOMServer.renderToString(element);
|
||||
var markup: string = ReactDOMServer.renderToStaticMarkup(element);
|
||||
var notValid: boolean = React.isValidElement(props); // false
|
||||
var isValid = React.isValidElement(element); // true
|
||||
var domNode: Element = ReactDOM.findDOMNode(component);
|
||||
const unmounted: boolean = ReactDOM.unmountComponentAtNode(container);
|
||||
const str: string = ReactDOMServer.renderToString(element);
|
||||
const markup: string = ReactDOMServer.renderToStaticMarkup(element);
|
||||
const notValid: boolean = React.isValidElement(props); // false
|
||||
const isValid = React.isValidElement(element); // true
|
||||
let domNode: Element = ReactDOM.findDOMNode(component);
|
||||
domNode = ReactDOM.findDOMNode(domNode);
|
||||
|
||||
//
|
||||
// React Elements
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var type: React.ComponentClass<Props> = element.type;
|
||||
var elementProps: Props = element.props;
|
||||
var key = element.key;
|
||||
const type: React.ComponentClass<Props> = element.type;
|
||||
const elementProps: Props = element.props;
|
||||
const key = element.key;
|
||||
|
||||
//
|
||||
// React Components
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var displayName: string | undefined = ClassicComponent.displayName;
|
||||
var defaultProps: Props = ClassicComponent.getDefaultProps ? ClassicComponent.getDefaultProps() : <Props>{};
|
||||
var propTypes: React.ValidationMap<Props> | undefined = ClassicComponent.propTypes;
|
||||
const displayName: string | undefined = ClassicComponent.displayName;
|
||||
const defaultProps: Props = ClassicComponent.getDefaultProps ? ClassicComponent.getDefaultProps() : <Props> {};
|
||||
const propTypes: React.ValidationMap<Props> | undefined = ClassicComponent.propTypes;
|
||||
|
||||
//
|
||||
// Component API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
// modern
|
||||
var componentState: State = component.state;
|
||||
const componentState: State = component.state;
|
||||
component.setState({ inputValue: "!!!" });
|
||||
component.forceUpdate();
|
||||
|
||||
// classic
|
||||
var isMounted: boolean = classicComponent.isMounted();
|
||||
const isMounted: boolean = classicComponent.isMounted();
|
||||
classicComponent.replaceState({ inputValue: "???", seconds: 60 });
|
||||
|
||||
var myComponent = <MyComponent>component;
|
||||
const myComponent = <MyComponent>component;
|
||||
myComponent.reset();
|
||||
|
||||
//
|
||||
// Refs
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
interface RCProps {
|
||||
}
|
||||
// tslint:disable:no-empty-interface
|
||||
interface RCProps { }
|
||||
|
||||
class RefComponent extends React.Component<RCProps> {
|
||||
static create = React.createFactory(RefComponent);
|
||||
@@ -292,33 +279,33 @@ class RefComponent extends React.Component<RCProps> {
|
||||
}
|
||||
}
|
||||
|
||||
var componentRef: RefComponent | null = new RefComponent();
|
||||
let componentRef: RefComponent | null = new RefComponent();
|
||||
RefComponent.create({ ref: "componentRef" });
|
||||
// type of c should be inferred
|
||||
RefComponent.create({ ref: c => componentRef = c });
|
||||
componentRef.refMethod();
|
||||
|
||||
var domNodeRef: Element | null;
|
||||
let domNodeRef: Element | null;
|
||||
React.DOM.div({ ref: "domRef" });
|
||||
// type of node should be inferred
|
||||
React.DOM.div({ ref: node => domNodeRef = node });
|
||||
|
||||
var inputNodeRef: HTMLInputElement | null;
|
||||
let inputNodeRef: HTMLInputElement | null;
|
||||
React.DOM.input({ ref: node => inputNodeRef = <HTMLInputElement>node });
|
||||
|
||||
//
|
||||
// Attributes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var children: any[] = ["Hello world", [null], React.DOM.span(null)];
|
||||
var divStyle: React.CSSProperties = { // CSSProperties
|
||||
const children: any[] = ["Hello world", [null], React.DOM.span(null)];
|
||||
const divStyle: React.CSSProperties = { // CSSProperties
|
||||
flex: "1 1 main-size",
|
||||
backgroundImage: "url('hello.png')"
|
||||
};
|
||||
var htmlAttr: React.HTMLProps<HTMLElement> = {
|
||||
const htmlAttr: React.HTMLProps<HTMLElement> = {
|
||||
key: 36,
|
||||
ref: "htmlComponent",
|
||||
children: children,
|
||||
children,
|
||||
className: "test-attr",
|
||||
style: divStyle,
|
||||
slot: "HTMLComponent",
|
||||
@@ -371,12 +358,11 @@ React.DOM.svg({
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
//
|
||||
// React.PropTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var PropTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
const PropTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
propTypes: {
|
||||
optionalArray: React.PropTypes.array,
|
||||
optionalBool: React.PropTypes.bool,
|
||||
@@ -401,7 +387,7 @@ var PropTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
}),
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
customProp: function (props: any, propName: string, componentName: string): Error | null {
|
||||
customProp(props: any, propName: string, componentName: string): Error | null {
|
||||
if (!/matchme/.test(props[propName])) {
|
||||
return new Error("Validation failed!");
|
||||
}
|
||||
@@ -428,7 +414,7 @@ var PropTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
// ContextTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ContextTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
const ContextTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
contextTypes: {
|
||||
optionalArray: React.PropTypes.array,
|
||||
optionalBool: React.PropTypes.bool,
|
||||
@@ -453,7 +439,7 @@ var ContextTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
}),
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
customProp: function (props: any, propName: string, componentName: string): Error | null {
|
||||
customProp(props: any, propName: string, componentName: string): Error | null {
|
||||
if (!/matchme/.test(props[propName])) {
|
||||
return new Error("Validation failed!");
|
||||
}
|
||||
@@ -469,13 +455,13 @@ var ContextTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
// React.Children
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var mappedChildrenArray: number[] =
|
||||
React.Children.map<number>(children, (child) => { return 42; });
|
||||
const mappedChildrenArray: number[] =
|
||||
React.Children.map<number>(children, (child) => 42);
|
||||
React.Children.forEach(children, (child) => { });
|
||||
var nChildren: number = React.Children.count(children);
|
||||
var onlyChild: React.ReactElement<any> = React.Children.only(React.DOM.div()); // ok
|
||||
const nChildren: number = React.Children.count(children);
|
||||
let onlyChild: React.ReactElement<any> = React.Children.only(React.DOM.div()); // ok
|
||||
onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); // error
|
||||
var childrenToArray: React.ReactChild[] = React.Children.toArray(children);
|
||||
const childrenToArray: React.ReactChild[] = React.Children.toArray(children);
|
||||
|
||||
//
|
||||
// Example from http://facebook.github.io/react/
|
||||
@@ -550,13 +536,13 @@ React.createFactory(CSSTransitionGroup)({
|
||||
// --------------------------------------------------------------------------
|
||||
React.createClass({
|
||||
mixins: [LinkedStateMixin],
|
||||
getInitialState: function () {
|
||||
getInitialState() {
|
||||
return {
|
||||
isChecked: false,
|
||||
message: "hello!"
|
||||
};
|
||||
},
|
||||
render: function () {
|
||||
render() {
|
||||
return React.DOM.div(null,
|
||||
React.DOM.input({
|
||||
type: "checkbox",
|
||||
@@ -575,7 +561,7 @@ React.createClass({
|
||||
// --------------------------------------------------------------------------
|
||||
Perf.start();
|
||||
Perf.stop();
|
||||
var measurements = Perf.getLastMeasurements();
|
||||
const measurements = Perf.getLastMeasurements();
|
||||
Perf.printInclusive(measurements);
|
||||
Perf.printExclusive(measurements);
|
||||
Perf.printWasted(measurements);
|
||||
@@ -603,37 +589,37 @@ Perf.printDOM();
|
||||
// --------------------------------------------------------------------------
|
||||
React.createClass({
|
||||
mixins: [PureRenderMixin],
|
||||
render: function () { return React.DOM.div(null); }
|
||||
render() { return React.DOM.div(null); }
|
||||
});
|
||||
|
||||
//
|
||||
// TestUtils addon
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var inst: ModernComponent = TestUtils.renderIntoDocument<ModernComponent>(element);
|
||||
var node: Element = TestUtils.renderIntoDocument(React.DOM.div());
|
||||
const inst: ModernComponent = TestUtils.renderIntoDocument<ModernComponent>(element);
|
||||
const node: Element = TestUtils.renderIntoDocument(React.DOM.div());
|
||||
|
||||
TestUtils.Simulate.click(node);
|
||||
TestUtils.Simulate.change(node);
|
||||
TestUtils.Simulate.keyDown(node, { key: "Enter", cancelable: false });
|
||||
|
||||
var renderer: TestUtils.ShallowRenderer = TestUtils.createRenderer();
|
||||
const renderer: TestUtils.ShallowRenderer = TestUtils.createRenderer();
|
||||
renderer.render(React.createElement(Timer));
|
||||
var output: React.ReactElement<React.Props<Timer>> =
|
||||
const output: React.ReactElement<React.Props<Timer>> =
|
||||
renderer.getRenderOutput();
|
||||
|
||||
var foundComponent: ModernComponent = TestUtils.findRenderedComponentWithType(
|
||||
const foundComponent: ModernComponent = TestUtils.findRenderedComponentWithType(
|
||||
inst, ModernComponent);
|
||||
var foundComponents: ModernComponent[] = TestUtils.scryRenderedComponentsWithType(
|
||||
const foundComponents: ModernComponent[] = TestUtils.scryRenderedComponentsWithType(
|
||||
inst, ModernComponent);
|
||||
|
||||
// ReactTestUtils custom type guards
|
||||
|
||||
var emptyElement1: React.ReactElement<{}> = React.createElement(ModernComponent);
|
||||
const emptyElement1: React.ReactElement<{}> = React.createElement(ModernComponent);
|
||||
if (TestUtils.isElementOfType(emptyElement1, StatelessComponent)) {
|
||||
emptyElement1.props.foo;
|
||||
}
|
||||
var emptyElement2: React.ReactElement<{}> = React.createElement(StatelessComponent);
|
||||
const emptyElement2: React.ReactElement<{}> = React.createElement(StatelessComponent);
|
||||
if (TestUtils.isElementOfType(emptyElement2, StatelessComponent)) {
|
||||
emptyElement2.props.foo;
|
||||
}
|
||||
@@ -662,7 +648,11 @@ React.createFactory(TransitionGroup)({ component: "div" });
|
||||
// => [1, 2, {a: [12, 13, 14, 15]}]
|
||||
|
||||
let obj = { a: 5, b: 3 };
|
||||
let newObj = update(obj, { b: { $apply: function (x) { return x * 2; } } });
|
||||
let newObj = update(obj, {
|
||||
b: {
|
||||
$apply: (x) => x * 2
|
||||
}
|
||||
});
|
||||
// => {a: 5, b: 6}
|
||||
let newObj2 = update(obj, { b: { $set: obj.b * 2 } });
|
||||
|
||||
@@ -674,16 +664,16 @@ React.createFactory(TransitionGroup)({ component: "div" });
|
||||
// The SyntheticEvent.target.value should be accessible for onChange
|
||||
// --------------------------------------------------------------------------
|
||||
class SyntheticEventTargetValue extends React.Component<{}, { value: string }> {
|
||||
constructor(props:{}) {
|
||||
super(props);
|
||||
this.state = { value: 'a' };
|
||||
}
|
||||
render() {
|
||||
return React.DOM.textarea({
|
||||
value: this.state.value,
|
||||
onChange: e => this.setState({value: e.target.value})
|
||||
});
|
||||
}
|
||||
constructor(props: {}) {
|
||||
super(props);
|
||||
this.state = { value: 'a' };
|
||||
}
|
||||
render() {
|
||||
return React.DOM.textarea({
|
||||
value: this.state.value,
|
||||
onChange: e => this.setState({ value: e.target.value })
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
React.DOM.input({
|
||||
@@ -698,8 +688,8 @@ React.DOM.input({
|
||||
|
||||
type InputChangeEvent = React.ChangeEvent<HTMLInputElement>;
|
||||
type InputFormEvent = React.FormEvent<HTMLInputElement>;
|
||||
const changeEvent:InputChangeEvent = undefined as any;
|
||||
const formEvent:InputFormEvent = changeEvent;
|
||||
const changeEvent: InputChangeEvent = undefined as any;
|
||||
const formEvent: InputFormEvent = changeEvent;
|
||||
|
||||
// defaultProps should be optional of props
|
||||
{
|
||||
|
||||
1
types/react/tslint.json
Normal file
1
types/react/tslint.json
Normal file
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user